<div class="quiz-container">
  <div class="question">
    <p>Question 1: What is the capital of France?</p>
    <div class="options">
      <label>
        <input type="radio" name="q1" value="Paris"> Paris
      </label>
      <label>
        <input type="radio" name="q1" value="Berlin"> Berlin
      </label>
      <label>
        <input type="radio" name="q1" value="Madrid"> Madrid
      </label>
      <label>
        <input type="radio" name="q1" value="Rome"> Rome
      </label>
    </div>
  </div>
  <div class="question">
    <p>Question 2: Which planet is known as the Red Planet?</p>
    <div class="options">
      <label>
        <input type="radio" name="q2" value="Mars"> Mars
      </label>
      <label>
        <input type="radio" name="q2" value="Jupiter"> Jupiter
      </label>
      <label>
        <input type="radio" name="q2" value="Venus"> Venus
      </label>
      <label>
        <input type="radio" name="q2" value="Mercury"> Mercury
      </label>
    </div>
  </div>
  <div class="question">
    <p>Question 3: Which gas do plants use for photosynthesis?</p>
    <div class="options">
      <label>
        <input type="radio" name="q3" value="Oxygen"> Oxygen
      </label>
      <label>
        <input type="radio" name="q3" value="Carbon Dioxide"> Carbon Dioxide
      </label>
      <label>
        <input type="radio" name="q3" value="Hydrogen"> Hydrogen
      </label>
      <label>
        <input type="radio" name="q3" value="Nitrogen"> Nitrogen
      </label>
    </div>
  </div>
  <button id="submit">Submit</button>
</div>

body {
    font-family: Arial, sans-serif;
  }
  .quiz-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .question {
    margin-bottom: 10px;
  }
  .options {
    display: flex;
    flex-direction: column;
  }
  label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  input[type="radio"] {
    margin-right: 5px;
  }
  #submit {
    margin-top: 10px;
  }
  .correct {
    color: green;
    font-weight: bold;
  }
  .incorrect {
    color: red;
    font-weight: bold;
  }

const correctAnswers = ["Paris", "Mars", "Carbon Dioxide"];
  const submitButton = document.getElementById("submit");

  submitButton.addEventListener("click", () => {
    const selectedAnswers = [];
    const radioGroups = document.querySelectorAll('input[type="radio"]:checked');
    
    radioGroups.forEach(radio => {
      selectedAnswers.push(radio.value);
    });
    
    let correctCount = 0;
    const result = [];
    for (let i = 0; i < correctAnswers.length; i++) {
      const questionElement = document.querySelector(`[name="q${i + 1}"]`);
      result.push(`Question ${i + 1}: ${selectedAnswers[i]} (${selectedAnswers[i] === correctAnswers[i] ? 'Correct' : 'Incorrect'}, Correct Answer: ${correctAnswers[i]})`);
      if (selectedAnswers[i] === correctAnswers[i]) {
        correctCount++;
        questionElement.parentNode.classList.add('correct');
      } else {
        questionElement.parentNode.classList.add('incorrect');
      }
    }
    
    alert(`You got ${correctCount} out of ${correctAnswers.length} correct!\n\n${result.join("\n")}`);
    
    submitButton.disabled = true; // Disable submit after submission
  });