Attached is a 5.4.9 example QEX with this script and a few merged variables.

Who is this article for?

We've been asked by a few clients in the past if it's possible to deselect a single-punch radio button.

Why? These clients run several merged screens worth of single-punch variables, and they need to allow their respondents the ability to deselect their answers if the questions allow for DKs.

You could technically change the variable to a multi-punch and set every response as "exclusive", but then this poses another problem when it comes to analysing the data (if your clients want to see only single-punch data and not multi-punch data, meaning you'll need to recode all of your multi-punch variables back into single-punches).

The technicals

By default, when you use a single-punch variable, the HTML code that is generated on the page uses the HTML <input type="radio"> control. This control has a DOM attribute event called "checked". In every modern browser, this input cannot be unticked normally. This is not an Askia limitation; it's simply how the "radio" control functions according to the default HTML web standards.

You can read more about all of the different properties of the "radio" control here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Fortunately, using a little JavaScript, we can toggle this DOM "checked" event to be either "true" or "false".

Caution #1

This should work with any of Askia's new ADPs (Matter, One, and Chroma) that have the "Additional HTML for Footer section" option, but it will not work with ADCs.

To be more specific, the Statements and StatementsOther ADC controls do not use standard <input type="radio"> HTML code, so the below script will not work for those controls.

The script

<script>
$(document).ready(function() {

$(function() {
 var allRadios = $('input[type=radio]')
 var radioChecked;

var setCurrent =
 function(e) {
 var obj = e.target;

radioChecked = $(obj).attr('checked');
 }

var setCheck =
 function(e) {

if (e.type == 'keypress' && e.charCode != 32) {
 return false;
 }

var obj = e.target;

if (radioChecked) {
 $(obj).attr('checked', false);
 } else {
 $(obj).attr('checked', true);
 }
 }

$.each(allRadios, function(i, val) {
 var label = $('label[for=' + $(this).attr("id") + ']');

$(this).bind('mousedown keydown', function(e) {
 setCurrent(e);
 });

label.bind('mousedown keydown', function(e) {
 e.target = $('#' + $(this).attr("for"));
 setCurrent(e);
 });

$(this).bind('click', function(e) {
 setCheck(e);
 });

});

});
});
</script>

How

There are two preferred placements:

1) You can use it on a single screen by inserting it into a label, like so:

or

2a) If you're using legacy internet options, you can insert it into the <footer> of the survey so it can be used across all screens (Options > Internet Options > Header/Footer > Footer), like so:

2b) If you're using an ADP, you'll need to shrink/minify the code to fit all on a single line (I used https://jscompress.com/), and then paste it into the (Options > Internet Options > ADP properties > Additional HTML for Foot section):

<script>$(document).ready(function(){$(function(){function i(t){var n=t.target;r=$(n).attr("checked")}var r,t=$("input[type=radio]");$.each(t,function(t,n){var e=$("label[for="+$(this).attr("id")+"]");$(this).bind("mousedown keydown",function(t){i(t)}),e.bind("mousedown keydown",function(t){t.target=$("#"+$(this).attr("for")),i(t)}),$(this).bind("click",function(t){!function(t){if("keypress"==t.type&&32!=t.charCode)return;var n=t.target;r?$(n).attr("checked",!1):$(n).attr("checked",!0)}(t)})})})});</script>

Caution #2

When using "During" routing on a merged screen, the value of the selected variable is still present while on that screen; please be careful when using "During" routing to evaluate "Only Ask If / Do Not Ask" routings on that screen when using this script.

See GIF of a demonstration of what you should be aware of:

In my example, the value "1" is set on the variable during that screen. If it is unticked once you submit past that page, it will not be stored in the variable, so your data should still be valid.

Attached is a 5.4.9 example QEX with this script and a few merged variables.

If you have any questions, please reach out to Support: support@askia.com