Developing an MCQ Quiz App Using HTML, CSS, and JavaScript is one of the best ways to get into coding by working on a coding project that involves web app development.

MCQ Quiz App Using HTML, CSS and JavaScript (Free Source Code)

Byjvcodes

Developing an MCQ Quiz App Using HTML, CSS, and JavaScript is one of the best ways to get into coding by working on a coding project that involves web app development.

No matter how new to or experienced with programming you are, working on this app can assist you in enhancing your knowledge as well as produce something helpful.

Here in this article, I will give you the free source code of the MCQ Quiz App so that you can create it easily.

GitHub Source: MCQ Quiz App Using HTML

Features

Here are some main features of the provided MCQ Quiz App source code:

  • Easy to Customize: You can change questions, options, or style due to the fact that the code is written cleanly.
  • Timer Used: A timer is created within the quiz to increase learner engagement and turn the quiz into an event that occurs during a certain length of time.
  • Result Display: Once the quiz is over users are able to see their scores as soon as they are out.
  • Compatibility: This app has responsiveness on various devices which makes the movement and functioning excellent across devices.
  • Attractive Design: The simplistic design of the current layout makes it easy to use for the users.
  • Clean Code: The code is clean, and well-documented, we can easily use in projects.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build MCQ Quiz App

Follow these steps to create your MCQ Quiz App effortlessly:

  • Create Project Folder: The first step is to make a new folder to which all project related files should be saved.
  • Create index.html: Create an index.html for the structure of the app.
  • Create style.css: Design the style for your app and create a style.css file to contain this style.
  • Create script.js: Include the functionality that we are going to implement in a script.js file to manage the quiz.
  • Copy & Paste the Code: Make a copy of the following code and place it to the respective files.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
  <!-- Developed by JV Codes | www.jvcodes.com -->
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MCQ Quiz App</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"/>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
  <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="timer-icon.svg" width="30px" height="30px" />
          <span class="time-left">15s</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>
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the quiz app module:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #adadad;
}
.start-screen,
.score-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;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 6px 20px #424242;
  
}
button {
  border: none;
  outline: none;
  cursor: pointer;
}
#start-button,
#restart {
  font-size: 1.3em;
  padding: 0.5em 1.8em;
  border-radius: 0.2em;
  background-color: #0a69ed;
  color: #ffffff;
}
#restart {
  margin-top: 0.9em;
  align-self: center;
}
#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;
  box-shadow: 3px 6px 20px #424242;
}
.header {
  margin-bottom: 1.8em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6em;
  border-bottom: 0.15em solid #9b3e00;
}
.timer-div {
  background-color: #beeaff;
  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: #0a69ed;
  color: #ffffff;
  font-size: 1.3em;
  padding: 0.5em 1.8em;
  border-radius: 0.2em;
  display: block; /* Ensures the button behaves like a block-level element */
  margin-left: auto; /* Pushes the button to the center */
  margin-right: auto; /* Pushes the button to the center */
}
.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: #000000;
}

JavaScript

Here is the complete code for script.js file to function the MCQ app:

//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 = 16;
let countdown;

//Questions and Options array

const quizArray = [
  {
    id: "0",
    question: "What does SSD stand for in modern computing?",
    options: ["Solid State Drive", "System Software Drive", "Storage Software Device", "Secure State Disk"],
    correct: "Solid State Drive",
  },
  {
    id: "1",
    question: "Which company manufactures the M1 chip for its devices?",
    options: ["Intel", "AMD", "Apple", "Qualcomm"],
    correct: "Apple",
  },
  {
    id: "2",
    question: "What is the primary purpose of a GPU in a computer?",
    options: ["Data storage", "Graphics rendering", "Sound processing", "Power supply"],
    correct: "Graphics rendering",
  },
  {
    id: "3",
    question: "Which of these is an open-source operating system?",
    options: ["Windows", "Linux", "macOS", "iOS"],
    correct: "Linux",
  },
  {
    id: "4",
    question: "What is the most common type of port for connecting peripherals to computers?",
    options: ["Ethernet", "USB", "HDMI", "VGA"],
    correct: "USB",
  },
  {
    id: "5",
    question: "What does 'cloud computing' primarily refer to?",
    options: [
      "Using remote servers for data storage and processing",
      "Weather forecasting with computers",
      "Storing data in local hard drives",
      "Wireless networking",
    ],
    correct: "Using remote servers for data storage and processing",
  },
  {
    id: "6",
    question: "What is the function of a heat sink in a computer?",
    options: ["Generate power", "Cool down components", "Process data", "Store information"],
    correct: "Cool down components",
  },
  {
    id: "7",
    question: "Which of these is a popular modern programming language for web development?",
    options: ["C", "Fortran", "Python", "Pascal"],
    correct: "Python",
  },
  {
    id: "8",
    question: "What is the main benefit of using an NVMe SSD over a SATA SSD?",
    options: [
      "Lower cost",
      "Increased durability",
      "Faster data transfer speeds",
      "Smaller physical size",
    ],
    correct: "Faster data transfer speeds",
  },
  {
    id: "9",
    question: "Which of the following is a commonly used virtualization software?",
    options: ["Oracle VM VirtualBox", "Microsoft Excel", "Adobe Photoshop", "CorelDRAW"],
    correct: "Oracle VM VirtualBox",
  },
];

//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 = 16;
      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
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 = 16;
  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");
};

Download Source Code

The full source codes for the MCQ Quiz App Using HTML, CSS, and JavaScript can be accessed from the button below. This code is open source that means it does not contain any copyright protection.

Download Source Code

Conclusion

The MCQ Quiz App Using HTML, CSS and JavaScript is an excellent project to include in your website or portfolio. JV Source Codes allows you to utilize this code for your projects if you provide attribution to JV Source Codes and a link back to our website.

For any problems you encounter, you should also leave a feedback. Oh, by the way, don’t forget to subscribe to the channel for more tutorials and other useful materials.

Download JV Source Codes

Similar Posts

A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents.
| |

Responsive Sales Tax Calculator Using HTML, CSS and JavaScript (Free Source Code)

A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents. If you have to include it as a component of a blog post, as a sidebar widget, or as part of a YouTube tutorial, then this…

In this post, I will give a free source code for developing an AI Chatbot Using HTML, CSS, and JavaScript, which can be easily drawn into a project.
| | |

Responsive Ai Chatbot Using HTML, CSS and JavaScript (Free Source Code)

Artificial intelligence chatbots have become a necessity in the current websites as they assist users, give immediate response, produce conversational interactions or even make the website interactive. Developing an AI chatbot might look very complicated, but with HTML, CSS, and JavaScript, you can develop one easily. That is why, in this post, I will give…

Image Clip Animation Slider
| | |

Image Clip Animation Slider in HTML and CSS

Do you have a desire to expand the opportunities of a stylish and dynamic website image slider? Look no further! In this article, we will discuss the Image Clip Animation Slider, using HTML & CSS. This image slider offers the audiences a clipping animation effect to enhance the look of your desired images. Check out…

Image Comparison Slider
| | |

Image Comparison Slider in HTML, CSS and JavaScript

Do you want to implement a feature on your website that will enable someone to compare two images simultaneously? Look no further! So in this article, I will share with you Free Source Codes of an Image Comparison Slider in HTML, CSS, JavaScript. Here, I found that this slider is good for using the ‘before…

Color Picker Tool
| |

Color Picker Tool in HTML, CSS and JavaScript (Free Source Code)

The Color Picker Tool in HTML, CSS, JavaScript is a basic and effective effective component that enables users to choose colors and receive the matching Hexadecimal (HEX), RGB, RGBA, and HSL values. For a web designer, it is important to use a good color picker. In this article, I am going to give you the…

Leave a Reply

Your email address will not be published. Required fields are marked *