Create a Quiz App Using JavaScript (Source Code)

Hello and welcome to the Codewithrandom Blog. In this blog, We Create a Quiz App Using JavaScript. In this quiz App, we submit answers and the next question show end of the quiz we can see how many answers we give correctly with the score.

A simple quiz app that verifies the accuracy of the user's response and offers a collection of questions and answers that have been carefully chosen Using dynamic programming, it moves through the questions.

Pre-requisites to build Quiz App
HTML proficiency.
Good knowledge of CSS.
Good JavaScript skills.

Hope You Enjoy Our Blog Let's Start With A Basic Html Structure For the Quiz App.

HTML Code For Quiz App:-

<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question is loading...</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer" />
<label for="a" id="a_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer" />
<label for="b" id="b_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer" />
<label for="c" id="c_text">Answer...</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer" />
<label for="d" id="d_text">Answer...</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>

We will create a container div tag which will be the main container for our quiz app.

Using a div tag with the class "quiz-header" we will now build the framework for our quiz container.
We'll design the main heading for our quiz app using the h2 tag.
Now with the help of an unordered list, we will be creating the list of options in the quiz app.

Inside the unordered list, we will create a different input tag with the type "radio" to select one correct option in the quiz.
Then, using the button tag, we will create a submit button for submitting the last answer.

We have added the basic structure for our Quiz app. Let's take look at our output.

There Is All Html Code For Quiz App. Now You Can See Output Without Css And Javascript. Then We Use Css To Style Our Quiz App And Give Functionality Using Javascript In Quiz App.

CSS Code For Quiz App:-

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
max-width: 95vw;
overflow: hidden;
}
.quiz-header {
padding: 4rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
outline: none;
background-color: #5e3370;
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Step1: We'll start by importing the Poppin typeface from Google Fonts using the import link. We'll use the global selection to set the margin and padding to "zero" and the box-sizing to the border box.

First, we will use the body tag selector to add a grey background using the background property to our quiz app. The font-family attribute is used to set the quiz app's font to "Poppins." The text will now be centred and the height will be 100vh. We'll set the overflow property to "hidden" and set the body's margin to "zero" using the overflow property.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
    box-sizing: border-box;
}

body {
    background-color: #b8c6db;
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
    font-family: "Poppins", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

Step2: To the container for our quiz app, we will now apply to style. The background colour of the quiz app will be set to "white" using the class selector (.quiz-container), and its edges will be given a curved appearance using the border-radius property. We'll use the width attribute to specify the minimum and maximum widths to 600px and 95vw, respectively.

.quiz-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
    width: 600px;
    max-width: 95vw;
    overflow: hidden;
}

.quiz-header {
    padding: 4rem;
}

Step3: Using the element tag selector (h2), we will now add styling to each element. We will set the padding to "1 rem," centre the text using the text-align property, and leave the margin at zero.

The ul tag selection will also be used to set the list style to "none," the padding to "zero," the text's font size to "1.2 rem," and the cursor type to "pointer."The width will be set to 100%, the text-align property will be used to centre the submitted text, and the background colour will be changed to "purple" in order to provide some flair to the submit button.

h2 {
    padding: 1rem;
    text-align: center;
    margin: 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    font-size: 1.2rem;
    margin: 1rem 0;
}

ul li label {
    cursor: pointer;
}

button {
    background-color: #8e44ad;
    color: #fff;
    border: none;
    display: block;
    width: 100%;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 1.3rem;
}

button:hover {
    background-color: #732d91;
}

button:focus {
    outline: none;
    background-color: #5e3370;
}

Now add javascript for questions & answers and Create a Quiz Functionality.

JavaScript Quiz App Code:-

 const quizData = [
{
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.getElementById("quiz");
const answerElements = document.querySelectorAll(".answer");
const questionElement = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitButton = document.getElementById("submit");
let currentQuiz = 0;
let score = 0;
const deselectAnswers = () => {
answerElements.forEach((answer) => (answer.checked = false));
};
const getSelected = () => {
let answer;
answerElements.forEach((answerElement) => {
if (answerElement.checked) answer = answerElement.id;
});
return answer;
};
const loadQuiz = () => {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionElement.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
};
loadQuiz();
submitButton.addEventListener("click", () => {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) score++;
currentQuiz++;
if (currentQuiz < quizData.length) loadQuiz();
else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="history.go(0)">Play Again</button>
` // location.reload() won't work in CodePen for security reasons;
}
}
});

Step1:In order to store the various quiz questions inside our quiz app, we will first build an array variable named "quiz data," after which we will construct some constant variables and use the document. The getelementById () method will be used to select every html element in our quiz app.

const quizData = [{
    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.getElementById("quiz");
const answerElements = document.querySelectorAll(".answer");
const questionElement = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitButton = document.getElementById("submit");

Step2: We'll now create two variables, "current quiz" and "score," with values set to "zero," using the let keyword. Now that the getselected function has been created, we will check to see if the option we have selected matches the answer element using the if statement before returning the result.

The text of our html elements will also be changed, and at the end of the quiz button, our submit button will be changed to a restart button. In a similar manner, we will also create a loadquiz() function. Through this function, we will display the question inside our quiz app using the innerText property.

let currentQuiz = 0;
let score = 0;
const deselectAnswers = () => {
    answerElements.forEach((answer) => (answer.checked = false));
};
const getSelected = () => {
    let answer;
    answerElements.forEach((answerElement) => {
        if (answerElement.checked) answer = answerElement.id;
    });
    return answer;
};
const loadQuiz = () => {
    deselectAnswers();
    const currentQuizData = quizData[currentQuiz];
    questionElement.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
    d_text.innerText = currentQuizData.d;
};
loadQuiz();
submitButton.addEventListener("click", () => {
    const answer = getSelected();
    if (answer) {
        if (answer === quizData[currentQuiz].correct) score++;
        currentQuiz++;
        if (currentQuiz < quizData.length) loadQuiz();
        else {
            quiz.innerHTML = ` <h2>You answered ${score}/${quizData.length} questions correctly</h2> 
                <button onclick="history.go(0)">Play Again</button> `
                // location.reload() won't work in CodePen for security reasons; } } });
        }
    }
});

Hope you like this Quiz App Using HTML, CSS and JavaScript. you can see the output and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

Written by - Code With Random/Anki

Blog

Create a Quiz App Using JavaScript (Source Code)

Codewithrandom Blogs

HTML Code For Quiz App:-

CSS Code For Quiz App:-

JavaScript Quiz App Code:-

Join Our Newsletter. No Spam, Only the good stuff.

Related