Skip to content

Commit ee8e3f5

Browse files
olsenbtolsenbt
committed
saves user data locally, changed UI colors per category, no blank answers
1 parent 7e9fe79 commit ee8e3f5

File tree

4 files changed

+102
-39
lines changed

4 files changed

+102
-39
lines changed

‎index.html‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,60 @@
1111
<h1>Choose a Math Timing</h1>
1212
<div class="category">
1313
<h2>Addition</h2>
14-
<div class="levels">
15-
<a href="tests/addition_2.html">+2</a>
16-
<a href="tests/addition_3.html">+3</a>
17-
<a href="tests/addition_4.html">+4</a>
18-
<a href="tests/addition_5.html">+5</a>
19-
<a href="tests/addition_6.html">+6</a>
20-
<a href="tests/addition_7.html">+7</a>
21-
<a href="tests/addition_8.html">+8</a>
22-
<a href="tests/addition_9.html">+9</a>
14+
<div class="levels addition-levels">
15+
<a href="tests/addition_2.html" data-id="addition_2">+2</a>
16+
<a href="tests/addition_3.html" data-id="addition_3">+3</a>
17+
<a href="tests/addition_4.html" data-id="addition_4">+4</a>
18+
<a href="tests/addition_5.html" data-id="addition_5">+5</a>
19+
<a href="tests/addition_6.html" data-id="addition_6">+6</a>
20+
<a href="tests/addition_7.html" data-id="addition_7">+7</a>
21+
<a href="tests/addition_8.html" data-id="addition_8">+8</a>
22+
<a href="tests/addition_9.html" data-id="addition_9">+9</a>
2323
</div>
2424
</div>
2525

2626
<div class="category">
2727
<h2>Subtraction</h2>
28-
<div class="levels">
29-
<a href="tests/subtraction_2.html">-2</a>
30-
<a href="tests/subtraction_3.html">-3</a>
31-
<a href="tests/subtraction_4.html">-4</a>
32-
<a href="tests/subtraction_5.html">-5</a>
33-
<a href="tests/subtraction_6.html">-6</a>
34-
<a href="tests/subtraction_7.html">-7</a>
35-
<a href="tests/subtraction_8.html">-8</a>
36-
<a href="tests/subtraction_9.html">-9</a>
28+
<div class="levels subtraction-levels">
29+
<a href="tests/subtraction_2.html" data-id="subtraction_2">-2</a>
30+
<a href="tests/subtraction_3.html" data-id="subtraction_3">-3</a>
31+
<a href="tests/subtraction_4.html" data-id="subtraction_4">-4</a>
32+
<a href="tests/subtraction_5.html" data-id="subtraction_5">-5</a>
33+
<a href="tests/subtraction_6.html" data-id="subtraction_6">-6</a>
34+
<a href="tests/subtraction_7.html" data-id="subtraction_7">-7</a>
35+
<a href="tests/subtraction_8.html" data-id="subtraction_8">-8</a>
36+
<a href="tests/subtraction_9.html" data-id="subtraction_9">-9</a>
3737
</div>
3838
</div>
3939

4040
<div class="category">
4141
<h2>Multiplication</h2>
42-
<div class="levels">
43-
<a href="tests/multiplication_2.html">x2</a>
44-
<a href="tests/multiplication_3.html">x3</a>
45-
<a href="tests/multiplication_4.html">x4</a>
46-
<a href="tests/multiplication_5.html">x5</a>
47-
<a href="tests/multiplication_6.html">x6</a>
48-
<a href="tests/multiplication_7.html">x7</a>
49-
<a href="tests/multiplication_8.html">x8</a>
50-
<a href="tests/multiplication_9.html">x9</a>
42+
<div class="levels multiplication-levels">
43+
<a href="tests/multiplication_2.html" data-id="multiplication_2">x2</a>
44+
<a href="tests/multiplication_3.html" data-id="multiplication_3">x3</a>
45+
<a href="tests/multiplication_4.html" data-id="multiplication_4">x4</a>
46+
<a href="tests/multiplication_5.html" data-id="multiplication_5">x5</a>
47+
<a href="tests/multiplication_6.html" data-id="multiplication_6">x6</a>
48+
<a href="tests/multiplication_7.html" data-id="multiplication_7">x7</a>
49+
<a href="tests/multiplication_8.html" data-id="multiplication_8">x8</a>
50+
<a href="tests/multiplication_9.html" data-id="multiplication_9">x9</a>
5151
</div>
5252
</div>
5353

