mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
switch to preloading via preload plugin in example files
This commit is contained in:
Becky Gilbert
parent
b5211be302
commit
f1ee56973a
@ -5,6 +5,7 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-html-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">
|
||||
</head>
|
||||
<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*/
|
||||
var timeline = [];
|
||||
timeline.push(preload);
|
||||
timeline.push(welcome);
|
||||
timeline.push(instructions);
|
||||
timeline.push(test);
|
||||
@ -100,7 +109,6 @@
|
||||
/*start experiment*/
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
preload_images: ["img/con1.png","img/con2.png","img/inc1.png","img/inc2.png"],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<head>
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-categorize-animation.js"></script>
|
||||
<script src="../plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {
|
||||
@ -15,6 +16,11 @@
|
||||
<body></body>
|
||||
<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.
|
||||
// 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.
|
||||
@ -32,8 +38,7 @@
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
preload_images: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
|
||||
timeline: [preload, trials],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
|
||||
@ -6,12 +6,21 @@
|
||||
<script src="../plugins/jspsych-iat-image.js"></script>
|
||||
<script src="../plugins/jspsych-iat-html.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">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<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 = {
|
||||
type: 'html-keyboard-response',
|
||||
stimulus: '<p>Welcome to the Age Task. In this study you will ' +
|
||||
@ -482,6 +491,7 @@ var trial_block7 = {
|
||||
};
|
||||
|
||||
var timeline = [];
|
||||
timeline.push(preload);
|
||||
timeline.push(welcome_block);
|
||||
timeline.push(category_block);
|
||||
timeline.push(instructions_block);
|
||||
@ -502,8 +512,6 @@ var trial_block7 = {
|
||||
|
||||
jsPsych.init({
|
||||
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() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<script src="../jspsych.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">
|
||||
</head>
|
||||
<body></body>
|
||||
@ -10,6 +11,13 @@
|
||||
|
||||
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.
|
||||
// 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.
|
||||
@ -76,7 +84,6 @@
|
||||
|
||||
jsPsych.init({
|
||||
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();}
|
||||
});
|
||||
|
||||
|
||||
@ -3,11 +3,19 @@
|
||||
<head>
|
||||
<script src="../jspsych.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">
|
||||
</head>
|
||||
<body></body>
|
||||
<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.
|
||||
// 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.
|
||||
@ -68,7 +76,6 @@
|
||||
|
||||
jsPsych.init({
|
||||
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() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
|
||||
@ -3,11 +3,21 @@
|
||||
<head>
|
||||
<script src="../jspsych.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">
|
||||
</head>
|
||||
<body></body>
|
||||
<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.
|
||||
// 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.
|
||||
@ -64,8 +74,7 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [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'],
|
||||
timeline: [preload, trial_proc, trial_1, trial_2, trial_3],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
|
||||
@ -4,11 +4,20 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-video-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">
|
||||
</head>
|
||||
<body></body>
|
||||
<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 = {
|
||||
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>',
|
||||
@ -48,8 +57,7 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
show_preload_progress_bar: true,
|
||||
timeline: [pre_trial, trial_1, trial_2],
|
||||
timeline: [preload, pre_trial, trial_1, trial_2],
|
||||
on_finish: function() { jsPsych.data.displayData(); }
|
||||
});
|
||||
|
||||
|
||||
@ -4,10 +4,19 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-video-keyboard-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">
|
||||
</head>
|
||||
<body></body>
|
||||
<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 = {
|
||||
type: 'html-button-response',
|
||||
@ -44,8 +53,7 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
show_preload_progress_bar: true,
|
||||
timeline: [pre_trial, trial_1, trial_2],
|
||||
timeline: [preload, pre_trial, trial_1, trial_2],
|
||||
on_finish: function() { jsPsych.data.displayData(); }
|
||||
});
|
||||
|
||||
|
||||
@ -4,11 +4,20 @@
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-video-slider-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">
|
||||
</head>
|
||||
<body></body>
|
||||
<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 = {
|
||||
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>',
|
||||
@ -46,8 +55,7 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
show_preload_progress_bar: true,
|
||||
timeline: [pre_trial, trial_1, trial_2],
|
||||
timeline: [preload, pre_trial, trial_1, trial_2],
|
||||
on_finish: function() { jsPsych.data.displayData(); }
|
||||
});
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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-image-keyboard-response.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
@ -10,6 +11,7 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// create the list of images that should be preloaded
|
||||
var images_to_preload = [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
@ -21,13 +23,18 @@
|
||||
'img/sad_face_4.jpg'
|
||||
];
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
images: images_to_preload // preload the list of images
|
||||
}
|
||||
|
||||
var pre_trial = {
|
||||
type: 'html-keyboard-response',
|
||||
stimulus: '<p>If you check the Network tab in your browser’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>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>'+
|
||||
'<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>'
|
||||
}
|
||||
|
||||
@ -42,11 +49,10 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [pre_trial, trial],
|
||||
timeline: [preload, pre_trial, trial],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
preload_images: images_to_preload
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
|
||||
<script src="../jspsych.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-preload.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css">
|
||||
</head>
|
||||
|
||||
@ -14,6 +14,14 @@
|
||||
</body>
|
||||
<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 = [
|
||||
{ v1: 'img/happy_face_1.jpg', v2: 'Ann' },
|
||||
{ v1: 'img/happy_face_2.jpg', v2: 'Jackson' },
|
||||
@ -44,8 +52,7 @@
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [node],
|
||||
preload_images: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg'],
|
||||
timeline: [preload, node],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user