You are currently viewing Build a Quiz App With HTML ,CSS and JavaScript

Build a Quiz App With HTML ,CSS and JavaScript

Build a Quiz App With HTML ,CSS and JavaScript

Quiz App With HTML ,CSS and JavaScript
Quiz App With HTML ,CSS and JavaScript

 

In this blog, we’ll use JavaScript, HTML, and CSS to create a Quiz App. This will be a straightforward Quiz App where you must choose one of the available answers to each of the multiple-choice questions. Finally, we’ll display the results page. JavaScript, a robust language that makes everything possible, will complete all of this job.

All types of learners and developers may easily understand the language thanks to the syntax’s elegance, and amazing technological advancements are made.

Quiz App With HTML ,CSS and JavaScript
Quiz App With HTML ,CSS and JavaScript

Pre-requisites to build Quiz App

  • HTML proficiency.
  • Good knowledge about CSS.
  • Good JavaScript skills.

Creating HTML Markup

The website’s layout was created using HTML. To build our quiz app, we’ll use markup languages to create a base structure.

We’ll now look at the HTML code.

<!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" />
    <title>Quiz App</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="widget-wrap">
        <h1>SIMPLE JS QUIZ</h1>

        <!-- (A) QUIZ CONTAINER -->
        <div id="quizWrap"></div>

        <div id="code-boxx">
            Visit
            <a href="https://www.codewithrandom.com/2022/09/28/quiz-app-timer-with-javascript/" target="_blank">
                Code With Random
            </a> for more details.
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

We will create a wrapper div tag which will be the main container.

Create Password Generator Using Javascript (Source Code)

  • We’ll design the main heading for our quiz app using the <h1> tag.
  • Using a div tag with the id “quizWrap,” we will now build the framework for our quiz container.
  • Additionally, we’ll make another div tag with the id “code-box” that will contain our website  link to other  different HTML, CSS, and JavaScript project.

We have added the basic structure for our notes taking app . Let’s take look at our output.

Output:

quiz app using html css and javascript
Quiz App Using Html Code Preview

 

Adding the CSS Code

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.

/* (A) WRAPPER */
#quizWrap {
  max-width: 600px;
  margin: 0 auto;
  /* RECOMMENDED FIXED HEIGHT IF YOU HAVE CONTENT BELOW THE QUIZ */
  /* SO THAT PAGE LAYOUT DOES NOT "JUMP" */
  /* height: 250px; */
}

/* (B) QUESTION */
#quizQn {
  padding: 20px;
  background: #4c93ba;
  color: #fff;
  font-size: 24px;
  border-radius: 10px;
}

/* (C) ANSWERS */
#quizAns {
  margin: 10px 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}
#quizAns input[type=radio] { display: none; }
#quizAns label {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
#quizAns label.correct {
  background: #d8ffc4;
  border: 1px solid #60a03f;
}
#quizAns label.wrong {
  background: #ffe8e8;
  border: 1px solid #c78181;
}

/* (X) DOES NOT MATTER - COSMETICS */
/* PAGE & BODY */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0ODAwMTA1MQ&ixlib=rb-1.2.1&q=85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

/* WIDGET */
.widget-wrap {
  width: 600px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 30px;
}
#code-boxx a {
  display: inline-block;
  border: 0;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}

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.

50+ Html ,Css & Javascript Projects With Source Code

Step1: Select all elements using the universal selector and setting up the auto margin and auto padding on the web page.

The display for our body is set to “flex” using the body tag, and the items will be placed in the “centre” using the align-item attribute. We also gave our bodies a minimum height of “100vh.” We utilised a gradient image to add a background to our body and to the quiz background.

/* PAGE & BODY */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0ODAwMTA1MQ&ixlib=rb-1.2.1&q=85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}
quiz app using html css and javascript
Quiz App Using Html Css Code Preview

 

Step2: Our container will now be styled using the class selector (.widget-wrap). Its padding was set to 30 px, and its width was set to 600 px. Additionally, we gave our container a border-radius of “20 px,” and we set the backdrop colour to grey.

Our footer will now be styled, and the follow link will be added there. We will apply a top margin of “30px” and adjust the font-weight of the element to “600” using the id identifier (#code-boxx). Our anchor tag will now be styled using the child selector. With a “red” background and a “white” font, the display is configured for inline block.

/* WIDGET */
.widget-wrap {
  width: 600px;
  padding: 30px; 
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 30px;
}
#code-boxx a {
  display: inline-block;
  border: 0;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}

Quiz App Using Html Css Code Preview
Quiz App Using Html Css Code Preview

 

Step3: We will style our quiz container first. We will set the maximum width of our quiz app using the maximum-width attribute; anything beyond that cannot be changed. Our quiz app’s margin is also set by us. The margin is zero for the top and bottom margins and “auto” for the left and right side margins.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

/* (A) WRAPPER */
#quizWrap {
  max-width: 600px;
  margin: 0 auto;
  /* RECOMMENDED FIXED HEIGHT IF YOU HAVE CONTENT BELOW THE QUIZ */
  /* SO THAT PAGE LAYOUT DOES NOT "JUMP" */
  /* height: 250px; */
}

