hey guys today we are going to learn how to make a quiz app using HTML CSS and JavaScript. It’s a great project for everyone who wants to improve their coding skills in HTML, CSS & JavaScript. Inside the project you will learn how to use HTML & CSS to design the complete applications, then you will learn how to use JS to manipulate the elements.
Creating a quiz app from scratch can be a rewarding and educational experience, and you don’t need to be an expert coder to get started. In this article, we will guide you through the process of building a quiz app using three essential web technologies: HTML, CSS, and JavaScript. We will break down the steps in a simple and easy-to-follow manner, so even beginners can embark on this exciting journey.
A quiz app is a dynamic web application that allows users to answer a series of questions and receive immediate feedback on their performance. This type of app can be used for educational purposes, testing knowledge on various topics, or simply for fun. By the end of this tutorial, you’ll have the knowledge and confidence to create your own quiz app.
Quiz App Using HTML CSS and JavaScript
The first step in building a quiz app is to design its HTML structure. HTML (Hypertext Markup Language) is the backbone of web pages and will define the content and layout of our quiz app.
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 class="header-txt">Technology Quiz</h2>
</div>
<div class="quiz-body">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer" />
<label for="a" id="a_text">Questions</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer" />
<label for="b" id="b_text">Questions</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer" />
<label for="c" id="c_text">Questions</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer" />
<label for="d" id="d_text">Questions</label>
</li>
</ul>
</div>
<div class="quiz-footer">
<div class="quiz-details"></div>
<button type="button" id="btn">Submit</button>
</div>
</div>Once you’ve set up the HTML structure, it’s time to make your quiz app visually appealing using CSS (Cascading Style Sheets). CSS controls the design and layout of your app, giving it a polished look.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(77, 14, 203);
background: radial-gradient(
circle,
rgba(77, 14, 203, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
font-family: "poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.quiz-container {
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
max-width: 600px;
width: 100%;
}
.quiz-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.quiz-header h2 {
font-size: 1.5rem;
}
.quiz-header p {
background: #111;
padding: 0.4rem 1rem;
color: #fff;
border-radius: 5px;
}
.quiz-body {
padding: 2rem 2rem;
}
.quiz-body h2 {
padding: 1rem 0;
font-size: 2rem;
font-weight: 500;
text-align: center;
margin: 0;
}
.quiz-body ul {
list-style: none;
padding: 0;
}
.quiz-body ul li {
margin: 1rem 0;
font-size: 1rem;
border: 1px solid #aab7b8;
padding: 0.7rem;
border-radius: 5px;
cursor: pointer;
}
.quiz-body ul li label {
cursor: pointer;
padding: 0 0.4rem;
}
.quiz-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.quiz-footer button {
padding: 0.6rem 1.5rem;
outline: none;
background: #111;
border: 0;
cursor: pointer;
font-family: inherit;
border-radius: 5px;
color: #fff;
opacity: 0.9;
transition: 0.3s ease-in-out;
}
.quiz-body button {
padding: 0.6rem 1rem;
outline: none;
background: #111;
border: 0;
cursor: pointer;
font-family: inherit;
border-radius: 5px;
color: #fff;
opacity: 0.9;
transition: 0.3s ease-in-out;
display: block;
margin: 0 auto;
}
.quiz-footer button:hover {
opacity: 1;
}
The core of your quiz app lies in JavaScript. JavaScript will handle user interactions, display questions, track scores, and provide feedback.
"use strict";
const quizData = [
{
question: "Where is the correct place to insert a JavaScript?",
a: "The <head> section",
b: "The <body> section",
c: "Both the <head> and the <body> section are correct",
d: "none of the above",
correct: "c"
},
{
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d"
},
{
question: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b"
},
{
question: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a"
},
{
question: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b"
}
];
const quiz = document.querySelector(".quiz-body");
const answerEl = document.querySelectorAll(".answer");
const questionEl = document.getElementById("question");
const footerEl = document.querySelector(".quiz-footer");
const quizDetailEl = document.querySelector(".quiz-details");
const liEl = document.querySelector("ul li");
const a_txt = document.getElementById("a_text");
const b_txt = document.getElementById("b_text");
const c_txt = document.getElementById("c_text");
const d_txt = document.getElementById("d_text");
const btnSubmit = document.getElementById("btn");
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question;
a_txt.innerText = currentQuizData.a;
b_txt.innerText = currentQuizData.b;
c_txt.innerText = currentQuizData.c;
d_txt.innerText = currentQuizData.d;
quizDetailEl.innerHTML = `<p>${currentQuiz + 1} of ${quizData.length}</p>`;
}
// deselect
function deselectAnswers() {
answerEl.forEach((answerEl) => {
answerEl.checked = false;
});
}
// get selected
function getSelected() {
let answer;
answerEl.forEach((answerEls) => {
if (answerEls.checked) {
answer = answerEls.id;
}
});
return answer;
}
btnSubmit.addEventListener("click", function () {
const answers = getSelected();
if (answers) {
if (answers === quizData[currentQuiz].correct) {
score++;
}
nextQuestion();
}
});
// next Slide
function nextQuestion() {
currentQuiz++;
if (currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `<h2>You answered ${score}/${quizData.length} question correctly</h2>
<button type="button" onclick="location.reload()">Reload</button>
`;
footerEl.style.display = "none";
}
}
I’ve shared the complete source code of the project that was used to make a quiz app using HTML CSS and JavaScript. If you face any problem with the codes or you want to learn everything step by step practically, you can watch the video tutorial, that I mentioned below.
Create a Multiple Choice Quiz App Using JavaScript
Here is a multiple-choice quiz app using JavaScript. Inside the application are great features such as displaying the Question and multiple answers. You can choose right or wrong answers after completing the questions session.
You May Also Like:
- How to Create a QR Code Generator in JavaScript
- Create a Modal in HTML CSS and JavaScript
- Create an Accordion Using HTML, CSS, and JavaScript
- Form Validation in JavaScript
- How to Make a Password Generator in JavaScript
You will get the results, So hope you will enjoy the video and hope you will learn many new things from the tutorial.
Conclusion
Building a quiz app using HTML CSS and JavaScript is an achievable project for beginners. This tutorial has walked you through the essential steps: designing the HTML structure, styling with CSS, adding interactivity with JavaScript, and testing your app.
Remember that practice makes perfect. As you become more comfortable with these technologies, you can explore additional features and enhancements for your quiz app, such as timers, leaderboards, or multimedia elements. Enjoy the process of creating your own quiz app and have fun experimenting with different questions and designs. Happy coding!
