How to make stylish quizzes to blogger using HTML, JavaScript, and CSS?

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

Here is a simple example of stylish quiz questions and answers using HTML, CSS, and JavaScript ar3school code below that you can embed in your Blogger post or page. You can customize the questions, options, and styles according to your preferences 


Full code;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylish Quiz</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f4;
      text-align: center;
      padding: 20px;
    }

    #quiz-container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .question {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .options {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .option {
      margin: 10px;
      padding: 10px 20px;
      border: 2px solid #3498db;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .option:hover {
      background-color: #3498db;
      color: #fff;
    }

    #result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="quiz-container">
  <div class="question" id="question"></div>
  <div class="options" id="options"></div>
  <button onclick="checkAnswer()">Submit</button>
  <div id="result"></div>
</div>

<script>
  const quizData = [
    {
      question: "What is the capital of France?",
      options: ["Paris", "Berlin", "London", "Rome"],
      correctAnswer: "Paris"
    },
    {
      question: "Which planet is known as the Red Planet?",
      options: ["Earth", "Mars", "Jupiter", "Venus"],
      correctAnswer: "Mars"
    },
    {
      question: "What is the largest mammal in the world?",
      options: ["Elephant", "Whale Shark", "Blue Whale", "Giraffe"],
      correctAnswer: "Blue Whale"
    }
  ];

  let currentQuestion = 0;
  let score = 0;

  function loadQuestion() {
    const questionElement = document.getElementById("question");
    const optionsElement = document.getElementById("options");
    const currentQuiz = quizData[currentQuestion];

    questionElement.textContent = currentQuiz.question;
    optionsElement.innerHTML = "";

    currentQuiz.options.forEach((option) => {
      const optionElement = document.createElement("div");
      optionElement.classList.add("option");
      optionElement.textContent = option;
      optionElement.onclick = () => selectOption(option);

      optionsElement.appendChild(optionElement);
    });
  }

  function selectOption(selectedOption) {
    const currentQuiz = quizData[currentQuestion];
    const resultElement = document.getElementById("result");

    if (selectedOption === currentQuiz.correctAnswer) {
      score++;
      resultElement.textContent = "Correct!";
    } else {
      resultElement.textContent = `Wrong! The correct answer is ${currentQuiz.correctAnswer}.`;
    }

    currentQuestion++;

    if (currentQuestion < quizData.length) {
      loadQuestion();
    } else {
      resultElement.textContent = `Quiz completed! Your score: ${score}/${quizData.length}`;
      document.getElementById("options").innerHTML = "";
    }
  }

  function checkAnswer() {
    const selectedOption = document.querySelector(".option.selected");

    if (selectedOption) {
      selectOption(selectedOption.textContent);
    } else {
      alert("Please select an option before submitting.");
    }
  }

  loadQuestion();
</script>

</body>
</html>

Copy the above code and embed it into your Blogger post or page in HTML mode. This is a basic example, and you can enhance and customize it further based on your needs.

Demo


Stylish Quiz

Comments :

Post a Comment