Making survey text point system where score depends on amount of time passed #3146

mbeasle2 · 2023-10-02T14:25:42Z

mbeasle2
Oct 2, 2023

I found code on here to adapt the survey text plugin so that each trial could be timed using a trial_duration parameter. For reference, I will add that code to the bottom.

I want my participants to have about 15s to answer a math problem before it goes onto the next one. They can earn up to one point per trial, but the amount of points should depend on the total time it takes them to respond according to this logistic function:

1 / (1 + 0.45 ^ (-x + 7500))

Where x is the trial_duration parameter, and 7500 is the midpoint of the total time (15s). When I test this code so that it is only the current score, acc + test.trial_duration, the score added is the entire trial_duration value, 15000. How can I make this the current amount of time left, and not just the value at which the parameter was set to?

Current Experiment Code:

<!DOCTYPE html>
<html>
  <head> <!-- all preloads go into head -->
    <title>Math Quiz Take 2</title>
    <!-- any plugins go here-->
    <script src="jspsych/dist/jspsych.js"></script>
    <script src = "jspsych/dist/plugin-survey-text.js"></script>
    <link href="jspsych/dist/jspsych.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.trial {background-color: mistyrose}
</style>

  </head>
  <body> <!-- all script for tasks go into body-->

    <script> 

var jsPsych = initJsPsych({

});

var timeline = [];

//create math problems with correct answers
var mathQuestions = [
  {math: '2+2 = ?', correct: '4'},
  {math: '2x3 = ?', correct: '6'},
  {math: '5x7 = ?', correct: '35'}
];

var acc = 0; // make accuracy counter

var test = {
  type: jsPsychSurveyText,
  trial_duration: 15000,
  preamble: function () {
var text = "Current Score: " + acc;
return text
  },
  questions: [
    {
      prompt: jsPsych.timelineVariable('math'), //use math problems
      name: 'resp' 
    }
  ],
        on_finish: function(data) {
			      data.correct=jsPsych.timelineVariable('correct', true); // assign correct answers 

                  var response = data.response.resp; // check participant response
            if (response == data.correct){ // if correct, add one to accuracy counter
                acc += test.trial_duration; //change to be a logistic function of time_duration
            }
          }
};


var mathQuestionProcedure = {
  timeline: [test], // loop the trial
  timeline_variables: mathQuestions,
  sample: {
    type: 'with-replacement',
    size: 1
  },
  loop_function: function(data) {
    if (acc < 200000) {
            return true; // keep going to accuracy criteria
        } else {
            return false; // end loop
        }
  }
}

timeline.push(mathQuestionProcedure);

jsPsych.run(timeline)

</script>
</body>
</html>

Edited Survey-Text Plugin Code:

