Skip to content

Documentation

Terry Turton edited this page Aug 24, 2021 · 4 revisions

Documentation

The ETK modules are designed to work within a Qualtrics survey. Each module consists of a JavaScript, an HTML and a CSS file. Each of these scripts is inserted into a specific location within a Qualtrics survey or a Qualtrics question. The CSS script is added to the survey Look & Feel tab; the HTML script is added to the question text and the JavaScript is added to the question via the JavaScript API. The researcher will need to modify the scripts in a few places such as adding the URL and image names specific to their study and modifying a width parameter in the CSS file to fit their image size. Qualtrics Embedded Data variables will also need to be created for study output.

Useful functionality implemented in the ETK modules include:

  • Randomization: automatically done within the specific modules. This includes randomization of left/right (or right/left) presentation of comparison pairs and randomization of the order in which image pairs are presented.
  • AllOneSide variable: a boolean variable that is set when a study participant only clicks on LEFT or on RIGHT. This allows the researcher to easily flag participants who did not faithfully attempt the study.
  • Time Delay: flag and variable to optionally impose a time delay between images.
  • Validation images: the RRC module includes the ability to add a separate image pair as a validation/attention check. This could again be used to flag study participants who were not faithfully completing the study.
  • Image Number tag on MoA carousel: a code section within the MoA module can be used to add an Image Number at the top of the carousel box. This is useful when designing a study where multiple images could be selected by the participant. Turning on the Image Number feature and embedding the MoA module in a Qualtrics multiple choice format question would allow for more than a single image to be chosen.

Checklist to Implement and Modify ETK Modules

Basic Implementation

  • CSS script: insert via Qualtrics Look & Feel tab > Advanced Options > Add Custom CSS. Insert the CSS code into the editor
  • HTML script: Create a Qualtrics question, Descriptive Text is often the best option. Clicking on the question text will allow one to edit the question via a series of tabs. Choose the HTML View tab and insert the HTML script.
  • JavaScript code: Select the cog wheel to the left of the Qualtrics Question and choose Add JavaScript. Insert the JavaScript code into the editor.

Required Modifications

  • Within the CSS script, modify the pairBox width to be 2*image width + 25 pixels.
  • Within the HTML section, modify the example question text within the

    paragraph.

  • Within the JavaScript, modify the imgURL variable to point to the image host site. Change image variable names as needed.
  • Within the Qualtrics Survey Flow, create the list of Qualtrics Embedded Data output variables. This list needs to appear in the Survey Flow before the question with the ETK module. Default names assumed in the JavaScript are n* (names) and c* (participant choice). If the user prefers other names, this will need to be updated in the JavaScript and reflected in the Survey Flow names. Also create the AllOneSide variable.

Possible Modifications

  • Change the Qualtrics “next question” button from the default >> to (for example) SUBMIT>> by using the Look & Feel tab and Next Button Text.
  • For studies with multiple conditions that may require multiple Qualtrics questions, one may need to add additional Embedded Data output variables, changing the names in the JavaScript for each question and in the Survey Flow. Presentation and randomization of multiple questions within a full Qualtrics survey would need to be implemented by the user within the Survey Flow.

Qualtric Image Server Tip

When using image URLs for images residing in your Qualtrics Graphics Library (rather than on a separate server), you may need to modify the URL so it can be accessed by people taking the study.

Replace: /Q/GraphicsSectionGraphic.php with /ControlPanel/Graphic.php