Build Your Own Interactive Quiz App: A Step-by-Step JavaScript Project
Creating an interactive quiz app is not only a fantastic way to learn JavaScript, but it’s also a fun project that can engage your audience. In this tutorial, I’ll guide you through building a quiz app that highlights correct and incorrect answers in different colors, provides immediate feedback, and shows a final score at the end. You can follow these steps using a simple text editor like Notepad or any code editor of your choice.
What You Will Build
You will create a quiz app in just 5 steps with the following features:
- A series of multiple-choice questions.
- Immediate feedback on each submission, highlighting the correct answer in green and incorrect in red.
- Dynamic updates to the user interface based on interactions.
- A final score displayed at the end of the quiz.
Step 1: Set Up Your Files
Start by creating three files:
index.htmlstyle.cssscript.js
You can create these files in a folder on your desktop. Right-click in the folder, choose “New” -> “Text Document,” and change the name and extension accordingly.
Step 2: Writing the HTML
Open index.html in your text editor and input the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question text?</h2>
<ul>
<li><button class="btn" id="btn0"><span id="choice0">Choice 1</span></button></li>
<li><button class="btn" id="btn1"><span id="choice1">Choice 2</span></button></li>
<li><button class="btn" id="btn2"><span id="choice2">Choice 3</span></button></li>
<li><button class="btn" id="btn3"><span id="choice3">Choice 4</span></button></li>
</ul>
</div>
<button id="submit">Next</button>
</div>
<script src="script.js"></script>
</body>
</html>This HTML structure sets up a simple quiz layout with a question and four answer buttons.
Step 3: Styling with CSS
Now, open style.css and add the following styles:
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.quiz-container {
background: white;
width: 300px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px;
border-radius: 8px;
}
.quiz-header h2 {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
.btn {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #5c67f2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
.btn:hover {
background-color: #7a85ff;
}
.selected {
background-color: #111e3f;
border: #000000;
}
.correct {
background-color: #78e08f;
}
.incorrect {
background-color: #e55039;
}
#submit {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
margin-top: 20px;
cursor: pointer;
}
#submit:hover {
background-color: #66bb6a;
}
.system-message {
text-align: center;
color: #333;
font-style: italic;
}These styles will make your quiz look clean and modern, with interactive colors for feedback.
Step 4: Adding JavaScript
Open script.js and paste the following code:
const quizData = [
{
question: "What does HTML stand for?",
a: "Hyper Text Markup Language",
b: "Hot Mail",
c: "How To Make Lasagna",
d: "None of the above",
correct: "a"
},
{
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d"
},
{
question: "What year was JavaScript created?",
a: "1995",
b: "1994",
c: "2000",
d: "None of the above",
correct: "a"
},
{
question: "Which tag is used to define an image in HTML?",
a: "<img>",
b: "<image>",
c: "<src>",
d: "<pic>",
correct: "a"
},
{
question: "What is the purpose of CSS?",
a: "To style pages",
b: "To add functionality",
c: "To structure content",
d: "To connect to databases",
correct: "a"
}
//Add more questions as you desire
];
let currentQuestion = 0;
let score = 0;
const questionEl = document.getElementById('question');
const quizButtons = document.querySelectorAll('.btn');
const submitButton = document.getElementById('submit');
const feedbackText = document.createElement('p');
document.getElementById('quiz').appendChild(feedbackText);
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
if (submitButton.textContent === "Submit Answer") {
submitAnswer();
} else {
nextQuestion();
}
}
});
function loadQuestion() {
const currentQuizData = quizData[currentQuestion];
questionEl.innerText = currentQuizData.question;
quizButtons.forEach((button, idx) => {
button.innerText = currentQuizData[Object.keys(currentQuizData)[idx + 1]];
button.classList.remove('selected', 'correct', 'incorrect');
});
feedbackText.innerText = '';
submitButton.textContent = "Submit Answer";
}
function submitAnswer() {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuestion].correct) {
score++;
feedbackText.innerText = 'Correct! Great job!';
feedbackText.style.color = '#78e08f';
} else {
feedbackText.innerText = `Oops! That's not right. The correct answer was "${quizData[currentQuestion][quizData[currentQuestion].correct]}".`;
feedbackText.style.color = '#e55039';
}
quizButtons.forEach(button => {
button.classList.remove('selected');
if (button.id[button.id.length - 1] === quizData[currentQuestion].correct) {
button.classList.add('correct');
} else if (button.id[button.id.length - 1] === answer) {
button.classList.add('incorrect');
}
});
submitButton.textContent = "Next Question";
}
}
function getSelected() {
let answer = undefined;
quizButtons.forEach(button => {
if (button.classList.contains('selected')) {
answer = button.id[button.id.length - 1];
}
});
return answer;
}
submitButton.addEventListener('click', () => {
if (submitButton.textContent === "Submit Answer") {
submitAnswer();
} else if (submitButton.textContent === "Next Question") {
nextQuestion();
}
});
function nextQuestion() {
if (currentQuestion < quizData.length - 1) {
currentQuestion++;
loadQuestion();
} else {
showFinalScore();
}
}
function showFinalScore() {
quiz.innerHTML = `<div class="system-message"><h2>You answered correctly at ${score}/${quizData.length} questions.</h2><button onclick="location.reload()">Try Again</button></div>`;
}
quizButtons.forEach(button => {
button.addEventListener('click', () => {
quizButtons.forEach(btn => btn.classList.remove('selected'));
button.classList.add('selected');
});
});
loadQuestion();This JavaScript adds interactivity to your quiz, handling user inputs, providing immediate feedback, and managing the quiz progress.
Step 5: Testing and Adding More Questions
Once you’ve got your basic quiz working, you can add more questions by extending the quizData array. Each object in the array represents a question with multiple-choice answers and a correct answer identifier.
Engage and Challenge
By following this quiz app tutorial, you can create a versatile quiz app that not only tests knowledge but also provides educational feedback. It’s a great way to engage visitors on your site or to create learning tools for various subjects. Give it a try, and see how you can expand and customize the quiz to fit your needs!
With Javascript you can create more exciting small apps like a simple chatbot