5454
<div class="category">
5555
<h2>Division</h2>
56-
<div class="levels">
57-
<a href="tests/division_2.html">÷2</a>
58-
<a href="tests/division_3.html">÷3</a>
59-
<a href="tests/division_4.html">÷4</a>
60-
<a href="tests/division_5.html">÷5</a>
61-
<a href="tests/division_6.html">÷6</a>
62-
<a href="tests/division_7.html">÷7</a>
63-
<a href="tests/division_8.html">÷8</a>
64-
<a href="tests/division_9.html">÷9</a>
56+
<div class="levels division-levels">
57+
<a href="tests/division_2.html" data-id="division_2">÷2</a>
58+
<a href="tests/division_3.html" data-id="division_3">÷3</a>
59+
<a href="tests/division_4.html" data-id="division_4">÷4</a>
60+
<a href="tests/division_5.html" data-id="division_5">÷5</a>
61+
<a href="tests/division_6.html" data-id="division_6">÷6</a>
62+
<a href="tests/division_7.html" data-id="division_7">÷7</a>
63+
<a href="tests/division_8.html" data-id="division_8">÷8</a>
64+
<a href="tests/division_9.html" data-id="division_9">÷9</a>
6565
</div>
6666
</div>
6767
</div>
68+
<script src="index.js"></script>
6869
</body>
6970
</html>

‎index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
document.querySelectorAll(".levels a").forEach(link => {
3+
const id = link.dataset.id;
4+
const score = localStorage.getItem(id);
5+
6+
if (score === "30") {
7+
link.classList.add("completed");
8+
link.title = "Completed (30/30)";
9+
}
10+
});
11+
});

‎script.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,11 @@ function handleAnswer(e) {
138138
const userAnswer = parseInt(answerInput.value);
139139
const currentQ = questions[currentQuestionIndex];
140140
const correct = evaluate(currentQ);
141+
142+
if (userAnswer === "" || isNaN(userAnswer)) {
143+
return;
144+
}
145+
141146
if (userAnswer === correct) correctCount++;
142147
else wrongAnswers.push({ q: currentQ, correct });
143148
currentQuestionIndex++;
@@ -149,6 +154,15 @@ function finishTest() {
149154
document.getElementById("test-screen").classList.add("hidden");
150155
document.getElementById("end-screen").classList.remove("hidden");
151156
scoreSummary.innerText = `You got ${correctCount} out of 30 correct.`;
157+
158+
const key = `${operation}_${level}`;
159+
const previousScore = parseInt(localStorage.getItem(key)) || 0;
160+
161+
if(correctCount > previousScore) {
162+
localStorage.setItem(key, correctCount);
163+
}
164+
165+
localStorage.setItem(`${operation}_${level}`, correctCount);
152166
if (wrongAnswers.length > 0) {
153167
missedQuestions.innerHTML = `<h3>Questions Missed:</h3><ul>` +
154168
wrongAnswers.map(w => `<li>${formatQuestion(w.q)} = ${w.correct}</li>`).join('') +
@@ -163,4 +177,4 @@ parseURL();
163177
const bank = generateBank();
164178
questions = sampleQuestions(bank);
165179
startBtn.addEventListener("click", startTest);
166-
answerInput.addEventListener("keydown", handleAnswer);
180+
answerInput.addEventListener("keydown", handleAnswer);

‎style.css‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,20 +70,57 @@ button:hover {
7070
font-size: 1.2rem;
7171
}
7272

73+
.levels {
74+
display: flex;
75+
flex-wrap: wrap;
76+
justify-content: center;
77+
}
78+
7379
.levels a {
7480
display: inline-block;
7581
width: 60px;
7682
height: 60px;
7783
line-height: 60px;
7884
margin: 0.5rem;
79-
background-color: #007bff;
8085
color: white;
8186
text-decoration: none;
8287
font-size: 1.2rem;
8388
border-radius: 10px;
8489
transition: background-color 0.3s ease;
90+
text-align: center;
8591
}
8692

87-
.levels a:hover {
93+
.levels a.completed {
94+
background-color: #28a745 !important; /* green */
95+
color: white;
96+
}
97+
98+
/* Category-specific colors */
99+
.addition-levels a {
100+
background-color: #007bff;
101+
}
102+
.addition-levels a:hover {
88103
background-color: #0056b3;
104+
}
105+
106+
.subtraction-levels a {
107+
background-color: #dc3545;
108+
}
109+
.subtraction-levels a:hover {
110+
background-color: #a71d2a;
111+
}
112+
113+
/* Updated multiplication color */
114+
.multiplication-levels a {
115+
background-color: #6f42c1; /* purple */
116+
}
117+
.multiplication-levels a:hover {
118+
background-color: #5936a2;
119+
}
120+
121+
.division-levels a {
122+
background-color: #ff7f07;
123+
}
124+
.division-levels a:hover {
125+
background-color: #c96202;
89126
}

0 commit comments

Comments
 (0)