-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstroop.html
143 lines (117 loc) · 4.21 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<head>
<style>
.word {font-size:250%;}
.red {color:red;}
.blue {color:blue;}
.green {color:green;}
.yellow {color:yellow;}
.purple {color:indigo;}
.orange {color:orange;}
</style>
<div class="instructions">
<h3>This is the Stroop test portion of David Kurkovskiy's French Language Assessment + Perception test. Please enter your participant id in the box below, and click enter. You will then take an interactive Stroop test, in which you will be asked to indicate the color of a word on the screen.</h3>
<p>
<h4>As soon as you type in the paricipant ID and press enter, the instruction messages will disappear, and the test will begin. The bottom half of the screen will have a word that is written in a certain color. In the textbook, please type the color of the word (lower case is fine), and not the text of the word. Press enter as soon as you are done, and the next trial will subsequently begin. Thank you for participating in the study.
</div>
<hr>
<div class="subject-box" align="center">
<div class="input-text">Participant ID:</div> <input type="text" id="subject-id"></input>
</div>
<br><br><br><br>
<div class="word" align="center" style="display: none;">
The test will begin when you next press enter. Remember to type the color of the word written here in lowercase, not the text. Colors and words will be either red, orange, yellow, green, blue, or purple. The very first test will be a sample phrase to callibrate your typing speed; please copy it over into the box.
</div>
<div class="results" align="center">
</div>
<script src = "jquery.js"></script>
<script>
var counter = 0;
var target_text = "";
var target_color = "";
var reactionTimes = [];
var start;
var end;
var congruent_count = 0;
var subtractTimes = function(d1, d2) {
return Math.abs(d1 - d2);
}
var randomText = function() {
var words;
if (counter < 2) {
words = ['the quick brown fox jumped over the lazy dog']
}
else if (counter < 52) {
words = ['red', 'green', 'blue', 'yellow', 'purple', 'orange'];
}
return words[Math.floor(Math.random() * words.length)];
}
var randomColor = function() {
var colors;
if (counter < 2) {
colors = ['the quick brown fox jumped over the lazy dog']
}
else if (counter < 52) {
colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange'];
}
return colors[Math.floor(Math.random() * colors.length)];
}
var updateWord = function() {
target_text = randomText();
target_color = randomColor();
if (target_text == target_color) {
congruent_count++;
}
$(".word").attr('class', 'word' + ' ' + target_color);
$(".word").text(target_text);
}
var nextTrial = function() {
var start = new Date();
$("#subject-id").keypress(function(e) {
if (e.which == 13) {
var end = new Date();
var reaction_time = subtractTimes(start, end);
console.log("Time elapsed:" + reaction_time);
}
})
}
$("#subject-id").keypress(function(e) {
if (e.which == 13) {
if (counter == 0) {
var sID = $("#subject-id")[0].value;
console.log(sID);
reactionTimes.push(sID);
$("#subject-id")[0].value = "";
$(".input-text").text("Answer:");
$(".instructions").hide();
$(".word").show();
counter++;
}
else if (counter > 0 && counter < 52) {
if (target_text.length > 0 && $("#subject-id")[0].value == target_color) {
end = new Date();
var reaction_time = subtractTimes(start, end);
console.log("Time elapsed:" + " " + reaction_time);
reactionTimes.push(reaction_time);
$("#subject-id")[0].value = "";
counter++;
if (counter < 52) {
updateWord();
start = new Date();
}
else if (counter >= 52) {
$(".word").hide();
reactionTimes.push(congruent_count);
var csvString = reactionTimes.join(",");
$(".results").text(csvString);
}
}
else if (target_text.length == 0) {
$("#subject-id")[0].value = "";
updateWord();
start = new Date();
}
}
}
})
</script>