-
Notifications
You must be signed in to change notification settings - Fork 1
/
userquiz.html
132 lines (122 loc) · 6.77 KB
/
userquiz.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stemming Minds - personalise</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="css\userquiz-style.css">
<!-- special font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<!-- nav bar -->
<nav class="navbar bg-body-tertiary">
<div class="container">
<!-- Stemming Minds logo -->
<a class="navbar-brand" href="index.html">
<img src="img\logo.png" alt="Stemming Minds logo" height="40" />
</a>
<!-- hamburger menu -->
<button
class="navbar-toggler ms-auto"
type="button"
data-bs-toggle="collapse"
data-bs-target="#n_bar"
aria-controls="navbarNavAltMarkup"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="n_bar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Personalise</a>
</li>
<li class="nav-item">
<a class="nav-link" href="learn.html">Topics</a>
</li>
<li class="nav-item"><a class="nav-link" href="quiz.html">Quiz</a></li>
<li class="nav-item">
<a class="nav-link" href="inspirational_stories.html">Get Inspired</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<!-- user quiz form -->
<div class="centredForm">
<h2>Personalise your experience</h2>
<!-- SVG for the red wavy line -->
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 539 41">
<defs><style>.cls-1{fill:none;stroke:#ef797a;stroke-linecap:round;stroke-miterlimit:10;stroke-width:5px;}</style></defs>
<title>wave-red</title><path class="cls-1" d="M154,279.5c22.25,0,22.25,36,44.5,36s22.24-36,44.49-36,22.25,36,44.5,36,22.25-36,44.5-36,22.25,36,44.5,36,22.25-36,44.5-36,22.25,36,44.5,36,22.25-36,44.5-36,22.25,36,44.5,36,22.25-36,44.5-36,22.25,36,44.5,36,22.26-36,44.51-36" transform="translate(-151.5 -277)"/>
</svg>
<br><br>
<p class="question">How would you describe yourself?</p>
<form>
<input class="form-check-input" type="radio" id="student" name="describe_yourself" value="Student">
<label for="student">Student</label><br>
<input class="form-check-input" type="radio" id="parent" name="describe_yourself" value="Parent">
<label for="parent">Parent of a school-age child</label><br>
<input class="form-check-input" type="radio" id="teacher" name="describe_yourself" value="Teacher">
<label for="teacher">Teacher</label><br>
<input class="form-check-input" type="radio" id="professional" name="describe_yourself" value="Professional">
<label for="professional">Professional pursuing a career</label><br>
<input class="form-check-input" type="radio" id="curious" name="describe_yourself" value="Curious">
<label for="curious">Curious mind</label><br>
<input class="form-check-input" type="radio" id="other" name="describe_yourself" value="Other">
<label for="other">Other</label>
</form>
<br><br>
<p class="question">Which are you most interested in?</p>
<form>
<input class="form-check-input" type="radio" id="school" name="interest" value="School">
<label for="school">Improving my STEM skills for school</label><br>
<input class="form-check-input" type="radio" id="career" name="interest" value="Career">
<label for="career">Improving my STEM skills for career</label><br>
<input class="form-check-input" type="radio" id="explore" name="interest" value="Explore">
<label for="explore">Exploring topics I'm interested in</label><br>
<input class="form-check-input" type="radio" id="other" name="interest" value="Other">
<label for="other">Something else</label>
</form>
<br><br>
<p class="question">Which topic do you want to explore?</p>
<form>
<input class="form-check-input" type="radio" id="math" name="topic" value="Math">
<label for="math">Math</label><br>
<input class="form-check-input" type="radio" id="science" name="topic" value="Science">
<label for="science">Science & Engineering</label><br>
<input class="form-check-input" type="radio" id="computer" name="topic" value="Computer">
<label for="computer">Computer Science & Programming</label><br>
<input class="form-check-input" type="radio" id="data" name="topic" value="Data">
<label for="data">Data Analysis & Probability</label>
</form>
<br><br>
<p class="question">What is your comfort level in your chosen topic above?</p>
<form>
<input class="form-check-input" type="radio" id="beginner" name="level" value="Beginner">
<label for="beginner">Beginner — no experience</label><br>
<input class="form-check-input" type="radio" id="novice" name="level" value="Novice">
<label for="novice">Novice — little experience</label><br>
<input class="form-check-input" type="radio" id="intermediate" name="level" value="Intermediate">
<label for="intermediate">Intermediate — some experience</label><br>
<input class="form-check-input" type="radio" id="advanced" name="level" value="Advanced">
<label for="advanced">Advanced — years of experience</label>
</form>
<br><br>
<div class="d-grid">
<button type="submit" onclick="validateForm()" class="btn btn-danger" id="submitBtn">SUBMIT</button>
</div>
</div>
<br><br>
<script src="js\userquiz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>