-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (127 loc) · 4.04 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
<!DOCTYPE html>
<html>
<head>
<head>
<title>Math Trainer</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="author" content="Manfred Schulenburg">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="style.css" rel="stylesheet">
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
</head><body>
<span id="counter"></span>
<br>
<br>
<span style="color:blue;"><small>Seconds left: <span id="timer"></span></small></span>
<br>
<br>
<p style="color:blue;" class="mathformat"><span id="number1"></span><span> · </span><span id="number2"></span><span> = </span></p>
<br>
<p class="mathformat"><span id="posansarray"</span></p>
<script>
var timersCount = 0;
var pause = false; //is timer paused
countTimers();
function countTimers() {
timersCount++;
var count = 5;
var counter = setInterval(timer, 1000);
function timer() {
if (!pause) { //do something if not paused
count = count - 1;
if (count == -1) {
// window.location.reload();
display.innerHTML = "<span style='color: red;'>Time is up!" + "</span>";
pause = true;
return;
}
document.getElementById("timer").innerHTML = count;
}
}
}
//up to here: Timer
function sortfunction(a, b){ //creates an array to be sorted numerically and ascending
return (a - b)
}
function CheckAnswer () {
console.log('Selected answer: ', this.textContent);
}
function checkAnswer(evt) {
if (evt.target.data == answer) { // evt.target == button
display.innerHTML = "<span style='color: #3EA055;'>" +(quotes1[whichquote1]) + "</span>";i += 1;
} else {
display.innerHTML = "<span style='color: red;'>" +(quotes2[whichquote2] + 'The correct answer is ' + answer) + "</span>";
}
}
var number1;
var number2;
number1 = Math.floor((Math.random() * 20) + 1);
number2 = Math.floor((Math.random() * 20) + 1);
document.getElementById("number1").innerHTML = number1;
document.getElementById("number2").innerHTML = number2;
var answer = parseInt(number1,10)*parseInt(number2,10);
var plusorminus1 = Math.random() < 0.5 ? -1 : 1;
var plusorminus2 = Math.random() < 0.5 ? -1 : 1;
var plusorminus3 = Math.random() < 0.5 ? -1 : 1;
var plusorminus4 = Math.random() < 0.5 ? -1 : 1;
var plusorminus5 = Math.random() < 0.5 ? -1 : 1;
var plusorminus6 = Math.random() < 0.5 ? -1 : 1;
var plusorminus7 = Math.random() < 0.5 ? -1 : 1;
var ansvar1 = answer;
var ansvar2 = answer + (plusorminus1 * 2);
var ansvar3 = answer + (plusorminus2 * 4);
var ansvar4 = answer + (plusorminus3 * 6);
var ansvar5 = answer + (plusorminus4 * 8);
var ansvar6 = answer + (plusorminus5 * 10);
var ansvar7 = answer + (plusorminus6 * 3);
var container = document.getElementById('posansarray');
var posans=[ansvar1,ansvar2,ansvar3,ansvar4,ansvar5,ansvar6,ansvar7];
posans=posans.sort(sortfunction);
//quote depending on the selected answer
var quotes1=new Array();
quotes1[0] = "Correct";
quotes1[1] = "Awesome";
quotes1[2] = "Great job!";
quotes1[3] = "Very good!";
var quotes2=new Array();
quotes2[0] = "That is wrong. ";
quotes2[1] = "Not correct. ";
quotes2[2] = "Concentrate! ";
var q1 = quotes1.length;
var whichquote1=Math.round(Math.random()*(q1-1));
var q2 = quotes2.length;
var whichquote2=Math.round(Math.random()*(q2-1));
var text = "";
var i = 0;
for(var j = 0; j < posans.length; j++)
{
(function(val) {
document.getElementById("counter").innerHTML = text;
btn = document.createElement('button');
btn.data = val; // assign the value to compare to an attribute on the button.
btn.innerHTML = val;
btn.addEventListener('click', checkAnswer);
document.body.appendChild(btn);
})(posans[j]);
}
</script>
<form id="myForm">
<div id="display" style="height: 20px; width: 100%;"></div>
<br>
</FORM>
<INPUT TYPE="button" class="btnnext" onClick="history.go(0); myFunction()" VALUE="Next">
<footer>
<table>
<tr>
<td><a href="about.html">about</a></td>
</tr>
</table>
</footer>
</body>
</html>
</body>
</html>