Estoy usando jsPsych para ejecutar un experimento de comportamiento. En el estudio, los participantes ven un control deslizante y se espera que lo arrastren para responder. Sin embargo, no quiero que los participantes vean el pulgar del control deslizante antes de hacer clic en el control deslizante. Una vez que hacen clic, me gustaría que el control deslizante apareciera en la pista. Para ocultar el control deslizante antes de que el participante responda, hice cambios en el archivo jsPsych CSS.

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

Esto funciona bien ya que el control deslizante está oculto cuando comienza la prueba. Para que el control deslizante aparezca una vez que el participante haga clic en él, realizo cambios en el código HTML de la prueba mediante la función on_load.

 var slider_eg = { type: 'canvas-slider-response', stimulus: twoSquares, labels: ['0','10'], require_movement: true, prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>', on_load: function(){ document.querySelector('#jspsych-canvas-slider-response-response').addEventListener('click', function(e){ e.target.style.visibility = "show"}) }, };

La respuesta del participante se registra cuando se hace clic, pero el pulgar no aparece en la pista. No estoy seguro de cómo solucionar esto porque cuando uso la función on_load y configuro la visibilidad en "oculto", funciona cuando desaparece la pista del control deslizante. Así que no estoy seguro de cómo hacer que funcione a la inversa.

Cualquier ayuda es apreciada. Gracias Prashanti