-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstroop.html
105 lines (93 loc) · 3.52 KB
/
stroop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title>Stroop</title>
<script src="./dist/jspsych.js"></script>
<script src="./dist/plugin-html-keyboard-response.js"></script>
<script src="./dist/plugin-html-button-response.js"></script>
<script src="./dist/plugin-fullscreen.js"></script>
<script src="./config/variables.js"></script>
<script src="./config/en.js"></script> <!-- Use en.js for English instructions, jp.js for Japanese -->
<link href="./dist/jspsych.css" rel="stylesheet" type="text/css" />
<link href="./style/style.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData(); // for debugging
}
});
let timeline = [];
const enter_fullscreen = {
type: jsPsychFullscreen,
fullscreen_mode: true,
message: lang.fullscreen,
button_label: lang.utils.next
}
const welcome = {
type: jsPsychHtmlButtonResponse,
stimulus: lang.welcome,
choices: [lang.utils.next],
};
const instructions = {
type: jsPsychHtmlButtonResponse,
stimulus: lang.instructions.stroop,
choices: [lang.utils.next]
};
const beginTask = {
type: jsPsychHtmlButtonResponse,
stimulus: lang.begin,
choices: [lang.utils.next],
post_trial_gap: interstimuli_interval.instructions
};
timeline.push(enter_fullscreen, welcome, instructions, beginTask);
const test_stimuli = [
{ stimulus: `<span class="text text-red">${lang.stroop.red}</span>`, correct_response: 0 },
{ stimulus: `<span class="text text-red">${lang.stroop.blue}</span>`, correct_response: 0 },
{ stimulus: `<span class="text text-blue">${lang.stroop.blue}</span>`, correct_response: 1 },
{ stimulus: `<span class="text text-blue">${lang.stroop.red}</span>`, correct_response: 1 }
];
const stroop_trial = {
timeline: [{
type: jsPsychHtmlButtonResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: [lang.stroop.red, lang.stroop.blue],
trial_duration: stroop.trial_duration
}],
timeline_variables: test_stimuli,
randomize_order: true,
sample: { type: 'fixed-repetitions', size: stroop.trial_length },
data: { task: 'response', correct_response: jsPsych.timelineVariable('correct_response') },
post_trial_gap: stroop.interstimuli_interval,
on_finish: function(data) {
data.correct = data.response == data.correct_response; // don't know why jsPsych.compareKeys() doesn't work
}
}
timeline.push(stroop_trial);
const end = {
type: jsPsychHtmlButtonResponse,
stimulus: lang.end,
choices: [lang.utils.finish]
};
const exit_fullscreen = {
type: jsPsychFullscreen,
fullscreen_mode: false,
delay_after: 0
}
timeline.push(end, exit_fullscreen);
// for debugging...
const debrief_block = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
const trials = jsPsych.data.get().filter({task: 'response'});
const correct_trials = trials.filter({correct: true});
const accuracy = Math.round(correct_trials.count() / trials.count() * 100);
// const rt = Math.round(correct_trials.select('rt').mean());
return feedback(accuracy);
}
};
timeline.push(debrief_block);
jsPsych.run(timeline);
</script>
</html>