Skip to content

Commit a481d14

Browse files
bperdidoUCIbperdidoUCI
authored
Merge pull request #11 from vaguebunny/9-create-results-css-file
added css result files and modified css styling, added dummy modal bu…
2 parents 3d30003 + b445129 commit a481d14

File tree

4 files changed

+241
-58
lines changed

4 files changed

+241
-58
lines changed

‎index.html

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
<meta charset="UTF-8" />
44
<meta name = "viewport" content="width=device-width, initial-scale=1"/>
55
<link rel="stylesheet" type="text/css" href="./reset.css"/>
6+
<!-- Bootstrap CSS -->
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
68
<link rel="stylesheet" type="text/css" href="./style.css"/>
79
<title>Mood Quiz</title>
8-
<!-- Bootstrap CSS -->
9-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
10-
</head>
10+
</head>
1111
<body>
1212
<header>
1313
<h1>Mood Quiz</h1>
1414
</header>
1515
<main>
1616
<div class="questions">
17-
<h2>Over the last 2 weeks, how often have you been
17+
<h2>Over the last 2 weeks,<br> how often have you been
1818
bothered by any of the following problems?</h2>
1919
<div>
20-
<h3>Little interest or pleasure in doing things</h3>
2120
<form>
21+
<h3>Little interest or pleasure in doing things</h3>
2222
<input type="radio" name="ques1" value="none" onclick="selected(this)">
2323
<label for="none">Not At All</label><br>
2424
<input type="radio" name="ques1" value="some" onclick="selected(this)">
@@ -121,8 +121,21 @@ <h3>Thoughts that you would be better off dead, or of
121121
<label for="more">More Than Half the Days</label><br>
122122
<input type="radio" name="ques9" value="most" onclick="selected(this)">
123123
<label for="most">Nearly Every Day</label><br><br>
124-
<input type="submit" value="Submit">
125-
</form>
124+
<input type="submit" value="Submit" id="submit">
125+
<div id="question10">
126+
<h3>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>
127+
128+
<input type="radio" id="ans0" name="ques10" value="0">
129+
<label for="0">Not Difficult At All</label><br>
130+
<input type="radio" id="ans1" name="ques10" value="1">
131+
<label for="1">Somewhat Difficult</label><br>
132+
<input type="radio" id="ans2" name="ques10" value="2">
133+
<label for="2">Very Difficult</label><br>
134+
<input type="radio" id="ans4" name="ques10" value="3">
135+
<label for="3">Nearly Every Day</label><br><br>
136+
<input type="submit" value="Submit" onclick="selected(this)">
137+
</div>
138+
</form>
126139
</div>
127140
</div>
128141
<div id="error_message"></div>
@@ -133,9 +146,15 @@ <h3>Thoughts that you would be better off dead, or of
133146
<button>prev</button>
134147
<button>next</button>
135148
</div>
149+
150+
<!---- change to modal button?? example in results.html -->
151+
<div class="share">
152+
<button>Share Quiz</button>
153+
</div>
136154
</main>
137155
<footer>
138-
<p>This website is not representative of an official diagnosis nor should be interpreted as medical advice. Please seek medical attention if needed.<br>
156+
<p>This website is not representative of an official diagnosis nor should be interpreted as medical advice. <br>
157+
Please seek medical attention if needed.<br>
139158
Based on the PHQ-9 questionnaire. Copyright © Pfizer Inc. All rights reserved.<br>
140159
Website created & designed by _____.
141160
</p>

‎results.html

Lines changed: 91 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,104 @@
22
<head>
33
<meta charset="UTF-8" />
44
<meta name = "viewport" content="width=device-width, initial-scale=1"/>
5-
<link rel="stylesheet" type="text/css" href="./style.css" />
6-
<title>Mood Quiz Results</title>
75
<!-- Bootstrap CSS -->
86
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
9-
</head>
7+
8+
<link rel="stylesheet" type="text/css" href="./style.css" />
9+
<title>Mood Quiz Results</title>
10+
</head>
1011
<body>
1112
<header>
12-
<h1>Results</h1>
13+
<h1>Mood Quiz</h1>
1314
</header>
1415
<main>
15-
<h2>Your score is</h2>
16-
<p id="final_score"></p>
16+
<div class="result">
17+
<h2>Results</h2>
18+
<div>
19+
<p id="final_score"></p>
20+
<p>Based on your score of __ , you fall into the category of __.<br>
21+
We have provided a list of resources that we hope you find helpful.<br>
22+
If you live in the U.S., you can cal 988 or text 741741 to talk to someone ASAP.<br>
23+
If you need help with housing, food, or other resources and live in the US, please call 211 for a list of resources in your area.<br>
24+
If you are in immediate danger or crisis, please call 911 or go to your nearest emergency room.</p>
25+
<ul>
26+
<li><a href="https://www.helpguide.org/find-help">International Help Locator</a></li>
27+
<li><a href="https://www.nami.org/Find-Support">Find Support</a></li>
28+
<li><a href="https://www.samhsa.gov/find-help/national-helpline">USA National Helpline</a></li>
29+
<li><a href="https://www.crisistextline.org">Crisis Text Line (741741)</a></li>
30+
</ul>
31+
32+
<table>
33+
<tr>
34+
<th>Total Score</th>
35+
<th>Depression Severity</th>
36+
</tr>
37+
<tr>
38+
<td>1-4</td>
39+
<td>Minimal Depression</td>
40+
</tr>
41+
<tr>
42+
<td>5-9</td>
43+
<td>Mild Depression</td>
44+
</tr>
45+
<tr>
46+
<td>10-14</td>
47+
<td>Moderate Depression</td>
48+
</tr>
49+
<tr>
50+
<td>15-19</td>
51+
<td>Moderately Severe Depression</td>
52+
</tr>
53+
<tr>
54+
<td>20-27</td>
55+
<td>Severe Depression</td>
56+
</tr>
57+
</table>
58+
</div>
59+
</div>
60+
<div id="error_message"></div>
61+
<div class="reset">
62+
<button>reset quiz</button>
63+
</div>
64+
<div class="carousel">
65+
<button>prev</button>
66+
<button>next</button>
67+
</div>
68+
<div class="share">
69+
<button>Share Quiz</button>
70+
71+
<!-- Button trigger modal -->
72+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
73+
Share Quiz
74+
</button>
75+
76+
<!-- Modal -->
77+
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
78+
<div class="modal-dialog">
79+
<div class="modal-content">
80+
<div class="modal-header">
81+
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
82+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
83+
</div>
84+
<div class="modal-body">
85+
...
86+
</div>
87+
<div class="modal-footer">
88+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
89+
<button type="button" class="btn btn-primary">Understood</button>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
1795
</main>
96+
<footer>
97+
<p>This website is not representative of an official diagnosis nor should be interpreted as medical advice. <br>
98+
Please seek medical attention if needed.<br>
99+
Based on the PHQ-9 questionnaire. Copyright © Pfizer Inc. All rights reserved.<br>
100+
Website created & designed by _____.
101+
</p>
102+
</footer>
18103
<!-- Bootstrap JavaScript -->
19104
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
20105
<!-- base JavaScript -->

‎script.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,5 @@ reset.addEventListener('click', function (event) {
7171
localStorage.clear(); // clears local storage
7272
location.reload(); // refreshes page
7373
});
74+
75+
//share button logic (use a modal)

0 commit comments

Comments
 (0)