Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Add object(s) to right of Response Options

I have a simple select question with checkbox answers - I am asking respondents what types of cellular devices they own (e.g., smartphone, tablet, etc.).

I'd like to add definitions to the response options to the right, but I don't want them to be a part of the actual response (it is a constructed list, and carrying the definitions throughout the survey is cumbersome).

Is there any way to add an object or table to the right of the question when it shows up on the browser?

asked May 9, 2015 by Jon

4 Answers

+1 vote
Why don't you use some Tool Tips (also known as a hover feature). When the respondent hovers the mouse over the code label, the tool tip appears.

If you define the tool tip in the parent list, it will appear in all questions where that parent list is used, including constructed lists that use that parent list.

When defining a code, use the following SSI Script function  ...

ToolTip("LinkText","HelpText", Width, Height)

Example ...

This would have "Coke" as the label and the tool tip would display "Best soft drink" when you hover the mouse over the label "Coke".

ToolTip("Coke","Best soft drink",100,15)

Note - I also suggest inserting an instruction to respondents to hover over each code for a full description.
answered May 10, 2015 by Paul Moon Platinum (65,230 points)
+1 vote
Paul's idea was the first thing I thought of as well.  As another option, if you don't want the tool tips to be on other questions, would be to have two different lists.  You could create one list with the definitions (as text or using tool tips) and another with just the types of devices.  For this first question use the list with the full definition and then for the next question that would be using a constructed list, instead of using AIC, construct the list using Perl and use the second list without the definitions as your Parent list.   This way you have the list you want moving forward through the survey yet you can initially show it the way you want.
answered May 11, 2015 by Jay Rutherford Gold (26,800 points)
And the MIRROR function can come in handy too for issues similar to this. I think this was a "Mike Lodder" treat.

Thanks Jay for popping in another possible solution.
Ahh, MIRROR would accomplish that same thing without having to write the code in Perl.  Forgot about that one Paul!
+1 vote
You've already got some answers (the mirror one is probably what I would have done), but I just wanted to share an approach Justin, one of our developers, thought up that is very slick.  Essentially you use CSS to conditionally display things only for specific questions.

The first step would be to give a unique class to the conditional text using something like a span tag.  Let's assume we put the following into a question called Q1:

Answer  1 <span class="SpecialDisplay">Text of interest goes here</span>

Without anything from you, the text will just display as Answer 1 Text of interest goes here.

However, we can leverage the way SSI Web builds questions to quickly tell the browser not to display something on a certain page.  For example, if I have Q1 and Q2, and I want to use the same list but not display additional text in Q2, I could leverage a div tag ID and my own span tag and do the following:

<style type="text/css">
    #q2_div .SpecialDisplay

What that does is tell the browser that if something has both the q2_div ID and a class of SpecialDisplay, don't display it.  The result is that on Q1 I would see "Answer 1 Text of interest goes here" but in Q2 I would just see "Answer 1."
answered May 11, 2015 by Brian McEwan Gold Sawtooth Software, Inc. (38,315 points)
That IS pretty slick.  Going into my reference book for sure.
This technique was shared by Justin at the Florida conference. The "display:none" feature is very powerful. Justin loves it.

Thanks for sharing Brian.
0 votes
Another way can be using Jquery. We need to use jquery code specifically for that question to show definition in front of option.  Let's say you have Q1 as single select question with 3 option (Tablet, Smartphone, Laptop). Here should be footer code for that :

<script type="text/javascript">
    jQuery(document).ready(function ($) {
$( ".inner_table  tr:nth-child(1) td:nth-child(2)" ).after("<td class='row_label_cell'><div class='label_text'>Tablet Text</div></td>");
$( ".inner_table  tr:nth-child(2) td:nth-child(2)" ).after("<td class='row_label_cell'><div class='label_text'>Smartphone Text</div></td>");
$( ".inner_table  tr:nth-child(3) td:nth-child(2)" ).after("<td class='row_label_cell'><div class='label_text'>Laptop Text</div></td>");

You may need to modify based on your requirement.
answered May 11, 2015 by Rajesh Rana Gold (23,530 points)