Conditional loop using survey-multi-choice plugin

[miriamdietz]

Hi everyone,
I am currently programming an online experiment using the jsPsych version 7.1.2.
I would like to include comprehension checks in a multiple choice format (using the survey-multi-choice plugin) but I am struggling with creating a loop that takes the participant back to the comprehension check if they chose the wrong answer.

When executing the code, it always loops the question regardless of the answer and feedback provided.

Could someone help me out on this? Any tip is appreciated.

Thank you in advance!

Here is the code:

     //compcheck 1: question and options
     var comprehension_question1 = {
     type: jsPsychSurveyMultiChoice,
     questions: [
        {prompt: '<div align=center><img src="jspsych/img/Like.bmp" width="200px"; height: "200px"></img></div>' +
                 '<div align=center><b>The "thumbs up" symbol indicates that:</b></div>',
          options: [
            'A rater likes me',
            'My prediction was correct',
            'A rater dislikes me',
            'My prediction was incorrect'
          ],

          required: true
        },
      ],
    preamble: "<h3>Please answer the following question.</h3>"
    };


    //compcheck1: this function returns feedback based on response given
    var comp1_feedback = {
      type: jsPsychHtmlButtonResponse,
      stimulus: function(){
        var data = jsPsych.data.getLastTrialData().values()[0]; 
        var answer_Q1 = data.response.Q0; 
        if(answer_Q1.includes('A rater likes me')) { 
          return "<p><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
                     "<p align='center'><b>CORRECT!</b> Indeed, this symbol means that a rater likes you and is interested in becoming 
                     friends.</p>";
        } else {
          return "<p align='center'><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
                     "<p align='center'><b>INCORRECT.</b> This symbol means that a rater likes you. </p>" 
        }
      },
      choices: ['Next'],
      on_finish: function(data){ 
        if(data.stimulus == "<p align='center'><b>CORRECT!</b> Indeed, this symbol means that a rater likes you and is interested in becoming friends.</p>") {
          data.correct = true; 
        } else {
          data.correct = false; 
        }
      }
    };

    //compcheck1: if answer incorrect, compcheck1 will be repeated until correct response inserted
    var comp1_loop = {
      timeline: [comprehension_question1, comp1_feedback], 
     loop_function: function(data){
     if (data.correct == true) {
       return false
     } else {
       return true
     }
    }
    }

[becky-gilbert]

Hi @miriamdietz, I'm guessing the scoring isn't working because you're using the includes Javascript function to check the response, but includes is meant to be called on arrays. In your case, you've retrieved the MC option that the participant selected from the responses object as a string:

var answer_Q1 = data.response.Q0; 

So try checking the response string like this:

if(answer_Q1 == 'A rater likes me') { 

[miriamdietz]

The loop still does not work and the question keeps looping regardless of the response.
I tried so many things and am running out of ideas. I still think the problem is in the loop_function itself, somehow it does not seem to know what the correct response is.

Do you maybe have another suggestion for me?

The code looks like this now:

` //compcheck 1: question and options
   var comprehension_question1 = {
     type: jsPsychSurveyMultiChoice,
     questions: [
        {prompt: '<div align=center><img src="jspsych/img/Like.bmp" width="200px"; height: "200px"></img></div>' +
                 '<div align=center><b>The "thumbs up" symbol indicates that:</b></div>',
          options: [
            'A rater likes me',
            'My prediction was correct',
            'A rater dislikes me',
            'My prediction was incorrect'
          ],
          required: true
        },
      ],
    preamble: "<h3>Please answer the following question.</h3>",
    on_finish: function(data) {
      var answer_Q1 = data.response.Q0; 
        if(answer_Q1 == 'A rater likes me') {
          data.correct = true
        } else {
          data.correct = false
        }
     }
  };

//compcheck1: this function returns feedback based on response given
var comp1_feedback = {
  type: jsPsychHtmlButtonResponse,
  stimulus: function(){
    var last_resp_correct = jsPsych.data.getLastTrialData().values()[0].correct; 
    if (last_resp_correct) {
    return "<p><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
               "<p align='center'><b>CORRECT!</b> Indeed, this symbol means that a rater likes you and is interested in becoming friends </p>"
  } else {
    return "<p align='center'><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
               "<p align='center'><b>INCORRECT.</b> This symbol means that a rater likes you. </p>" 
  }},
  choices: ['Next']
};

//compcheck1: if answer incorrect, compcheck1 will be repeated until correct response inserted
var comp1_loop = {
  timeline: [comprehension_question1, comp1_feedback], 
  loop_function: function(data){ 
    if (data.values()[1].correct == true) { 
    return false; 
 } else { 
    return true;
 }
 }
};

timeline.push(comp1_loop)`

[jodeleeuw]

Hi @miriamdietz -- is your experiment available online anywhere? That might help us debug.

[becky-gilbert]

Hi @miriamdietz, since you last posted your code, it looks like you moved the accuracy scoring from the 2nd trial in your loop timeline (comp1_feedback) to the 1st trial (comprehension_question1). So now when you look for the value of correct in the loop function, you want to look at the data from the 1st trial by indexing data.values() with 0 instead of 1:

loop_function: function(data){ 
  if (data.values()[0].correct == true) {   

It might also help for you to look at the data that is passed to the loop function with console.log. This will help you figure out where the correct property is stored, and check that the responses are being scored correctly:

loop_function: function(data){ 
  console.log('data: ', data.values());
  if (data.values()[0].correct == true) {   

Please let us know if that helps!

[miriamdietz]

Hi @becky-gilbert @jodeleeuw,

The last tip worked! Thank you so much for your help!

Here is the working code, maybe it is helping someone else, too:

       //compcheck 1: question and options
     var comprehension_question1 = {
     type: jsPsychSurveyMultiChoice,
     questions: [
        {prompt: '<div align=center><img src="jspsych/img/Like.bmp" width="200px"; height: "200px"></img></div>' +
                 '<div align=center><b>The "thumbs up" symbol indicates that:</b></div>',
          options: [
            'A rater likes me',
            'My prediction was correct',
            'A rater dislikes me',
            'My prediction was incorrect'
          ],

          required: true
        },
      ],
    preamble: "<h3>Please answer the following question.</h3>",
    
    on_finish: function(data) {
      //var data = jsPsych.data.getLastTrialData().values()[0]; 
      var answer_Q1 = data.response.Q0; 
        if(answer_Q1 == 'A rater likes me') {
          data.correct = true
        } else {
          data.correct = false
        }}
       };
       
    //compcheck1: this function returns feedback based on response given
    var comp1_feedback = {
      type: jsPsychHtmlButtonResponse,
      stimulus: function(){
        var last_resp_correct = jsPsych.data.getLastTrialData().values()[0].correct; 
        if (last_resp_correct) {
        return "<p><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
               "<p align='center'><b>CORRECT!</b> Indeed, this symbol means that a rater likes you and is interested in becoming friends.</p>"
      } else {
        return "<p align='center'><img src='jspsych/img/Like.bmp' width='200px'; height: '200px'></img></p>" +
               "<p align='center'><b>INCORRECT.</b> This symbol means that a rater likes you. </p>" 
      }},
      choices: ['Next']
    };

    //compcheck1: if answer incorrect, compcheck1 will be repeated until correct response inserted
    var comp1_loop = {
      timeline: [comprehension_question1, comp1_feedback], 
      loop_function: function(data){ 
      console.log('data: ', data.values());
      if (data.values()[0].correct == true) {   
      return false; 
    } else { 
      return true;
     }}
    };
    timeline.push(comp1_loop);

[becky-gilbert]

Yay! Thanks for letting us know 😃