Step4: Now we’ll add some style and make use of javascript concepts. We all add some styles to our question using the id (#quizQn). We set the padding of “20px” and the background is set to “Byzantine Blue” and the colour of our font is set to white. The size of our font is “24px.”

Similarly, we will use the id selector (#quizAns) to add styling to the appropriate response. The display is set to “grid,” there will be a “10px” margin added to the top and bottom, and there is a “10px” space between them.

/* (B) QUESTION */
#quizQn {
  padding: 20px;
  background: #4c93ba;
  color: #fff;
  font-size: 24px;
  border-radius: 10px;
}

/* (C) ANSWERS */
#quizAns {
  margin: 10px 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}
#quizAns input[type=radio] { display: none; }
#quizAns label {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
#quizAns label.correct {
  background: #d8ffc4;
  border: 1px solid #60a03f;
}
#quizAns label.wrong {
  background: #ffe8e8;
  border: 1px solid #c78181;
}

We have added almost all styling to our quiz app now using javascript we will add the question and option using our javascript concepts.But first let’s take a look at our final output .

Output:

quiz app using html css and javascript
Quiz App Using Html Css Code Preview

Adding Data to JavaScript File

We will first add all of the questions and answers to the Javascript file under the JS section. The quiz variable has been utilised to store the questions and responses in this instance. This information has been kept in an array.
We have create a second array to contain our options .

var quiz = {
  // (A) PROPERTIES
  // (A1) QUESTIONS & ANSWERS
  // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
  data: [
    {
      q: "What is the standard distance between the target and archer in Olympics?",
      o: ["50 meters", "70 meters", "100 meters", "120 meters"],
      a: 1, // arrays start with 0, so answer is 70 meters
    },
    {
      q: "Which is the highest number on a standard roulette wheel?",
      o: ["22", "24", "32", "36"],
      a: 3,
    },
    {
      q: "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
      o: ["400 pounds", "550 pounds", "700 pounds", "750 pounds"],
      a: 2,
    },
    {
      q: "Which is the seventh planet from the sun?",
      o: ["Uranus", "Earth", "Pluto", "Mars"],
      a: 0,
    },
    {
      q: "Which is the largest ocean on Earth?",
      o: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
      a: 3,
    },
  ],

 

Using the init () function we will initiate the quiz in our  HTML . Now inside this function first of all we will select our quiz wrapper using the document.getElementById selector . Now we will create a section for our question in which  using the document.createElement we will select the div element and inside it using the append method we will append the question inside.

Portfolio Website using HTML and CSS (Source Code)

// (A2) HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper

// (A3) GAME FLAGS
now: 0, // current question
score: 0, // current score

// (B) INIT QUIZ HTML
init: () => {
  // (B1) WRAPPER
  quiz.hWrap = document.getElementById("quizWrap");

  // (B2) QUESTIONS SECTION
  quiz.hQn = document.createElement("div");
  quiz.hQn.id = "quizQn";
  quiz.hWrap.appendChild(quiz.hQn);

  // (B3) ANSWERS SECTION
  quiz.hAns = document.createElement("div");
  quiz.hAns.id = "quizAns";
  quiz.hWrap.appendChild(quiz.hAns);

  // (B4) GO!
  quiz.draw();
},

Now we will create a function called draw inside which using the for loop we will add the radio button for the option in our question using the append method we will append the answer . Now we will create a variable called label inside it we will add an EventListener click as the user click on any option it will append the answer to the label.

Now we will add functionality to selected options inside it we will create a for in which if the option is selected the using the remove.eventListener it will detach of the selected option.We will also check if the selected option is correct or not for that we will be using the if and else statement it the option is correct  it will increase the score by one else it will show wrong answer.

Now we will add setTimeout function after completion of the quiz we will add option to restart the game.

 select: (option) => {
    // (D1) DETACH ALL ONCLICK
    let all = quiz.hAns.getElementsByTagName("label");
    for (let label of all) {
      label.removeEventListener("click", quiz.select);
    }

    // (D2) CHECK IF CORRECT
    let correct = option.dataset.idx == quiz.data[quiz.now].a;
    if (correct) {
      quiz.score++;
      option.classList.add("correct");
    } else {
      option.classList.add("wrong");
    }

    // (D3) NEXT QUESTION OR END GAME
    quiz.now++;
    setTimeout(() => {
      if (quiz.now < quiz.data.length) {
        quiz.draw();
      } else {
        quiz.hQn.innerHTML = `You have answered ${quiz.score} of ${quiz.data.length} correctly.`;
        quiz.hAns.innerHTML = "";
      }
    }, 1000);
  },

  // (E) RESTART QUIZ
  reset: () => {
    quiz.now = 0;
    quiz.score = 0;
    quiz.draw();
  },
};
window.addEventListener("load", quiz.init);

The project is now finished, we have completed Quiz app using HMTL ,CSS and Javascript. Now look at the live preview &  final output.

Output:

quiz app using html css and javascript
quiz app using html css and javascript

 

Here Below we will we provide you the link to the zip file for downloading the source code of our Webpage.

Codepen Preview Of Quiz App Using HTML,CSS and JavaScript


Now We have Successfully created our Quiz App using  HTML, CSS & Javascript. You can use this project directly by copying into your  IDE. We hope you understood the project, If you have any doubts feel free to comment!!

We have also created quiz app with timers which helps users to be time-bound. if you are interested you can check out the below link.

Quiz App With Timer In Javascript 

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Codepen  : @Code
Code By: @CodeBox

Leave a Reply