Timer in survey-text?

[ler93]

Hi everyone!
I need to create a visible timer (3 min duration) in a survey-text where participants have to type some kind of response there.
Is there any possibility to implement it?
Thanks in advance!

[jodeleeuw]

Hi @ler93 ,

You'll probably want to modify the plugin to do this.

You can look up examples of how to create a countdown timer in javascript online, e.g., here's a stack overflow example. Adding this code into the plugin should be possible. If you need some guidance about how plugin files work, I recorded a video tutorial on plugin creation.

If you need further guidance as you work through this feel free to follow up here.

[ler93]

Hi again, Josh. I continue with the question I asked earlier.

I have tried adding the timer to the survey-text plugin in various ways without any success. I still can't understand some of the code that is part of the plugins due to my lack of programming knowledge. As I'm completely stuck in the task, I wanted to copy the code so that maybe you can give me some clues about what I'm doing wrong:

1. The first thing I did was add the following code to the plugin.info part of the "survey-text" plugin:

      timer: {
        type: jsPsych.plugins.parameterType.FUNCTION,
        pretty_name: 'timer',
        default: true,
      },

2. Then copy the timer code and paste it in the part of plugin.trial under "// add submit button":

 // add submit button
    html += '<input type="submit" id="jspsych-survey-text-next" class="jspsych-btn jspsych-survey-text" value="'+trial.button_label+'"></input>';

    html += '</form>'
    display_element.innerHTML = html;

    window.onload = function () {
      var fiveMinutes = 60 * 5,
          display = document.querySelector('#time');
      startTimer(fiveMinutes, display);
  };

    // Timer function copied from:
    // https://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer
    function startTimer(duration, display) {
      var start = Date.now(),
                    diff,
                    minutes,
                    seconds;
                function timer() {
                    // get the number of seconds that have elapsed since 
                    // startTimer() was called
                    diff = duration - (((Date.now() - start) / 1000) | 0);
                    // does the same job as parseInt truncates the float
                    minutes = (diff / 60) | 0;
                    seconds = (diff % 60) | 0;

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    display = document.querySelector('#time');
                      if (display !== null) {
                          display.innerHTML = minutes + ":" + seconds;
                        }

                        // display.textContent = minutes + ":" + seconds; 

                        if (diff <= 0) {
                          // add one second so that the count down starts at the full duration
                          // example 05:00 not 04:59
                          start = Date.now() + 1000;
                  }
                  };
                  // we don't want to wait a full second before the timer starts
                  timer();
                  setInterval(timer, 1000);
                  };

3. Finally, in the experiment add the timer parameter with value "true":

    var survey_page1 = {
        type: 'survey-text',
        questions: [
            {prompt: '¿Qué edad tienes?', columns: 3, required: true, name: 'Edad'},
            {prompt: '¿Estás estudiando alguna carrera universitaria?', 
            placeholder: 'Si tu respuesta es afirmativa, comentanos de que carrera se trata', 
            columns: 60,
            name: 'Carrera',
            trial_duration: 3000},
        ],
        timer: true,
        };

I'm sure the code is full of bugs but as I said I don't know how to continue.
Sorry for the long message.

Thanks in advance.