0

I have a behavioural experiment on jsPsych. Currently, I present participants with an image that is drawn on HTML canvas and they have to respond with a slider. However, I don't want them to see the thumb till they click on the slider (to avoid a bias). How can I do that?

.jspsych-slider::-webkit-slider-thumb {
  /*border: 1px solid #666;
  height: 24px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;*/
  -webkit-appearance: none;
  /*margin-top: -9px;*/
  /*visibility: hidden*/;
}

.jspsych-slider::-ms-thumb {visibility: hidden;}
.jspsych-slider::-moz-range-thumb {visibility:hidden;}

I tried updating these in the CSS file for jsPsych but this does not seem to help. Also, I tried another exisiting solution for a similar plugin but that is also not helping with the canvas-slider-plugin.

on_load: function(){
  document.querySelector('#jspsych-html-slider-response-response').addEventListener('click', function(e){
    e.target.style.visibility = 'show'})
},

Any help in this respect is appreciated. Thank you, Prashanti

Prashanti Ganesh
  • 47
  • 4
  • If they click on the slider without seeing the image won't that also create a bias in the result? – Andy Oct 20 '21 at 03:19
  • They see the canvas generated image before they click on the slider. But I would prefer that they don't see the thumb of the slider on the slider track. Because the initial position of the slider thumb may bias their response. So once they click on the slider, they see the thumb and then they can adjust it. – Prashanti Ganesh Oct 20 '21 at 03:27

0 Answers0