Visualizing Current Slider Value Using the HTML-Slider-Response Function in JSPsych

by

Background:

New to Javascript but have been programming in other languages (R, Python, Bash, Matlab, etc.) for quite a while. I’m trying to design an experiment in javascript using functions from the jsPsych library (v7.0). Specifically I’d like to present a slider to participants, have them drag the indicator to a value they select, and submit that value. The jsPsychHTMLSliderResponse function does exactly that. However, I also need the task to visualize whatever the current value of the indicator is (i.e., as the participant drags the indicator along the continuum, this value should update). As best as I can tell, there is no native argument to do this.

What I’ve Tried:

jsPsychHTMLSliderResponse has a prompt: argument which displays text below the slider. I thought perhaps calling data.response here might output the current value of response, but it prevented the experiment from running without throwing any errors. I also tried intergrating some tutorials and solutions like this but could not get it to work with jsPsych. I’d love to not have to reinvent the wheel here and modify the base code to this function, but if that’s what the solution calls for, it’s what I’ll have to do. Appreciate any insight!!

Code to Try:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experiment</title>
    <script src="jspsych/dist/jspsych.js"></script> 
    <script src="jspsych/dist/plugin-html-slider-response.js"></script>
    <link href="jspsych/dist/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: rgb(200, 200, 200);">

<script>
    
    // Initiating jsPsych
    var jsPsych = initJsPsych();
            
    // Creating an empty array which will act as our timeline
    var timeline = [];

      // Assessing baseline negative emotional responses to video
      var ExposureQsNeg = {
        type: jsPsychHtmlSliderResponse,
        stimulus: `<div style="width:500px;">
            <p style="font-size: 24px; line-height: 30px;">How intense would you rate the negative emotions that you felt while watching this clip while regulating?<br><br>Please indicate by selecting a position on the line below.</p>`,
        require_movement: true,
        labels: ['100', '0'],
        prompt: data.response,
      };

      timeline.push(ExposureQsNeg);

    // Executing the timeline
    jsPsych.run(timeline);

    // get csv representation of data and log to console
    console.log(jsPsych.data.get().csv());

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

Leave a Comment