Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

Including Static Files (Images, JavaScript, CSS)

1:  Overview

Place all project assets and static files in the /static directory of your project.

Static files may include:

  • images
  • custom JavaScript or CSS files
  • HTML pages (e.g. disclaimers, rules, etc...)
  • any external file that a respondent may view or access

Unlike your project's root directory, the /static directory is visible to the public and a great place to store these files and include them into your project. Any files placed in this directory can be referenced with the following link:

https://SURVEY.CNAME.com/survey/self...Y/PROJECT/FILE

Alternatively, upload files using the file manager in the Research Hub. Learn more.

2:  Including Static Files

To include a file from your project's /static directory, use the following syntax:

[rel FILENAME]

This will return the relative path to the file.

e.g. /survey/selfserve/9d3/proj1234/logo.jpg

2.1:  Including Images

To add an image to your project, first upload the image to your project's /static directory and reference the image in your survey with the following syntax:

<img src="[rel IMAGE.PNG]" />

Your end result may look something like this:

<radio label="Q1" optional="0" shuffle="rows">
  <title>Which of these toothbrush designs do you prefer?</title>
  <row label="r1"><img src="[rel toothbrush-1.jpg]" /></row>
  <row label="r2"><img src="[rel toothbrush-2.jpg]" /></row>
  <row label="r3"><img src="[rel our-toothbrush.png]" class="tbrush-img" /></row>
</radio>

2.2:  Including JavaScript

To include an external JavaScript file, we can use the XML Style System and override the respview.client.js style:

<style name='respview.client.js' mode="after"><![CDATA[
    <script type="text/javascript" src="[rel JAVASCRIPT_FILENAME]"></script>
]]></style>

Replace JAVASCRIPT_FILENAME with the name of your JavaScript file (e.g. custom.js).

We can also include JavaScript directly into our survey using the same <style> element:

<style name='respview.client.js' mode="after"><![CDATA[
    <script type="text/javascript" src="[rel JAVASCRIPT_FILENAME]"></script>
    <script>
    $ (function() {

        // your code goes here
        alert("JavaScript is running!");

    });
    </script>
]]></style>

A similar approach, but without the external JavaScript file and using wrap="ready":

<style name='respview.client.js' mode="after" wrap="ready"><![CDATA[
        // your code goes here
        alert("JavaScript is running!");
]]></style>

JavaScript files can also be loaded via the <survey> element's ss:customJS or ss:includeJS attributes.

2.3:  Including CSS

To include an external CSS file, we can use the XML Style System and override the respview.client.css style:

<style name='respview.client.css' mode="after"><![CDATA[
    <link rel="stylesheet" type="text/css" href="[rel CSS_FILENAME]" />
]]></style>

Replace CSS_FILENAME with the name of your CSS file (e.g. customStyle.css).

We can also include CSS directly into our survey using the same <style> element:

<style name='respview.client.css' mode="after"><![CDATA[
    <link rel="stylesheet" type="text/css" href="[rel CSS_FILENAME]" />
    <style>

        /* your code goes here */
        .row-legend {
            font-weight: bold;
            color: blue;
        }

    </style>
]]></style>

A similar approach, but without the external CSS file:

<style name='respview.client.css' mode="after"><![CDATA[
    <style>

        /* your code goes here */
        .row-legend {
            font-weight: bold;
            color: blue;
        }

    </style>
]]></style>

CSS files can also be loaded via the <survey> element's ss:customCSS or ss:includeCSS attributes.

3:  Example

We can combine all three techniques above and create a question that includes external images, a JavaScript and CSS file.

In the example below, we include an image in all three rows of question Q1 and use JavaScript/CSS to modify their look'n'feel. If you click an image, an alert will be shown with the image's relative path.

<style name='respview.client.js' mode="after" wrap="ready" with="Q1"><![CDATA[
    var question = $ ("#question_Q1"),
        answers = question.find(".answers");

    answers.find("img").each(function() {

        // when you click an image
        // pop up an alert saying so with the relative path
        $ (this).click(function() {

            var this_images_classname = $ (this).prop('src'),
                message = "You clicked ";

            alert(message + this_images_classname);
        });
    });
]]></style>

<style name='respview.client.css' mode="after" with="Q1"><![CDATA[
    <style>
        .img {
            width: 250px;
            border: 3px solid black;
        }
        .i1 { border-color: red; }
        .i2 { border-color: blue; }
        .i3 { border-color: green; }
    </style>
]]></style>

<radio label="Q1">
  <title>
    Which image do you prefer?
  </title>
  <comment>Please select one</comment>
  <row label="r1"><img src="[rel placeholder.jpg]" class="img i1" /></row>
  <row label="r2"><img src="[rel placeholder.jpg]" class="img i2" /></row>
  <row label="r3"><img src="[rel placeholder.jpg]" class="img i3" /></row>
</radio>
<suspend/>

The code above produces the following result:
including_example_1.png

4:  What's Next?

Learn more: XML Style System

There is also a function for Inserting XML Styles With a Command.

  • War dieser Artikel hilfreich?