-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearner-type.html
More file actions
165 lines (156 loc) · 6.8 KB
/
learner-type.html
File metadata and controls
165 lines (156 loc) · 6.8 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find out your way to learn</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.checkbox {
margin: 5px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!--
V = Visual
R = Reading and Writing
A = Auditory
K = Kinesthetic
-->
<div id="container"></div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50"
style="width: 00%" id="pro-bar">
</div>
</div>
<div class="question" id="1">
<h1>When I learn from the Internet I like:</h1>
<div>
<div class="checkbox">
<label><input type="checkbox" name="K" value="K" onclick="onSelect( this );">See videos showing how to
do it<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="A" value="A" onclick="onSelect( this );">Listen to podcasts or other
audio sources<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="V" value="V" onclick="onSelect( this );">Understand designs and
visual features<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="R" value="R" onclick="onSelect( this );">Read instructions and
expanations<br></label>
</div>
</div>
</div>
<div class="question" id="2">
<h1>I want to learn how to play a new board game or card game. I would:</h1>
<div>
<div class="checkbox">
<label><input type="checkbox" name="V" value="V" onclick="onSelect( this );">Use diagrams which explain
the rules and tactics<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="K" value="K" onclick="onSelect( this );">Watch others play before
joining in<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="A" value="A" onclick="onSelect( this );">Listen to somebody
explaining it and ask questions<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="R" value="R" onclick="onSelect( this );">Read instructions and
expanations<br></label>
</div>
</div>
</div>
<div class="question" id="3">
<h1>I need to find the way to a shop that a friend has recommended. I would:</h1>
<div>
<div class="checkbox">
<label><input type="checkbox" name="V" value="V" onclick="onSelect( this );">Use a map<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="R" value="R" onclick="onSelect( this );">Write down street
directions I need to remember<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="A" value="A" onclick="onSelect( this );">Ask the
directions<br></label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="K" value="K" onclick="onSelect( this );">find out where the shop is
in relation to somewhere I know.<br></label>
</div>
</div>
</div>
<label class="btn"><input type="submit" id="next"></label>
</div>
<script>
// Add variables
var nameArray = [];
var con = document.getElementById("container");
var next = document.getElementById("next");
var ques = document.getElementsByClassName("question");
var progressBar = document.getElementById("pro-bar");
var a = 0;
var v = 0;
var r = 0;
var k = 0;
var quesId = [];
// Add info to quesId
for (var j = 1; j <= 3; j++) {
quesId.push(document.getElementById(j.toString()));
if (j - 1 === 0) {
quesId[j - 1].style.display = "block";
} else {
quesId[j - 1].style.display = "none";
}
}
// On selecting an answer add it to array
var onSelect = function(element) {
if (element.checked) {
nameArray.push(element.name); // Add if checked
} else {
for (var i = 0; i < nameArray.length; i++) {
if (nameArray[i] === element.name) {
nameArray.splice(i, 1);
break;
}
}
}
console.log(nameArray);
};
var nextClicked = function() {
for (var i = 0; i < quesId.length; i++) {
progressBar.style.width = (parseInt(progressBar.style.width) + 33) + "%";
progressBar.ariaValuenow = progressBar.style.width;
if (quesId[i].style.display === "block") {
quesId[i].style.display = "none";
if (i + 1 < quesId.length) {
quesId[i + 1].style.display = "block";
} else {
next.style.display = "none";
for (var q = 0; q < nameArray.length; q++) {
if (nameArray[q] === "A") {
a++;
} else if (nameArray[q] === "R") {
r++;
} else if (nameArray[q] === "V") {
v++;
} else {
k++;
}
}
con.innerHTML = "<h1>Your Report out of " + nameArray.length + "</h1> <h3>Auditory = " + a + "<br>Visual = " + v + "<br>Reading and Writing = " + r + "<br>Kinesthetic = " + k;
}
break;
}
}
};
next.addEventListener("click", nextClicked)
</script>
</body>
</html>