jsPsych/examples/demos/demo_3.html
2021-02-19 18:21:40 -08:00

63 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="../../jspsych.js"></script>
<script src="../../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../../css/jspsych.css">
<style>
.flanker-stimulus {
font-size: 500%;
}
.debrief-text {
font-size: 25px;
}
</style>
</head>
<body>
</body>
<script>
var test_stimuli = [
{ stimulus: "<<<<<", data: { stim_type: 'congruent'} },
{ stimulus: ">>>>>", data: { stim_type: 'congruent'} },
{ stimulus: "<<><<", data: { stim_type: 'incongruent'} },
{ stimulus: ">><>>", data: { stim_type: 'incongruent'} }
];
var test = {
timeline: [{
type: 'html-keyboard-response',
choices: ["ArrowLeft", "ArrowRight"],
stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'),
post_trial_gap: 1500,
response_ends_trial: true,
css_classes: ['flanker-stimulus']
}],
timeline_variables: test_stimuli,
sample: {type: 'fixed-repetitions', size: 2}
};
var debrief = {
type: "html-keyboard-response",
stimulus: function() {
var congruent_rt = Math.round(jsPsych.data.get()
.filter({stim_type: 'congruent'}).select('rt').mean());
var incongruent_rt = Math.round(jsPsych.data.get().filter({stim_type: 'incongruent'}).select('rt').mean());
return "<p>Your average response time for congruent trials was <strong>" + congruent_rt + "ms</strong>.</p>"+
"<p>Your average response time for incongruent trials was <strong>" + incongruent_rt + "ms</strong>.</p>";
},
css_classes: ['debrief-text']
};
var timeline = [];
timeline.push(test);
timeline.push(debrief);
jsPsych.init({
timeline: timeline,
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>