How to create a simple quiz using HTML CSS and JavaScript

How to create a simple quiz using HTML CSS and JavaScript

Creating a quiz generator with answers using HTML, CSS, and JavaScript for a Blogger platform involves several steps. Here's a basic example to get you started. This example creates a simple quiz with three questions and displays the results.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Quiz Generator</title>
  <link rel="stylesheet" href="styles.css">
  <div class="quiz-container">
    <h1>Quiz Time!</h1>
    <div id="quiz"></div>
    <button id="submit">Submit Answers</button>
    <div id="results"></div>

  <script src="quiz.js"></script>


 /* Add your CSS styles here */

.quiz-container {

  max-width: 600px;

  margin: 0 auto;

  text-align: center;


/* Add more styles as needed */


 // Define your quiz questions and answers

const quizData = [


    question: "What language is used for web page structure?",

    answers: {

      a: "HTML",

      b: "CSS",

      c: "JavaScript"


    correctAnswer: "a"



    question: "Which language adds style to a web page?",

    answers: {

      a: "JavaScript",

      b: "HTML",

      c: "CSS"


    correctAnswer: "c"



    question: "Which language adds interactivity to a web page?",

    answers: {

      a: "CSS",

      b: "JavaScript",

      c: "HTML"


    correctAnswer: "b"



const quizContainer = document.getElementById('quiz');

const resultsContainer = document.getElementById('results');

const submitButton = document.getElementById('submit');

// Function to generate quiz

function generateQuiz() {

  const output = [];

  quizData.forEach((questionData, questionIndex) => {

    const answers = [];


    for (const letter in questionData.answers) {



          <input type="radio" name="question${questionIndex}" value="${letter}">

          ${letter}: ${questionData.answers[letter]}





      `<div class="question">${questionData.question}</div>

      <div class="answers">${answers.join('')}</div>`



  quizContainer.innerHTML = output.join('');


// Function to show results

function showResults() {

  const answerContainers = quizContainer.querySelectorAll('.answers');

  let numCorrect = 0;

  quizData.forEach((questionData, questionIndex) => {

    const answerContainer = answerContainers[questionIndex];

    const selector = `input[name=question${questionIndex}]:checked`;

    const userAnswer = (answerContainer.querySelector(selector) || {}).value;

    if (userAnswer === questionData.correctAnswer) {


      answerContainers[questionIndex].style.color = 'green';

    } else {

      answerContainers[questionIndex].style.color = 'red';



  resultsContainer.innerHTML = `${numCorrect} out of ${quizData.length} correct`;



// Generate quiz on page load


// Event listener for submit button

submitButton.addEventListener('click', showResults);

Quiz Generator

Quiz Time!

This code sets up a basic quiz with multiple-choice questions and answers. You can further customize the styling and functionalities according to your needs. To integrate this into your Blogger platform, create a new post/page, switch to the HTML editing mode, and paste the HTML, CSS, and JavaScript code accordingly. Please note that this is a basic example, and you may need to expand or modify it based on your specific requirements for the quiz generator.

see too:

 How to make stylish quizzes with HTML, JavaScript, and CSS?

Comments :

Post a Comment