Instructions with timer to enable "Next" button.

[gaiamolinaro]

Hi everyone! I am using the jspsych-instructions plugin to display my instructions made of an image, some text, and an audio file (of a person reading the text). The audio file is on autoplay with no controls displayed. I would like to enable the participant to click "Next", but only after they have listened to the entire audio file. Audio files have different durations on each page. It's ok if they can click "Previous" whenever they want. Any ideas?
Thanks in advance!

[jodeleeuw]

Hi @gaiamolinaro,

If you want to use the instructions plugin to do this you'll need to modify the plugin file. You could take a look at how the audio plugins implement the parameter for trial_ends_after_audio and borrow the code from there to add to the instructions plugin. You can set the disabled property of the button to true initially, and then switch it to false when the audio finishes.

[gaiamolinaro]

Thanks Josh, I will! I'm still new to JavaScript, so I'm not sure about a few passages. For example, how do I get the audio that is relevant for the current page (if there is one)?

[martinakavanova]

Hi, I am looking to solve the same problem (displaying the next button only after a few seconds, to force people to read the instructions). @gaiamolinaro would you have any code that you used to modify the instructions plugin? (Or @jodeleeuw perhaps there is an easier solution to do this? It seems like it could be a common request for experiments?) I am new to JavaScript and I have read this discussion but the code is a little complicated for me to understand. (And in the plugin code I can only see 'disabled' in the context of displaying the "previous" button, though maybe I am misunderstanding it.)

Thank you for any help!

[trig11]

I solved this by modyfing the instructions plug-in a bit. You can add another parameter where all the other parameters are:

view_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'View duration',
        default: 0,
        description: 'How long to show instructions before next is clickable.'
},

Then, you can use the setTimeout function to enable the next button after the time set in view_duration. I added the following code into the show_current_page function.

setTimeout(function(){ document.getElementById('jspsych-instructions-next').disabled=false}, trial.view_duration);

Edit: of course, you will need to disable the button first so that it can be enabled after your specified time. To do this, just add
"disabled='true'"+
where the button html is added to the nav_html.

Just for completeness, the show_current_page() function then looks like this:

    function show_current_page() {
      var html = trial.pages[current_page];

      var pagenum_display = "";
      if(trial.show_page_number) {
          pagenum_display = "<span style='margin: 0 1em;' class='"+
          "jspsych-instructions-pagenum'>"+ trial.page_label + ' ' +(current_page+1)+"/"+trial.pages.length+"</span>";
      }
     
      if (trial.show_clickable_nav) {

        var nav_html = "<div class='jspsych-instructions-nav' style='padding: 10px 0px;'>";
        if (trial.allow_backward) {
          var allowed = (current_page > 0 )? '' : "disabled='disabled'";
          nav_html += "<button id='jspsych-instructions-back' class='jspsych-btn' style='margin-right: 5px;' "+allowed+">&lt; "+trial.button_label_previous+"</button>";
        }
        if (trial.pages.length > 1 && trial.show_page_number) {
            nav_html += pagenum_display;
        }
        nav_html += "<button id='jspsych-instructions-next' class='jspsych-btn'"+
			"disabled='true'"+ //this is added
            "style='margin-left: 5px;'>"+trial.button_label_next+
            " &gt;</button></div>";

        html += nav_html;
        display_element.innerHTML = html;
        if (current_page != 0 && trial.allow_backward) {
          display_element.querySelector('#jspsych-instructions-back').addEventListener('click', btnListener);
        }
		setTimeout(function(){ document.getElementById('jspsych-instructions-next').disabled=false}, trial.view_duration); //this is added
        display_element.querySelector('#jspsych-instructions-next').addEventListener('click', btnListener);
      } else {
        if (trial.show_page_number && trial.pages.length > 1) {
          // page numbers for non-mouse navigation
          html += "<div class='jspsych-instructions-pagenum'>"+pagenum_display+"</div>"
        } 
        display_element.innerHTML = html;
      }
      
    }

Note, however, that this implementation will force the same view time for all your instruction elements. There probably is also a way of using different view times (likely by defining an array as the view_duration and then referencing the correct one for each part of the instruction).

[sankalp35]

Hey @trig11
This was very helpful. I had to modify the survey-likert plugin to have a minimum timer to ensure that participants aren't completing the questionnaires too quickly. Your method worked flawlessly.