-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathquestions.html
329 lines (286 loc) · 14.4 KB
/
questions.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
<!DOCTYPE html>
<html>
<head>
<title>Career Recommendation</title>
<style>
body {
font-family: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
footer {
padding: 50px 10%;
padding-bottom: 100px;
}
button {
border: none;
border-radius: 5px;
padding: 10px;
font-size: 1.1em;
}
/* || navbar */
#navbar {
/* fixed navbar */
position: sticky;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10%;
gap: 30px;
background-color: white;
box-shadow: 0 1px 5px rgb(0, 0, 0, 0.2);
background-color: white;
box-shadow: 0 1px 5px rgb(0, 0, 0, 0.2);
background-color: #00496e;
box-shadow: 0 1px 5px rgb(0, 0, 0, 0.2);
}
#navbar a {
color: white;
font-weight: bold;
text-decoration: none;
}
#searchbox {
position: relative;
display: flex;
flex-grow: 1;
align-items: center;
color: white;
}
#search-input {
position: absolute;
font-size: inherit;
padding: 5px 30px;
width: 50%;
border-radius: 8px;
border: 2px solid #7dc4c6;
background-color: #00689f;
color: white;
}
#search-icon {
position: absolute;
color: white;
left: 0;
padding-left: 5px;
padding-right: 5px;
width: 20px;
pointer-events: none;
}
.progress-bar {
width: 100%;
background-color: #ddd;
}
.progress {
height: 20px;
background-color: #4CAF50;
width: 0;
}
.question {
font-weight: bold;
margin-top: 20px;
text-align: left;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
}
.option {
flex-grow: 1;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<nav id="navbar">
<a id="logo" href="index.html">emPathy</a>
<a href="about.html">About</a>
<a href="questions.html">Quiz</a>
<form id="searchbox">
<input type="text" id="search-input" aria-label="Search" placeholder="search..." />
<svg id="search-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</form>
<a href="login.html">Login</a>
<a href="career.html">Career</a>
</nav>
<h1>Career Recommendation Quiz</h1>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="question">
<p>Question 1: How do you feel about working in a team?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q1" value="0"> Not comfortable</label></div>
<div class="option"><label><input type="radio" name="q1" value="2"> Somewhat comfortable</label></div>
<div class="option"><label><input type="radio" name="q1" value="5"> Neutral</label></div>
<div class="option"><label><input type="radio" name="q1" value="7"> Quite comfortable</label></div>
<div class="option"><label><input type="radio" name="q1" value="10"> Very comfortable</label></div>
</div>
<div class="question">
<p>Question 2: How do you handle stress?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q2" value="0"> Get overwhelmed easily</label></div>
<div class="option"><label><input type="radio" name="q2" value="2"> Manage stress fairly well</label></div>
<div class="option"><label><input type="radio" name="q2" value="5"> Stay neutral under stress</label></div>
<div class="option"><label><input type="radio" name="q2" value="7"> Handle stress confidently</label></div>
<div class="option"><label><input type="radio" name="q2" value="10"> Rarely get stressed</label></div>
</div>
<div class="question">
<p>Question 3: How do you approach problem-solving?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q3" value="0"> Avoid problems</label></div>
<div class="option"><label><input type="radio" name="q3" value="2"> Tackle problems cautiously</label></div>
<div class="option"><label><input type="radio" name="q3" value="5"> Consider various solutions</label></div>
<div class="option"><label><input type="radio" name="q3" value="7"> Enjoy finding solutions</label></div>
<div class="option"><label><input type="radio" name="q3" value="10"> Thrive on challenges</label></div>
</div>
<div class="question">
<p>Question 4: How organized are you in your work?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q4" value="0"> Very disorganized</label></div>
<div class="option"><label><input type="radio" name="q4" value="2"> Somewhat disorganized</label></div>
<div class="option"><label><input type="radio" name="q4" value="5"> Moderately organized</label></div>
<div class="option"><label><input type="radio" name="q4" value="7"> Fairly organized</label></div>
<div class="option"><label><input type="radio" name="q4" value="10"> Very organized</label></div>
</div>
<div class="question">
<p>Question 5: How do you adapt to change?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q5" value="0"> Struggle with change</label></div>
<div class="option"><label><input type="radio" name="q5" value="2"> Adaptable with time</label></div>
<div class="option"><label><input type="radio" name="q5" value="5"> Handle change well</label></div>
<div class="option"><label><input type="radio" name="q5" value="7"> Embrace change</label></div>
<div class="option"><label><input type="radio" name="q5" value="10"> Thrive in dynamic environments</label>
</div>
</div>
<div class="question">
<p>Question 6: How do you feel about public speaking?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q6" value="0"> Terrified of it</label></div>
<div class="option"><label><input type="radio" name="q6" value="2"> Uncomfortable, but can manage</label></div>
<div class="option"><label><input type="radio" name="q6" value="5"> Neutral</label></div>
<div class="option"><label><input type="radio" name="q6" value="7"> Somewhat comfortable</label></div>
<div class="option"><label><input type="radio" name="q6" value="10"> Very confident</label></div>
</div>
<div class="question">
<p>Question 7: How important is creativity in your work?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q7" value="0"> Not important</label></div>
<div class="option"><label><input type="radio" name="q7" value="2"> Somewhat important</label></div>
<div class="option"><label><input type="radio" name="q7" value="5"> Moderately important</label></div>
<div class="option"><label><input type="radio" name="q7" value="7"> Quite important</label></div>
<div class="option"><label><input type="radio" name="q7" value="10"> Extremely important</label></div>
</div>
<div class="question">
<p>Question 8: How comfortable are you with learning new technologies?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q8" value="0"> Very uncomfortable</label></div>
<div class="option"><label><input type="radio" name="q8" value="2"> Somewhat uncomfortable</label></div>
<div class="option"><label><input type="radio" name="q8" value="5"> Neutral</label></div>
<div class="option"><label><input type="radio" name="q8" value="7"> Fairly comfortable</label></div>
<div class="option"><label><input type="radio" name="q8" value="10"> Very comfortable</label></div>
</div>
<div class="question">
<p>Question 9: How do you handle feedback and criticism?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q9" value="0"> Take it personally and get upset</label>
</div>
<div class="option"><label><input type="radio" name="q9" value="2"> Feel a bit defensive, but consider
it</label></div>
<div class="option"><label><input type="radio" name="q9" value="5"> Listen and evaluate feedback</label></div>
<div class="option"><label><input type="radio" name="q9" value="7"> Appreciate constructive criticism</label>
</div>
<div class="option"><label><input type="radio" name="q9" value="10"> Seek feedback to improve</label></div>
</div>
<div class="question">
<p>Question 10: How do you manage your time?</p>
</div>
<div class="options">
<div class="option"><label><input type="radio" name="q10" value="0"> Often miss deadlines</label></div>
<div class="option"><label><input type="radio" name="q10" value="2"> Struggle with time management</label></div>
<div class="option"><label><input type="radio" name="q10" value="5"> Manage time reasonably well</label></div>
<div class="option"><label><input type="radio" name="q10" value="7"> Good at prioritizing tasks</label></div>
<div class="option"><label><input type="radio" name="q10" value="10"> Excellent time management skills</label>
</div>
</div>
<script>
const questions = document.querySelectorAll('.options');
const progressBar = document.querySelector('.progress');
const totalQuestions = questions.length;
let currentQuestion = 0;
let totalPercentage = 0;
document.addEventListener('change', function (event) {
if (event.target.matches('.options input[type="radio"]')) {
const selectedValue = parseInt(event.target.value);
totalPercentage += selectedValue;
progressBar.style.width = ((currentQuestion + 1) / totalQuestions) * 100 + '%';
if (currentQuestion < totalQuestions - 1) {
currentQuestion++;
questions[currentQuestion - 1].style.display = 'none';
questions[currentQuestion].style.display = 'flex';
} else {
let recommendation = '';
let potentialCareers = '';
questions[currentQuestion].style.display = 'none';
if (totalPercentage <= 10) {
recommendation = "You might be suited for jobs that require more independent work.";
potentialCareers = "Potential careers: Freelancer, Writer, Graphic Designer";
} else if (totalPercentage <= 20) {
recommendation = "You have a good balance of teamwork and independence.";
potentialCareers = "Potential careers: Project Manager, Data Analyst, Marketing Specialist";
} else if (totalPercentage <= 30) {
recommendation = "You seem to excel in team-based environments.";
potentialCareers = "Potential careers: Team Leader, Human Resources Manager, Sales Manager";
} else if (totalPercentage <= 40) {
recommendation = "You thrive in collaborative and leadership roles.";
potentialCareers = "Potential careers: CEO, Entrepreneur, Leadership roles";
} else if (totalPercentage <= 50) {
recommendation = "You have a unique set of skills that can lead to various career paths.";
potentialCareers = "Potential careers: Innovator, Consultant, Cross-functional roles";
} else if (totalPercentage <= 60) {
recommendation = "You excel in creative and analytical fields.";
potentialCareers = "Potential careers: Creative Director, UX Designer, Financial Analyst";
} else if (totalPercentage <= 70) {
recommendation = "You are well-suited for roles requiring strong communication skills.";
potentialCareers = "Potential careers: Public Relations Specialist, Journalist, Event Planner";
} else if (totalPercentage <= 80) {
recommendation = "Your problem-solving abilities make you a great fit for technical roles.";
potentialCareers = "Potential careers: Software Engineer, Scientist, Researcher";
} else if (totalPercentage <= 90) {
recommendation = "You have a natural talent for leadership and organization.";
potentialCareers = "Potential careers: Manager, Director, Business Analyst";
} else {
recommendation = "You possess a broad skillset for diverse career opportunities.";
potentialCareers = "Potential careers: Consultant, Entrepreneur, Executive";
}
const recommendationContainer = document.createElement('div');
recommendationContainer.style.textAlign = 'center'; // Center align the content
recommendationContainer.innerHTML = `<p><strong>Career Recommendation:</strong> ${recommendation}</p><p>${potentialCareers}</p>`;
document.body.appendChild(recommendationContainer);
progressBar.style.width = '100%'; // Set the progress bar to 100% at the end
// Hide the options
const optionsDiv = document.querySelector('.options');
optionsDiv.style.display = 'none';
}
}
});
</script>
</body>
</html>