<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SkoolMaths Interactive Quiz</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: #f5fdfb;
color: #222;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.quiz-container {
background: #ffffff;
border: 3px solid #22ad91;
border-radius: 20px;
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
padding: 25px;
max-width: 650px;
width: 100%;
transition: all 0.5s ease;
position: relative;
}
h3 {
color: #1a7c6e;
text-align: center;
font-size: 22px;
}
input[type="number"] {
width: 60px;
border: 2px solid #ccc;
border-radius: 8px;
text-align: center;
font-size: 18px;
transition: width 0.2s ease, border 0.3s ease;
}
input[type="number"]:focus {
border-color: #22ad91;
outline: none;
}
button {
background: #22ad91;
color: white;
border: none;
border-radius: 12px;
padding: 10px 25px;
margin-top: 15px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
button:hover {
background: #1c947d;
transform: translateY(-2px);
}
.feedback {
font-size: 18px;
font-weight: 600;
margin-top: 15px;
}
.hidden { display: none; }
.fade {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {opacity: 0; transform: scale(0.98);}
to {opacity: 1; transform: scale(1);}
}
.progress-bar {
width: 100%;
height: 10px;
background: #e3f5f1;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
}
.progress-fill {
height: 10px;
width: 0%;
background: #22ad91;
transition: width 0.5s ease;
}
.progress-text {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 8px;
}
.final-screen {
text-align: center;
font-size: 22px;
color: #1a7c6e;
}
</style>
</head>
<body>
<!-- QUIZ 1 -->
<div id="quiz1" class="quiz-container fade">
<h3>Work out 9000 − 790</h3>
<p>
<b>9000</b> − <b>790</b> =
<input type="number" id="box1" oninput="autoExpand(this)"> −
<input type="number" id="box2" oninput="autoExpand(this)"> =
<b>8300</b>
</p>
<p><b>and</b> <b>8300</b> −
<input type="number" id="box3" oninput="autoExpand(this)"> =
<input type="number" id="box4" oninput="autoExpand(this)">
</p>
<button onclick="checkAnswers(1)">Mark It</button>
<span id="result1"></span>
<div id="feedback1" class="feedback"></div>
<div class="progress-bar"><div class="progress-fill" id="progress1"></div></div>
<div class="progress-text">Quiz 1 of 2</div>
<button onclick="showNextQuiz(2)">Next Quiz ➜</button>
</div>
<!-- QUIZ 2 -->
<div id="quiz2" class="quiz-container hidden fade">
<h3>Work out 5000 − 275</h3>
<p>
<b>5000</b> − <b>275</b> =
<input type="number" id="q2b1" oninput="autoExpand(this)"> −
<input type="number" id="q2b2" oninput="autoExpand(this)"> =
<b>4725</b>
</p>
<button onclick="checkAnswers(2)">Mark It</button>
<span id="result2"></span>
<div id="feedback2" class="feedback"></div>
<div class="progress-bar"><div class="progress-fill" id="progress2"></div></div>
<div class="progress-text">Quiz 2 of 2</div>
<button onclick="showNextQuiz('final')">Finish ➜</button>
</div>
<!-- FINAL SCREEN -->
<div id="finalScreen" class="quiz-container hidden fade final-screen">
<h3>🎉 Well done!</h3>
<p>You’ve completed all the quizzes!</p>
<button onclick="restartQuiz()">🔁 Try Again</button>
</div>
<audio id="clapSound">
<source src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_66b7c5f01f.mp3?filename=small-crowd-applause-6691.mp3" type="audio/mpeg">
</audio>
<script>
// Auto-expand input width
function autoExpand(el) {
el.style.width = (el.value.length + 1) * 12 + "px";
}
// Store answers for all quizzes
const quizAnswers = {
1: { box1: 8700, box2: 300, box3: 490, box4: 7810 },
2: { q2b1: 4700, q2b2: 25 }
};
// Check answers
function checkAnswers(qNum) {
const answers = quizAnswers[qNum];
let correct = 0, total = Object.keys(answers).length;
const feedback = document.getElementById("feedback" + qNum);
const result = document.getElementById("result" + qNum);
const clap = document.getElementById("clapSound");
for (let id in answers) {
const input = document.getElementById(id);
if (parseInt(input.value) === answers[id]) {
input.style.border = "3px solid #22ad91";
correct++;
} else {
input.style.border = "3px solid red";
}
}
// Update feedback + play sound if all correct
if (correct === total) {
result.textContent = " ✅";
feedback.textContent = "Excellent! All answers are correct!";
clap.play();
updateProgress(qNum);
} else {
result.textContent = " ❌";
feedback.textContent = "Some answers are incorrect. Try again!";
}
}
// Show next quiz or final screen
function showNextQuiz(n) {
document.querySelectorAll('.quiz-container').forEach(q => q.classList.add('hidden'));
if (n === 'final') {
document.getElementById("finalScreen").classList.remove('hidden');
} else {
document.getElementById("quiz" + n).classList.remove('hidden');
}
}
// Update progress bar
function updateProgress(qNum) {
const totalQuizzes = Object.keys(quizAnswers).length;
const progressFill = document.getElementById("progress" + qNum);
const progressPercent = (qNum / totalQuizzes) * 100;
progressFill.style.width = progressPercent + "%";
}
// Restart all quizzes
function restartQuiz() {
document.querySelectorAll('input[type="number"]').forEach(i => {
i.value = "";
i.style.border = "2px solid #ccc";
autoExpand(i);
});
document.querySelectorAll('.progress-fill').forEach(p => p.style.width = "0%");
showNextQuiz(1);
}
</script>
</body>
</html>