-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
376 lines (324 loc) · 18.9 KB
/
index.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
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Style.css">
</head>
<script type="text/javascript">
function getRadioClicked(name) {
/*
* This function takes in a (usually shared) name used for a question and
* iterates over the radio buttons that share it to find out which one is clicked.
* Only one can be clicked per due to how radio buttons work, so there aren't any errors
* Takes in a string, returns a string (the id of the button, which is being used to represent the value of the answer from 0 to 3)
*/
let choices = document.getElementsByName(name);
var val = "";
for (let i = 0; i < choices.length; i++) {
if (choices[i].checked)
val = choices[i].id;
}
return val
}
</script>
<body>
<h1>MHCheck</h1>
<p> Welcome to MHCheck! A simple questionnaire to assess your current mental health.</p>
<p>The questions were designed by the United Kingdom's <a href="https://www.nhs.uk/mental-health/self-help/guides-tools-and-activities/depression-anxiety-self-assessment-quiz/">NHS</a>.</p>
<button id = "login" >Login w/ Google to save your result.</button>
<button id = "signoff" >Sign Out</button>
<p id = "user-info">You are <strong>not</strong> signed in.</p>
<div id = "dash"><p id = "score-display"> </p></div>
<script>
//These are the functions to change the background and font colors to allow users an option to ease their eyes
function blackOnWhite() {
document.body.style.color = "black";
document.body.style.backgroundColor = "white";
}
function greenOnWhite() {
document.body.style.color = "#003300";
document.body.style.backgroundColor = "white";
}
function blueOnWhite() {
document.body.style.color = "#000033";
document.body.style.backgroundColor = "white";
}
function umberOnWhite() {
document.body.style.color = "#330000";
document.body.style.backgroundColor = "white";
}
function whiteOnGray() {
document.body.style.color = "#FFFFFF";
document.body.style.backgroundColor = "#333333"
}
function cyanOnBlack() {
document.body.style.color = "#00FFFF";
document.body.style.backgroundColor = "black";
}
function silverOnBlack() {
document.body.style.color = "#CCCCCC";
document.body.style.backgroundColor = "black";
}
function palette() { //the function to reveal the palette and hide the palette button
document.getElementById("paletteSelector").style.display = "block";
document.getElementById("paletteButton").style.display = "none";
}
function hidePalette() { //function to hide the palette again and to reveal the button
document.getElementById("paletteSelector").style.display = "none";
document.getElementById("paletteButton").style.display = "block";
}
</script>
<p>In the following menu, you can choose the UI combination that looks best for you: </p>
<p id="paletteButton">
<button onclick="palette()">Color Palette</button><br />
</p>
<p id="paletteSelector" style="display: none">
<button onclick="blackOnWhite()">Black font White Background</button><br />
<button onclick="greenOnWhite()">Green font White Background</button><br />
<button onclick="blueOnWhite()">Blue font White Background</button><br />
<button onclick="umberOnWhite()">Umber font White Background</button><br />
<button onclick="whiteOnGray()">White font Gray Background</button><br />
<button onclick="cyanOnBlack()">Cyan font Black Background</button><br />
<button onclick="silverOnBlack()">Silver font Black Background</button><br />
<button onclick="hidePalette()">Hide Palette</button>
</p>
<h2> Questionnaire</h2>
<p>When answering each of the questions, think about how you have felt in the past 2 weeks. Please answer each question truthfully.</p>
<p>Once you have picked the most accurate answers for each of the questions, click the <strong> What is my score?</strong> button</p>
<form name="questions">
1. How often have you been bothered by feeling down, depressed or hopeless?<br>
<input type="radio" id="0" name="q1">Not at all<br>
<input type="radio" id="1" name="q1">Several Days<br>
<input type="radio" id="2" name="q1">More than half the days<br>
<input type="radio" id="3" name="q1">Nearly every day<br>
2. How often have you had little interest or pleasure in doing things?<br>
<input type="radio" id="0" name="q2">Not at all<br>
<input type="radio" id="1" name="q2">Several Days<br>
<input type="radio" id="2" name="q2">More than half the days<br>
<input type="radio" id="3" name="q2">Nearly every day<br>
3. How often have you been bothered by trouble falling or staying asleep, or sleeping too much?<br>
<input type="radio" id="0" name="q3">Not at all<br>
<input type="radio" id="1" name="q3">Several Days<br>
<input type="radio" id="2" name="q3">More than half the days<br>
<input type="radio" id="3" name="q3">Nearly every day<br>
4. How often have you been bothered by feeling tired or having little energy?<br>
<input type="radio" id="0" name="q4">Not at all<br>
<input type="radio" id="1" name="q4">Several Days<br>
<input type="radio" id="2" name="q4">More than half the days<br>
<input type="radio" id="3" name="q4">Nearly every day<br>
5. How often have you been bothered by poor appetite or overeating?<br>
<input type="radio" id="0" name="q5">Not at all<br>
<input type="radio" id="1" name="q5">Several Days<br>
<input type="radio" id="2" name="q5">More than half the days<br>
<input type="radio" id="3" name="q5">Nearly every day<br>
6. How often have you been bothered by feeling bad about yourself, or that you are a failure, or have let yourself or your family down?<br>
<input type="radio" id="0" name="q6">Not at all<br>
<input type="radio" id="1" name="q6">Several Days<br>
<input type="radio" id="2" name="q6">More than half the days<br>
<input type="radio" id="3" name="q6">Nearly every day<br>
7. How often have you been bothered by trouble concentrating on things, such as reading the newspaper or watching television?<br>
<input type="radio" id="0" name="q7">Not at all<br>
<input type="radio" id="1" name="q7">Several Days<br>
<input type="radio" id="2" name="q7">More than half the days<br>
<input type="radio" id="3" name="q7">Nearly every day<br>
8. How often have you been bothered by moving or speaking so slowly that other people could have noticed, or the opposite - being so fidgety or restless that you have been moving around a lot more than usual?<br>
<input type="radio" id="0" name="q8">Not at all<br>
<input type="radio" id="1" name="q8">Several Days<br>
<input type="radio" id="2" name="q8">More than half the days<br>
<input type="radio" id="3" name="q8">Nearly every day<br>
9. Have you had an anxiety attack (suddenly feeling fear or panic)?<br>
<input type="radio" id="1" name="q9">Yes<br>
<input type="radio" id="0" name="q9">No<br>
10. How often have you been bothered by feeling nervous, anxious or on edge?<br>
<input type="radio" id="0" name="q10">Not at all<br>
<input type="radio" id="1" name="q10">Several Days<br>
<input type="radio" id="2" name="q10">More than half the days<br>
<input type="radio" id="3" name="q10">Nearly every day<br>
11. How often have you been bothered by not being able to stop or control worrying?<br>
<input type="radio" id="0" name="q11">Not at all<br>
<input type="radio" id="1" name="q11">Several Days<br>
<input type="radio" id="2" name="q11">More than half the days<br>
<input type="radio" id="3" name="q11">Nearly every day<br>
12. How often have you been bothered by worrying too much about different things?<br>
<input type="radio" id="0" name="q12">Not at all<br>
<input type="radio" id="1" name="q12">Several Days<br>
<input type="radio" id="2" name="q12">More than half the days<br>
<input type="radio" id="3" name="q12">Nearly every day<br>
13. How often have you been bothered by having trouble relaxing?<br>
<input type="radio" id="0" name="q13">Not at all<br>
<input type="radio" id="1" name="q13">Several Days<br>
<input type="radio" id="2" name="q13">More than half the days<br>
<input type="radio" id="3" name="q13">Nearly every day<br>
14. How often have you been bothered by being so restless that it is hard to sit still?<br>
<input type="radio" id="0" name="q14">Not at all<br>
<input type="radio" id="1" name="q14">Several Days<br>
<input type="radio" id="2" name="q14">More than half the days<br>
<input type="radio" id="3" name="q14">Nearly every day<br>
15. How often have you been bothered by becoming easily annoyed or irritable?<br>
<input type="radio" id="0" name="q15">Not at all<br>
<input type="radio" id="1" name="q15">Several Days<br>
<input type="radio" id="2" name="q15">More than half the days<br>
<input type="radio" id="3" name="q15">Nearly every day<br>
16. How often have you been bothered by feeling afraid as if something awful might happen?<br>
<input type="radio" id="0" name="q16">Not at all<br>
<input type="radio" id="1" name="q16">Several Days<br>
<input type="radio" id="2" name="q16">More than half the days<br>
<input type="radio" id="3" name="q16">Nearly every day<br>
17. If this questionnaire has highlighted any problems, how difficult have these problems made it for you to do your work, take care of things at home, or get along with other people?<br>
<input type="radio" id="0" name="q17">Not difficult at all<br>
<input type="radio" id="1" name="q17">Somewhat difficult<br>
<input type="radio" id="2" name="q17">Very difficult<br>
<input type="radio" id="3" name="q17">Extremely difficult<br>
Your MHCheck score is: <label id="total">0</label>
<input type="button" name="submit" id = "calc" value="What is my score?">
<p>The MHCheck score you receive is out of 50. A high score will reflect potential symptoms of anxiety and depression in the past weeks.</p>
<p>If that is the case, we encourage you to consult a mental health professional to better understand what is happening and how to handle it best. </p>
<p>In the meantime, you can refer to <a href= https://www.healthline.com/health/mental-health/depression-and-anxiety#treatment>this</a> article for more information and guidance.</p>
</form>
<script type="module">
/*
* The following module deals with all of the firebase implementation, including implementing google login,
* saving the user scores into the firestore database, and retrieveing those previous scores.
*/
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-analytics.js";
import { getAuth, signOut, signInWithPopup, GoogleAuthProvider} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
import { doc,setDoc,getFirestore,collection,getDocs,getDoc,updateDoc, arrayUnion, arrayRemove} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";
import {getDatabase} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-database.js";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDHnJYWxwO4jlsGbAAuHvE977m_TIWFEs8",
authDomain: "mhcheck-f5182.firebaseapp.com",
projectId: "mhcheck-f5182",
storageBucket: "mhcheck-f5182.appspot.com",
messagingSenderId: "104901433458",
appId: "1:104901433458:web:14acf9ea7be44e84d88aeb",
measurementId: "G-WRXQXF8FYG"
};
var uMail = "";
var uName = "";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app)
const analytics = getAnalytics(app);
const provider = new GoogleAuthProvider(app);
//Access the firestore database
const database = getDatabase();
const db = getFirestore(app);
//async function that retrieves and shows the previous user score
async function showScore(){
if(uMail != "") {
const docRef = doc(db,"scoring", uMail);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
try { //if the user has taken the quiz before, simply display the latest score
var scr = docSnap.get("scores");
console.log(scr.length);
if (scr.length == undefined) {
throw new error;
}
if(scr.length != 0){
document.getElementById("score-display").innerHTML = "<strong>Your latest MHCheck score was:<strong> " + scr[scr.length-1] ;
}
}
catch(error) { //if the user does not have any previous scores, display the corresponding message
document.getElementById("score-display").innerHTML = "<strong>There are no previous MHCheck scores<strong> " ;
}
}
else { //defines the user into the database if they haven't accessed MHCheck prevciously
await setDoc(docRef, {
scores: {}
});
document.getElementById("score-display").innerHTML = "<strong>There are no previous MHCheck scores<strong> " ;
}
}
else{ //if the user is a guest, display a message that envourages login
document.getElementById("score-display").innerHTML = "<strong>If you wish to record your progress, please sign in above with your Google account.</strong>" ;
}
}
//displaye the user score if they are signed in
showScore();
// this event listener waits until the user clicks the calculate score button to determine it
calc.addEventListener('click',(e)=>{ //add the total to database
//functiont o calculate the user scores
async function calculate(){
var total = 0;
//get the general score
for (let i = 1; i <= 17; i++) {
let num = getRadioClicked("q" + i);
if (num == "") {
alert("You didnt answer question #" + i);
return;
}
num = Number(num)
if (i == 9)
num *= 2;
total += num;
}
var destination = document.getElementById("total");
destination.innerHTML = String(total);
//if the user is signed in, adds it into their database
if (uMail != "") {
console.log("here");
const scoreRef = doc(db, "scoring", uMail);
await updateDoc(scoreRef, {
scores: arrayUnion(total)
});
}
return total;
}
calculate();
showScore();
});
//event listener for user log ins
login.addEventListener('click',(e) =>{//for whatever has id = 'login'
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
uMail = user.email;
uName = user.name;
//user info
document.getElementById("user-info").innerHTML = "Signed in as <strong>" + user.displayName + "<strong>"
document.getElementById("login").style.display = "none";
document.getElementById("signoff").style.display = "block";
showScore();
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
//alert(errorMessage);
});
});
//event listener for user sign out. works similarly as the login
signoff.addEventListener('click',(e) =>{
signOut(auth).then(() => {
//alert("signed out")
document.getElementById("user-info").innerHTML = "You are <strong>not</strong> signed in."
//erase user info
document.getElementById("login").style.display = "block";
document.getElementById("signoff").style.display = "none";
uMail = "";
uName = "";
document.getElementById("score-display").innerHTML = "<strong>If you wish to record your progress, please sign in above with your Google account.</strong> " ;// scr.length;//.value[0].scores;//String(scr.value[0]);
}).catch((error) => {
//console.log(error)
alert(errorMessage);
});
});
</script>
</body>
</html>