Pular para o conteúdo principal

FV Decipher Support

Todos os tópicos, recursos necessários para FV Decipher.

Base de Conhecimento da FocusVision

Including JavaScript in a Survey

Overview

Whether using JavaScript to implement client side validation or to create a custom look and feel, you will need to take an extra step to ensure that the JavaScript is included in the survey. You can either use the survey style attributes or the XML style system to do this.

1: Survey Style Attributes

There are two survey style attributes that allow you to include JavaScript in a survey:

ss:customJS and ss:includeJS.

1.1: Using ss:customJS

When the JavaScript is contained in a single JS file, you can upload the file to the survey's static directory and then load it by adding the ss:customJS attribute in the main <survey> element.

For example, if the script uploaded to the static directory is named customScript.js, specify  ss:customJS="customScript" in the <survey> tag to load the file in the survey.

1.2: Using ss:includeJS

You can use the ss:includeJS attribute to load any number of JS files. These files can be located in your local static directory, a client level directory, or externally loaded. When using the ss:includeJS attribute, you will include each JS file in a comma delimited list.

For example, to load two JS files (script1 and script2) into the survey, add the following to the <survey> tag:

ss:includeJS="/survey/selfserve/9d3/proj1234/script1.js, proj1235/script2.js"

2: XML Style System

Using the XML style system you can add JavaScript to one or more pages of the survey.

2.1: Using the respview.client.js Style

Inside the respview.client.js style, specify the JS code as follows:

An example code is the following: 
<style name="respview.client.js" mode="after"> <![CDATA[
<script>
$ (document).ready(function() {
console.log("Javascript is running");
});
</script>
]]></style>

Using the wrap argument we can skip the need of the document.ready function. An example of the same code using the wrap="ready" argument is below:

<style name="respview.client.js" mode="after" wrap="ready"> <![CDATA[
console.log("Javascript is running");
]]></style>

To apply this to only specific pages you can use the with argument to specify the questions the code would run with in a comma delimited list. You can use this style to link external JS files as well, similar to how they would be linked in HTML.

2.2: Using the question.after Style

Similar to respview.client.js, JS code can also be defined in the same way using the question.after style. For example, question.after would be defined inside a question for use on that question and can be used with or without the wrap="ready" attribute. An example of question.after with the wrap="ready" attribute is listed below:

<style name="question.after" wrap="ready"> <![CDATA[
console.log("Javascript is running");
]]></style>

Additionally, you can use the jsexport() function within the question.after style to return a JSON object of the question. To call this function within a survey, execute some Python code using the ${} syntax. Then you can call this function to get a JavaScript JSON object of the question's properties, for example:

<style name="question.after" wrap="ready"> <![CDATA[
    var qn = ${jsexport()}; //returns json object of the question
    console.log(qn) //loads question variables into a console tool
]]></style>

With the code above, a browser's console log displays the object generated, as shown below.

  • Este artigo foi útil?