Numerical response to grid/radio entry on one page

Hi there,

I would like to do the following:

In the upper part of the page/screen I have grid- or radio like input field. E.g. a respondent can choose option A or B. (Preferebly these would be buttons or tiles but this is of lesser concern at the moment).

In the lower part of the page/screen respondents can see how parameters change as they choose option A or B. I.e. if they select A, then X=1 and Y=1 and if they select B, then X=2 and Y=2.

The parameters should automatically change as option A and B are selected, such that the respondent can see what happens as they alternate their choice. The option that is selected when they leave the page, will be the value that is written and will count as their decision.

I've simply tried the standard grid input where I tried to let the grid variable communicate with a function in javascript (Advanced --> HTML <head> Tag). Q99_r1 is the row response of the grid question:

<script type="text/javascript">

function Calc()
{

var x1 = Number(document.getElementById("Q99_r1").value);
if(x1 == 1){document.getElementById("Q99_vb").value = 3;}
if(x1 == 2){document.getElementById("Q99_vb").value = 99;}

}

</script>

Subsequently, I entered some html code in the Footer of the Grid Question:

<table style="float: left;border:1px red solid" border="0" cellpadding="1" cellspacing="" width="30%">
<tr>
<td style="text-align:center" colspan="2"><b>TODAY</b></td>
</tr>
<tr>
<td></td><td>REVENUE</td>
</tr>
<tr>
<td>PRODUCT1</td>
<td><input name="Q99_vb" id="Q99_vb" size="3">€</td>
</tr>
<tr height = 40px>
<td></td><td></td>
</tr>
</table>
https://legacy.sawtoothsoftware.com/forum/qa-plugin/q2a-captcha-antibot-master/AntiBotCaptcha.php?image=1611165376

This doesn't work... In the free-format I'm somewhat stuck on getting an input field that is radio/button and mutually exclusive.
https://legacy.sawtoothsoftware.com/forum/qa-plugin/q2a-captcha-antibot-master/AntiBotCaptcha.php?image=1611165376
Any suggestions? Help would be greatly appreciated.

Thanks,https://legacy.sawtoothsoftware.com/forum/qa-plugin/q2a-captcha-antibot-master/AntiBotCaptcha.php?image=1611165376
Tom

asked Jan 20 by Tom

In a normal grid question, there isn't an element with the ID "[QUESTION NAME]_r1." The two radio buttons will have IDs like "[QUESTION NAME]_r1_1" and "[QUESTION NAME]_r1_2." You could get the state of these two input elements like this:

var isFirstChecked = document.getElementById('Q99_r1_1').checked;

But the even easier option would probably be to use SSI_GetValue, a JavaScript function that comes baked into Lighthouse Studio. You can replace your "x1" line with this:

var x1 = SSI_GetValue('Q99_r1');

Does that help?

commented Jan 20 by Zachary Platinum

(164,025 points)

Thanks for your reply. Still can't make it work though.
Two things:
My grid is 1 x 2 (one row, two columns). Respondents can only select one option. So "Q99_r1" = 2 if the second column option is selected. This also shows if I let the variable appear on the next screen ([% Q99_r1 %]. Should I implement the grid question differently?

If I try in Advanced --> HTML <head> Tag:

<script type="text/javascript">

var x1 = SSI_GetValue('Q99_r1');
if(x1 == 1){document.getElementById('Q99_vb').value = 3;}
if(x1 == 2){document.getElementById('Q99_vb').value = 99;}

</script>

And in Question Text --> Footer:
<table>
<tr>
<td><input name='Q99_vb' id='Q99_vb' size="3"></td>
</tr>
</table>

It doesn't work.

I tried Number(SSI_GetValue('Q99_r1'); in case it generates a string. Yet this also doesn't help.

Any help would again be appreciated.

Best,
Tom

commented Jan 21 by Tom

In your original posting, your code was contained within a "Calc" function, but the snippet didn't include where this function was called. In your comment, this function doesn't exist. Does this function still exist in your .ssi and, if so, is it getting called from anywhere?

I suspect that it isn't getting called, meaning your JavaScript will run only once - right when the browser gets to that part of the HTML - then never again. There needs to be something to tell the browser to run this code everytime the radio button changes. If you're using graphical radio buttons and checkboxes, Lighthouse Studio's baked-in way of doing this is SSI_CustomGraphicalRadiobox and SSI_CustomGraphicalCheckbox. Try surrounding your three script lines like this:

<script>
function SSI_CustomGraphicalRadiobox() {

    // code to run everytime a radio button changes...

}
</script>

commented Jan 21 by Zachary Platinum

(164,025 points)

Works like a charm! Thanks!

commented Jan 27 by Tom

Most popular tags

Have an idea?

Numerical response to grid/radio entry on one page

Your comment on this question:

Your solution to the original question