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 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.
Lets us look at how the final application will look like:
Prerequisites:
Project Structure:
--index.html --style.css --script.js
Example: Write the following code in respective files.
- index.html: This file contains the structure of the project
- style.css: This file contains the styling of application
- script.js: This file contains the logics to load questions and scoring methods
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 { font-size: 30px; margin-bottom: 20px;}.options { font-size: 20px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 10px; margin-bottom: 20px; position: fixed; top: 40%; left: 40%;}button { margin-right: 75px; margin-top: 8%; font-size: 20px; padding: 10px 20px; background-color: #4f98c2; color: white; border: none; cursor: pointer;}#score { font-size: 30px; color: darkslategray;} |
Javascript
// Questions that will be askedconst Questions = [{ q: "What is capital of India?", a: [{ text: "Gandhinagar", isCorrect: false }, { text: "Surat", isCorrect: false }, { text: "Delhi", isCorrect: true }, { text: "Mumbai", isCorrect: false } ]},{ q: "What is the capital of Thailand?", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "Phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ]},{ q: "What is the capital of Gujarat", a: [{ text: "Surat", isCorrect: false }, { text: "Vadodara", isCorrect: false }, { text: "Gandhinagar", isCorrect: true }, { text: "Rajkot", isCorrect: false } ]}]let currQuestion = 0let score = 0function loadQues() { const question = document.getElementById("ques") const opt = document.getElementById("opt") question.textContent = Questions[currQuestion].q; opt.innerHTML = "" for (let i = 0; i < Questions[currQuestion].a.length; i++) { const choicesdiv = document.createElement("div"); const choice = document.createElement("input"); const choiceLabel = document.createElement("label"); choice.type = "radio"; choice.name = "answer"; choice.value = i; choiceLabel.textContent = Questions[currQuestion].a[i].text; choicesdiv.appendChild(choice); choicesdiv.appendChild(choiceLabel); opt.appendChild(choicesdiv); }}loadQues();function loadScore() { const totalScore = document.getElementById("score") totalScore.textContent = `You scored ${score} out of ${Questions.length}`}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 = parseInt(document.querySelector('input[name="answer"]:checked').value); if (Questions[currQuestion].a[selectedAns].isCorrect) { score++; console.log("Correct") nextQuestion(); } else { nextQuestion(); }} |
Output:
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.
