Add text boxes next to responses in a response block
Summary | You may have a requirement to use open-ended verbatim questions 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 | AskiaDesign |
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 the example below, 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:
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.):
Step 3
Add the following at the end of the long caption in each of the open-ended variables:
<span data-specify="1"> </span>
Change the span number accordingly (i.e. 1 for the first variable, 2 for the second, etc.):
Step 4
Add some routing options that only show the text input boxes if an "Other (specify)" option has been ticked:
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:
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:
Step 7
Go into each verbatim question'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.):
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:
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( " " ).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"
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: