Create a Single Page Application using HTML CSS & JavaScript

Create a Quiz Application Using JavaScript

Last Updated : 22 Jul, 2024

In this article, we will learn how to create a quiz application using JavaScript. The quiz application will contain questions followed by a total score shown at the end of the quiz. The score will increase based on the correct answers given. Initially, there are only three questions but you can increase the questions in the JavaScript file.

We will create the structure using HTML and design it with CSS. JavaScript will be used to implement the logic and scoring of the quiz.

Preview:

Prerequisites:

Approach:

Create a project workspace with three different files for HTML, CSS and JavaScript. In the HTML file, the structure of the quiz application will be defined using different HTML tags like div, paragraph, heading, buttons, etc.
The second file will be for CSS, In which the HTML elements will be grabbed using their IDs and Classes and styled accordingly with the help of CSS properties.
Now, the final file will be created for JavaScript. In this file, the whole logic of our quiz application will be defined by grabbing the elements with the help of DOM.
Next, an API will be called using the fetch method with some callback functions to manage the fetched data into different states like loading, failed, and success.
The button element will be grabbed and click event will be added to it, so that it loads the next quetion on the user screen once user clicks it.

Example: The below example will illustrate you the code structure of the whole project:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
    content="IE=edge">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="panel">
        <h1>Quiz Application Using JavaScript</h1>
        <div class="question" id="ques"></div>
        <div class="options" id="opt"></div>
        <button onclick="checkAns()" id="btn">SUBMIT</button>
        <div id="score"></div>
        <script src="script.js"></script>
    </div>

</body>

</html>

CSS

body {
    background-color: aliceblue;
}

.panel {
    margin-top: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: navy;
}

.question {
    text-align: center;
    font-size: 30px;
    width: 50%;
    margin-bottom: 20px;
}

.options {
    font-size: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

button {
    margin-right: 75px;
    margin-top: 8%;
    font-size: 20px;
    padding: 10px 20px;
    background-color: #4f98c2;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    color: #4f98c2;
    background-color: white;
    border: 1 px solid #4f98c2;
}

#score {
    font-size: 30px;
    color: darkslategray;
}

JavaScript

let Questions = [];
const ques = document.getElementById("ques")

async function fetchQuestions() {
    try {
        const response = await
         fetch('https://opentdb.com/api.php?amount=10');
        if (!response.ok) {
            throw new Error(`Something went wrong!!
        Unable to fecth the data`);
        }
        const data = await response.json();
        Questions = data.results;
    }
    catch (error) {
        console.log(error);
        ques.innerHTML = `<h5 style='color: red'>
        ${error}</h5>`;
    }
}
fetchQuestions();

let currQuestion = 0
let score = 0

if (Questions.length === 0) {
    ques.innerHTML = `<h5>Please Wait!! 
    Loading Questions...</h5>`
}

function loadQues() {
    const opt = document.getElementById("opt");
    let currentQuestion = Questions[currQuestion].question;
    if (currentQuestion.indexOf('&quot;') > -1) {
        currentQuestion = currentQuestion
            .replace(/&quot;/g, '\"');
    }
    if (currentQuestion.indexOf(''') > -1) {
        currentQuestion = currentQuestion
            .replace(/'/g, '\'');
    }
    ques.innerText = currentQuestion;
    opt.innerHTML = ""
    const correctAnswer = Questions[currQuestion]
        .correct_answer;
    console.log(Questions);
    const incorrectAnswers = Questions[currQuestion]
        .incorrect_answers;
    const options = [correctAnswer, ...incorrectAnswers];
    options.sort(() => Math.random() - 0.5);
    options.forEach((option) => {
        if (option.indexOf('&quot;') > -1) {
            option = option.replace(/&quot;/g, '\"');
        }
        if (option.indexOf(''') > -1) {
            option = option.replace(/'/g, '\'');
        }
        const choicesdiv = document.createElement("div");
        const choice = document.createElement("input");
        const choiceLabel = document.createElement("label");
        choice.type = "radio";
        choice.name = "answer";
        choice.value = option;
        choiceLabel.textContent = option;
        choicesdiv.appendChild(choice);
        choicesdiv.appendChild(choiceLabel);
        opt.appendChild(choicesdiv);
    });
}

