Quiz HTML CSS JavaScript Source Code & Live Demo

In this tutorial I explained how to create simple quiz using HTML CSS JavaScript code for web design lab exercises. Actually quiz (MCQ Multiple Choice Question) is everywhere asked by select the candidates. So here we are creating simple and quality of quiz using HTML and JS web technology programming code.

Also Read – Job Portal Android App

Moreover we are using Radio button concept for display the questions in the quiz HTML CSS JavaScript code. I hope you are easy to understand the code, behind the reason we are simplified the code based on your level. If you have any queries regarding this, feel free contact us for further questions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Quiz</title>
  
</head>
<body>
    <h1>Simple Quiz</h1>
      <p>1. Best Search Engine</p>
         <input type="radio" name="q1" value="paris"> Google
        <input type="radio" name="q1" value="berlin"> Yahoo</li>
        <input type="radio" name="q1" value="madrid"> Bing</li>

      <p>2. Next CM in Tamil Nadu?</p>
     
        <input type="radio" name="q2" value="venus"> Vijay
        <input type="radio" name="q2" value="mars"> Stalin
       <input type="radio" name="q2" value="jupiter"> Annamalai

      <p>3. Powerful Back-end?</p>
      
        <input type="radio" name="q3" value="seoul"> PHP
        <input type="radio" name="q3" value="beijing"> Python
        <input type="radio" name="q3" value="tokyo"> Java

    <br><button onclick="submitQuiz()">Submit Answers</button><br>
    <div id="result"></div>
  

  <script>
    function submitQuiz() {
       answers = {
        q1: document.querySelector('input[name="q1"]:checked').value,
        q2: document.querySelector('input[name="q2"]:checked').value,
        q3: document.querySelector('input[name="q3"]:checked').value,
      };

      let score = 0;

      if (answers.q1 === 'paris') {
        score++;
      }

      if (answers.q2 === 'mars') {
        score++;
      }

      if (answers.q3 === 'tokyo') {
        score++;
      }

       ans = document.getElementById('result');
      ans.textContent = `Your score is ${score} out of 3.`;
    }
  </script>
</body>
</html>

Live Demo – Quiz HTML CSS JavaScript

Hope below images helps to understand the project. On the other hand we are give important for CSS code, because it’s very easy to design the pages. The major concepts, it means functions only important that’s why we are not focused on styling code.

Live Demo – Quiz HTML CSS JavaScript

Leave a Reply Cancel reply