jsPsych/examples/timeline-variables.html
2017-06-07 12:43:31 -04:00

60 lines
1.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script>
<script src="../plugins/jspsych-single-audio.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
</body>
<script>
var timeline_variables = [
{ v1: 'img/happy_face_1.jpg', v2: 'Ann' },
{ v1: 'img/happy_face_2.jpg', v2: 'Jackson' },
{ v1: 'img/happy_face_3.jpg', v2: 'Riley' }
];
var node = {
timeline_variables: timeline_variables,
timeline: [
{
type: 'single-stim',
choices: ['none'], // Y or N
stimulus: "<p style='text-align:center; font-size:80px;'>+</p>",
timing_response: 500,
is_html: true
},
{
type: 'single-stim',
choices: [89, 78], // Y or N
stimulus: jsPsych.timelineVariable('v1'),
prompt: function() { return '<p class="center-content">Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Y or N.</p>' }
}
],
randomize_order: true,
repetitions: 2
}
jsPsych.init({
timeline: [node],
preload_images: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg'],
on_finish: function() {
jsPsych.data.displayData();
},
default_iti: 250
});
</script>
</html>