Example Code Snippets

Example HTML and CSS

Over the years our clients have come up with some really unique applications of HTML CSS and JavaScript in Qualtrics. Some of the most useful are presented below.

Add a Subheading in a Multiple Choice or Constant Sum Question

With this code, you can add headings between choices of a multiple choice or constant sum question to visually group choices into categories. Option Number 1 is simpler and is best for most situations. Option Number 2 is appropriate when you need greater precision or if you need a header above the first choice and can’t add it within the question text. Click here to see an example.

HTML Code

Option Number 1

<div class="QuestionText">Subheading Text1<br>Subheading Text2<br>Subheading Text3</div>

‘Single Line Text Entry’ boxes

<div class="QuestionText">Subheading Text1<br>Subheading Text2<br>Subheading Text3</div>

Option Number 2

<style> 
#QR\~QID13\~1 {display:none}
   #QR\~QID13\~4 {display:none}
   #QR\~QID13\~6 {display:none}
</style>

Instructions

Option Number 1

To insert a subheading, click on the answer choice above where you want the header to appear, and paste this code at the end of the choice.

Option Number 2

This code will go in the Code View of your question. The \~x numbers represent the answer choices that will be turned into headers. You will also need to have the appropriate QIDx for your question.

Widen the Survey Skin

This code allows you to widen the skin for your survey. It is especially useful when you have wide images or questions that you are trying to accommodate. Click here to see an Example.

CSS Code

.Skin .SkinInner {
width:1140px;
}

Instructions

Place this code into the CSS Editor of the survey you’d like to widen. Change the width (measured in pixels) as needed.

Use Iframe to embed your survey

This code allows you to embed your survey into a webpage. Note surveys with Logic, Randomization or anything else that requires a survey session to be created upon survey load cannot be taken in an iframe.

<iframe src="Paste Survey Link Here" height="450px" width="600px"></iframe>

Example JavaScript

Autopopulating Answer Choice Fields with Code

You can auto-populate answer choice fields without a JavaScript code by using the Default Choices Option, but if you are setting up a complex customization in your survey, this JavaScript may be useful to you.

With JavaScript, answer choices and text fields can be pre-populated when a respondent enters the survey. Click here to see an example.

Single Line Entry
 var InputId = $("QR~"+this.questionId);
InputId.value= "text goes here";
Form Text Entry
this.setChoiceValue(1,"text goes here");
Multiple Choice – Single Answer and Multiple Answer
    this.setChoiceValue(1,true);
Multiple Choice – Drop Down Menu
   if($('QID1'))
{
$$('#QID1 select').each(function(s){
s.value = (s[s.length-1].value);
}) }
Matrix Table
  this.setChoiceValue(1,1,true);

Instructions

Single Line Text Entry

Paste the code into your JavaScript editor and change the text to be displayed as needed.

Form Text Entry

Paste the code in your JavaScript editor and change the text to be displayed as needed. Replace ’1′ with the row number of the form field into which you want to place text.

Multiple Choice – Single Answer and Multiple Answer

Paste the code into the JavaScript editor and replace the 1 with the ID of whichever choice you want to preselect.

Multiple Choice – Dropdown List

Paste the code into the JavaScript editor. Replace QID1 with the correct question ID. Change the 1 in s.length-1 to reflect the position (from the bottom of the list) of the choice you would like preselected.

Matrix Table

Paste the code into the JavaScript editor. The first ’1′ represents the row of choice to be selected, and the second ’1′ represents the column.

Change Text Box Size and Area

This code enlarges the Allow Text Entry box and wraps the entered text.

JavaScript Code

   var te =$(this.questionContainer).getElementsByClassName('TextEntryBox');
  for(var i=te.length-1;i>=0;i--)
  {
    var s = te[i];
    var p = s.parentNode;
    var n = QBuilder('textarea',{name:s.name,className:'InputText'});
    n.innerHTML = s.value;
    Event.observe(n,'click',function(e){
      var el=Event.element(e);
      var en = el.getAttribute('name');
      $(en.substr(0,en.lastIndexOf("~"))).checked = true;
    });
    $(n).setStyle({width: '600px',height:'200px'});
    p.replaceChild(n,s);
  }

