Simple Quiz App
In this tutorial, we will create a straightforward quiz application using the trifecta of web technologies: HTML, CSS, and JavaScript. The app will present multiple-choice questions, allow users to select answers, and display a final score at the end.
Setting Up the HTML Structure
First, let’s set up the HTML structure for our quiz app. We’ll need a container for the quiz questions, answer buttons, a “Next” button, and a hidden container for displaying the final score.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Quiz App</title>
</head>
<body>
<div id="quiz-container">
<div id="question-container">
<p id="question-text"></p>
</div>
<div id="answer-buttons" class="btn-container">
</div>
<button id="next-button" class="btn" onclick="nextQuestion()">Next</button>
</div>
<div id="score-container" style="display: none;">
<p id="score-text"></p>
</div>
<script src="questions.js"></script>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
Style your quiz app by creating a simple CSS file (styles.css) to give it a clean and user-friendly appearance.
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#quiz-container {
max-width: 600px;
width: 100%;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.btn {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
Writing JavaScript for Functionality
Now, let’s implement the logic with JavaScript. In the questions.js file, define an array of questions, and in the script.js file, handle the quiz logic.
JavaScript (questions.js):
const questions = [
{
question: 'What is the capital of France?',
answers: [
{ text: 'Paris', correct: true },
{ text: 'Berlin', correct: false },
{ text: 'Madrid', correct: false },
{ text: 'Rome', correct: false }
]
},
{
question: 'Which planet is known as the Red Planet?',
answers: [
{ text: 'Earth', correct: false },
{ text: 'Mars', correct: true },
{ text: 'Venus', correct: false },
{ text: 'Jupiter', correct: false }
]
},
{
question: 'What is the largest mammal?',
answers: [
{ text: 'Elephant', correct: false },
{ text: 'Blue Whale', correct: true },
{ text: 'Giraffe', correct: false },
{ text: 'Hippopotamus', correct: false }
]
},
{
question: 'Who wrote "Romeo and Juliet"?',
answers: [
{ text: 'Charles Dickens', correct: false },
{ text: 'William Shakespeare', correct: true },
{ text: 'Jane Austen', correct: false },
{ text: 'Mark Twain', correct: false }
]
},
{
question: 'What is the capital of Japan?',
answers: [
{ text: 'Seoul', correct: false },
{ text: 'Beijing', correct: false },
{ text: 'Tokyo', correct: true },
{ text: 'Bangkok', correct: false }
]
},
{
question: 'How many continents are there on Earth?',
answers: [
{ text: 'Five', correct: false },
{ text: 'Six', correct: false },
{ text: 'Seven', correct: true },
{ text: 'Eight', correct: false }
]
},
{
question: 'What is the capital of Australia?',
answers: [
{ text: 'Sydney', correct: false },
{ text: 'Canberra', correct: true },
{ text: 'Melbourne', correct: false },
{ text: 'Perth', correct: false }
]
},
{
question: 'Who developed the theory of relativity?',
answers: [
{ text: 'Isaac Newton', correct: false },
{ text: 'Galileo Galilei', correct: false },
{ text: 'Albert Einstein', correct: true },
{ text: 'Stephen Hawking', correct: false }
]
},
{
question: 'In which year did the Titanic sink?',
answers: [
{ text: '1912', correct: true },
{ text: '1905', correct: false },
{ text: '1920', correct: false },
{ text: '1935', correct: false }
]
},
{
question: 'What is the currency of Brazil?',
answers: [
{ text: 'Peso', correct: false },
{ text: 'Real', correct: true },
{ text: 'Baht', correct: false },
{ text: 'Rupee', correct: false }
]
}
// Add more questions as needed
];
JavaScript (script.js):
const questionContainer = document.getElementById('question-container');
const answerButtons = document.getElementById('answer-buttons');
const nextButton = document.getElementById('next-button');
const scoreContainer = document.getElementById('score-container');
const scoreText = document.getElementById('score-text');
const quizCard = document.getElementById('quiz-card');
let currentQuestionIndex = 0;
let correctAnswers = 0;
function startQuiz() {
currentQuestionIndex = 0;
correctAnswers = 1;
showQuestion(questions[currentQuestionIndex]);
// nextButton.style.display = 'none';
nextButton.disabled = true;
nextButton.style.background = '#c1c1c1';
scoreContainer.style.display = 'none';
}
function showQuestion(question) {
questionContainer.innerText = question.question;
answerButtons.innerHTML = '';
question.answers.forEach(answer => {
const button = document.createElement('button');
button.innerText = answer.text;
button.classList.add('btn');
button.addEventListener('click', () => selectAnswer(answer));
answerButtons.appendChild(button);
});
}
function selectAnswer(answer) {
const buttons = answerButtons.getElementsByTagName('button');
// Disable buttons after an answer is selected
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
// Check correctness and apply visual feedback
if (answer.correct) {
event.target.style.backgroundColor = 'green';
correctAnswers++;
} else {
event.target.style.backgroundColor = 'red';
nextButton.disabled = false;
nextButton.style.background = '#323232';
// If you want to show the correct answer when the user selects the wrong one
for (let i = 0; i < buttons.length; i++) {
if (question.answers[i].correct) {
buttons[i].style.backgroundColor = 'green';
}
}
}
nextButton.disabled = false;
nextButton.style.background = '#323232';
}
nextButton.addEventListener('click', () => {
// Move to the next question
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
showQuestion(questions[currentQuestionIndex]);
nextButton.disabled = true;
nextButton.style.background = '#c1c1c1';
// Hide the "Next" button and show the score container after the last question
if (currentQuestionIndex === questions.length - 1) {
nextButton.style.display = 'none';
scoreContainer.style.display = 'block';
quizCard.style.display = 'none';
scoreText.innerText = `Your score: ${correctAnswers} out of ${questions.length}`;
}
}
});
// Initial start of the quiz
startQuiz();
Live Demo
Check out the live demo of the quiz app here: Simple Quiz App
Conclusion
Congratulations! You’ve just created a simple quiz app using HTML, CSS, and JavaScript. This app can serve as a starting point for more advanced features like a timer, different question types, or even integrating with a backend for a dynamic quiz experience.
Feel free to expand and customize the app according to your needs, and happy coding! If you’re interested in enhancing the user interface, you might also want to check out our tutorial on Creating a Stylish File Upload Button with CSS and Image Preview Feature. This tutorial provides insights into making your file upload buttons more visually appealing and includes a handy image preview feature.
