Allowing participant to choose which condition of the experiment that they would like to run

[rbruno1]

Here is the first part of my code. It allows the participant to choose the condition of the experiment they would like to take(labeled A,B, or C.).

jsPsych.plugins["choose_option"] = (() => {
    return {
      info: {
        parameters: {
          // leave this empty
       },
      },
      trial(display_element, trial) {
const page = document.createElement("div");
const condition = document.createElement("div");
const conditionLabel = document.createElement("label");
conditionLabel.textContent = "Condition: ";
const conditionSelect = document.createElement("select");
const conditionA = document.createElement("option");
conditionA.textContent = "A";
const conditionB = document.createElement("option");
conditionB.textContent = "B";
const conditionC = document.createElement("option");
conditionC.textContent = "C";

conditionSelect.append(conditionA);
conditionSelect.append(conditionB);
conditionSelect.append(conditionC);
condition.append(conditionLabel);
condition.append(conditionSelect);
const startButton = document.createElement("button");
startButton.textContent = "Start";
startButton.addEventListener("click", () => {
                  jsPsych.finishTrial({
      selectedText: conditionSelect.options[conditionSelect.selectedIndex].text
})
})
page.append(condition);
page.append(startButton);
display_element.append(page);
      },
   };
  })();

const selectConditionTrial = {
  type: "choose_option",
  on_finish: function(data) {
    switch (data.selectedText) {
    case "A":
      return;
    case "B":
      return;
    case "C":
      return;
    default:
      return;
    } 
  }
}

Here is the next part. It is the actual experiment.

var welcome = {
  type: "html-keyboard-response",
  stimulus: "Welcome to the experiment. Press any key to begin."
}
var instructions = {
  type: "html-keyboard-response",
  stimulus: "<p>In this experiment, two images will appear on the screen. If the audio (or audio segment) matches the image on the left, press the letter F on the keyboard as fast as you can. If the audio (or audio segment) matches the image on the right, press the letter J as fast as you can.</p>" +
          "<p>Press any key to begin.</p>", 
  post_trial_gap: 1000
}

var video_trial_1 = {
  type:'video-keyboard-response',
  stimulus: [
    'banjobandage200f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'banjo', correct_response: 'j'},
  width:1000
}

var video_trial_2 = {
  type:'video-keyboard-response',
  stimulus: [
    'banjobandage300j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'banjo', correct_response: 'j'},
  width:1000
}

var video_trial_3 = {
  type:'video-keyboard-response',
  stimulus: [
    'bandagebanjo0j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'bandage', correct_response: 'f'},
  width:1000
}

var video_trial_4 = {
  type:'video-keyboard-response',
  stimulus: [
    'bandagebanjo300f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'bandage', correct_response: 'f'},
  width:1000
}

var video_trial_5 = {
  type:'video-keyboard-response',
  stimulus: [
    'bandagebanjo100f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'bandage', correct_response: 'f'},
  width:1000
}

var video_trial_6 = {
  type:'video-keyboard-response',
  stimulus: [
    'banjobandage0f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'banjo', correct_response: 'j'},
  width:1000
}

var video_trial_7 = {
  type:'video-keyboard-response',
  stimulus: [
    'banjobandage100j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'banjo', correct_response: 'f'},
  width:1000
}

var video_trial_8 = {
  type:'video-keyboard-response',
  stimulus: [
    'bandagebanjo200j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'bandage', correct_response: 'j'},
  width:1000
}

var video_trial_9 = {
  type:'video-keyboard-response',
  stimulus: [
    'muffinmushroom0f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'muffin', correct_response: 'j'},
  width:1000
}

var video_trial_10 = {
  type:'video-keyboard-response',
  stimulus: [
    'muffinmushroom300j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'muffin', correct_response: 'f'},
  width:1000
}

var video_trial_11 = {
  type:'video-keyboard-response',
  stimulus: [
    'mushroommuffin200j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'mushroom', correct_response: 'j'},
  width:1000
}

var video_trial_12 = {
  type:'video-keyboard-response',
  stimulus: [
    'muffinmushroom200f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'muffin', correct_response: 'f'},
  width:1000
}

var video_trial_13 = {
  type:'video-keyboard-response',
  stimulus: [
    'muffinmushroom100j.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'muffin', correct_response: 'j'},
  width:1000
}

var video_trial_14 = {
  type:'video-keyboard-response',
  stimulus: [
    'mushroommuffin100f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'mushroom', correct_response: 'f'},
  width:1000
}

var video_trial_15 = {
  type:'video-keyboard-response',
  stimulus: [
    'mushroommuffin300f.mp4'
  ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'mushroom', correct_response: 'f'},
  width:1000
}

var video_trial_16 = {
  type:'video-keyboard-response',
  stimulus: [
    'mushroommuffin0j.mp4'
    ],
  post_trial_gap: 1000,
  choices: ['f', 'j'],
  data: {condition: 'mushroom', correct_response: 'j'},
  width:1000
}

var goodbye = {
  type: "html-keyboard-response",
  stimulus: "Thank you for your participation! Press any key to see how you did on the following page!"
}

jsPsych.init({
  timeline: [welcome, instructions, selectConditionTrial, video_trial_1, video_trial_2, video_trial_3, video_trial_4, video_trial_5, video_trial_6, video_trial_7, video_trial_8, video_trial_9, video_trial_10, video_trial_11, video_trial_12, video_trial_13, video_trial_14, video_trial_15, video_trial_16, goodbye],
  on_finish: function () {
    jsPsych.data.displayData();
  }
})

The problem is that I have not found a way to combine the two ideas and make a different set of trials run depending on what condition the participant selected. Any suggestions would be appreciated.

[einGlasRotwein]

Hey,

Have you looked into conditional timelines? I am not sure whether I understand your design, but could you maybe just give them a trial where they choose the condition (it seems like you are writing your own code for this, but maybe the button response trial is fine for this?). Then, you have separate timelines for each condition that are wrapped in a conditional trial. Basically, the timeline for a condition is then only run if participants clicked the corresponding button in the previous condition.

[rbruno1]

That is what I was thinking. But i don't even know how to connect the two parts. How is the corresponding button defined in the first code so that I can bring it up later to run a certain collection of stimuli?

[jodeleeuw]

Check out the docs on how to work with jsPsych's data objects.

[jodeleeuw]

Also, see the example on the conditional timeline documentation, which covers a pretty similar use case.