move img width from <style> to param, add pre_trial text

This commit is contained in:
Becky Gilbert 2020-12-08 14:40:03 -08:00
parent 5fc38b2a04
commit a20d6f9e04

View File

@ -2,12 +2,9 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <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-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
<style>
img {
width: 300px;
}
</style> </style>
</head> </head>
<body></body> <body></body>
@ -22,7 +19,17 @@
'img/sad_face_2.jpg', 'img/sad_face_2.jpg',
'img/sad_face_3.jpg', 'img/sad_face_3.jpg',
'img/sad_face_4.jpg' 'img/sad_face_4.jpg'
] ];
var pre_trial = {
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>'+
'<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>'+
'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>Press any key to continue.</p>'
}
var trial = { var trial = {
type: 'image-keyboard-response', type: 'image-keyboard-response',
@ -30,16 +37,16 @@
return jsPsych.randomization.sampleWithoutReplacement(images_to_preload, 1)[0]; return jsPsych.randomization.sampleWithoutReplacement(images_to_preload, 1)[0];
}, },
choices: ['y','n'], choices: ['y','n'],
prompt: '<p>Have you seen this face before? Y or N.</p>' prompt: '<p>Have you seen this face before? Y or N.</p>',
stimulus_width: 300
} }
jsPsych.init({ jsPsych.init({
timeline: [trial], timeline: [pre_trial, trial],
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
}, },
preload_images: images_to_preload, preload_images: images_to_preload
default_iti: 250
}); });
</script> </script>