Scroll

Add text boxes next to responses in a response block

Add text boxes next to responses in a response block

Follow
Summary You may have a requirement to use open-ended verbatims for "other/specify" responses in a merged screen, but you don't want the text boxes to show up under the response block. This article will show you how to add the text boxes next to your responses inside the block itself.
Applies to Askia Design
Written for Survey Programmers, Scripters, Web Designers
Keywords HTML ; JQUERY ; SCRIPT ; SCREENS ; WEB ; SELECTED ; DURING ; ROUTING ; RESPONSES ; TEXT ; BOX ; VERBATIM ; BLOCK

 

Download the 5.3.5 example here

Download the 5.4.4/5.4.6 example here

 

Note: in our below example, we're using response category headers. We have an article that already describes how to set these up, which you can read about here: https://support.askia.com/hc/en-us/articles/115002187345-Randomise-or-rotate-a-code-list-with-groups-headers

 

Step 1

Create a multi-punch variable with a few response headers, other specify selections and an exclusive, with some open-ended variables nested under it:

TextBoxesNextToResponses_1_.png

In this case, I have three "Other (please specify)" options in my responses, so I need three open-ended variables.

Step 2

Add the following at the end of the response caption of your "Other (please specify)" responses:

<span data-other="1"></span>

Change the span number accordingly (i.e. 1 for the first specify, 2 for the second, etc.)

TextBoxesNextToResponses_2_.png

Step 3

Add the following at the end of the long caption in each of the open-ended variables:

<span data-specify="1">&nbsp;</span>

Change the span number accordingly (i.e. 1 for the first variable, 2 for the second, etc.)

TextBoxesNextToResponses_3_.png

TextBoxesNextToResponses_4_.png

TextBoxesNextToResponses_5_.png

Step 4

Add some routing options that only show the text input boxes if an "Other (specify)" option has been ticked:

TextBoxesNextToResponses_6_.png

Note: make sure the routing is executing as "During", as these open-ended variables will be merged onto the same screen as our multi-punch variable.

Step 5

Generate your screens and merge all of them together:

TextBoxesNextToResponses_7_.png

Step 6

We'll need to hide our open-ended question headers from the screen, so highlight all three of the verbatim headers, right-click, and go into "Properties" and tick the "Transparent" option:

TextBoxesNextToResponses_8_.png

Step 7

Go into each verbatim's text box element properties (individually), into the "Code in control" section, and insert the following:

data-specify="1"

Change the span number accordingly (i.e. 1 for the first variable, 2 for the second, etc.)

TextBoxesNextToResponses_9_.png

Also, make sure you change the "Rows" count from the default of "5" to "1", so the text input box on the screen has a smaller height:

TextBoxesNextToResponses_13_.png

Step 8

Add a label at the bottom of the screen with the following script:

<script>
$( function() {
$("tr [data-other]").each( function() {
theAttr = $( this ).attr( "data-other" );
theClass = $("[data-specify=" + theAttr + "]").closest( "td[class*=askia-question-]" ).attr( "class" );

$("[data-specify=" + theAttr + "]").addClass( theClass );

$( this ).append( "&nbsp;" ).append( function() {
return $("[data-specify=" + theAttr + "]");
} );
} );
$("[data-specify]").click( false );
} )
</script>

 

Step 9

Lastly, because I'm using "response headers" in my multi-punch response list, I want to remove the checkbox next to them and also disable my respondents from selecting them as responses.

To do this, I need to insert the following code into the "Code in control" section of each Response Block Modality:

style="display:none" disabled="true"

TextBoxesNextToResponses_11_.png

Note: if you're using a skin/images to style your radio and checkboxes, the above style="display:none" code will not hide the radio/checkbox buttons from the response headers. In that case, you may need to write yourself a custom jQuery script that finds and removes the radio/checkboxes for the specific response headers.

Final thoughts

When all is said and done, you should have a screen that looks and acts similar to what's shown in the GIF demonstration below:

TextBoxesNextToResponses.gif

Have more questions? Submit a request

Comments