How to Create a Dynamic Quiz App Using HTML, CSS, and JavaScript
In this tutorial, we will walk you through the process of creating a dynamic Quiz App that uses HTML, CSS, and JavaScript to display a set of questions. We’ll show you how the questions can be pulled from a JSON file, allowing you to easily add more questions and adjust the look of the app as you see fit. By the end of this article, you will not only have a fully functional quiz app but also gain a deeper understanding of how to use HTML, CSS, and JavaScript together to create interactive and engaging web applications.
Take a moment to watch the following video showcasing the quiz app in action.
Understanding the Structure
Our quiz app has three main components:
HTML – This defines the structure of the page and sets up all the elements where the questions and answers will be displayed.
CSS – This is used to style the page, making the quiz visually appealing. It controls the colors, spacing, alignment, and layout.
JavaScript – This brings everything to life by controlling the logic and interactivity of the app. It handles fetching the questions from a JSON file, rendering them, capturing user answers, and displaying results.
The HTML Structure
Let’s start by looking at the basic HTML structure of our app. This is the markup that outlines where each part of the app will appear.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container" id="quiz-container"></div>
<div class="navigation">
<button id="prev-button" disabled>Previous</button>
<button id="next-button">Next</button>
<button id="submit-button">Submit</button>
</div>
<div class="results-container" id="results-container">
<h2>Your Answers:</h2>
<ul id="results-list"></ul>
<button id="clear-button">Clear</button>
</div>
<script src="script.js"></script>
</body>
</html>Key Components of the HTML:
Quiz Container (quiz-container): This is where the questions and answer options will be dynamically inserted by JavaScript.
Navigation: Buttons for navigating between pages (previous, next) and submitting the quiz.
Results Container: After submitting the quiz, this section displays the user’s answers.
The CSS Style
CSS is used to style the quiz and make it more interactive. It controls how the questions are displayed, how buttons look, and how the page behaves visually.
CSS
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background-color: #f3f4f6;
}
.quiz-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.card {
width: 240px;
height: 180px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
transform-style: preserve-3d;
position: relative;
}
.card-inner:hover {
box-shadow: 0 8px 16px #004754;
}
.card-inner.flipped {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease-in-out;
}
.card-front {
background-color: #004754;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
}
.card-front:hover {
background-color: #bebd00;
}
.card-back {
background-color: white;
color: #004754;
transform: rotateY(180deg);
flex-direction: column;
padding: 10px;
}
.card-back button {
margin-top: 10px;
padding: 5px 10px;
border: none;
background-color: #004754;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.card-back button:hover {
background-color: #bebd00;
}
.navigation {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 500px;
margin-top: 20px;
}
.navigation button {
padding: 10px 20px;
border: none;
background-color: #004754;
color: white;
border-radius: 5px;
cursor: pointer;
}
.navigation button:hover {
background-color: #bebd00;
}
.navigation button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.results-container {
display: none;
flex-direction: column;
align-items: center;
margin-top: 20px;
text-align: center;
}
.results-container h2 {
margin-bottom: 20px;
}
.results-container ul {
list-style: none;
padding: 0;
}
.results-container li {
background-color: #e3f2fd;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
.results-container button {
margin-top: 20px;
padding: 10px 20px;
border: none;
background-color: #ff5722;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.results-container button:hover {
background-color: #e64a19;
}
Key CSS Features:
Card Layout: The questions and answers are displayed on cards that flip when clicked. This is achieved using CSS transitions and 3D transformations.
Responsive Layout: The quiz layout adapts to different screen sizes, thanks to the grid-template-columns property.
The JavaScript Logic
The real magic of the app happens in the JavaScript code. It handles fetching the questions from a JSON file, rendering the questions dynamically, and capturing the user’s answers.
Fetching the Questions
The app fetches the questions from a questions.json file. This file contains an array of objects, each with an id, question, and options. This makes it easy to manage and add more questions.
[
{
"id": 1,
"question": "What is 2 + 2?",
"options": ["3", "4", "5", "6"]
},
{
"id": 2,
"question": "What is the capital of France?",
"options": ["Paris", "London", "Berlin", "Rome"]
},
{NOTE: HERE YOU CAN ADD MORE QUESTIONS AS ABOVE FORMAT}
]
Rendering Questions Dynamically
JavaScript dynamically generates the quiz cards using the data from the questions.json file:
async function fetchQuestions() {
try {
const response = await fetch('questions.json');
if (!response.ok) {
throw new Error('Failed to fetch questions');
}
questions = await response.json();
renderPage();
} catch (error) {
console.error("Error fetching questions:", error);
}
}
function renderPage() {
const quizContainer = document.getElementById("quiz-container");
quizContainer.innerHTML = "";
const start = currentPage * pageSize;
const end = start + pageSize;
const pageQuestions = questions.slice(start, end);
pageQuestions.forEach((question) => {
const card = document.createElement("div");
card.className = "card";
...
});
}
Handling User Interaction
JavaScript also handles user interaction, such as selecting answers, navigating between questions, and submitting the quiz.
Conclusion
By following this tutorial, you now have a fully functioning Quiz App that is dynamic and easy to modify. All the questions come from a JSON file, which makes it easy to add, remove, or update questions. You can also customize the styles and interactivity by adjusting the CSS and JavaScript.
Smart Learning
This app provides a great way for beginners to learn HTML, CSS, and JavaScript. You can easily see how these three technologies work together to build something interactive and dynamic. Plus, it’s a great learning experience to modify the questions, experiment with different styles, and add new features as you become more comfortable with coding.
You can download the source code and use it in your own projects. Modify the colors, fonts, or add more questions to make it your own!
If you need the source code for this project, simply click the button below to download it. Once you download the source code, unzip the file and open the index.html file in any browser to see the quiz app in action.
What’s Next?
Feel free to experiment by:
- Changing the look and feel by tweaking the CSS.
- Adding more questions to the
questions.jsonfile. - Adding features like time limits or scoring.
Happy coding, and all the best with your projects!
