Skip to content

Commit 4c9c8c8

Browse files
limafreshlimafresh
authored
Add files via upload
1 parent 8c7c0d7 commit 4c9c8c8

File tree

9 files changed

+507
-0
lines changed

9 files changed

+507
-0
lines changed

‎README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Math trainer
2+
3+
![Static Badge](https://img.shields.io/badge/Mobile-friendly-purple)
4+
5+
An interactive online math trainer for kids — practice solving math examples with ease on any device!
6+
7+
## Features
8+
- ➕ Addition within 10, 100, 1000
9+
- ➖ Subtraction within 10, 100, 1000
10+
- ✖️ Multiplication within 10
11+
- ➗ Division within 10
12+
13+
**Launch** ➡️ https://limafresh.github.io/MathTrainer/
14+
15+
![screenshot](https://raw.githubusercontent.com/limafresh/MathTrainer/main/assets/screenshot.png)
16+
17+
## How to use
18+
The app generates random math examples.
19+
Enter the correct answer and click **CHECK** to see if you're right!
20+
21+
## Supported languages
22+
- 🇬🇧 English
23+
- 🇫🇷 French
24+
- 🇩🇪 Deutsch
25+
- 🇺🇦 Ukrainian
26+
- 🇷🇺 Russian
27+
28+
## Credits
29+
Sound effects authors: *Fupy*, *0new4y*, under CC0; wood texture is by *SpringySpringo*, under CC0. From [OpenGameArt.org](https://opengameart.org/).

‎assets/bell.wav‎

275 KB
Binary file not shown.

‎assets/icon.png‎

180 KB
Loading

‎assets/losetrumpet.wav‎

192 KB
Binary file not shown.

‎assets/screenshot.png‎

41.6 KB
Loading

‎index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6+
<link rel="stylesheet" href="styles.css">
7+
<link rel="icon" type="image/png" href="assets/icon.png">
8+
<title>Math trainer</title>
9+
</head>
10+
<body>
11+
<select id="select" onmousedown="return false" onclick="openSidebar()">
12+
<option value="0">Addition within 10</option>
13+
<option value="1">Addition within 100</option>
14+
<option value="2">Addition within 1000</option>
15+
<option value="3">Subtraction within 10</option>
16+
<option value="4">Subtraction within 100</option>
17+
<option value="5">Subtraction within 1000</option>
18+
<option value="6">Multiplication within 10</option>
19+
<option value="7">Division within 10</option>
20+
</select>
21+
<div id="sidebar">
22+
<button id="closeSidebarBtn" onclick="closeSidebar()">&times;</button>
23+
<div id="sidebarOptions">
24+
<button class="sidebarOption" id="add10" onclick="changeMode('+', 10, '0', 'add10')">Addition within 10</button>
25+
<button class="sidebarOption" id="add100" onclick="changeMode('+', 1, '1', 'add100')">Addition within 100</button>
26+
<button class="sidebarOption" id="add1000" onclick="changeMode('+', 0.1, '2', 'add1000')">Addition within 1000</button>
27+
<button class="sidebarOption" id="subtraction10" onclick="changeMode('-', 10, '3', 'subtraction10')">Subtraction within 10</button>
28+
<button class="sidebarOption" id="subtraction100" onclick="changeMode('-', 1, '4', 'subtraction100')">Subtraction within 100</button>
29+
<button class="sidebarOption" id="subtraction1000" onclick="changeMode('-', 0.1, '5', 'subtraction1000')">Subtraction within 1000</button>
30+
<button class="sidebarOption" id="multiplication10" onclick="changeMode('*', 10, '6', 'multiplication10')">Multiplication within 10</button>
31+
<button class="sidebarOption" id="division10" onclick="changeMode('/', 10, '7', 'division10')">Division within 10</button>
32+
</div>
33+
</div>
34+
<div id="overlay" onclick="closeSidebar()"></div>
35+
<p id="example">2+2=</p>
36+
<input id="inputField" placeholder="Enter the answer..." type="text">
37+
<button id="checkButton" onclick="checkExample()">CHECK</button>
38+
<button id="skipButton" onclick="skipExample()">Skip this example</button>
39+
<div id="counters">
40+
<p id="skippedExamples">Skipped examples:</p>
41+
<p id="solvedExamples">Solved examples:</p>
42+
<p id="mistakes">Mistakes:</p>
43+
</div>
44+
<div class="notification" id="correctlyDiv">
45+
<p id="correctly">Correctly</p>
46+
</div>
47+
<div class="notification" id="wronglyDiv">
48+
<p id="wrongly">Wrongly</p>
49+
<p id="correctAnswerP">Correct answer:</p>
50+
</div>
51+
<audio id="correctlySound" preload="auto">
52+
<source src="assets/bell.wav"
53+
type="audio/wav">
54+
</audio>
55+
<audio id="wronglySound" preload="auto">
56+
<source src="assets/losetrumpet.wav"
57+
type="audio/wav">
58+
</audio>
59+
<script src="translations.js"></script>
60+
<script src="script.js"></script>
61+
</body>
62+
</html>

‎script.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
// Functions
2+
3+
function updateOptionLanguage(id, textCont, value) {
4+
document.getElementById(id).textContent = textCont;
5+
document.getElementById("select").querySelector(`option[value="${value}"]`).textContent = textCont;
6+
};
7+
8+
function updateLanguage(language) {
9+
const t = translations[language];
10+
document.title = translations[language].title;
11+
document.getElementById("inputField").placeholder = t.placeholder;
12+
document.getElementById("checkButton").textContent = t.checkButton;
13+
document.getElementById("skipButton").textContent = t.skipButton;
14+
document.getElementById("skippedExamples").textContent = t.skippedExamples;
15+
document.getElementById("solvedExamples").textContent = t.solvedExamples;
16+
document.getElementById("mistakes").textContent = t.mistakes;
17+
updateOptionLanguage("add10", t.add10, "0");
18+
updateOptionLanguage("add100", t.add100, "1");
19+
updateOptionLanguage("add1000", t.add1000, "2");
20+
updateOptionLanguage("subtraction10", t.subtraction10, "3");
21+
updateOptionLanguage("subtraction100", t.subtraction100, "4");
22+
updateOptionLanguage("subtraction1000", t.subtraction1000, "5");
23+
updateOptionLanguage("multiplication10", t.multiplication10, "6");
24+
updateOptionLanguage("division10", t.division10, "7");
25+
document.getElementById("correctly").textContent = t.correctly;
26+
document.getElementById("wrongly").textContent = t.wrongly;
27+
document.getElementById("correctAnswerP").textContent = t.correctAnswerP;
28+
}
29+
30+
function openSidebar() {
31+
document.getElementById("sidebar").classList.toggle("open");
32+
document.getElementById("overlay").classList.toggle("open");
33+
};
34+
35+
function closeSidebar() {
36+
document.getElementById("sidebar").classList.remove("open");
37+
document.getElementById("overlay").classList.remove("open");
38+
};
39+
40+
function generateExample() {
41+
a = Math.floor((Math.random() * 90 + 10) / variable);
42+
b = Math.floor((Math.random() * 90 + 10) / variable);
43+
44+
if (sign === "-") {
45+
if (a < b) {
46+
[a, b] = [b, a];
47+
};
48+
} else if (sign === "/") {
49+
a = a * b;
50+
};
51+
};
52+
53+
function resetCounters() {
54+
skipped = 0;
55+
solved = 0;
56+
mistakes = 0;
57+
document.getElementById("example").textContent = `${a}${sign}${b}=`;
58+
document.getElementById("inputField").value = "";
59+
document.getElementById("skippedExamples").textContent = `${skippedText} ${skipped}`;
60+
document.getElementById("solvedExamples").textContent = `${solvedText} ${solved}`;
61+
document.getElementById("mistakes").textContent = `${mistakesText} ${mistakes}`;
62+
};
63+
64+
function nextExample() {
65+
generateExample();
66+
document.getElementById("example").textContent = `${a}${sign}${b}=`;
67+
document.getElementById("inputField").value = "";
68+
}
69+
70+
function checkExample() {
71+
let correctAnswer;
72+
73+
if (sign === "+") {
74+
correctAnswer = a + b;
75+
} else if (sign === "-") {
76+
correctAnswer = a - b;
77+
} else if (sign === "*") {
78+
correctAnswer = a * b;
79+
} else if (sign === "/") {
80+
correctAnswer = a / b;
81+
};
82+
83+
if (Number(document.getElementById("inputField").value) === correctAnswer) {
84+
document.getElementById("correctlySound").play();
85+
document.getElementById("correctlyDiv").style.visibility = "visible";
86+
setTimeout(() => {
87+
document.getElementById("correctlyDiv").style.visibility = "hidden";
88+
}, 1000);
89+
solved++;
90+
document.getElementById("solvedExamples").textContent = `${solvedText} ${solved}`;
91+
nextExample();
92+
}
93+
else if (document.getElementById("inputField").value === "") {
94+
}
95+
else {
96+
document.getElementById("wronglySound").play();
97+
document.getElementById("wronglyDiv").style.visibility = "visible";
98+
document.getElementById("correctAnswerP").textContent = `${correctAnswerPText} ${correctAnswer}`;
99+
setTimeout(() => {
100+
document.getElementById("wronglyDiv").style.visibility = "hidden";
101+
}, 1000);
102+
mistakes++;
103+
document.getElementById("mistakes").textContent = `${mistakesText} ${mistakes}`;
104+
nextExample();
105+
};
106+
};
107+
108+
function skipExample() {
109+
skipped++;
110+
document.getElementById("skippedExamples").textContent = `${skippedText} ${skipped}`;
111+
nextExample();
112+
};
113+
114+
function changeMode(newSign, newVariable, value, optionName) {
115+
sign = newSign;
116+
variable = newVariable;
117+
118+
document.getElementById("select").value = value;
119+
120+
generateExample();
121+
resetCounters();
122+
closeSidebar();
123+
124+
document.querySelectorAll(".sidebarOption").forEach(option => {
125+
option.disabled = false;
126+
option.classList.remove("open");
127+
});
128+
129+
document.getElementById(optionName).disabled = true;
130+
document.getElementById(optionName).classList.toggle("open");
131+
}
132+
133+
document.addEventListener("keydown", function(event) {
134+
if (event.key === "Enter") {
135+
checkExample();
136+
};
137+
});
138+
139+
// App logic
140+
141+
if (translations[browserLanguage]) {
142+
updateLanguage(browserLanguage);
143+
};
144+
145+
let skipped = 0;
146+
let solved = 0;
147+
let mistakes = 0;
148+
149+
const skippedText = document.getElementById("skippedExamples").textContent;
150+
const solvedText = document.getElementById("solvedExamples").textContent;
151+
const mistakesText = document.getElementById("mistakes").textContent;
152+
const correctAnswerPText = document.getElementById("correctAnswerP").textContent;
153+
154+
let a, b, sign, variable;
155+
156+
changeMode("+", 1, "1", "add100");

0 commit comments

Comments
 (0)