Alternative to trial_ends_after_audio #1158

kittymimo · 2020-10-30T13:00:10Z

kittymimo
Oct 30, 2020

Hi,

I am using the psychophysics plugin, in which I can't make the trial_ends_after_audio parameter work. I am wondering if there is an alternative to this parameter. For instance, is there a way to set the trial_duration parameter to the duration of my audio stimulus? Here is my script:

    var retroaction = {
        type: 'psychophysics',
        stimuli: [
        	{
				obj_type: 'image',
				file: "img/x.png",
				startX:200
			},
			{
				obj_type: 'sound',
				file: jsPsych.timelineVariable('phrase'),
			},
			{
				obj_type: 'image',
				file: jsPsych.timelineVariable('bonne_reponse'),
				startX: 625
			},
		],
        background_color: "FFFFFF",
        choices: jsPsych.NO_KEYS,
        trial_duration: 4000, //Something like "trial_duration: jsPsych.timelineVariable('phrase').duration"?
        on_start: function(retroaction) {
            if (jsPsych.data.getLastTrialData().values()[0].accuracy == true) {
                retroaction.stimuli[0].file = "img/crochet.png";
            }
        }
    }

Thank you!

Catherine

Answered by kittymimo

Nov 3, 2020

Hi Becky,

Thanks for your help. Daiichiro Kuroki, who developed the plugin, is actually helping me figure this out. He changed the plugin as you suggested, but when I use the modified plugin, I get this error: "ReferenceError: Cannot access uninitialized variable". I really don't know what I should try from here, so that's why I asked if there's a way to use the trial_duration parameter but by specifying the duration of the audio stimulus. I thought something like trial_duration: jsPsych.timelineVariable('phrase').duration but it doesn't work.

