Current version: 1.0 ()

Sometimes it is helpful to hide questions when they are irrelevant for participants. For example, if you asked participants for their gender, and then have male- and/or female-specific questions, it could be useful to hide the opposite-gendered questions.

This script lets you do just that. You can make the display of certain questions conditional on previous answers.

To set up a conditional question on a survey page, simply insert this code into your page right where you want the question to be:

<div id="conditional1" style="display: none"> <!-- question(s) here --> </div> <script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/conditional_v1.0.js"></script> <script type="text/javascript"> new Conditional("conditional1", "vv0001", ["1", "2"]); </script>

Replace the <!-- question(s) here --> part with the question(s) that you want to be hidden (the conditional question). You can put as much in here as you want.

Options

The other parameters in red in the code above are as follows: Conditional(containerID, questionName, correctAnswers)

The containerID parameter is the “id” attribute of the <div> tag surrounding the conditional question. This can be named anything (but must be unique on the page), but the two must match.

The questionName parameter is the “name” attribute of the question that must be answered correctly for the conditional question to show. In the example I used above, it was the question asking for the participant’s gender.

The correctAnswers parameter is a list, in square brackets, of the “correct” answers—the answers that will cause the conditional question to be displayed. These must be put in double quotes. You may have as many as you like, just separate them with commas. The items in the list should be the values of the question. So for example, if I have these radio buttons:

<input type="radio" name="vv0001" value="M"> Male <input type="radio" name="vv0001" value="F"> Female

The correctAnswers parameter for my male-specific questions should be listed like so: ["M"].

Display by Default

If you wish, you may wish to show the conditional question by default, and only hide it if an “incorrect” answer is chosen. If this is the case, you may simply delete style="display: none" from the <div> tag in the above code. Everything else can be done using the method mentioned above.

Conditional Logic for Answers from Previous Pages

The code shown above is restricted to question responses on the same page as the conditional question. If you wish to use a response from a previous page to determine whether a question appears or not, you may add an extra parameter to the end. If you are using my script to generate your survey, do it like so:

<div id="conditional1" style="display: none"> <!-- question(s) here --> </div> <script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/conditional_v1.0.js"></script> <script type="text/javascript"> new Conditional("conditional1", null, ["1", "2"], "[%include:'page1','vv0001'%]"); </script>

Note that the questionName parameter has been replaced with null (not in quotation marks), which simply skips over it so no question on the current page used. The last parameter will insert a response from a previous page (in this case, page 1, variable vv0001). See Inserting Previous Responses for details. The participant‘s answer from that page will be inserted there, and the code will compare it to the list of correctAnswers.

If you are using Bill’s script to generate your survey, the code is very similar:

<div id="conditional1" style="display: none"> <!-- question(s) here --> </div> <script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/conditional_v1.0.js"></script> <script type="text/javascript"> new Conditional("conditional1", null, ["1", "2"], "---VVSUBSTART---page1.html---1---VVSUBEND---"); </script>

Again, this particular code will insert a response from page 1, variable vv0001. See this page under the heading “Fine Tuning” for details.

As a side note, if you leave a questionName in there as well as using the response from a previous page, the code will still work properly. If either the response from the previous page or the answer to the questionName question match one of the correctAnswers, the conditional question will be displayed. But this may or may not be useful for most purposes.

Multiple Conditional Questions

You may find it necessary to have more than one set of conditional logic on the same page. If you wish to do this, the code must be changed a little bit.

<script type="text/javascript" src="https://artsresearch.uwaterloo.ca/~psyrsrch/survey_scripts/js/conditional_v1.0.js"></script>

First, place the code above somewhere near the top of the page (right underneath the <title> tag would be a good spot). It must appear in the code before any of the conditional logic.

Then, place the following code sections on the page where you want the conditional logic to display:

<div id="conditional1" style="display: none"> <!-- question(s) here --> </div> <script type="text/javascript"> new Conditional("conditional1", "vv0001", ["1", "2"]); </script> <div id="conditional2" style="display: none"> <!-- question(s) here --> </div> <script type="text/javascript"> new Conditional("conditional2", "vv0001", ["1", "2"]); </script>

Note that each <div> tag must have a unique ID name; this can be named whatever you like, but the Conditional() parameter must match it.

Anything More Complicated

I’ve tried to make this script as flexible as possible, but if you need something more complex, I can probably come up with something that will suit your needs. Just email me (Jeff Hughes) and ask! My assistance will be conditional on the logic of your request. Okay, I apologize for the lame joke.