modify prompt display order

[lily2brain]

Hi guys, I would like the respective question (prompt) for each stimulus (image) to be shown before the image, it would be like this: first the question with a certain length of time on the screen and then the image. In my script the image and the question are shown on the same screen, and I wish that didn't happen. I look forward to any possibility :)

// create blockstimuli_1_free
	var blockstimuli_1_free = [
      	  {stimulus: 'image1.jpg', prompt: "<p>Qual expressa medo m?</p>", data: {correct_response: '1'}},
	  {stimulus: 'image2.jpg', prompt:"<p>Qual expressa alegria?</p>", data: {correct_response: '0'}}, 
          {stimulus: 'image3.jpg', prompt:"<p>Qual expressa tristeza?</p>", data: {correct_response: '0'}}, 
          {stimulus: 'image4.jpg', prompt:"<p>Qual expressa nojo?</p>", data: {correct_response: '1'}}, 
          {stimulus: 'image5.jpg', prompt:"<p>Qual expressa raiva?</p>", data: {correct_response: '0'}}, 
          {stimulus: 'image6.jpg', prompt:"<p>Qual expressa surpresa?</p>", data: {correct_response: '1'}}, 
	];
	
	// create blocktrial_1_free
	var blocktrial_1_free = {
		type: "image-button-response", 
		stimulus: jsPsych.timelineVariable('stimulus'),
		prompt: jsPsych.timelineVariable('prompt'),
		stimulus_width: 950,
		choices:["<p><strong>E</strong></p>", "<p><strong>D</strong></p>"],
		margin_horizontal: '250px',
		
		data: jsPsych.timelineVariable('data'),
		on_finish: function(data){
		data.correct = data.response == data.correct_response;
		}
	};
	
	// create blocktrial_procedure_1_free
	var blocktrial_procedure_1_free = {
		timeline: [fixation, blocktrial_1_free],
		timeline_variables: blockstimuli_1_free, 
	        randomize_order: true
	};
	timeline.push(blocktrial_procedure_1_free);
	

[becky-gilbert]

Hi @lily2brain, you can do that by presenting the question and image with two separate plugins, one after the other. I suggest using the html-keyboard-response plugin to present the question text. You can use the 'prompt' from timeline variables as the stimulus parameter, give it a fixed duration with the trial_duration parameter, and use jsPsych.NO_KEYS for the choices parameter. You should also remove the prompt parameter from your blocktrial_1_free trial. You'll also need to put this question trial on your blocktrial_procedure_1_free timeline. Like this:

// create blockstimuli_1_free
var blockstimuli_1_free = [
  {stimulus: 'image1.jpg', prompt: "<p>Qual expressa medo m?</p>", data: {correct_response: '1'}},
  {stimulus: 'image2.jpg', prompt:"<p>Qual expressa alegria?</p>", data: {correct_response: '0'}}, 
  {stimulus: 'image3.jpg', prompt:"<p>Qual expressa tristeza?</p>", data: {correct_response: '0'}}, 
  {stimulus: 'image4.jpg', prompt:"<p>Qual expressa nojo?</p>", data: {correct_response: '1'}}, 
  {stimulus: 'image5.jpg', prompt:"<p>Qual expressa raiva?</p>", data: {correct_response: '0'}}, 
  {stimulus: 'image6.jpg', prompt:"<p>Qual expressa surpresa?</p>", data: {correct_response: '1'}}, 
];

// create the question screen, with no key choices and a fixed duration (2 seconds in this example)
var question = {
  type: 'html-keyboard-response',
  stimulus: jsPsych.timelineVariable('prompt'),
  choices: jsPsych.NO_KEYS,
  trial_duration: 2000
};
	
// create blocktrial_1_free
var blocktrial_1_free = {
  type: "image-button-response", 
  stimulus: jsPsych.timelineVariable('stimulus'),
  stimulus_width: 950,
  choices:["<p><strong>E</strong></p>", "<p><strong>D</strong></p>"],
  margin_horizontal: '250px',
  data: jsPsych.timelineVariable('data'),
  on_finish: function(data){
    data.correct = data.response == data.correct_response;
  }
};
	
// create blocktrial_procedure_1_free
var blocktrial_procedure_1_free = {
  timeline: [fixation, question, blocktrial_1_free],  // <---- add the question trial to the procedure timeline
  timeline_variables: blockstimuli_1_free, 
  randomize_order: true
};
timeline.push(blocktrial_procedure_1_free);

[lily2brain]

Thank you @becky-gilbert, it worked super!