back/next navigation between survey pages with jspsych #1686

Noam-Yair · 2021-03-28T16:25:10Z

Noam-Yair
Mar 28, 2021

I'm trying to add a back button to the trial so that if someone didn't answer or wants to change his/her answer, he/she can click the button and see the last question.
If someone can share the implementation of a back button for any kind of trial that would be great, since I would like it to be on a various kinds of trails.

currently I'm working on a trial that will be something like this:

 <!DOCTYPE html>
<html>
<head>
    <title>My experiment</title>
    <script src="jspsych-6.3.0/jspsych.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-html-button-response.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
    <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body></body>
<script>

    var face_name_procedure = {
        timeline: [
            {
                type: 'html-button-response',
                stimulus: function(){
                    var html="<p>"+jsPsych.timelineVariable('sentence')+"</p>";
                    return html;
                },
                choices: ["Pleasant", "Unpleasant"],
                trial_duration: 2500
            },{
                type: 'html-button-response',
                stimulus: function(){
                    var html="<p>"+jsPsych.timelineVariable('numbers')+"</p>";
                    return html;
                },
                choices: ["True", "False"],
                trial_duration: 2500
            }

        ],
        timeline_variables: [
            { sentence: 'sentence1' , numbers: 'number1'},
            { sentence: 'sentence2' , numbers: 'number2'},
            { sentence: 'sentence3' , numbers: 'number3'},
            { sentence: 'sentence4' , numbers: 'number4'}
        ]
    }




    jsPsych.init({
        timeline: [face_name_procedure]
    })

</script>
</html>

jodeleeuw · 2021-03-30T02:32:40Z

jodeleeuw
Mar 30, 2021
Maintainer

A true back button isn't possible with jsPsych's current architecture unless it is contained within a plugin. For example the instructions plugin has a back button implemented. That plugin works by taking a list of all the pages and allowing the participant to navigate through them.

The reason a back button can't be easily added to other plugins is that the underlying code for an experiment's timeline only allows going forward. Even in the case of looping timelines, the data structures treat the loop as a new set of trials and so there is data for each loop through the timeline. Going back to change existing data is not (easily) done. You could probably fake it through some clever functions that pre-filled in data based on previous trial data, but it will be complicated to do because this isn't a feature we've ever intended to cover.

If this is a feature that you really need then jsPsych might not be the right tool at this point in time.

1 reply

Noam-Yair Apr 5, 2021
Author

Thank you so much for the detailed answer! I'll try to make a new plugin as you suggested!
Thanks again

berentelg · 2021-05-06T15:54:32Z

berentelg
May 6, 2021

I am interested in this kind of feature as well.

I want to show participants several images and they should be able to go back and forth between those images. After this viewing section they will be asked to rate each image (which can be solved by the "jspsych-image-slider-response" plugin). But I am not quite sure how to solve the first part...

2 replies

becky-gilbert May 6, 2021
Maintainer

Hi @berentelg, as Josh said in his comment, allowing participants to go back and forth freely among separate trials isn't something that jsPsych isn't really designed to do. One exception to this is the instructions plugin, which allows the participant to go back and forth among multiple pages - this works because the whole set of pages is contained within a single 'trial' (plugin). The instructions plugin doesn't work as a solution for the original poster's question, because they wanted to allow participants to go back to previous survey questions in order to view/modify their previous answers. But in your case, since you're just presenting static content (images, rather than participants' previous answers), you could do this using the instructions plugin.

The pages parameter in the instructions plugin must be an array of strings, where each string is the HTML that should be presented on that page. Because you're presenting images, you will need to embed the images into the HTML using the img tag, e.g.

var image_presentation = {
  type: 'instructions',
  pages: ['<img src="image1.png">', '<img src="image2.png">'],
  show_clickable_nav: true
}

Don't forget to preload your images with the preload plugin. Because you're embedding the image files in HTML strings, you can't rely on jsPsych's auto_preload option and will instead need to preload the files manually.
I hope this helps. Let us know whether or not this works for you.

berentelg May 6, 2021

I tried this solution just a few minutes before you wrote the comment. So I guess at least your comment provided me some assurance that I am not completely off track.

Anyway, thanks for your help @becky-gilbert!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

back/next navigation between survey pages with jspsych #1686

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

back/next navigation between survey pages with jspsych #1686

Uh oh!

Uh oh!

Noam-Yair Mar 28, 2021

Replies: 2 comments · 3 replies

Uh oh!

jodeleeuw Mar 30, 2021 Maintainer

Uh oh!

Noam-Yair Apr 5, 2021 Author

Uh oh!

berentelg May 6, 2021

Uh oh!

becky-gilbert May 6, 2021 Maintainer

Uh oh!

berentelg May 6, 2021

Noam-Yair
Mar 28, 2021

Replies: 2 comments 3 replies

jodeleeuw
Mar 30, 2021
Maintainer

Noam-Yair Apr 5, 2021
Author

berentelg
May 6, 2021

becky-gilbert May 6, 2021
Maintainer