I want to add a "back to instruction" button in my 'preTrial_questions'trial page so participants can go back to the 'instructions' trials and re-read them again. I tried to add a on_finish: function but doesn't seem to work, so any other work around?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../jspsych-7.3.3/dist/jspsych.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-fullscreen.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-html-button-response.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-instructions.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-survey-multi-choice.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-survey-text.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-html-keyboard-response.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-image-keyboard-response.js"></script>
<script src="../jspsych-7.3.3/dist/plugin-preload.js"></script>
<link href="../jspsych-7.3.3/dist/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body></body>
<script>
/* initialize jsPsych */
var jsPsych = initJsPsych({
show_progress_bar: true,
override_safe_mode: true,
});
/* create timeline */
var timeline = [];
/* preload images */
var preload = {
type: jsPsychPreload,
images: ["./img/1.jpg"]
};
timeline.push(preload);
/* subject ID */
var subID_input = {
type: jsPsychSurveyText,
questions:[
{prompt: function(){return html = `subject ID?`},
name:'subID',
required: true}
],
button_label:'submit',
on_finish: function(data){
// Store the first estimate response
subject_id = data.response.subID;
}
};
timeline.push(subID_input)
/* define welcome and instruction page */
/* define the instructions */
var page_1 = function(){
var html = `welcomes`
return html
};
var page_2 = function(){
var html = `instruction 1`
return html
};
var page_3 = function(){
var html = `instruction 2`
return html
};
var page_4 = function(){
var html = `instruction 3`
return html
};
var instructions = {
type: jsPsychInstructions,
pages: [
page_1,
page_2,
page_3,
page_4
],
button_label_next: "continue",
button_label_previous: "previous page",
show_clickable_nav: true
};
timeline.push(instructions)
/* pre-trial understanding test */
var preTrial_questions = {
type: jsPsychSurveyMultiChoice,
preamble:`
<h3>check your understanding</h3>
<p>To check your understanding of the task, please indicate for each of these statements whether they are correct or incorrect.。` ,
questions: [
{
prompt: "q1",
name: 'pr_q1',
options: ['correct', 'wrong'],
required: true
},
{
prompt: "q2",
name: 'pr_q2',
options: ['correct', 'wrong'],
required: true
},
{
prompt: "q3",
name: 'pr_q3',
options: ['correct', 'wrong'],
required: true
}
],
button_label:['continue'],
};
timeline.push(preTrial_questions)
/* if(conditional) node */
// only if the participant understand all the parts of the rules, then trials shall preceed.
// screen tell participants they should re-read the instruction
var reread_instruction = {
type: jsPsychHtmlButtonResponse,
stimulus: `
<h2>Re-read the rules </h2>
<p>Sorry, please re-read the rules to ensure you understand them correctly。</p>`,
choices: ['continue'],
};
var checkResponses_preTrial = function(){
// Retrieve the responses
var responses = jsPsych.data.get().last(1).values()[0].response;
console.log("Responses from preTrial questions:", responses);
// Check if all responses are "correct"
return Object.values(responses).every(response => response === 'correct');
console.log("All responses are 'correct':", allYes);
};
var checkUnderstanding = {
timeline: [reread_instruction, instructions, preTrial_questions], // Replace with the trial that should be repeated
conditional_function:function(){
return !checkResponses_preTrial(); // enter the 'checkUnderstanding' timeline if not all the "correct" in 'preTrial_questions' are selected
},
loop_function: function(){
return !checkResponses_preTrial(); // repeat the 'checkUnderstanding' timeline if not all the "correct" in 'preTrial_questions' are selected
}
};
timeline.push(checkUnderstanding)
/* run the experiment */
jsPsych.run(timeline);
</script>
</html>
A button in 'jsPsychSurveyMultiChoice' trial page that take participants back to previous 'jsPsychInstructions' trials.