mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-11 16:18:11 +00:00
141 lines
5.3 KiB
HTML
141 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../jspsych.js"></script>
|
|
<script src="../plugins/jspsych-preload.js"></script>
|
|
<script src="../plugins/jspsych-html-button-response.js"></script>
|
|
<script src="../plugins/jspsych-image-button-response.js"></script>
|
|
<script src="../plugins/jspsych-audio-button-response.js"></script>
|
|
<link rel="stylesheet" href="../css/jspsych.css">
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
|
|
// all preload files will print information to the console about file loading success/failure
|
|
// through the on_error and on_success trial parameters
|
|
|
|
// automatically preload all stimuli files based on the timeline
|
|
var auto_preload_trial = {
|
|
type: 'preload',
|
|
auto_preload: true,
|
|
on_error: function(file) {
|
|
console.log('Error: ',file);
|
|
},
|
|
on_success: function(file) {
|
|
console.log('Loaded: ',file);
|
|
}
|
|
};
|
|
|
|
var start = {
|
|
type: 'html-button-response',
|
|
stimulus: '<p>The previous trial was an automatic preload trial.</p>'+
|
|
'<p>This trial loaded all stimuli files that can be automatically preloaded<br>based on the main jsPsych experiment timeline.</p>'+
|
|
'<p>In this example experiment, there are two trials in which the stimuli can be automatically preloaded.</p>'+
|
|
'<p>The stimuli for these trials have finished loading.</p>',
|
|
choices: ['Next']
|
|
};
|
|
|
|
var image_trial = {
|
|
type: 'image-button-response',
|
|
stimulus: 'img/happy_face_1.jpg',
|
|
choices: ['Happy', 'Sad'],
|
|
stimulus_width: 400
|
|
};
|
|
|
|
var audio_trial = {
|
|
type: 'audio-button-response',
|
|
stimulus: ['sound/speech_green.mp3'],
|
|
choices: ['Continue']
|
|
};
|
|
|
|
var start_fail_example_1 = {
|
|
type: 'html-button-response',
|
|
stimulus: '<p>The next trial is a manual preload trial.</p>'+
|
|
'<p>Manual preloading allows you to load specific files, for instance if you want to load files in batches,<br>'+
|
|
'or if the stimuli cannot be automatically preloaded (because you are using timeline variables or dynamic parameters).</p>'+
|
|
'<p>In the next preload example, the files in the <i>images</i> array do not exist, so the preload will fail.</p>'+
|
|
'<p>The <i>continue_after_error</i> parameter is set to <i>true</i>, so the experiment will continue despite the preload failure.</p>',
|
|
choices: ['Next']
|
|
};
|
|
|
|
// manually preload specific files
|
|
// continue with the experiment even if one or more files fails to load
|
|
var preload_fail_example_1 = {
|
|
type: 'preload',
|
|
images: ['BAD_IMAGE_NAME_1','BAD_IMAGE_NAME_2','BAD_IMAGE_NAME_3'],
|
|
audio: ['sound/speech_green.mp3','sound/speech_red.mp3'],
|
|
message: '<p>Please wait while the files load.</p>',
|
|
continue_after_error: true,
|
|
max_load_time: 4000,
|
|
on_error: function(file) {
|
|
console.log('Error: ',file);
|
|
},
|
|
on_success: function(file) {
|
|
console.log('Loaded: ',file);
|
|
}
|
|
};
|
|
|
|
var after_fail_example_1 = {
|
|
type: 'html-button-response',
|
|
stimulus: function() {
|
|
var message;
|
|
// if continue_after_error is true in your preload trial, then you can check the trial
|
|
// data to see if preloading was successful
|
|
var preload_trial_data = jsPsych.data.getLastTrialData().values()[0];
|
|
if (preload_trial_data.success) {
|
|
message = '<p>All files loaded successfully!</p>';
|
|
} else {
|
|
message = '<p>There was a problem loading one or more files.</p>'+
|
|
'<p>The files that failed to load are listed in the data for the previous trial.</p>';
|
|
}
|
|
return message;
|
|
},
|
|
choices: ['Next']
|
|
};
|
|
|
|
var start_fail_example_2 = {
|
|
type: 'html-button-response',
|
|
stimulus: '<p>The next trial is another manual preload trial.</p>'+
|
|
'<p>It has been set up with bad file names, so it will also fail.</p>'+
|
|
'<p>This time the <i>continue_after_error</i> parameter is set to <i>false</i>, so the experiment will stop with an error message.</p>'+
|
|
'<p>The next trial will also show details about the errors (<i>show_detailed_errors: true</i>).</p>',
|
|
choices: ['Next']
|
|
};
|
|
|
|
// manually preload specific files
|
|
// if loading fails, then stop with a detailed error message
|
|
var preload_fail_example_2 = {
|
|
type: 'preload',
|
|
images: ['img/happy_face_2.jpg','img/happy_face_3.jpg','img/sad_face_1.jpg','img/sad_face_2.jpg','img/sad_face_3.jpg','img/sad_face_4.jpg',
|
|
'img/1.gif','img/2.gif','img/3.gif','img/4.gif','img/5.gif','img/6.gif','img/7.gif','img/8.gif','img/9.gif','img/10.gif','img/11.gif','img/12.gif',
|
|
'BAD_IMAGE_NAME'],
|
|
audio: ['BAD_AUDIO_NAME'],
|
|
video: ['video/sample_video.mp4', 'BAD_VIDEO_NAME'], // videos will not be preloaded if HTML file is running locally (i.e. safe mode)
|
|
message: '<p>Please wait...</p>',
|
|
show_detailed_errors: true,
|
|
max_load_time: null,
|
|
post_trial_gap: 1000,
|
|
on_error: function(file) {
|
|
console.log('Error: ',file);
|
|
},
|
|
on_success: function(file) {
|
|
console.log('Loaded: ',file);
|
|
}
|
|
};
|
|
|
|
var after_fail_example_2 = {
|
|
type: 'html-button-response',
|
|
stimulus: '<p>All files loaded successfully!</p>',
|
|
choices: ['End']
|
|
};
|
|
|
|
jsPsych.init({
|
|
timeline: [auto_preload_trial, start, image_trial, audio_trial,
|
|
start_fail_example_1, preload_fail_example_1, after_fail_example_1,
|
|
start_fail_example_2, preload_fail_example_2, after_fail_example_2],
|
|
on_finish: function(){jsPsych.data.displayData();}
|
|
});
|
|
|
|
</script>
|
|
</html>
|