📘 JavaScript Project: Interactive Quiz App
Welcome to your final project in this JavaScript course! 🎯
In this project, you'll build a Quiz Application using HTML, CSS, and JavaScript.
This app will allow users to attempt multiple-choice questions, track their score, and get instant feedback on their performance.
🔹 Project Overview
The JavaScript Quiz App is a fun and interactive way to test your knowledge.
It demonstrates concepts like functions, arrays, DOM manipulation, and event handling all in one mini project.
🧱 Technologies Used
- HTML – Structure of the quiz layout.
- CSS – For styling and responsiveness.
- JavaScript – For interactivity, scoring, and DOM updates.
💻 Full Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Quiz App</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #2196f3, #21cbf3);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.quiz-container {
background: #fff;
border-radius: 12px;
padding: 30px;
width: 90%;
max-width: 500px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #1976d2;
}
.question {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.options {
display: flex;
flex-direction: column;
gap: 10px;
}
.option {
background: #e3f2fd;
border: none;
padding: 10px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
.option:hover {
background: #bbdefb;
}
.btn {
margin-top: 20px;
background: #1976d2;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
.btn:hover {
background: #0d47a1;
}
.result {
font-size: 20px;
font-weight: 600;
color: #2e7d32;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h2>🧠 JavaScript Quiz</h2>
<div id="quiz">
<div class="question" id="question">Question text</div>
<div class="options">
<button class="option" id="option1"></button>
<button class="option" id="option2"></button>
<button class="option" id="option3"></button>
<button class="option" id="option4"></button>
</div>
<button class="btn" id="nextBtn">Next</button>
<div class="result" id="result"></div>
</div>
</div>
<script>
const quizData = [
{
question: "Which keyword declares a variable in JavaScript?",
options: ["var", "int", "define", "letvar"],
answer: "var",
},
{
question: "Which method converts JSON to a JavaScript object?",
options: ["JSON.parse()", "JSON.stringify()", "JSON.object()", "parse.JSON()"],
answer: "JSON.parse()",
},
{
question: "Which symbol is used for comments in JavaScript?",
options: ["//", "/*", "#", "<!-- -->"],
answer: "//",
},
{
question: "Which function is used to print output in the console?",
options: ["console.print()", "log.console()", "console.log()", "print.console()"],
answer: "console.log()",
},
{
question: "Which operator is used to compare both value and type?",
options: ["==", "=", "===", "!="],
answer: "===",
},
];
const questionEl = document.getElementById("question");
const options = document.querySelectorAll(".option");
const nextBtn = document.getElementById("nextBtn");
const resultEl = document.getElementById("result");
let currentQuestion = 0;
let score = 0;
function loadQuestion() {
const current = quizData[currentQuestion];
questionEl.textContent = current.question;
options.forEach((option, index) => {
option.textContent = current.options[index];
option.onclick = () => checkAnswer(option.textContent);
});
resultEl.textContent = "";
}
function checkAnswer(selected) {
const correct = quizData[currentQuestion].answer;
if (selected === correct) {
score++;
resultEl.textContent = "✅ Correct!";
resultEl.style.color = "#2e7d32";
} else {
resultEl.textContent = `❌ Wrong! Correct Answer: ${correct}`;
resultEl.style.color = "#d32f2f";
}
currentQuestion++;
nextBtn.style.display = "block";
}
nextBtn.addEventListener("click", () => {
if (currentQuestion < quizData.length) {
loadQuestion();
nextBtn.style.display = "none";
} else {
showFinalResult();
}
});
function showFinalResult() {
document.getElementById("quiz").innerHTML = `
<h2>🎉 Quiz Completed!</h2>
<p>You scored <b>${score}</b> out of <b>${quizData.length}</b>.</p>
<button class="btn" onclick="location.reload()">Restart Quiz</button>
`;
}
loadQuestion();
nextBtn.style.display = "none";
</script>
</body>
</html>
🧑💻 Try It Yourself
✨ Conclusion
Congratulations 🎉 You’ve completed your JavaScript project!
This Quiz App combines multiple core concepts — from DOM manipulation and functions to event handling and conditionals.
You can now modify this quiz by adding more questions, shuffle answers, or track high scores using localStorage.
Keep practicing and move ahead to frameworks like React.js or Node.js to take your JavaScript skills to the next level 🚀.
Comments
Post a Comment