Build Multiple Choice Quiz App With HTML ,CSS and JavaScript
In this blog, we’ll create a Multiple Choice Quiz App Using JavaScript, HTML, and CSS. This will be a straightforward Multiple Choice Quiz 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.
Pre-requisites to build Quiz App
- HTML proficiency.
- Good knowledge of CSS.
- Good JavaScript skills.
50+ HTML, CSS & JavaScript Projects With Source Code
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://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:
Adding the CSS Code
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; }
Restaurant Website Using HTML and CSS
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; }
Step2: Our container will now be styled using the class selector (.widget-wrap). Additionally, we gave our container a border-radius of “20 px,” and we set the backdrop colour to grey.
Gym Website Using HTML and CSS With Source Code
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; }
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.
/* (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:
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)
ADVERTISEMENT
// (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.
ADVERTISEMENT
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.
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
Now we will add setTimeout function after completion of the quiz we will add option to restart the game.
ADVERTISEMENT
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:
Here Below we will we provide you the link to the zip file for downloading the source code of our Webpage.
[su_button id=”download” url=”https://drive.google.com/file/d/1AqBfXYLWv-FsbYGCa-7YgZMxFSSRE8cF/view?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]
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.
What is an online quiz app?
An online quiz provides a forum for the applicant to demonstrate their individuality. They enable many candidates to digitally practise questions.
What are the benefits of creating an online quiz app using JavaScript?
You may make a quiz application that is incredibly interactive and captivating by using JavaScript while making an online quiz. The quiz experience can be improved for users by using JavaScript, a potent language that can be used to add dynamic information and interactivity to web sites.