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">&nbsp;</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( "&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"

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: