We are making major changes to this site. Reach us if you are facing any issue by clicking on Report. Report!

How to Create Quiz App Using JavaScript

While creating This Quiz App Using JavaScript is a kind of guessing game. It can boost Students Skills

Fellow readers, welcome to the Tech and Fun Zone! We will use the web development technologies to create a Quiz App Using JavaScript in today's blog post. In particular, we will be making use of pure JavaScript—also referred to as "vanilla" JavaScript to create, display, and verify the quiz's questions and answers.

This tutorial has something for everyone, whether you're an experienced developer looking to improve your skills or a novice eager to learn something new. So grab a beverage of your choice and let's get started!

If you want to try something new in web development and create unique projects, this project will be very helpful. Your skill will be enhanced in every way possible by this project. I hope you find this article Helpful about How to Create Quiz App Using JavaScript.

quiz-app-using-javascript
Table of Contents

What is a Quiz App?

Making projects can help you become a better coder, whether you've been away from it for a while or are just getting started. Your confidence can be boosted even by creating straightforward, fully functional apps. While creating This Quiz App Using JavaScript is a kind of guessing game. It can boost Students Skills. If you are a teacher, you can create this app and upload it on your website and create a Quiz App for your Students.

Features of Quiz App Using JavaScript

  1. This Quiz app has unlimited questions to add.
  2. All questions have 4 option, And out of 4 options one option is correct.
  3. This Quiz App Using Javascript has Objective type interface.
  4. It will give you 10 Seconds to choose the right answer.
  5. At the end of the quiz this will display your total marks (For Example Your score is 8 out of 10).
  6. It has responsive design.

The Project Create Quiz App Using JavaScript which we are going to build in this Article will look like the following:

create-quiz-app-using-javascript

How to Create Quiz App Using JavaScript

I would suggest that You should look at the code and type by comprehending it rather than just copying and pasting it.

The Quiz App Using JavaScript with all of the source code can be simply copied and pasted into your own project from this blog post. Have fun with your research and learning! I hope you are aware of the scope of the project.

Note:
You can use this Quiz App in Blogger, just paste the entire Source Code into a new page section or into new blog and your Quiz App Using JavaScript is ready to rock.

  1. HTML Section

    Utilizing all of the necessary elements and attributes is necessary before we can use HTML to establish the Quiz App Using JavaScript project's structure. This HTML Part will be our first step in creating the Calculator Section. In the future, we will be able to code the CSS to add styling and modify the labels. The HTML code can be found below; paste it where you want to use it by copying it.
  2. <!doctype html>
    <html lang="en">
    
    
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Quiz App Using JavaScript by Tech and Fun Zone -->
    
    <div class="start-screen">
        <button id="start-button">Start</button>
    </div>
    <div id="display-container">
        <div class="header">
            <div class="number-of-count">
                <span class="number-of-question">1 of 3 questions</span>
            </div>
            <div class="timer-div">
                <img src="https://uxwing.com/wp-content/themes/uxwing/download/time-and-date/stopwatch-icon.png"
                    width="20px" />
                <span class="time-left">10s</span>
            </div>
        </div>
        <div id="container">
            <!-- questions and options will be displayed here -->
        </div>
        <button id="next-button">Next</button>
    </div>
    <div class="score-container hide">
        <div id="user-score">Demo Score</div>
        <button id="restart">Restart</button>
    </div>
  3. CSS Section

    Second, we have the styled CSS code for the Quiz App Using JavaScript project's structure. Additionally, the CSS code has been positioned and aligned in such a way that it does not become overloaded with the appropriate CSS elements. Now, let's program the CSS component to be responsive. Simply copy the code and paste it where you want to use it.
  4.   /* Quiz App Using JavaScript by techandfunzone.in */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    body {
      height: 100vh;
      background: linear-gradient(184deg,#8754ff,#8E2DE2);
    }
    .start-screen,
    .score-container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    button {
      border: none;
      outline: none;
      cursor: pointer;
    }
    #start-button,
    #restart {
      font-size: 1.3em;
      padding: 0.5em 1.8em;
      border-radius: 0.2em;
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
    }
    #restart {
      margin-top: 0.9em;
    }
    #display-container {
      background-color: #ffffff;
      padding: 3.1em 1.8em;
      width: 80%;
      max-width: 37.5em;
      margin: 0 auto;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      border-radius: 0.6em;
    }
    .header {
      margin-bottom: 1.8em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.6em;
      border-bottom: 0.1em solid #c0bfd2;
    }
    .timer-div {
      background-color: #e1f5fe;
      width: 7.5em;
      border-radius: 1.8em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.7em 1.8em;
    }
    .question {
      margin-bottom: 1.25em;
      font-weight: 600;
    }
    .option-div {
      font-size: 0.9em;
      width: 100%;
      padding: 1em;
      margin: 0.3em 0;
      text-align: left;
      outline: none;
      background: transparent;
      border: 1px solid #c0bfd2;
      border-radius: 0.3em;
    }
    .option-div:disabled {
      color: #000000;
      cursor: not-allowed;
    }
    #next-button {
      font-size: 1em;
      margin-top: 1.5em;
      background-color: #8754ff;
      color: #ffffff;
      padding: 0.7em 1.8em;
      border-radius: 0.3em;
      float: right;
      box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
    }
    .hide {
      display: none;
    }
    .incorrect {
      background-color: #ffdde0;
      color: #d32f2f;
      border-color: #d32f2f;
    }
    .correct {
      background-color: #e7f6d5;
      color: #689f38;
      border-color: #689f38;
    }
    #user-score {
      font-size: 1.5em;
      color: #ffffff;
    }  
  5. JavaScript Section

    The final and most crucial phase of the project is JavaScript, where we added the logic and coded it in accordance with the Quiz App project's requirements, subject to a few conditions. We have also created functions that store responses and display them when the user gives an answer. Let's look at the Quiz App Using JavaScript's final step.
  6. //References
    let timeLeft = document.querySelector(".time-left");
    let quizContainer = document.getElementById("container");
    let nextBtn = document.getElementById("next-button");
    let countOfQuestion = document.querySelector(".number-of-question");
    let displayContainer = document.getElementById("display-container");
    let scoreContainer = document.querySelector(".score-container");
    let restart = document.getElementById("restart");
    let userScore = document.getElementById("user-score");
    let startScreen = document.querySelector(".start-screen");
    let startButton = document.getElementById("start-button");
    let questionCount;
    let scoreCount = 0;
    let count = 11;
    let countdown;
    
    //Questions and Options array
    
    const quizArray = [
        {
            id: "0",
            question: "What does 'GUI' stand for?",
            options: ["Gateway using Intel", "Good used iPhone", "Global user index", "Graphical user interface"],
            correct: "Graphical user interface",
        },
        {
            id: "1",
            question: "What is software?",
            options: ["Any part of the computer that has a physical structure", "Clothing designed to be worn by computer users", "Instructions that tell the hardware what to do", "Flexible parts of a computer case"],
            correct: "Instructions that tell the hardware what to do",
        },
        {
            id: "2",
            question: "Who invented Computer?",
            options: ["Charles Babbage", "Henry Luce", "Henry Babbage", "Charles Luce"],
            correct: "Charles Babbage",
        },
        {
            id: "3",
            question: "Windows, MacOS, and Linux are examples of ",
            options: ["Web Browsers", "Operating systems", "Softwares", "Web server"],
            correct: "Operating systems",
        },
        {
            id: "4",
            question: "What is Wi-Fi?",
            options: ["A type of wireless network", "A type of sound card", "A type of software that scans for viruses", "An extra-wide computer case used by servers"],
            correct: "A type of wireless network",
        },
        {
            id: "5",
            question: "The computer’s main circuit board is called a:",
            options: ["Hard Drive", "Mother board", "Monitor", "CPU"],
            correct: "Mother board",
        }, {
            id: "6",
            question: "How can you catch a computer virus?",
            options: ["Sending e-mail messages", "Using a laptop during the winter", "Opening e-mail attachments", "Shopping on-line"],
            correct: "Opening e-mail attachments",
        },
        {
            id: "7",
            question: "Google (www.google.com) is a:",
            options: ["Search Engine", "Number in Math", "Directory of images", "Chat service on the web"],
            correct: "Search Engine",
        },
        {
            id: "8",
            question: "Which is not an Internet protocol?",
            options: ["HTTP", "FTP", "STP", "IP"],
            correct: "STP",
        },
        {
            id: "9",
            question: "Which of the following is not a valid domain name?",
            options: ["www.yahoo.com", "www.yahoo.co.uk", "www.com.yahoo", "www.yahoo.co.in"],
            correct: "www.com.yahoo",
        },
    ];
    
    //Restart Quiz
    restart.addEventListener("click", () => {
        initial();
        displayContainer.classList.remove("hide");
        scoreContainer.classList.add("hide");
    });
    
    //Next Button
    nextBtn.addEventListener(
        "click",
        (displayNext = () => {
            //increment questionCount
            questionCount += 1;
            //if last question
            if (questionCount == quizArray.length) {
                //hide question container and display score
                displayContainer.classList.add("hide");
                scoreContainer.classList.remove("hide");
                //user score
                userScore.innerHTML =
                    "Your score is " + scoreCount + " out of " + questionCount;
            } else {
                //display questionCount
                countOfQuestion.innerHTML =
                    questionCount + 1 + " of " + quizArray.length + " Question";
                //display quiz
                quizDisplay(questionCount);
                count = 11;
                clearInterval(countdown);
                timerDisplay();
            }
        })
    );
    
    //Timer
    const timerDisplay = () => {
        countdown = setInterval(() => {
            count--;
            timeLeft.innerHTML = `${count}s`;
            if (count == 0) {
                clearInterval(countdown);
                displayNext();
            }
        }, 1000);
    };
    
    //Display quiz
    const quizDisplay = (questionCount) => {
        let quizCards = document.querySelectorAll(".container-mid");
        //Hide other cards
        quizCards.forEach((card) => {
            card.classList.add("hide");
        });
        //display current question card
        quizCards[questionCount].classList.remove("hide");
    };
    
    //Quiz Creation by techandfunzone
    function quizCreator() {
        //randomly sort questions
        quizArray.sort(() => Math.random() - 0.5);
        //generate quiz
        for (let i of quizArray) {
            //randomly sort options
            i.options.sort(() => Math.random() - 0.5);
            //quiz card creation
            let div = document.createElement("div");
            div.classList.add("container-mid", "hide");
            //question number
            countOfQuestion.innerHTML = 1 + " of " + quizArray.length + " Question";
            //question
            let question_DIV = document.createElement("p");
            question_DIV.classList.add("question");
            question_DIV.innerHTML = i.question;
            div.appendChild(question_DIV);
            //options
            div.innerHTML += `
        <button class="option-div" onclick="checker(this)">${i.options[0]}</button>
         <button class="option-div" onclick="checker(this)">${i.options[1]}</button>
          <button class="option-div" onclick="checker(this)">${i.options[2]}</button>
           <button class="option-div" onclick="checker(this)">${i.options[3]}</button>
        `;
            quizContainer.appendChild(div);
        }
    }
    
    //Checker Function to check if option is correct or not
    function checker(userOption) {
        let userSolution = userOption.innerText;
        let question =
            document.getElementsByClassName("container-mid")[questionCount];
        let options = question.querySelectorAll(".option-div");
    
        //if user clicked answer == correct option stored in object
        if (userSolution === quizArray[questionCount].correct) {
            userOption.classList.add("correct");
            scoreCount++;
        } else {
            userOption.classList.add("incorrect");
            //For marking the correct option
            options.forEach((element) => {
                if (element.innerText == quizArray[questionCount].correct) {
                    element.classList.add("correct");
                }
            });
        }
    
        //clear interval(stop timer)
        clearInterval(countdown);
        //disable all options
        options.forEach((element) => {
            element.disabled = true;
        });
    }
    
    //initial setup
    function initial() {
        quizContainer.innerHTML = "";
        questionCount = 0;
        scoreCount = 0;
        count = 11;
        clearInterval(countdown);
        timerDisplay();
        quizCreator();
        quizDisplay(questionCount);
    }
    
    //when user click on start button
    startButton.addEventListener("click", () => {
        startScreen.classList.add("hide");
        displayContainer.classList.remove("hide");
        initial();
    });
    
    //hide quiz and display start screen
    window.onload = () => {
        startScreen.classList.remove("hide");
        displayContainer.classList.add("hide");
    };
    

