Pular para o conteúdo principal
Base de Conhecimento da FocusVision

The nstyles File

  Requires Decipher Cloud

1:  Overview

Use the nstyles file to override question and reporting elements in your project.

The XML Style System is the new and improved way of modifying your project's survey elements. Check out these XML Styles for some examples.

The nstyles file is a file named "nstyles" located in the root of your project's directory (e.g. /selfserve/9d3/proj1234/nstyles). This file can contain "style blocks" that represent the default state of a project component. You may modify any of these styles to fit the needs of your project. Use the nstyles file to:

  • modify the structure of the survey and survey question
  • create a new, dynamic question style
  • add Javascript & CSS to your project
  • update the default style of various Decipher components
  • update the data formatting in the Report (2010)
  • much more...

2:  Style Syntax

The nstyles file is automatically detected by the system and will be applied to your project based on the "style blocks" specified.

What are "style blocks"?

A style block represents a single component of the survey system. A survey project consists of many components, each an individual unit that you can reconfigure. The syntax for any style block is shown below:

*STYLE_BLOCK:
# ...
# STYLE CONFIGURATIONS
# ...

Note the following about the syntax above:

  • *STYLE_BLOCK:
    • Each style block begins with an asterisk * and ends when
      1) a new style block is found or
      2) the end of the file is reached
    • Immediately following the asterisk is the name of the component to override (e.g. STYLE_BLOCK) and a colon :
    • Following the colon is the content that will be read into the system to override the component specified
  • # ...
    • The hash symbol # is an optional code comment

For example, here is a style block containing the default configuration for the "Continue" button deployed is almost every survey:

*button.continue:
# The "Continue >>" Button Code
<input type="submit" name="continue" id="btn_continue" class="btn continue survey-button" value="@(continue) »" onClick="var i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', '1');i.setAttribute('name', '__has_javascript');document.forms.primary.appendChild(i);"/>

The code shown above is the actual code that is added to the survey page when displaying the "Continue" button. As shown below, we can inspect the page to confirm this:

The only difference between the code presented in the style block and the actual code that is displayed on the survey page is the value="@(continue) »" part. The @(continue) is system variable that is automatically replaced with the appropriate translation for whatever is specified for the continue button's text in the survey's lang file. In this case, the survey is in English and the default text for the continue button is "Continue", so that's what we see, "Continue »"!

The example above is just one of many style blocks ready to be modified. We'll go into more detail about each one later, but for now, check out the interactive demo below. Click on the various links in the footer to view the area that each style block targets. When added to the nstyles file, those will be the areas that are overridden.

View the Interactive Demo 

2.1:  Creating a New Style

To create a style, add the style block to your nstyles file and modify it to fit your project's needs.

For example, to update the text for the "Continue" button from the previous example, we can combine a Resource Tag and the nstyles file as shown below.

Somewhere in the survey.xml

<res label="continue_button_text">Click here to proceed</res>

nstyles

*button.continue:
# The "Continue >>" Button Code
<input type="submit" name="continue" id="btn_continue" class="btn continue survey-button" value="${res.continue_button_text}" onClick="var i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', '1');i.setAttribute('name', '__has_javascript');document.forms.primary.appendChild(i);"/>

Result

Some style blocks can be named so that you may call it for individual questions only. For example, we can conditionally add CSS to our survey to customize the background color of the continue button only at Q2.

Q2 in survey.xml

<radio label="Q2" style="Custom_Continue_Text">
  <title>Please select on and then click the "Click here to proceed" button when finished.</title>
    ...
    ...

nstyles

*Custom_Continue_Text/button.continue:
# The "Continue >>" Button Code
<input type="submit" name="continue" id="btn_continue" class="btn continue survey-button" value="${res.continue_button_text}" onClick="var i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', '1');i.setAttribute('name', '__has_javascript');document.forms.primary.appendChild(i);"/>

Result

2.2:  Adding Attributes & Variables

Attributes are declared inside the nstyles file using the following syntax:

** attribute ATT_NAME type=(string or int)

For example:

nstyles

** attribute some:extraInfo type=string

survey.xml

<radio label="Q1">
    <title>Please select one.</title>
    <row label="r1" some:extraInfo="Extra Information">Item 1</row>
    <row label="r2" some:extraInfo="Other Extra Information">Item 2</row>
</radio>
<suspend/>

<html label="Q1_Selected_Info">You selected: ${Q1.rows[Q1.val].styles.some.extraInfo}</html>

2.3:  Adding Flow Control (@if, @for)

You can use the logical operators @if, @else, @endif, @for and @end to create dynamic styles.

Consider the following example straight from the system styles file. This is where the survey system loads all of the necessary CSS files.

*respview.css:
...
... # a lot of stuff skipped here
...
@if gv.survey.root.styles.ss.includeCSS
    
    @for url in ((gv.survey.root.styles.ss.includeCSS if gv.survey else "") or "").split(',')
    <link href="$" rel="stylesheet" />
    @end
@endif
@if gv.survey.root.styles.ss.customCSS
    <!-- Custom CSS (specified in survey.xml) -->
    <link href="[static]/survey/${gv.survey.path}/${gv.survey.root.styles.ss.customCSS}.css" rel="stylesheet" />
@endif       
<link href="$" rel="stylesheet"/>
@end @endif @if gv.survey.root.styles.ss.customCSS
<link href="[static]/survey/${gv.survey.path}/${gv.survey.root.styles.ss.customCSS}.css" rel="stylesheet"/>
@endif

The couple snippets above load only if the appropriate Survey Attributes, includeCSS or customCSS, are included in the main <survey> tag. Notice that the @if statements check to see if the attributes exist first before actually including the HTML markup. If the customCSS attribute exists, the system uses a @for loop to iterate over each of the CSS files included (e.g. "style1.css,/survey/path/other_style.css").

Don't override the respview.css style. Use client.css or respview.client.css instead.

3:  Style Blocks Available

You can find the most popular style blocks described here: XML Style Blocks

  • Este artigo foi útil?