I'm having respondents of a Qualtrics survey choose to allocate two different amounts of money to a list of people. So for each person, the respondent must choose to give either $0 or $10.
For the particular look and functionality, we decided on a side-by-side question with a "Scaled Response (Likert)" with just those two options and a Single Answer, so we get just one column with two answer choices on each row, only one of which can be selected. Moreover, we specifically want respondents to give $10 to half of the people, and $0 to the other half of the people, and have made this happen with Custom Validation. Because there's a decent amount of options, we just want to display on the page in real-time how many people have been given $10, and how many have been given $0 (i.e. how many radio buttons have been selected in each of the two answer columns).
I've seen many people ask about the total number of radio buttons selected, but not sure the answers given to those questions (which involves some sort of click-event listener) apply to a side-by-side question and, critically, I don't think differentiate between the two groups (i.e. if they work for the side-by-side, they would just display how many radio buttons have been clicked in total, and not by group). For the Custom Validation, clearly Qualtrics keeps exactly the count I want somewhere as I have it as "$10 (Count)" Is Equal to X, and "$0 (Count)" Is Equal to X, where X is half of the total number of people, but I'm not sure what snippet of code to use that myself in some Javascript.
Any suggestions or ideas on how to count the number of radio buttons selected in any one column of a side-by-side question? Thanks!
UPDATE: I've tried messing around with some Javascript that is definitely not working. I'm trying to just go through each column on the side-by-side question and add +1 to a counter whenever it finds one of the radio buttons has been selected in that column (I'm trying two different methods in the code below to see if either works). I then have the following in the HMTL of the question text:
You have allocated $0 to this number of groups: <span id="total2">0</span></span>
My Javascript:
Qualtrics.SurveyEngine.addOnReady(function()
{
var total1 = 0;
var total2 = 0;
document.observe( 'mousemove', function(event,element){
/*
Element ID (element.id) for SBS question type
QR~QID9#1~[row number (i.e. social group)]~[answer column number (i.e. $100 is 1, $0 is 2)]
*/
if (element.type == 'radio')
{
sumCol1();
function sumCol1() {
for(var i = 1; i <= 20; i++) {
if (jQuery("input[name="+'QR\~QID9\#1'+'\~'+i+'\~'+'1'+"]").is(":checked")) total1 = total1 + 1;
else total1=total1;
}
}
sumCol2();
function sumCol2() {
for(var i = 1; i <= 20; i++) {
if ($("input[name="+'QR\~QID9\#1'+'\~'+i+'\~'+'2'+"]:checked")) total2 = total2 + 1;
else total2=total2;
}
}
}
})
});
If anyone's curious or needs something similar, I have worked this out, and the following worked for me. Hope it's of use to someone else in the future!
Qualtrics.SurveyEngine.addOnReady(function()
{
var total1 = 0;
var total2 = 0;
var alloclarge=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var allocsmall=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
/*
Element ID (element.id) for SBS question type
QR~QID9#1~[row number (i.e. social group)]~[answer column number (i.e. $100 is 1, $0 is 2)]
*/
this.questionclick = function(event,element){
//for a single answer multiple choice question, the element type will be radio
if (element.type == 'radio')
{
var qType = this.getQuestionInfo().QuestionType; // get the question type code (SBS=side by side question)
if (qType=='SBS') {
// we need to split the element ID first by #
// var sbsElement = element.id.split('#')[1];
var matrxTQid = element.id.split('#')[0].split('~')[1]; // get question ID
var matrx = element.id.split('#')[1];
var colNum = matrx.split('~')[0]; // since column is first we need to separate it from the question ID by splitting at the # sign
}
var rowNum = element.id.split('~')[2]; // get row number
var eleNum = element.id.split('~')[3]; // get element number
for(var i = 1; i < 21; i++) {
if (eleNum==1 && rowNum==i && alloclarge[i-1]==0 && allocsmall[i-1]==0) {
total1=total1+1;
alloclarge[i-1]=1;
groupSum();
document.getElementById("total1").innerHTML=total1;
document.getElementById("total2").innerHTML=total2;
} else if (eleNum==2 && rowNum==i && alloclarge[i-1]==0 && allocsmall[i-1]==0) {
total2=total2+1;
allocsmall[i-1]=1;
groupSum();
document.getElementById("total1").innerHTML=total1;
document.getElementById("total2").innerHTML=total2;
} else if (eleNum==1 && rowNum==i && alloclarge[i-1]==0 && allocsmall[i-1]==1) {
total1=total1+1;
total2=total2-1;
alloclarge[i-1]=1;
allocsmall[i-1]=0;
groupSum();
document.getElementById("total1").innerHTML=total1;
document.getElementById("total2").innerHTML=total2;
} else if (eleNum==2 && rowNum==i && alloclarge[i-1]==1 && allocsmall[i-1]==0) {
total1=total1-1;
total2=total2+1;
alloclarge[i-1]=0;
allocsmall[i-1]=1;
groupSum();
document.getElementById("total1").innerHTML=total1;
document.getElementById("total2").innerHTML=total2;
} else {
total1=total1;
total2=total2;
alloclarge[i-1]=alloclarge[i-1];
allocsmall[i-1]=allocsmall[i-1];
document.getElementById("total1").innerHTML=total1;
document.getElementById("total2").innerHTML=total2;
}
}
function groupSum() {
if (total1 > 10) {
alert('You have allocated $100 to more than 10 groups');
}
else if (total2 > 10) {
alert('You have allocated $0 to more than 10 groups');
}
}
}
}});
With the following in the HTML of my question:
<div><br />
<span style="color:#000000;"><span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;">You have allocated $100 to this number of groups:
<strong><span id="total1" style="color:#E73F61;">0</span></span></span></span> </strong></div>
<span style="color:#000000;">You have allocated $0 to this number of groups: <strong><span id="total2" style="color:#E73F61;">0</span></span></strong>