Here are the parts that were added to the plugin:

          trial_ends_after_audio: {
            type: jsPsych.plugins.parameterType.BOOL,
       …

View full answer

becky-gilbert · 2020-11-03T00:43:25Z

becky-gilbert
Nov 3, 2020
Maintainer

Hi Catherine, I don't know much about the psychophysics plugin, but based on the docs it doesn't look like there's a trial_ends_after_audio or similar parameter that you could use for this purpose. But you could do this by modifying the plugin. You'd want to add an 'ended' event listener to the audio element, and that function would end the trial. Here's the relevant bit of code from the jspsych-audio-keyboard-response plugin that you could use for reference.

jsPsych/plugins/jspsych-audio-keyboard-response.js

Lines 76 to 84 in a2b0cec

    
           if(trial.trial_ends_after_audio){ 
        
             if(context !== null){ 
        
               source.onended = function() { 
        
                 end_trial(); 
        
               } 
        
             } else { 
        
               audio.addEventListener('ended', end_trial); 
        
             } 
        
           }

0 replies

kittymimo · 2020-11-03T13:36:21Z

kittymimo
Nov 3, 2020
Author

Hi Becky,

Thanks for your help. Daiichiro Kuroki, who developed the plugin, is actually helping me figure this out. He changed the plugin as you suggested, but when I use the modified plugin, I get this error: "ReferenceError: Cannot access uninitialized variable". I really don't know what I should try from here, so that's why I asked if there's a way to use the trial_duration parameter but by specifying the duration of the audio stimulus. I thought something like trial_duration: jsPsych.timelineVariable('phrase').duration but it doesn't work.

Here are the parts that were added to the plugin:

          trial_ends_after_audio: {
            type: jsPsych.plugins.parameterType.BOOL,
            pretty_name: 'Trial ends after audio',
            default: false,
            description: 'If true, then the trial will end as soon as the audio file finishes playing.'
          }
  
      // set up end event if trial needs it
      if(stim.trial_ends_after_audio){
        if(stim.context !== null){
          stim.source.onended = function() {
            end_trial();
          }
        } else {
          stim.audio.addEventListener('ended', end_trial);
        }
      }

And here is my script:

<!DOCTYPE html>
<html>
    <head>
        <title>Recherche sur le langage et les &eacute;motions</title>
        <script src="jspsych-6.1.0/jspsych.js"></script>
        <script src="jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="jspsych-6.1.0/plugins/jspsych-audio-keyboard-response.js"></script>
        <script src="jspsych-6.1.0/plugins/jspsych-psychophysics.js"></script>
        <script src="stimuli.js"></script>
        <link href="jspsych-6.1.0/css/jspsych.css" rel="stylesheet" type="text/css"></link>
    </head>
    <body></body>
    <script>

  	var timeline = [];
  
	var audio = [];
    for (var i=0; i<stimuli.length; i++) {
    	audio.push(stimuli[i].phrase);
    }

	var images = [];
    for (var i=0; i<stimuli.length; i++) {
    	images.push(stimuli[i].image1);
    }
    for (var i=0; i<stimuli.length; i++) {
    	images.push(stimuli[i].image2);
    }
    for (var i=0; i<stimuli.length; i++) {
    	images.push(stimuli[i].bonne_reponse);
    }
    images.push('img/x.png', 'img/crochet.png');

    var instructions = {
        type: 'html-keyboard-response',
        stimulus: 'Instructions'
    }
    timeline.push(instructions);
   
	var phrase = {
  		type: 'audio-keyboard-response',
		stimulus: jsPsych.timelineVariable('phrase'),
 		prompt: '<span style="font-size:40px;">+</span>',
 		choices: jsPsych.NO_KEYS,
 		trial_ends_after_audio: true
	}
	
	var image = {
  		timeline: [
  			{
  				type: 'psychophysics',
				stimuli: [
					{
						obj_type: 'image',
						file: jsPsych.timelineVariable('image1'),
						startX: 500
					},
					{
						obj_type: 'image',
						file: jsPsych.timelineVariable('image2'),
						startX: 750
					},
				],
 				background_color: "FFFFFF",
 				choices: [37, 39],
 				data: {
           			correct_response: 37,
				}, 
				on_finish: function(data) {
        			var bonne_reponse = false;
					if (data.correct_response == data.key_press) {
						bonne_reponse = true;
					}
          		data.accuracy = bonne_reponse;
          		}
			}
        ]
	}	
	
    var retroaction = {
        type: 'psychophysics',
        stimuli: [
        	{
				obj_type: 'image',
				file: "img/x.png",
				startX:200
			},
			{
				obj_type: 'sound',
				file: jsPsych.timelineVariable('phrase'),
				trial_ends_after_audio: true
			},
			{
				obj_type: 'image',
				file: jsPsych.timelineVariable('bonne_reponse'),
				startX: 625
			},
		],
        background_color: "FFFFFF",
        choices: jsPsych.NO_KEYS,
        on_start: function(retroaction) {
            if (jsPsych.data.getLastTrialData().values()[0].accuracy == true) {
                retroaction.stimuli[0].file = "img/crochet.png";
            }
        }
    }

	var procedure = {
		timeline: [phrase, image, retroaction],
		timeline_variables: stimuli
	}
	timeline.push(procedure);
    
    var fin = {
        type: 'html-keyboard-response',
        stimulus: 'Merci!'
    }
    timeline.push(fin);

    jsPsych.init({
        timeline: timeline,
        preload_audio: audio,
        preload_images: images,
 		use_webaudio: false,
        on_finish: function() {
			jsPsych.data.displayData();
		}
    })

    </script>
</html>

Thanks for your help!

Catherine

1 reply

becky-gilbert Nov 6, 2020
Maintainer

Hi Catherine, I was able to get this to work with the following changes:

I added the trial_ends_after_audio parameter to the stimuli nested parameters:

trial_ends_after_audio: {
  type: jsPsych.plugins.parameterType.BOOL,
  pretty_name: 'Trial ends after audio',
  default: false,
  description: 'If true, then the trial will end as soon as the audio file finishes playing.'
}

I added the end event listener to the sound at the end of the set_sound function (after the setTimeout function that starts the audio playback). I changed this to addEventListener for both web audio and HTML5 audio so that it doesn't overwrite any other 'ended' event listeners.

// set up end event if trial needs it
if(stim.trial_ends_after_audio){
  if(stim.context !== null){
    stim.source.addEventListener('ended', end_trial);
  } else {
    stim.audio.addEventListener('ended', end_trial);
  }
}

I changed the end_trial definition from a function expression to a function declaration. This allows you to refer to the end_trial function in the addEventListener code above, before end_trial function is declared.

// function to end trial when it is time
function end_trial() {

I hope this helps!

kittymimo · 2020-11-09T19:50:14Z

kittymimo
Nov 9, 2020
Author

Hi Becky,

Thanks for your help! It's working now :)

Catherine

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alternative to trial_ends_after_audio #1158

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Alternative to trial_ends_after_audio #1158

kittymimo Oct 30, 2020

Replies: 3 comments · 1 reply

becky-gilbert Nov 3, 2020 Maintainer

kittymimo Nov 3, 2020 Author

becky-gilbert Nov 6, 2020 Maintainer

kittymimo Nov 9, 2020 Author

kittymimo
Oct 30, 2020

Replies: 3 comments 1 reply

becky-gilbert
Nov 3, 2020
Maintainer

kittymimo
Nov 3, 2020
Author

becky-gilbert Nov 6, 2020
Maintainer

kittymimo
Nov 9, 2020
Author