mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-11 16:18:11 +00:00
73 lines
1.8 KiB
HTML
73 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script src="../jspsych.js"></script>
|
|
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
|
|
<script src="../plugins/jspsych-webgazer-calibrate.js"></script>
|
|
<script src="js/webgazer.js"></script>
|
|
<script src="../extensions/jspsych-ext-webgazer.js"></script>
|
|
<link rel="stylesheet" href="../css/jspsych.css">
|
|
</head>
|
|
|
|
<body></body>
|
|
|
|
<script>
|
|
|
|
var calibration = {
|
|
type: 'webgazer-calibrate'
|
|
}
|
|
|
|
var fixation = {
|
|
type: 'html-keyboard-response',
|
|
stimulus: '+',
|
|
choices: jsPsych.NO_KEYS,
|
|
trial_duration: 500
|
|
}
|
|
|
|
var trial = {
|
|
type: 'html-keyboard-response',
|
|
stimulus: function () {
|
|
return(
|
|
`<div style="position: relative; width: 50vh; height: 50vh;">
|
|
<div style="position: absolute; top:${jsPsych.timelineVariable('top', true)}%; left: ${jsPsych.timelineVariable('left', true)}%">
|
|
<span style="font-family: monospace; font-size: 40px;">${jsPsych.timelineVariable('direction', true) == 'left' ? '<' : '>'}</span>
|
|
</div>
|
|
</div>`
|
|
)
|
|
},
|
|
choices: ['a', 'l'],
|
|
post_trial_gap: 250,
|
|
extensions: ['webgazer']
|
|
}
|
|
|
|
var params = [
|
|
{ left: 0, top: 0, direction: 'left' },
|
|
{ left: 100, top: 0, direction: 'left' },
|
|
{ left: 0, top: 100, direction: 'left' },
|
|
{ left: 100, top: 100, direction: 'left' },
|
|
{ left: 0, top: 0, direction: 'right' },
|
|
{ left: 100, top: 0, direction: 'right' },
|
|
{ left: 0, top: 100, direction: 'right' },
|
|
{ left: 100, top: 100, direction: 'right' },
|
|
]
|
|
|
|
var trial_proc = {
|
|
timeline: [fixation, trial],
|
|
timeline_variables: params,
|
|
randomize_order: true
|
|
}
|
|
|
|
var timeline = [];
|
|
timeline.push(calibration);
|
|
timeline.push(trial_proc);
|
|
|
|
jsPsych.init({
|
|
timeline: timeline,
|
|
extensions: [
|
|
{type: 'webgazer'}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
</html> |