HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

switch to preloading via preload plugin in example files

Browse Source
This commit is contained in:
Becky Gilbert 2021-02-11 12:12:53 -08:00
parent b5211be302
commit f1ee56973a
11 changed files with 104 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/demo-flanker.html
View File

@ -5,6 +5,7 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body> <body>
@ -90,8 +91,16 @@
} }
}; };
// manually preload images due to presenting them with timeline variables
var images = ["img/con1.png","img/con2.png","img/inc1.png","img/inc2.png"];
var preload = {
type: 'preload',
images: images
}
/*set up experiment structure*/ /*set up experiment structure*/
var timeline = []; var timeline = [];
timeline.push(preload);
timeline.push(welcome); timeline.push(welcome);
timeline.push(instructions); timeline.push(instructions);
timeline.push(test); timeline.push(test);
@ -100,7 +109,6 @@
/*start experiment*/ /*start experiment*/
jsPsych.init({ jsPsych.init({
timeline: timeline, timeline: timeline,
preload_images: ["img/con1.png","img/con2.png","img/inc1.png","img/inc2.png"],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }

9
examples/jspsych-categorize-animation.html
View File

@ -4,6 +4,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-categorize-animation.js"></script> <script src="../plugins/jspsych-categorize-animation.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
<style> <style>
#jspsych-categorize-animation-stimulus { #jspsych-categorize-animation-stimulus {
@ -15,6 +16,11 @@
<body></body> <body></body>
<script> <script>
var preload = {
type: 'preload',
auto_preload: true
}
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element. // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
// blank screen (white flash) between images. // blank screen (white flash) between images.
@ -32,8 +38,7 @@
}; };
jsPsych.init({ jsPsych.init({
timeline: [trials], timeline: [preload, trials],
preload_images: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }

12
examples/jspsych-iat.html
View File

@ -6,12 +6,21 @@
<script src="../plugins/jspsych-iat-image.js"></script> <script src="../plugins/jspsych-iat-image.js"></script>
<script src="../plugins/jspsych-iat-html.js"></script> <script src="../plugins/jspsych-iat-html.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link href="../css/jspsych.css" rel="stylesheet"> <link href="../css/jspsych.css" rel="stylesheet">
</head> </head>
<body> <body>
</body> </body>
<script> <script>
// manually preload images due to presenting them with timeline variables
var images = ['img/age/of1.jpg','img/age/of2.jpg','img/age/of3.jpg','img/age/om1.jpg','img/age/om2.jpg','img/age/om3.jpg',
'img/age/yf1.jpg','img/age/yf4.jpg','img/age/yf5.jpg','img/age/ym2.jpg','img/age/ym3.jpg','img/age/ym5.jpg'];
var preload = {
type: 'preload',
images: images
}
var welcome_block = { var welcome_block = {
type: 'html-keyboard-response', type: 'html-keyboard-response',
stimulus: '<p>Welcome to the Age Task. In this study you will ' + stimulus: '<p>Welcome to the Age Task. In this study you will ' +
@ -482,6 +491,7 @@ var trial_block7 = {
}; };
var timeline = []; var timeline = [];
timeline.push(preload);
timeline.push(welcome_block); timeline.push(welcome_block);
timeline.push(category_block); timeline.push(category_block);
timeline.push(instructions_block); timeline.push(instructions_block);
@ -502,8 +512,6 @@ var trial_block7 = {
jsPsych.init({ jsPsych.init({
timeline: timeline, timeline: timeline,
preload_images: ['img/age/of1.jpg','img/age/of2.jpg','img/age/of3.jpg','img/age/om1.jpg','img/age/om2.jpg','img/age/om3.jpg',
'img/age/yf1.jpg','img/age/yf4.jpg','img/age/yf5.jpg','img/age/ym2.jpg','img/age/ym3.jpg','img/age/ym5.jpg'],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }

9
examples/jspsych-image-button-response.html
View File

@ -3,6 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-button-response.js"></script> <script src="../plugins/jspsych-image-button-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
@ -10,6 +11,13 @@
var timeline = []; var timeline = [];
// all images are used in standard trials that can be automatically preloaded (as well as being used in trials
// that use timeline variables), so we can preload all image files with the auto_preload option
timeline.push({
type: 'preload',
auto_preload: true
});
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element. // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them. // blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
@ -76,7 +84,6 @@
jsPsych.init({ jsPsych.init({
timeline: timeline, timeline: timeline,
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
on_finish: function(){jsPsych.data.displayData();} on_finish: function(){jsPsych.data.displayData();}
}); });

9
examples/jspsych-image-keyboard-response.html
View File

@ -3,11 +3,19 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
<script> <script>
// all images are used in standard trials that can be automatically preloaded (as well as being used in trials
// that use timeline variables), so we can preload all image files with the auto_preload option
timeline.push({
type: 'preload',
auto_preload: true
});
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element. // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them. // blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
@ -68,7 +76,6 @@
jsPsych.init({ jsPsych.init({
timeline: [trial_proc, trial_1, trial_2, trial_3, trial_4], timeline: [trial_proc, trial_1, trial_2, trial_3, trial_4],
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }

13
examples/jspsych-image-slider-response.html
View File

@ -3,11 +3,21 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-slider-response.js"></script> <script src="../plugins/jspsych-image-slider-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
<script> <script>
// three images are used in a standard way in image-* plugins and can therefore be automatically preloaded.
// there's one additional image ('img/happy_face_4.jpg') that is only used in timeline variables
// and will not be automatically preloaded, so this file must be preloaded manually.
var preload = {
type: 'preload',
auto_preload: true,
images: ['img/happy_face_4.jpg']
}
// If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element. // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
// In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
// blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them. // blank screen (white flash) between images that are presented consecutively with no post_trial_gap between them.
@ -64,8 +74,7 @@
} }
jsPsych.init({ jsPsych.init({
timeline: [trial_proc, trial_1, trial_2, trial_3], timeline: [preload, trial_proc, trial_1, trial_2, trial_3],
preload_images: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
}, },

12
examples/jspsych-video-button-response.html
View File

@ -4,11 +4,20 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-video-button-response.js"></script> <script src="../plugins/jspsych-video-button-response.js"></script>
<script src="../plugins/jspsych-html-button-response.js"></script> <script src="../plugins/jspsych-html-button-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
<script> <script>
// preloading videos only works when the file is running on a server
// if you run this experiment by opening the file directly in the browser,
// then video preloading will be disabled to prevent CORS errors
var preload = {
type: 'preload',
auto_preload: true
}
var pre_trial = { var pre_trial = {
type: 'html-button-response', type: 'html-button-response',
stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>', stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>',
@ -48,8 +57,7 @@
} }
jsPsych.init({ jsPsych.init({
show_preload_progress_bar: true, timeline: [preload, pre_trial, trial_1, trial_2],
timeline: [pre_trial, trial_1, trial_2],
on_finish: function() { jsPsych.data.displayData(); } on_finish: function() { jsPsych.data.displayData(); }
}); });

12
examples/jspsych-video-keyboard-response.html
View File

@ -4,10 +4,19 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-video-keyboard-response.js"></script> <script src="../plugins/jspsych-video-keyboard-response.js"></script>
<script src="../plugins/jspsych-html-button-response.js"></script> <script src="../plugins/jspsych-html-button-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
<script> <script>
// preloading videos only works when the file is running on a server
// if you run this experiment by opening the file directly in the browser,
// then video preloading will be disabled to prevent CORS errors
var preload = {
type: 'preload',
auto_preload: true
}
var pre_trial = { var pre_trial = {
type: 'html-button-response', type: 'html-button-response',
@ -44,8 +53,7 @@
} }
jsPsych.init({ jsPsych.init({
show_preload_progress_bar: true, timeline: [preload, pre_trial, trial_1, trial_2],
timeline: [pre_trial, trial_1, trial_2],
on_finish: function() { jsPsych.data.displayData(); } on_finish: function() { jsPsych.data.displayData(); }
}); });

12
examples/jspsych-video-slider-response.html
View File

@ -4,11 +4,20 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-video-slider-response.js"></script> <script src="../plugins/jspsych-video-slider-response.js"></script>
<script src="../plugins/jspsych-html-button-response.js"></script> <script src="../plugins/jspsych-html-button-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body></body> <body></body>
<script> <script>
// preloading videos only works when the file is running on a server
// if you run this experiment by opening the file directly in the browser,
// then video preloading will be disabled to prevent CORS errors
var preload = {
type: 'preload',
auto_preload: true
}
var pre_trial = { var pre_trial = {
type: 'html-button-response', type: 'html-button-response',
stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>', stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>',
@ -46,8 +55,7 @@
} }
jsPsych.init({ jsPsych.init({
show_preload_progress_bar: true, timeline: [preload, pre_trial, trial_1, trial_2],
timeline: [pre_trial, trial_1, trial_2],
on_finish: function() { jsPsych.data.displayData(); } on_finish: function() { jsPsych.data.displayData(); }
}); });

16
examples/manual-preloading.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
@ -10,6 +11,7 @@
<body></body> <body></body>
<script> <script>
// create the list of images that should be preloaded
var images_to_preload = [ var images_to_preload = [
'img/happy_face_1.jpg', 'img/happy_face_1.jpg',
'img/happy_face_2.jpg', 'img/happy_face_2.jpg',
@ -21,13 +23,18 @@
'img/sad_face_4.jpg' 'img/sad_face_4.jpg'
]; ];
var preload_trial = {
type: 'preload',
images: images_to_preload // preload the list of images
}
var pre_trial = { var pre_trial = {
type: 'html-keyboard-response', type: 'html-keyboard-response',
stimulus: '<p>If you check the Network tab in your browser&rsquo;s developer tools,<br>you should see that 8 images have been loaded into memory.</p>'+ stimulus: '<p>If you check the Network tab in your browser&rsquo;s developer tools,<br>you should see that 8 images have been loaded into memory.</p>'+
'<p>The next trial uses the image-keyboard-response plugin.<br>This plugin automatically preloads the image when an image file name is used for the stimulus parameter.</p>'+ '<p>The next trial uses the image-keyboard-response plugin.<br>This plugin automatically preloads the image when an image file name is used for the stimulus parameter.</p>'+
'<p>However, in this case the stimulus parameter is a <em>function</em> that randomly selects an image to display,<br>'+ '<p>However, in this case the stimulus parameter is a <em>function</em> that randomly selects an image to display.<br>'+
'We therefore need to manually preload the images.</p>'+ 'We therefore need to manually preload the images.</p>'+
'<p>The image that is selected should not load again in the Network tab when the trial starts.</p>'+ '<p>The image that is randomly selected and displayed in the next trial should not load again in the Network tab when the trial starts.</p>'+
'<p>Press any key to continue.</p>' '<p>Press any key to continue.</p>'
} }
@ -42,11 +49,10 @@
} }
jsPsych.init({ jsPsych.init({
timeline: [pre_trial, trial], timeline: [preload, pre_trial, trial],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
}, }
preload_images: images_to_preload
}); });
</script> </script>

13
examples/timeline-variables.html
View File

@ -5,8 +5,8 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-audio-keyboard-response.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-preload.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
@ -14,6 +14,14 @@
</body> </body>
<script> <script>
// manually preload the image files, since they are passed to the image-keyboard-response stimulus parameter
// through timeline variables, and therefore cannot be automatically preloaded
var images = ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg'];
var preload = {
type: 'preload',
images: images
}
var timeline_variables = [ var timeline_variables = [
{ v1: 'img/happy_face_1.jpg', v2: 'Ann' }, { v1: 'img/happy_face_1.jpg', v2: 'Ann' },
{ v1: 'img/happy_face_2.jpg', v2: 'Jackson' }, { v1: 'img/happy_face_2.jpg', v2: 'Jackson' },
@ -44,8 +52,7 @@
} }
jsPsych.init({ jsPsych.init({
timeline: [node], timeline: [preload, node],
preload_images: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg'],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
}, },