Instructions

Put this code in the JavaScript Editor of the question that contains your Allow Text Entry box. Adjust the size of the box by changing the numbers on the line that reads: “$(n).setStyle({width: ’400px’,height:’100px’});”

Constant Sum, Change the Total Tag

This code replaces the word “Total” with a description of your choice in a constant sum question. Click here to see an example.

JavaScript Code

var questionId = this.questionId;
 $(questionId+'_Total').up(1).getElementsByTagName('label')[0].innerHTML = "Total Years"

Instructions

Place this code in the JavaScript editor of your question. Change the words “Total Years” to fit your needs.

Constant Sum, Hide Zeros

This code will remove the zeros from a Constant Sum question so that all of the Text Entry boxes are blank. Click here to see an example.

JavaScript Code

var inputs = $(this.questionContainer).select('input');
inputs.each(function(el) {if (el.value == 0) el.value='';});

Instructions

Paste this code in the JavaScript editor of your question. No modification is needed.

Insert Text Before or After a Text Box

This code will insert a character or text before any type of Text Entry box. For instance, if you were asking how much money a participant spent in a given category, you might want a dollar sign before the text box. Click here to see an example.

JavaScript Code

To place the character before any textbox
var questionId = this.questionId;
var inputs = $(questionId).getElementsByTagName('input');
for(var x = 0; x<inputs.length;x++){
var input = inputs[x];
if(input.id != undefined && input.type =='text')
{
  var id = input.id;
  $(id).up().innerHTML = "$ " + $(id).up().innerHTML;
}}

JavaScript Code

To place the character after any textbox
var questionId = this.questionId;
var inputs = $(questionId).getElementsByTagName('input');
for(var x = 0; x<inputs.length;x++){
var input = inputs[x];
if(input.id != undefined && input.type =='text')
{
  var id = input.id;
  $(id).up().innerHTML = $(id).up().innerHTML + "$ ";
}}

Instructions

Insert this code in the JavaScript editor of your question. Replace the dollar sign (the one surrounded by quotation marks) with your text or character(s).

Add Subheadings in a Matrix Table

JavaScript Code

Group your statements together by putting headings into your Matrix Table. Works for Likert and Profile. Will not work for Rank Order, Constant Sum, Bipolar and Text Entry.

$('QR~QID12~1~1').style.display='none';
$('QR~QID12~1~2').style.display='none';
$('QR~QID12~1~3').style.display='none';
$('QR~QID12~1~4').style.display='none';
$('QR~QID12~1~6').style.display='none';

To place headings in your Matrix Table

  1. QID# – Go to Account Settings and click Qualtrics IDs. Find and click the survey name, then find the question and grab the ID to the right of the question (QID#). This will take the place of “QID12″ in the example.
  2. Row # of Matrix (…~1~…) – Count the row of radio/checkbox buttons that you want to hide. The first row starts as “1″. This will replace the “~1″ in the example.
  3. Radio/Checkbox Button number (…~1′…) – Most people want to hide the entire row. The button on the left starts at 1 and each one to the right increments one.
  4. Use Keystrokes to Answer Questions

    With this code, participants can answer a question and move to the next page by pressing a key on a keyboard. When combined with a Timing Question, this is an optimal way to run many types of reaction time studies. Click here to see an example.

    JavaScript Code

        if ($('NextButton'))
        $('NextButton').hide();
        if ($('PreviousButton'))
        $('PreviousButton').hide();
    
        var that = this;
        Event.observe(document,'keydown',function(e){
        var choiceID = null;
        if (e.keyCode == 74) //'j' was pressed
        {
        choiceID = 1;
        }
        else if (e.keyCode == 75) //'k' was pressed
        {
        choiceID = 2;
        }
        if (choiceID)
        {
        that.setChoiceValue(choiceID,true);
        that.clickNextButton();
        }
        });
       
    

    Instructions

    To activate key stroke submission, paste this in the JavaScript editor of your question. The numbers 74 and 75 are the html code numbers for the j and k keys. To use different key strokes, you can find the appropriate numeric codes at this site:

    http://rmhh.co.uk/ascii.html

Google+