Preview
Quiz App Source Code (HTML, CSS, JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Quiz App</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
margin: 0;
padding: 0;
}
.quiz-container {
max-width: 700px;
margin: 40px auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
#timer {
font-size: 18px;
font-weight: bold;
padding: 10px;
border-radius: 5px;
background: #e0f7fa;
color: #00796b;
}
#timer.red {
background: #ffe5e5;
color: red;
}
.toggles {
margin: 20px 0;
}
.btn {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
#question {
font-size: 18px;
margin-top: 20px;
}
#options label {
display: block;
margin-bottom: 10px;
cursor: pointer;
}
#navigation {
overflow-x: auto;
white-space: nowrap;
margin: 20px 0;
}
.nav-btn {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
border: none;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.nav-btn.active {
background: #1d3557;
color: #fff;
}
.nav-btn.answered {
background: #a8dadc;
}
.result-question {
margin: 15px 0;
padding: 10px;
background: #f9f9f9;
border-left: 5px solid #ccc;
}
.result-correct { color: green; }
.result-wrong { color: red; }
.result-unanswered { color: gray; }
#ad-space {
margin-top: 30px;
background: #f1f1f1;
padding: 20px;
text-align: center;
border: 1px dashed #ccc;
color: #888;
}
.hidden { display: none; }
</style>
</head>
<body>
<div class="quiz-container">
<div class="top-bar">
<h2>Quiz App</h2>
<div id="timer">Time Left: 00:00:00</div>
</div>
<div id="setupOptions" class="toggles">
<label><input type="checkbox" id="shuffleToggle"> Shuffle Questions</label><br>
<label><input type="checkbox" id="pauseToggle"> Show Pause Button</label>
</div>
<button class="btn" id="startBtn">Start Quiz</button>
<div id="quizArea" class="hidden">
<p id="question"></p>
<div id="options"></div>
<div id="navigation"></div>
<button class="btn hidden" id="pauseBtn">Pause</button>
<button class="btn" id="submitBtn">Submit</button>
</div>
<div id="result" class="hidden"></div>
<button class="btn hidden" id="retryBtn">Retry</button>
<div id="ad-space">Google Ad Placeholder</div>
</div>
<script>
const totalTimeInSeconds = 0.6 * 60; // change time here (e.g. 3 * 60 * 60 for 3 hours)
let timeLeft = totalTimeInSeconds;
let timerInterval;
let paused = false;
const questions = [
{
question: "<p>What is the capital of France?</p>",
options: ["London", "Berlin", "Paris", "Madrid"],
answer: 2
},
{
question: "<p>What is 2 + 2?</p>",
options: ["3", "4", "5", "6"],
answer: 1
},
{
question: "<p>Which planet is closest to the sun?</p>",
options: ["Mars", "Venus", "Mercury", "Jupiter"],
answer: 2
}
];
let originalQuestions = [...questions];
let currentQuestion = 0;
let selectedAnswers = [];
const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const navigationEl = document.getElementById("navigation");
const timerEl = document.getElementById("timer");
const resultEl = document.getElementById("result");
const quizArea = document.getElementById("quizArea");
const startBtn = document.getElementById("startBtn");
const submitBtn = document.getElementById("submitBtn");
const retryBtn = document.getElementById("retryBtn");
const pauseBtn = document.getElementById("pauseBtn");
const shuffleToggle = document.getElementById("shuffleToggle");
const pauseToggle = document.getElementById("pauseToggle");
const setupOptions = document.getElementById("setupOptions");
function startQuiz() {
questions.splice(0, questions.length, ...originalQuestions);
if (shuffleToggle.checked) {
questions.sort(() => Math.random() - 0.5);
}
selectedAnswers = Array(questions.length).fill(null);
currentQuestion = 0;
timeLeft = totalTimeInSeconds;
quizArea.classList.remove("hidden");
resultEl.classList.add("hidden");
startBtn.classList.add("hidden");
retryBtn.classList.add("hidden");
setupOptions.classList.add("hidden");
pauseBtn.classList.toggle("hidden", !pauseToggle.checked);
pauseBtn.textContent = "Pause";
paused = false;
renderNavigation();
loadQuestion(currentQuestion);
startTimer();
}
function startTimer() {
clearInterval(timerInterval);
timerInterval = setInterval(() => {
if (!paused) {
updateTimer();
timeLeft--;
}
}, 1000);
}
function updateTimer() {
const hrs = Math.floor(timeLeft / 3600);
const mins = Math.floor((timeLeft % 3600) / 60);
const secs = timeLeft % 60;
timerEl.textContent = `Time Left: ${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
const used = 1 - timeLeft / totalTimeInSeconds;
timerEl.classList.toggle("red", used >= 0.9);
if (timeLeft <= 0) {
clearInterval(timerInterval);
alert("⏰ Time's up!");
submitQuiz();
}
}
function renderNavigation() {
navigationEl.innerHTML = "";
questions.forEach((_, i) => {
const btn = document.createElement("button");
btn.className = "nav-btn";
btn.textContent = i + 1;
btn.onclick = () => {
saveAnswer();
loadQuestion(i);
};
navigationEl.appendChild(btn);
});
}
function updateNavButtons() {
const buttons = document.querySelectorAll(".nav-btn");
buttons.forEach((btn, i) => {
btn.classList.remove("active");
btn.classList.toggle("answered", selectedAnswers[i] !== null);
if (i === currentQuestion) {
btn.classList.add("active");
}
});
}
function loadQuestion(index) {
currentQuestion = index;
const q = questions[index];
questionEl.innerHTML = q.question;
optionsEl.innerHTML = "";
q.options.forEach((opt, i) => {
const label = document.createElement("label");
const input = document.createElement("input");
input.type = "radio";
input.name = "option";
input.value = i;
if (selectedAnswers[index] === i) input.checked = true;
input.addEventListener("change", saveAnswer);
label.appendChild(input);
label.innerHTML += ` ${opt}`;
optionsEl.appendChild(label);
});
updateNavButtons();
}
function saveAnswer() {
const selected = document.querySelector('input[name="option"]:checked');
if (selected) {
selectedAnswers[currentQuestion] = parseInt(selected.value);
updateNavButtons();
}
}
function submitQuiz() {
saveAnswer();
clearInterval(timerInterval);
let correct = 0, answered = 0;
questions.forEach((q, i) => {
if (selectedAnswers[i] !== null) {
answered++;
if (selectedAnswers[i] === q.answer) correct++;
}
});
const wrong = answered - correct;
const unanswered = questions.length - answered;
const percent = ((correct / questions.length) * 100).toFixed(2);
let html = `
<h2>📊 Result</h2>
<p>✅ Correct: ${correct}</p>
<p>❌ Wrong: ${wrong}</p>
<p>📝 Answered: ${answered}</p>
<p>❓ Unanswered: ${unanswered}</p>
<p>📈 Percentage: ${percent}%</p>
<hr><h3>🧾 All Questions & Answers</h3>
`;
questions.forEach((q, i) => {
const ua = selectedAnswers[i];
const ca = q.answer;
let status = '';
let answerHTML = '';
if (ua === null) {
status = `<span class="result-unanswered">❓ Not Answered</span>`;
answerHTML += `<strong>Correct Answer:</strong> <span class="result-correct">${q.options[ca]}</span>`;
} else if (ua === ca) {
status = `<span class="result-correct">✅ Correct</span>`;
answerHTML += `<strong>Your Answer:</strong> <span class="result-correct">${q.options[ua]}</span>`;
} else {
status = `<span class="result-wrong">❌ Wrong</span>`;
answerHTML += `<strong>Your Answer:</strong> <span class="result-wrong">${q.options[ua]}</span><br>`;
answerHTML += `<strong>Correct Answer:</strong> <span class="result-correct">${q.options[ca]}</span>`;
}
html += `
<div class="result-question">
<strong>Q${i + 1}:</strong> ${q.question}<br>
${answerHTML}<br>
<strong>Status:</strong> ${status}
</div>
`;
});
resultEl.innerHTML = html;
resultEl.classList.remove("hidden");
quizArea.classList.add("hidden");
retryBtn.classList.remove("hidden");
}
startBtn.onclick = startQuiz;
retryBtn.onclick = () => {
setupOptions.classList.remove("hidden");
startQuiz();
};
submitBtn.onclick = submitQuiz;
pauseBtn.onclick = () => {
paused = !paused;
pauseBtn.textContent = paused ? "Resume" : "Pause";
};
</script>
</body>
</html>
