-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
92 lines (75 loc) · 2.3 KB
/
index.php
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
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="container">
<div id="moreProblems" style="cursor: pointer;">
<h2>Make more problems!</h2>
<h3><a style="text-decoration: none;" href="harder">Try harder problems!</a></h3>
</div>
<br/>
<div id="body"></div>
<br/>
<div id="finished">You're done!</div>
</div>
</body>
<?php require 'pierrefrancoisdulac.php'; ?>
</html>
<script>
let MAX = 15;
document.addEventListener("DOMContentLoaded", (event) => {
loadAdditionProblems();
let moreProblems = document.getElementById("moreProblems");
moreProblems.addEventListener("click", function(){
loadAdditionProblems();
});
});
function loadAdditionProblems()
{
let localBody = document.getElementById("body");
localBody.innerHTML ="";
localBody.innerHTML = generateProblems(10);
let inps = document.getElementsByClassName("inpVal");
for(let j=0;j<inps.length;j++)
{
inps[j].oninput = function(){
//alert("yo");
//console.log(inps[j].value);
/*
if(inps[j].value==="")
{
inps[j].removeAttribute("style");
inps[j].style="margin:10px";
}
*/
if(inps[j].value==inps[j].getAttribute("target")){
inps[j].style = "outline-color: green; outline-width: 10px;outline-offset: 0px;outline-style: outset; margin:10px;";
//alert("correct!");
}//else{inps[j].style = "outline-color: red; outline-width: 10px;outline-offset: 0px;outline-style: outset; margin:10px;";}
}
}
}
function generateProblems(numberOfProblems)
{
let lineOut = "";
for(let i = 0; i < numberOfProblems; i++)
{
let firstInt = getRandomInt(MAX) * (Math.random() < 0.5 ? -1 : 1);
let secondInt = getRandomInt(MAX) * (Math.random() < 0.5 ? -1 : 1);
lineOut += "<div id='np"+i+"'><div>" + firstInt;
if(secondInt >= 0){
lineOut = lineOut + " + " + secondInt;
}else
{
lineOut = lineOut + " - " + (secondInt * -1);
}
lineOut = lineOut + " = </div><input class='inpVal' type='number' style='margin:10px;' target="+(firstInt+secondInt)+"></input> </div>";
}
return lineOut;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
</script>