Loop_function for SurveyMultiChoice

[DondersCitylab]

Hi all,

I am trying to create a loop when a certain answer is given. Participants will see an animation and then they get a multichoice question in which they can select to see the animation again. If they choose to see the animation again, they will get the question again after the animation. However, I can't get the loop_function to work. With the code below it'll repeat the animation & question once regardless of the answer. Then I get the following error:

loop_test.html:136 Uncaught ReferenceError: data is not defined
at Object.loop_function (loop_test.html:136:13)
at TimelineNode.advance (jspsych.js:2431:49)
at TimelineNode.advance (jspsych.js:2394:99)
at JsPsych.nextTrial (jspsych.js:3040:44)
at onExtensionCallbacksFinished (jspsych.js:2846:30)
at JsPsych.finishTrial (jspsych.js:2871:17)
at HTMLFormElement. (plugin-survey-multi-choice.js:214:28)

I am using JsPsych version 7.3. My experiment will be both in English and Dutch. I started to do the loop just for the English version but will eventually make it for both languages.
Any help would be greatly appreciated!

    var jsPsych = initJsPsych({
        display_element: 'jspsych-target'
    });

    /* create timeline */
    var timeline = [];

    /* preload any images if needed*/
    var preload = {
        type: jsPsychPreload,
        images: ['img/illusie/alternatedisks.png', 'img/illusie/purpledisk.png', 'img/slider-brain.svg', 'img/illusie/rabbit-duck.jpeg', 'img/illusie/rubins-vase.jpg', 'img/illusie/alternatedisks-half.png', 'img/illusie/purpledisk-half.png', 'img/illusie/blackdot.png', 'img/illusie/illusie_links.png', 'img/illusie/illusie_rechts.png', 'img/illusie/illusie2.png']
    };

    timeline.push(preload);

/* animation sequence */
 var animation_sequence = ["img/illusie/purpledisk.png", "img/illusie/alternatedisks.png"];

 /* animatie trial */
 var animation_trial2 = {
     type: jsPsychAnimation,
     stimuli: animation_sequence,
     sequence_reps: 5, // specify number of sequence repeats (back to 50)
     frame_time: 300, // time per image in ms
 };

 timeline.push(animation_trial2);

 /* Q2 illusie */
 var Q2Illussie = {
     type: jsPsychSurveyMultiChoice,
     questions: [
         {
             prompt: function () {
                 if (localStorage.lang == "EN") {
                     return "<h3>Which colours did you see on the left and right side of the animation?</h3>"
                 } else if (localStorage.lang == "NL") {
                     return "<h3>Welke kleuren zag jij aan de linker en rechterkant van de animatie?</h3>"
                 }
             },
             options: function () {
                 if (localStorage.lang == "EN") {
                     return ['I would like to see the animation again before I can answer', 'Left: mainly blue/purple & Right: mainly pink/orange', 'Left: mainly pink/orange & Right: mainly blue/purple', 'I saw a colour difference but I do not know which colours', 'I did not see a difference in colours']
                 } else if (localStorage.lang == "NL") {
                     return ['Ik wil de animatie nog een keer zien voordat ik kan antwoorden', 'Links: vooral blauw/paars & Rechts: vooral roze/oranje', 'Links: vooral roze/oranje & Rechts: vooral blauw/paars', 'Ik zag een kleurverschil maar weet niet welke kleuren', 'Ik zag geen verschil in kleuren']
                 }
             }, /* do not add paragraph or header tag */
             required: true,
         }],
 };

 timeline.push(Q2Illussie);

var loop_node = {
        timeline: [animation_trial2, Q2Illussie],
        loop_function: function (allData) {
            if (data.values()[0].response == {Q0: 'I would like to see the animation again before I can answer'}) {
                return true; // loop again
            } else {
                return false; // continue
            }
        }

    };

    timeline.push(loop_node);

/* end experiment */
    var end = {
        type: jsPsychImageButtonResponse,
        stimulus: 'img/blue.png', // add QR code to citylab page
        choices: function () {
            if (localStorage.lang == "EN") {
                return ['<a id="homepage">Back to homepage</a>']
            } else if (localStorage.lang == "NL") {
                return ['<a id="homepage">Terug naar start</a>']
            }
        },
        prompt: function () {
            if (localStorage.lang == "EN") {
                return '<p class="jspsych-image-button-response-prompt">Would you like to learn more? Scan the QR-code!</p>'
            } else if (localStorage.lang == "NL") {
                return '<p class="jspsych-image-button-response-prompt">Wil je meer leren? Scan de QR-code!</p>'
            }
        }
    };

    timeline.push(end);

    /* run the experiment */
    jsPsych.run(timeline);

[becky-gilbert]

Hi @DondersCitylab, I think one problem is that inside your loop_function, the name of the "data" variable that you're referencing needs to match the name of the "data" argument that's passed into the loop function. You can call this variable whatever you want, but the name needs to be the same, otherwise you'll get that "uncaught reference" error inside the loop function.

In your code, the data argument that's passed into the loop function is called allData, so changing the data variable name inside the loop function code to allData should fix that problem:

loop_function: function (allData) {
  if (allData.values()[0].response == {Q0: 'I would like to see the animation again before I can answer'}) {
    return true; // loop again
  } else {
    return false; // continue
  }
}

And I don't know for sure if this is the case in your code, but you might also have a problem with the way that you're trying to access the participant's response from the last timeline loop. If so, one trick is to print the value of the data collection that's passed into the loop function to the console, so that you can see how it's structured:

loop_function: function (allData) {
  console.log("last loop data: ", allData.values());
  // ... etc ...
}

Since you have two trials in the timeline that you're looping over (timeline: [animation_trial2, Q2Illussie]) I think you'll have two data objects in the data collection array. So you might need to access the response value from the second data object in the allData array, which would mean indexing with 1 instead of 0: allData.values()[1].response.

Does that help?