How to use attribute data outputted by a plugin to create conditional logic in the timeline?

[1nathanliang]

Hi all, I'm trying to create conditional logic in my timeline by having people complete a task multiple times only if, after each time they do it, they indicate that they would like to repeat said task. The task—or the plugin which instantiates it—is called social-learning, and it's followed by a simple, default html-button-response plugin with two buttons that just asks participants if they want to either do the social-learning task again (up to 8 times) or move on to the next section.

What I'm struggling with is how I can use the html-survey-response button press which comes second in the loop to determine whether the timeline has them continuing along in the for loop (up to 8 loops) or if it breaks out (and sends them to the next section). I'm able to access that button press with continue_response = jsPsych.data.getLastTrialData().values()[0].response;, but. I don't know how I can use that value outside of the plugin to allow participants to exit the for loop prematurely.

I think this is fundamentally actually just an issue of trying to access the data from the last plugin trial outside of a plugin and set it as a variable—I've included the bare minimum of my code because it's quite long, but please lmk if you require more context. Thanks in advance for all the help!

// Selection learning
  var selectList = [];
  var numLabelSelectTrialsPerBlock = 1;
  var numSelectBlocks = 8;
  var selectNum = 1;

  // put in instructions about being fast here if we are interested in RTs
  var selectionInstr = {
    type: jsPsychInstructions,
    pages: ["In this part you will get a chance to sample from the opinions of various Americans. On each trial you will see 8 Americans on the screen. You will get to choose which of the 8 perspectives you would like to learn more about. Click NEXT to get started."],
    show_clickable_nav: true
  };

  selectList.push(selectionInstr);

  // selection trials

  // to balance where the target is on each trial
  var locationsTest = [];
  var locationTestList = [0, 1, 2, 3, 4, 5, 6, 7];

  var selectLearningPositions = [
    ["left", "right"],
    ["left", "right"],
    ["right", "left"],
    ["right", "left"],
  ];

  var selectionWordOrder = [
    "choiceFirst",
    "choiceFirst",
    "randomFirst",
    "randomFirst",
  ];

  var curLocationList = jsPsych.randomization.shuffle(locationTestList);
  var selectPositionsShuffled = jsPsych.randomization.shuffle(selectLearningPositions);
  var selectionWordOrderShuffled = jsPsych.randomization.shuffle(selectionWordOrder);


  var locationsTest = [];
  var locationTestList = [0, 1, 2, 3, 4, 5, 6, 7];

  var prodTestList = [];
  var numProdLabelTestTrialsPerBlock = 8;
  var prodTestTrialsIndex = [0, 1, 2, 3, 4, 5, 6, 7];
  var numProdTestBlocks = 1;
  var testProdNum = 1;


  for (i = 0; i < numSelectBlocks; i++) {
    for (j = 0; j < numLabelSelectTrialsPerBlock; j++) {

      if (continue_response == "1") {
        break;
      }

      var select = {
        type: jsPsychSelectionLearning,
        image1: stims[stimNames[curLocationList[0]]]["image"],
        image2: stims[stimNames[curLocationList[1]]]["image"],
        image3: stims[stimNames[curLocationList[2]]]["image"],
        image4: stims[stimNames[curLocationList[3]]]["image"],
        image5: stims[stimNames[curLocationList[4]]]["image"],
        image6: stims[stimNames[curLocationList[5]]]["image"],
        image7: stims[stimNames[curLocationList[6]]]["image"],
        image8: stims[stimNames[curLocationList[7]]]["image"],
        label1: stims[stimNames[curLocationList[0]]]["word"],
        label2: stims[stimNames[curLocationList[1]]]["word"],
        label3: stims[stimNames[curLocationList[2]]]["word"],
        label4: stims[stimNames[curLocationList[3]]]["word"],
        label5: stims[stimNames[curLocationList[4]]]["word"],
        label6: stims[stimNames[curLocationList[5]]]["word"],
        label7: stims[stimNames[curLocationList[6]]]["word"],
        label8: stims[stimNames[curLocationList[7]]]["word"],
        curLocationList: curLocationList,
        stims: stims,
        stimNames: stimNames,
        learningPos: selectPositionsShuffled[j],
        wordOrder: selectionWordOrderShuffled[j],
        choices: ["START"],
        data: {trialNum: selectNum, trialType: "selection"}
      };
      
      var continue_trial = {
        type: jsPsychHtmlButtonResponse,
        stimulus: "<p>Would you like to read more opinions?</p>",
        choices: ["Yes, read more opinions", "No, I'm done reading"],
        on_finish: 
          function(data) {
            continue_response = jsPsych.data.getLastTrialData().values()[0].response;
            if (continue_response == 1) {
              console.log("continue_response: " + 1);
            }
          }
        };
    
      selectList.push(select, continue_trial);
      selectNum++;

    }
  }

[ChristopheBossens]

I have created a minimal example of what I think you want to achieve using only the jsPsychHtmlButtonResponse components. It is based on the concept of condition timelines..

The basic idea is that you have two trials, select and continue_trial, which can in principle occur 8 times across 4 blocks. These two trials are added in a timeline to blockTrial. This trial has a conditional function, which is executed right before the start of its corresponding timeline. The timeline will only be executed if this function returns true. This should happen on the first trial of a block, or if the response to the last question was to read more opinions. This function needs the currentBlockTrial variable to keep track of the current trial when the experiment is actually running.

   const jsPsych = initJsPsych();

    let numSelectBlocks = 4;
    let numLabelSelectTrialsPerBlock = 8;

    let trials = [];

    let  currentBlockTrial = -1;
    for (i = 0; i < numSelectBlocks; i++) {
        for (j = 0; j < numLabelSelectTrialsPerBlock; j++) {
            var select = {
                type: jsPsychHtmlButtonResponse,
                prompt: "Block " + i.toString() + " trial " + j.toString(),
                stimulus: "<p>This is an example opinion</p>",
                choices: ["Agree", "Disagree"],
            };

            var continue_trial = {
                type: jsPsychHtmlButtonResponse,
                stimulus: "<p>Would you like to read more opinions?</p>",
                choices: ["Yes, read more opinions", "No, I'm done reading"],
                on_finish: 
                function(data) {
                    console.log(data);
                }
            };

            var blockTrial = {
                timeline : [select, continue_trial],
                conditional_function: function(){
                    currentBlockTrial = (currentBlockTrial + 1)%numLabelSelectTrialsPerBlock;
                    if(currentBlockTrial=== 0){
                        return true;
                    }  else {
                        let data = jsPsych.data.get().last(1).values()[0];
                        return data.response === 0;
                    }
                }
            }
            
            trials.push(blockTrial);
        }
    }

    jsPsych.run([...trials]);

let me know if this is what you need!

[1nathanliang]

This worked perfectly—you are the BEST!! Thank you so much, you're a life saver :)