setTimeout(() => {
    loadQues();
    if (Questions.length === 0) {
        ques.innerHTML = `<h5 style='color: red'>Unable 
        to fetch data, Please try again!!</h5>`
    }
}, 2000)


function loadScore() {
    const totalScore = document.getElementById("score");
    totalScore.textContent = `You scored ${score} out 
    of ${Questions.length}`;
    totalScore.innerHTML += "<h3>All Answers</h3>"
    Questions.forEach((el, index) => {
        totalScore.innerHTML += `<p>${index + 1}.
         ${el.correct_answer}</p>`
    })
}


function nextQuestion() {
    if (currQuestion < Questions.length - 1) {
        currQuestion++;
        loadQues();
    } else {
        document.getElementById("opt").remove()
        document.getElementById("ques").remove()
        document.getElementById("btn").remove()
        loadScore();
    }
}

function checkAns() {
    const selectedAns = document.
        querySelector('input[name="answer"]:checked').value;

    if (selectedAns === Questions[currQuestion].correct_answer) {
        score++;
        nextQuestion();
    } else {
        nextQuestion();
    }
}

Output:

Note: This was the simple Quiz web App using JavaScript, you can surely take it to the next level by implementing it with your real API, Question shuffles, setting points for the questions, setting the counter, etc.

Create a Single Page Application using HTML CSS & JavaScript

J

jymnjogiya

News

Improve

Article Tags :

Similar Reads

Create a Quiz Application Using JavaScript

In this article, we will learn how to create a quiz application using JavaScript. The quiz application will contain questions followed by a total score shown at the end of the quiz. The score will increase based on the correct answers given. Initially, there are only three questions but you can incr

Create a Single Page Application using HTML CSS & JavaScript

In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in

Quiz App in JavaScript using ChatGPT

AI is one of the most overhyped techs right now in the market. It is said that it will soon replace Software Engineers in creating complex software applications. In this article, we will test ChatGPT to create a Quiz application by giving ChatGPT the prompts and will see if it can actually make this

Create a Bingo Game Using JavaScript

Bingo is a fun and popular game that relies on luck and strategy. In this tutorial, we'll show you how to make a simple Bingo game using JavaScript. Whether you're a beginner or just looking for a fun project, this guide will walk you through the process step by step. Prerequisites:HTMLCSSJavaScript

Movie Search Application using JavaScript

In this article, we are going to make a movie search application using JavaScript. It will use an API which is a RESTful web service to obtain movie information. We will be using HTML to structure our project, CSS for designing purposes and JavaScript will be used to provide the required functionali

Create a Timeline using JavaScript

In this article, we will cover how to create a timeline using HTML CSS, and JavaScript. A Timeline is the visual representation of events along with the time they happened. On completion, the JavaSctript timeline will look like this: Prerequisites:The prerequisites knowledge required for this projec

How to Create a Desktop App Using JavaScript?

Building a JavaScript desktop application is possible using various frameworks and technologies. One popular approach is to use Electron, which is an open-source framework developed by GitHub. Electron allows you to build cross-platform desktop applications using web technologies such as HTML, CSS,

Design a Student Grade Calculator using JavaScript

A Student Grade Calculator is a tool used to compute students' grades based on their scores in various assessments, such as assignments, quizzes, exams, or projects. It helps standardize grading, ensures accuracy, and provides students with a clear understanding of their academic performance. Formul

Create a Quiz App with Timer using HTML CSS and JavaScript

In this tutorial, we'll create a simple yet engaging quiz application using HTML, CSS, and JavaScript. The app includes a countdown timer to challenge users, tracks scores dynamically, and allows users to restart the quiz for continuous learning and fun. What Weâ€™re Going to CreateDynamic Quiz Questi

Building a Dice Game using JavaScript

We will be building a Dice Game Project using HTML, CSS, and JavaScript. The Dice Game is based on a two-player. Both players roll the dice and the player who gets the highest phase value will win the game. Images of Dice Phases: The list of dice phases images are given below. Save all the images in