var jsPsychSurveyText = (function (jspsych) {
  'use strict';

  const info = {
      name: "survey-text",
      parameters: {
          questions: {
              type: jspsych.ParameterType.COMPLEX,
              array: true,
              pretty_name: "Questions",
              default: undefined,
              nested: {
                  /** Question prompt. */
                  prompt: {
                      type: jspsych.ParameterType.HTML_STRING,
                      pretty_name: "Prompt",
                      default: undefined,
                  },
                  /** Placeholder text in the response text box. */
                  placeholder: {
                      type: jspsych.ParameterType.STRING,
                      pretty_name: "Placeholder",
                      default: "",
                  },
                  /** The number of rows for the response text box. */
                  rows: {
                      type: jspsych.ParameterType.INT,
                      pretty_name: "Rows",
                      default: 1,
                  },
                  /** The number of columns for the response text box. */
                  columns: {
                      type: jspsych.ParameterType.INT,
                      pretty_name: "Columns",
                      default: 40,
                  },
                  /** Whether or not a response to this question must be given in order to continue. */
                  required: {
                      type: jspsych.ParameterType.BOOL,
                      pretty_name: "Required",
                      default: false,
                  },
                  /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
                  name: {
                      type: jspsych.ParameterType.STRING,
                      pretty_name: "Question Name",
                      default: "",
                  },
              },
          },
          /** If true, the order of the questions in the 'questions' array will be randomized. */
          randomize_question_order: {
              type: jspsych.ParameterType.BOOL,
              pretty_name: "Randomize Question Order",
              default: false,
          },
          /** HTML-formatted string to display at top of the page above all of the questions. */
          preamble: {
              type: jspsych.ParameterType.HTML_STRING,
              pretty_name: "Preamble",
              default: null,
          },
          /** adding a time limit parameter to the question */
          trial_duration: {
            type: jspsych.ParameterType.INT,
            pretty_name: "Timer",
            default: null,
          },
          /** Label of the button to submit responses. */
          button_label: {
              type: jspsych.ParameterType.STRING,
              pretty_name: "Button label",
              default: "Continue",
          },
          /** Setting this to true will enable browser auto-complete or auto-fill for the form. */
          autocomplete: {
              type: jspsych.ParameterType.BOOL,
              pretty_name: "Allow autocomplete",
              default: false,
          },
      },
  };
  /**
   * **survey-text**
   *
   * jsPsych plugin for free text response survey questions
   *
   * @author Josh de Leeuw
   * @see {@link https://www.jspsych.org/plugins/jspsych-survey-text/ survey-text plugin documentation on jspsych.org}
   */
  class SurveyTextPlugin {
      constructor(jsPsych) {
          this.jsPsych = jsPsych;
      }
      trial(display_element, trial) {
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].rows == "undefined") {
                  trial.questions[i].rows = 1;
              }
          }
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].columns == "undefined") {
                  trial.questions[i].columns = 40;
              }
          }
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].value == "undefined") {
                  trial.questions[i].value = "";
              }
          }
          var html = "";
          // show preamble text
          if (trial.preamble !== null) {
              html +=
                  '<div id="jspsych-survey-text-preamble" class="jspsych-survey-text-preamble">' +
                      trial.preamble +
                      "</div>";
          }
          // start form
          if (trial.autocomplete) {
              html += '<form id="jspsych-survey-text-form">';
          }
          else {
              html += '<form id="jspsych-survey-text-form" autocomplete="off">';
          }
          // generate question order
          var question_order = [];
          for (var i = 0; i < trial.questions.length; i++) {
              question_order.push(i);
          }
          if (trial.randomize_question_order) {
              question_order = this.jsPsych.randomization.shuffle(question_order);
          }
          // end trial if trial_duration is set
          if (trial.trial_duration !== null) {
            jsPsych.pluginAPI.setTimeout(function () {
              // when the time limit is up, automatically submit the form and end the trial
              // by simulating a next button click
              display_element.querySelector('#jspsych-survey-text-form').requestSubmit();
            }, trial.trial_duration);
          }

          // add questions
          for (var i = 0; i < trial.questions.length; i++) {
              var question = trial.questions[question_order[i]];
              var question_index = question_order[i];
              html +=
                  '<div id="jspsych-survey-text-' +
                      question_index +
                      '" class="jspsych-survey-text-question" style="margin: 2em 0em;">';
              html += '<p class="jspsych-survey-text">' + question.prompt + "</p>";
              var autofocus = i == 0 ? "autofocus" : "";
              var req = question.required ? "required" : "";
              if (question.rows == 1) {
                  html +=
                      '<input type="text" id="input-' +
                          question_index +
                          '"  name="#jspsych-survey-text-response-' +
                          question_index +
                          '" data-name="' +
                          question.name +
                          '" size="' +
                          question.columns +
                          '" ' +
                          autofocus +
                          " " +
                          req +
                          ' placeholder="' +
                          question.placeholder +
                          '"></input>';
              }
              else {
                  html +=
                      '<textarea id="input-' +
                          question_index +
                          '" name="#jspsych-survey-text-response-' +
                          question_index +
                          '" data-name="' +
                          question.name +
                          '" cols="' +
                          question.columns +
                          '" rows="' +
                          question.rows +
                          '" ' +
                          autofocus +
                          " " +
                          req +
                          ' placeholder="' +
                          question.placeholder +
                          '"></textarea>';
              }
              html += "</div>";
          }
          // 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;
          // backup in case autofocus doesn't work
          display_element.querySelector("#input-" + question_order[0]).focus();
          display_element.querySelector("#jspsych-survey-text-form").addEventListener("submit", (e) => {
              e.preventDefault();
              // measure response time
              var endTime = performance.now();
              var response_time = Math.round(endTime - startTime);
              // create object to hold responses
              var question_data = {};
              for (var index = 0; index < trial.questions.length; index++) {
                  var id = "Q" + index;
                  var q_element = document
                      .querySelector("#jspsych-survey-text-" + index)
                      .querySelector("textarea, input");
                  var val = q_element.value;
                  var name = q_element.attributes["data-name"].value;
                  if (name == "") {
                      name = id;
                  }
                  var obje = {};
                  obje[name] = val;
                  Object.assign(question_data, obje);
              }
              // save data
              var trialdata = {
                  rt: response_time,
                  response: question_data,
              };
              display_element.innerHTML = "";
              // next trial
              this.jsPsych.finishTrial(trialdata);
          });
          var startTime = performance.now();
      }
      simulate(trial, simulation_mode, simulation_options, load_callback) {
          if (simulation_mode == "data-only") {
              load_callback();
              this.simulate_data_only(trial, simulation_options);
          }
          if (simulation_mode == "visual") {
              this.simulate_visual(trial, simulation_options, load_callback);
          }
      }
      create_simulation_data(trial, simulation_options) {
          const question_data = {};
          let rt = 1000;
          for (const q of trial.questions) {
              const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
              const ans_words = q.rows == 1
                  ? this.jsPsych.randomization.sampleExponential(0.25)
                  : this.jsPsych.randomization.randomInt(1, 10) * q.rows;
              question_data[name] = this.jsPsych.randomization.randomWords({
                  exactly: ans_words,
                  join: " ",
              });
              rt += this.jsPsych.randomization.sampleExGaussian(2000, 400, 0.004, true);
          }
          const default_data = {
              response: question_data,
              rt: rt,
          };
          const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
          this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
          return data;
      }
      simulate_data_only(trial, simulation_options) {
          const data = this.create_simulation_data(trial, simulation_options);
          this.jsPsych.finishTrial(data);
      }
      simulate_visual(trial, simulation_options, load_callback) {
          const data = this.create_simulation_data(trial, simulation_options);
          const display_element = this.jsPsych.getDisplayElement();
          this.trial(display_element, trial);
          load_callback();
          const answers = Object.entries(data.response).map((x) => {
              return x[1];
          });
          for (let i = 0; i < answers.length; i++) {
              this.jsPsych.pluginAPI.fillTextInput(display_element.querySelector(`#input-${i}`), answers[i], ((data.rt - 1000) / answers.length) * (i + 1));
          }
          this.jsPsych.pluginAPI.clickTarget(display_element.querySelector("#jspsych-survey-text-next"), data.rt);
      }
  }
  SurveyTextPlugin.info = info;

  return SurveyTextPlugin;

})(jsPsychModule);

Answered by jodeleeuw

Oct 2, 2023

What about using the data.rt parameter to measure how long it took them, and subtracting that from the total time available?

View full answer

jodeleeuw · 2023-10-02T14:33:07Z

jodeleeuw
Oct 2, 2023
Maintainer

What about using the data.rt parameter to measure how long it took them, and subtracting that from the total time available?

1 reply

mbeasle2 Oct 2, 2023
Author

Thank you!!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Making survey text point system where score depends on amount of time passed #3146

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Making survey text point system where score depends on amount of time passed #3146

Uh oh!

mbeasle2 Oct 2, 2023

Replies: 1 comment · 1 reply

Uh oh!

jodeleeuw Oct 2, 2023 Maintainer

Uh oh!

mbeasle2 Oct 2, 2023 Author

mbeasle2
Oct 2, 2023

Replies: 1 comment 1 reply

jodeleeuw
Oct 2, 2023
Maintainer

mbeasle2 Oct 2, 2023
Author