modification to add a second slider to the video-slider-response plugin

[BryanGonzalez262]

Hello,

I've modified the video-slider-response plugin to place two sliders, and two prompts on the screen below a video rather than one. I'm using the following parameters.
var trial_1 = { type: 'video-slider-response', stimulus: ['videos/11p_in_in.mp4'], labels: ['Totally Disagree', 'Totally Agree'], min: 1, max: 100, step: 1, slider_start: 50, prompt: ['<p>blah</p>', '<p>blah blah</p>'], require_movement: true, autoplay: true, rate: 1.5, width: 900, response_ends_trial: true, controls: true }

This displays the way I want it to. However, with require_movement:true, I'm not able to activate the continue button once both sliders have been clicked on. Js isn't my strongest language but the console log does display the proper messages. below is my (non-working) code to enable continuing. Can anyone tell me what I'm doing wrong? Really appreciate any tips.

` var first_slide = false;
var second_slide = false;
if(trial.require_movement){
display_element.querySelector('#jspsych-video-slider-response-response_01').addEventListener('click', function(){
console.log('first slide done')
first_slide = true
});
display_element.querySelector('#jspsych-video-slider-response-response_02').addEventListener('click', function(){
console.log('second slide done')
second_slide = true;});

  if(first_slide===true && second_slide===true) {
    display_element.querySelector('#jspsych-video-slider-response-next').disabled = false
    }
}`

[BryanGonzalez262]

all set! I figured out I needed to place the if statement within the callback function of each event listener separately. problem solved.

[becky-gilbert]

Awesome, thanks for the update!

[samanthareisman]

Hi Bryan,

Would you be willing to share your code for the 2 slider response plugin?

I am trying to modify the canvas-slider-response to do the same thing and would love the reference!

[BryanGonzalez262]

Hi @samanthareisman ,
Here's my modification of the plugin.

It adds a slider for each iteration of a loop, where the number of loop iterations comes from the length of the 'prompt' variable in js function I push to the timeline in the experiment.html.

so If I want 3 sliders, I provide a list of 3 strings that are used as prompts eg. ['rate A', 'rate B', 'rate C'].
Note also, that in my modified plugin, no sliders appear until the video plays at least once (hard-coded to display after 10 seconds). At which point, the first slider appears. The subsequent slider will only appear after the previous one has been clicked/slid.

hope this helps. happy to have a quick chat if you need. I know this stuff can get tedious.

[BryanGonzalez262]

Hey Samantha! Yes! Will totally share my code. I’ll be away from work for the weekend, but will do next week. Be well, b. From: samanthareisman ***@***.***> Date: Friday, January 13, 2023 at 11:38 AM To: jspsych/jsPsych ***@***.***> Cc: Bryan González ***@***.***>, Comment ***@***.***> Subject: Re: [jspsych/jsPsych] modification to add a second slider to the video-slider-response plugin (Discussion #2034) Hi Bryan, Would you be willing to share your code for the 2 slider response plugin? I am trying to modify the canvas-slider-response to do the same thing and would love the reference! — Reply to this email directly, view it on GitHub<#2034 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEWDCDAPSLD3BPVMTMOLQC3WSGAHTANCNFSM5BPBB2EA>. You are receiving this because you commented.Message ID: ***@***.***>