mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../jspsych.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">
|
|
</style>
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
|
|
var images_to_preload = [
|
|
'img/happy_face_1.jpg',
|
|
'img/happy_face_2.jpg',
|
|
'img/happy_face_3.jpg',
|
|
'img/happy_face_4.jpg',
|
|
'img/sad_face_1.jpg',
|
|
'img/sad_face_2.jpg',
|
|
'img/sad_face_3.jpg',
|
|
'img/sad_face_4.jpg'
|
|
];
|
|
|
|
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>'+
|
|
'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 = {
|
|
type: 'image-keyboard-response',
|
|
stimulus: function(){
|
|
return jsPsych.randomization.sampleWithoutReplacement(images_to_preload, 1)[0];
|
|
},
|
|
choices: ['y','n'],
|
|
prompt: '<p>Have you seen this face before? Y or N.</p>',
|
|
stimulus_width: 300
|
|
}
|
|
|
|
jsPsych.init({
|
|
timeline: [pre_trial, trial],
|
|
on_finish: function() {
|
|
jsPsych.data.displayData();
|
|
},
|
|
preload_images: images_to_preload
|
|
});
|
|
</script>
|
|
|
|
</html>
|