-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
228 lines (179 loc) · 12.1 KB
/
index.js
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////// EXPERIMENT LEADER ////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////// DEMOGRAPHICS /////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// GOAL
// The Experiment Leader (EL) is provided with welcome instructions.
// The EL provides the Participant demographics, which are used to calculate final scores
// The EL specifies a password that is used to access the results at the final stage
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.onload = canvasSize(); // CALL canvasSize to determine if window is large enough to display Bourdon Vos Test
// INTIALIZE VARIABLES
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function canvasSize() {
// GOAL: determine size of screen and adjust size of the presented stimuli to be as
// ... large as possible
// ASSUMPTION: Computer & Laptop screens are wider than they are high.
// ... Thus in order to create maximum sized squares, only the width needs to be taken into account.
// DETERMINE WINDOW SIZE
var winWidth = (window.innerWidth - 30); // available amount of pixels on the inside of the window taking into account a distance between the first figure and the windowborder
// CALCULATE MAX CANVAS WIDTH
var canvasWidth = (winWidth / (24)); // divide by 24 because 24 columns have to fit the screen
// SET MAX/MIN DIMENSIONS:
if (canvasWidth > 80) {
canvasWidth = 80;
} else if (canvasWidth < 50) {
window.alert("Screen too small to display Bourdon Vos Test. Please adjust window size (i.e. make fullscreen) & reload. If you cannot make the window any larger, you cannot display the Bourdon Vos test on your device.");
// pp will reload until window is large enough to display 24 figures in the width of the screen
} // END IF
return canvasWidth;
} // END canvasSize FUNCTION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CREATE EL ENVIRONMENT
document.body.style.backgroundColor = "Teal"; // set background color
document.getElementById("button").innerHTML = "Demographics"; // display demographics button
document.getElementById("button").onclick = function () {demographics() }; // CALL demographics function upon button click
// DISPLAY INSTRUCTIONS
document.getElementById("maintext").innerHTML = (
"Dear Experiment Leader," + "<br>" +
"You are about to administer the Bourdon Vos Test. The Bourdon Vos Test is used to measure continued attention in children aged 6 - 17 years old." + "<br>" +
"Please click the 'demographics' button to enter the participant's demographics. You will also be asked to specify a password that protects the results from being accessed by the participant. Please be aware that if you forget the pre-specified password, you will not be able to access the results!"
);
// console.log("Displayed Welcome Instructions.");
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function demographics () {
// GOAL: to let the EL enter the participant's demographics
// ... & stop the task from exectution if age requirements (6 < age < 17) are not met.
// stop task if EL chooses to stop entering demographics
// INPUT VARIABLES: none
// SET VARIABLES
validated = "No"; // used to validate age input
var firstName = "";
var lastName = "";
var gender = "";
var age = 0;
var resultPassword = "";
var firstName = window.prompt("First name: "); // ... enter pp. first name
if (firstName != null) { // if null then EL did not enter a first name
var lastName = window.prompt("Last name: "); // ... enters pp. last name
if (lastName != null) { // if null then EL did not enter a last name
var gender = window.prompt("The participant is ... [Male/Female/Other]"); // ... enter pp gender [suggestions]
if (gender != null) { // if null then EL did not enter gender
var age = agePrompt(); // CALL enter pp age & validate
if (age != null) { // if null then EL cancelled age input
var resultPassword =
window.prompt(("Please enter a password that will allow only you" +
" to access the participant's results after completion." +
" Please be aware that you will not be able to access the results if you forget this password."), "enter password");
// experimenter enters password that is required to extract results at the end
} else {
// finish task
finishTask();
} // END age IF
} else {
// finish task
finishTask();
} // END gender IF
} else {
// finish task
finishTask();
} // END lastname IF
} else {
// finish task
finishTask();
} // END firstname IF
// DISPLAY NEW INSTRUCTIONS
document.getElementById("maintext").innerHTML =
("Thank you for entering the participant's demographics" +
"<br>" + "It is now time to call the participant." + "<br>" +
"Please press 'next' to display the participant instructions");
// SET NEW BUTTON
document.getElementById("button").innerHTML = "next"; // change button text
document.getElementById("button").onclick = function(){window.location.href = "bv_test_fixed.html"}; // load practice window upon clicking the button
// STORE DATA (temporary local memory)
sessionStorage.setItem("FIRSTNAME", firstName);
sessionStorage.setItem("LASTNAME", lastName);
sessionStorage.setItem("AGE", age);
sessionStorage.setItem("RESULT_ACCES_PASSWORD", String(resultPassword));
// TEST
console.log("Firstname = " + firstName); // display input
console.log("Lastname = " + lastName); // display input
console.log("Gender = " + gender); // display input
console.log("Age = " + age); // display input
console.log("CONDITION; age between 6 - 17 [true] : " + ((age > 6) && (age < 17))); // condition
console.log("CONDITION; age is NOT a number [false] : " + isNaN(age)); // condition
console.log("CONDITION; a password stored in memory [NOT null / undefined] : " + typeof(sessionStorage.getItem("RESULT_ACCES_PASSWORD")));
} // END demographics FUNCTION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function agePrompt () {
// GOAL: To determine whether the input for the participant demographics is a number and falls between the appropriate age range for the Bourdon Vos Test (6 - 17)
// INPUT VARIABLES: none
while (validated == "No") { // set in demographics ()
var age = parseFloat(window.prompt("The participant is ... years old: ")); // ... enter pp. age
// parseFloat to change numerical input from prompt to number instead of string
if (isNaN(age) == false) {
// number validation passed >> age is a number
// check if age falls within limits: 6 < age < 17, if not prompt for re-entry of demographics
if (age < 6 || age > 17) {
// pp age does not fall within age limit
window.alert("The participants age = " + age + ". The BVTest is only suited for children between 6 and 17 years.");
// Re-enter participant age?
var reEnter = window.confirm(
"Do you wish to re-enter the participant's age?");
// Confirm or cancel pop-up box
// ... if confirmed reEnter == true, if canceld reEnter == false
if (reEnter == true) {
validated == "No"; // prompts re-entry and re-validation for age, continue while loop
} else {
// the experimenter did not want to re-enter the pp demographics
// reEnter == false
console.log("The experiment leader did not wish to re-enter the demographics")
document.getElementById("maintext").innerHTML =
"Thank you for viewing the online Bourdon Vos Test. Please contact [email protected] for any questions or comments regarding the test.";
document.getElementById("button").style.visibility = "hidden"; // no advance possible to task
} // END reEnter
} else {
// participant age lies within age range
validated = "Yes"; // discontinue the while loop
} // END age IF
} else {
// pp age = not a number
window.alert("The participant age you specified was not a number. Please enter the participant's age in numbers only")
// Re-enter participant age?
var reEnter = window.confirm(
"Do you wish to re-enter the participant's age?");
// Confirm or cancel pop-up box
// ... if confirmed reEnter == true, if canceld reEnter == false
console.log("Re-enter pp age?: " + reEnter);
if (reEnter == true) {
validated == "No"; // prompts re-entry and re-validation for age
} else {
// the experimenter did not want to re-enter the pp demographics
// reEnter == false
console.log("The experiment leader did not wish to re-enter the pp age");
finishTask();
validated = "Yes"; // discontinue while loop
break; // terminate loop
} // END reEnter
} // END number IF
} // END WHILE LOOP
// TEST
// included in the parent function Demographics()
return age; // return age to parent function Demographics()
} // END agePrompt FUNCTION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function finishTask () {
// GOAL: to prevent continuation through the task because EL indicated that they wished to discontinue
// INPUT VARIABLES: none
// DISPLAY TEXT
document.getElementById("maintext").innerHTML =
("Thank you for viewing the online Bourdon Vos Test. Please contact [email protected] for any questions or comments regarding the test." +
"<br>" + "If you encountered a bug, please consider reporting this by clicking the 'bug' button.");
// DISCONTINUE ADVANCEMENT
document.getElementById("button").style.visibility = "hidden"; // hide advance button
// LOG
console.log("Discontinued Task");
} // END finishTask FUNCTION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////