That's all there is to it, You have successfully developed the quiz app using javascript and HTML CSS. Please let us know if you'd like to see more projects like this one by leaving a comment down below.

How to Create Quiz App Using JavaScript For Blogger

  1. Go to Blogger Dashboard.
  2. Now Click on Theme Section and Scroll Down & Click on Revert to Classic Themes.
  3. Afetr Click on Revert to Classic Theme, Now Turn off the navbar
  4. Download the Script given below.
  5. Copy the Entire Code and paste it into theme section
  6. Click on Save. That's it! Enjoy your Quiz App

Download Quiz App Source Code For Blogger


Quiz App.zip NA Script 5 KB .Zip

Term's of use !
The templates or Scripts are for a personal use only. How personal can it get? Well, you are very much encouraged to download the template or Script of your choice and use it. But Personal means that you can’t make business out of our templates or Scripts. You are not allowed to sub-license, transfer, resell or republish any of the templates even for free.

Conclusion

Therefore, this is the How to Create Quiz App Using JavaScript tutorial. I hope you will find this script useful. This script will work with All Browser. You can contact us or post a comment in the comment section if you encounter a problem or error.


© Tech & Fun Zone

About the Author

Hi there, this is Arif. I am a Bachelors in computer by qualification who loves to write about blogs, softwares, windows and all it's related topics. I’m the one that writes, publishes, and maintains all the articles you read here.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.