Search code examples
javascriptjqueryjspsych

Storing data with nested .each() function causes to replicate values

I've modified a survey-multi-choice plugin from JsPsych, in order to get responses in the form of checkboxes, instead of radio-buttons, since I need to present an image to the user, followed by 4 alternatives, like this:

enter image description here

Where A, B, C and D are also images, with their respective checkbox below each one. This structure must be presented more than once, like this:

enter image description here

So in this example, the expected output would be:

 {"Q0":["Option A","Option B"]} //this is the first "question" displayed 
 {"Q1":["Option B","Option C"]} //second one
 {"Q2":["Option B","Option D"]} //third one

But instead I get the first answer replicated for the rest of the questions:

 {"Q0":["Option A","Option B"]} //this is the first "question" displayed 
 {"Q1":["Option A","Option B"]} //second one
 {"Q2":["Option A","Option B"]} //third one

My code is provided below:

 $("div." + plugin_id_name + "-question").each(function(index) {
    var id = "Q" + index;
    var val = [];
    var a = $(".jspsych-survey-multi-choicemrbeta-option");

    $("input:checkbox:checked").each(function(){        
       val.push($(this).attr("value"));
     });

    var obje = {};
    obje[id] = val;
    $.extend(question_data, obje);

  });

I've tried tracking down the values generated on each step by printing them on console, so I'm guessing the problem is how I'm implementing those nested loops, thus the name of this question.

I've tried different approaches when implementing this loop, without better results:

for (var j = 0; j < trial.options[index].length; j++) {
  if ($('jspsych-survey-multi-choicemrbeta-response-' + j).is(':checked')) {
    val.push($(this).attr("value"));
  }
}

A working example of my full code can be found here, for you to test it (look for the jspsych-survey-multi-choicemrbeta.js file, from line #141). CSS isn't included so it'll look slightly different.

Please note that the output of this code is a CSV file, and the full set of responses is given on a single cell, since all those questions belongs to the same JsPsych "trial".

Thanks for your help.

Solution

  • The inner loop iterates over all checkboxes, not only the ones belonging to the question.

    Assuming the checkboxes are descendants of the div for the associated question, you should change the inner loop from this:

    $("input:checkbox:checked").each( ...

    to this:

    $(this).find("input:checkbox:checked").each( ...