-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (167 loc) · 11.3 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
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="./assets/css/reset.css"/>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css"/>
<title>Virtual Depression Quiz</title>
</head>
<body>
<header>
<h1>Virtual Depression Quiz</h1>
</header>
<main>
<div class="questions">
<h2>Over the last 2 weeks,<br> how often have you been
bothered by any of the following problems:</h2>
<div>
<form>
<h3>1. Little interest or pleasure in doing things?</h3>
<input type="radio" name="ques1" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques1" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques1" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques1" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>2. Feeling down, depressed, or hopeless?</h3>
<input type="radio" name="ques2" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques2" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques2" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques2" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>3. Trouble falling or staying asleep, or sleeping too much?</h3>
<input type="radio" name="ques3" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques3" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques3" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques3" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>4. Feeling tired or having little energy?</h3>
<input type="radio" name="ques4" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques4" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques4" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques4" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>5. Poor appetite or overeating?</h3>
<input type="radio" name="ques5" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques5" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques5" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques5" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>6. Feeling bad about yourself or that you are a failure or
have let yourself or your family down?</h3>
<input type="radio" name="ques6" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques6" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques6" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques6" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>7. Trouble concentrating on things, such as reading the
newspaper or watching television?</h3>
<input type="radio" name="ques7" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques7" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques7" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques7" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>8. Moving or speaking so slowly that other people could
have noticed. Or the opposite being so figety or
restless that you have been moving around a lot more
than usual?</h3>
<input type="radio" name="ques8" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques8" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques8" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques8" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label><br><br>
<h3>9. Thoughts that you would be better off dead, or of
hurting yourself?</h3>
<input type="radio" name="ques9" value="none" onclick="choice_selected(this)">
<label for="none">Not At All</label><br>
<input type="radio" name="ques9" value="some" onclick="choice_selected(this)">
<label for="some">Several Days</label><br>
<input type="radio" name="ques9" value="more" onclick="choice_selected(this)">
<label for="more">More Than Half the Days</label><br>
<input type="radio" name="ques9" value="most" onclick="choice_selected(this)">
<label for="most">Nearly Every Day</label>
<!-- Question 10 intentionally not accounted for in scoring -->
<div id="question10">
<h3>10. If you checked off 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?</h3>
<input type="radio" name="ques10" value="0" onclick="q10_selected(this)">
<label for="0">Not Difficult At All</label><br>
<input type="radio" name="ques10" value="1" onclick="q10_selected(this)">
<label for="1">Somewhat Difficult</label><br>
<input type="radio" name="ques10" value="2" onclick="q10_selected(this)">
<label for="2">Very Difficult</label><br>
<input type="radio" name="ques10" value="3" onclick="q10_selected(this)">
<label for="3">Nearly Every Day</label><br><br>
<input type="submit" value="Submit">
</div>
</form>
<!-- Error message if all questions (Question 10, more precisely) haven't been answered -->
<div id="error_message"></div>
</div>
</div><br>
<!-- Button trigger w/ Bootstrap -->
<div class="reset">
<button type="button" class="btn btn-primary">Reset Quiz</button>
</div>
<div class="share">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Share Quiz</button>
</div>
<!-- Modal to put Share Button info into -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Share This Quiz</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<code>
https://vaguebunny.github.io/mood-quiz/
</code>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>This website is not representative of an official diagnosis nor should be interpreted as medical advice. <br>
Please seek medical attention if needed.<br>
Based on the <a href="https://en.wikipedia.org/wiki/PHQ-9">PHQ-9 questionnaire</a>. Copyright © Pfizer Inc. All rights reserved.<br>
Website created & designed by Rachel Maes, Benjamin Perdido, & Eric Diaz.
</p>
</footer>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- base JavaScript -->
<script src="./assets/js/script.js"></script>
</body>
</html>