Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

 
FocusVision Knowledge Base

XML Style System Examples

1:  Overview

The XML style system is used to modify survey components such as question structure, default texts, survey style with CSS, survey behavior with JavaScript, and much more.

In this document, you'll discover various demonstrations where the XML style system is used to customize the survey experience.

2:  XML Style Examples

Review this document to learn how to add these XML styles to a question:

2.1:  Help & Privacy Policy

This style allows you to modify or remove the help or privacy policy text or hyperlinks that appear at the bottom of the survey window.
<res label="privacy">Privacy Policy </res>
<res label="helpTxt">Help </res>
<style name="survey.respview.footer.support" cond="condition">
<![CDATA[
    <a href="link" target="_blank">${res.privacy}</a> - <a href="/support" target="_blank">${res.helpTxt}</a>
]]>
</style>

The following portions of the code can be modified to customize the text and/or links.

  • Privacy Policy: Replace this portion with the desired privacy policy text
  • Help: Replace this portion with the desired help text
  • condition: Enter a logic condition to show this footer if the logic is met
  • link: Enter the link for the privacy policy web page.
  • /support: Enter the link for the help/support web page. (/support is the default)

2.2:  Continue Button

This style allows you to modify the "continue" button that appears at the bottom, right corner of the survey window.
<res label="continueButton">Text for continue </res>

<style name="button.continue" mode="mode" cond="condition"><![CDATA[
<input type="submit" name="continue" id="btn_continue" class="button continue" value="${res.continueButton} &raquo;" onClick="var i = document.createElement('input');i.setAttribute('type', 'hidden');i.setAttribute('value', '1');i.setAttribute('name', '__has_javascript');document.forms.primary.appendChild(i);"/>
]]></style>

The following portions of the code can be modified to customize the text and/or add a condition.

  • Text for continue: Replace this portion with the desired "continue" text
  • condition: Enter a logic condition to set this text if some logic is met.

2.3:  Abbreviations for States

This style allows you to easily add the abbreviations for the states in a select element. The abbreviations are stored in the global variable "allStates" that is created using the <exec when="init"> code block. The variable has all the values split, which will create a list in the select element created using the style.
<exec when="init">
allStates = 'AA AE AK AL AP AR AS AZ CA CM CO CT CZ DC DE FL FM GA GU HI IA ID IL IN KS KY LA MA MD ME MH MI MN MO MP MS MT NC ND NE NH NJ NM NV NY OH OK OR PA PI PR PW RI SC SD TN TT TX UT VA VI VT WA WI WV WY'.split()
</exec>

<style name="el.text" rows="r3">
<![CDATA[
  <select name="$(name)">
    <option>Select one...
      \@for state in allStates
        <option value="$(state)" ${"SELECTED" if state==ec.value else ""}>$(state)</option>
      \@end
   </select>
]]>
  </style>                   
The "el.text" style will need to be placed inside the target question.

2.4:  Phone Number Formatting

This style allows you to add formatting for questions that ask for the respondent's phone number. When the respondent clicks in the answer field, the required format will appear - i.e., (___) ___-____
<style mode="before" name="question.header">
  <![CDATA[
    <script src="[rel jquery.maskedinput-1.4.1.min.js]"></script>
  ]]>
  </style>
<style mode="after" name="question.element" rows="r5">
  <![CDATA[
    <script>$ ("input[name='$(name)']").mask("(999) 999-9999")</script>
  ]]>
</style>                 
The file "jquery.maskedinput-1.4.1.min.js" should be saved to your project static directory using the File Manager. The "question.header" style will load the javascript (.js) file needed for the input mask. You will then use the "question.element" to apply the mask to the row label specified in the attribute "rows=" "" in the style. Both styles will need to be placed inside of the target question.

There is a known issue with this style for Android devices in which users may experience an issue with the cursor aligning itself to the left of any typed character.

Click here to download a .js file with a temporary fix.

**Before deploying any survey with this fix in place, be sure to test your code thoroughly for functionality in all browsers.

2.5:  Blank Cells

Allows you to modify one or more cells in a 2 or 3-dimensional question to appear blank (i.e., without a radio or checkbox button).
<style name='question.element' label="hideElements"> <![CDATA[
\@if ec.simpleList
<div class="element $(rowStyle) $(levels) $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
    ${v2_insertStyle('el.label.start')}
    ${v2_insertStyle('el.label.end')}
</div>
\@else
<$(tag) $(headers) class="cell nonempty element $(levels) ${"desktop" if this.grouping.cols else "mobile"} border-collapse $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
    ${v2_insertStyle('el.label.start')}
    ${v2_insertStyle('el.label.end')}
</$(tag)>
\@endif
]]></style>
  
  <style copy="hideElements" cols="c2" rows="r7,r8" name="question.element"/>

The two style attributes cols and rows allow to specify when to display a blank cell. 

The style hideElements is defined in the first <style copy="hideElements" cols="c2" rows="r7,r8" name="question.element"/> inside the question.   

2.6:  Blank Cells Based on Responses

Allows you to modify one or more cells in a 2 or 3-dimensional question to appear blank (i.e., without a radio or checkbox button), based on what the respondent selects in a previous question.

<style copy="hideElements" cond="not S1[row][col]" name="question.element"/>
The cond attribute allows to specify the logic for displaying a blank cell.  The style hideElements is defined in the first <style> in the section above with the style tag shown here inside the question.   

2.7:  Disable Continue Button for Specified Time

This style allows you to disable the "continue" button for a specified amount of time. After the time has passed the button will be enabled and become clickable again.
 
<style label="disable_continue" arg:timeout="3" mode="after" name="survey.respview.footer" with="ElementLabel" wrap="ready">
    <![CDATA[
      var b = $ ("#btn_continue, #btn_finish");
      b.disable();
      setTimeout(function() { b.enable()} , $(timeout)*1000);
    ]]></style>

The following portions of the code can be modified to specify the location and time of the delayed continue button.

  • 3:  Replace with the desired amount of time that the button will be disabled in seconds
  • ElementLabel:  Replace with label of element on the same page where the continue button should be disabled. Styles can be applied to more than one label at a time with comma separation (e.g. with="ElementLabel,Label2,Label3").
  • disabled() and enabled() can be replaced with hide() and show() to hide the continue and show after the specified seconds.

For Cloud Server Clients only. The document Inserting XML Styles with a Command explains how to insert XML Styles with a command using VIM or NANO text editors.

  • Was this article helpful?