I would like participants in a study to allocate 100 points between two participants (A and
. Points are converted into cents at different rates. With help, I now have a javascript code that works when the constant sum question is of Choices type.
To make the question more intuitive, I'd like to change it to Bars type. However, all the formatting I had with the JS code gets messed up.
Can you give me advice on how to change my JS code for a constant sum question of Bars type?
Here is my code now:
Qualtrics.SurveyEngine.addOnload(function()
{
var inputs = $(this.getQuestionContainer()).select('input[type="text"]');
$(inputs[0]).insert({after: '<div id="input1" style="display: inline-block; width: 600px; \\
text-align: center, left; font-family:arial,helvetica,sans-serif;"> \\
\\
<span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#0000CD;"></span> points for <u>PARTICIPANT A</u> worth 1 cent each. \\
She gets 0 cents. \\
<span style="color:#B22222;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"> </div>'});
$(inputs[1]).insert({after: '<div id="input2" style="display: inline-block; width: 600px; \\
text-align: left; font-family:arial,helvetica,sans-serif;"> \\
\\
<span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#800080;"></span> points for <u> PARTICIPANT B</u> worth 2 cents each. \\
She gets 0 cents. <span style="color:#800080;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">\\
</div>'});
$(inputs[2]).insert({after: '<span style="display: inline-block; width: 600px;"></span>'});
$('QR~QID8~1').on('input', function () {
input0 = $('QR~QID8~1').value;
var inputsum0 = parseInt(input0);
$('input1').innerHTML = '';
if ($('QR~QID8~1').value == '') {
$('input1').insert(' <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#0000CD;"></span> points for <u>PARTICIPANT A</u> worth 1 cent each. \\
She gets 0 cents. <span style="color:#B22222;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"> ' + ' ');
} else {
$('input1').insert(' <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#0000CD;"></span> points for <u>PARTICIPANT A</u> worth 1 cent each. \\
She gets </span> \\
</span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><u>\\
' + (inputsum0 * 1).toFixed(0) + '</u> <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<span style="color:#B22222;"></span> cents. <span style="color:#B22222;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">\\
');
}
})
$('QR~QID8~2').on('input', function () {
input1 = $('QR~QID8~2').value;
var inputsum1 = parseInt(input1);
$('input2').innerHTML = '';
if ($('QR~QID8~2').value == '') {
$('input2').insert(' <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#800080;"></span> points for <u> PARTICIPANT B</u> worth 2 cents each. \\
She gets 0 cents. <span style="color:#800080;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">\\
' + ' ');
} else {
$('input2').insert(' <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<strong><span style="color:#800080;"></span> points for <u> PARTICIPANT B</u> worth 2 cents each. \\
She gets </span>\\
</span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><u>\\
' + (inputsum1 * 2).toFixed(0) + '</u> <span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">\\
<span style="color:#800080;"></span> cents. <span style="color:#800080;"></span>\\
</strong></span></span><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">\\
');
}
})
});
Here are two images of how the question looks like (with Choices type and with Bars type)
!
!
Any feedback would be really helpful! Thanks!
.
