CSS
<style>
div.backpage {
  max-width: 680px;
  height: auto;
  margin: 0 auto;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 200px;
  background-color: lightblue;
}

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

button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
}

#planets-score-card-container,
#insects-score-card-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#planets-score-card,
#insects-score-card {
  color: #333;
  margin-bottom: 10px;
  margin-left: 20px;
}

#planets-score-card,
#insects-score-card {
  color: black;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 5px;
}

button[type="submit"],
button.try-again-btn {
  border: 1px solid black;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
  color: black;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.button-container {
  text-align: center;
  margin-top: 10px;
}

button.try-again-btn {
  background-color: lightgreen;
}

button[type="submit"] {
  background-color: lightblue;
}

.answerInput {
  display: block;
  margin-top: 10px;
  margin-bottom: 42px;
}

.image-style {
  border: 1px solid black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  max-height: 100px;
  max-width: 150px;
}

.question p {
  margin: 0 0 12px 0;
  padding: 0;
}

p.testinstructions {
	font-size: 0.8rem;
}

		  
HTML
<div class="backpage">

<div id="planets-test">
<form id="planets-quiz-form">
<h3 class="aligncenter">Name the Planets</h3>  
<p class="testinstructions">
This test asks you to name the planet, given the number planet it is from the sun and an image of the planet. Case doesn't matter but you must spell the planet's name correctly to get credit. Answer all questions. When you are finished, hit the Submit button and your score will be shown. If you wish to take the test again, hit the Try Again button.
</p>
<div id="planets-quiz-content"></div>
<div class="button-container">
<button type="submit">Submit</button>
<button type="button" class="try-again-btn" data-quiz-form="planets-quiz-form" data-quiz-content="planets-quiz-content" data-score-card-container="planets-score-card-container" data-score-card="planets-score-card">Try Again</button>
</div>
</form>
<div id="planets-score-card-container">
<div id="planets-score-card"></div>
</div>
</div> 

<div class="spacer12"></div>

<div id="insects-test">
<form id="insects-quiz-form">
<h3 class="aligncenter">Name the Insects</h3>
<p class="testinstructions">
This test asks you give the common name the for butterflies based on an image of the butterfly. Case doesn't matter but you must spell the name correctly to get credit. Answer all questions. When you are finished, hit the Submit button and your score will be shown. If you wish to take the test again, hit the Try Again button.
</p>
<div id="insects-quiz-content"></div>			
<div class="button-container">
<button type="submit">Submit</button>
<button type="button" class="try-again-btn" data-quiz-form="insects-quiz-form" data-quiz-content="insects-quiz-content" data-score-card-container="insects-score-card-container" data-score-card="insects-score-card">Try Again</button>
</div>			
</form>
<div id="insects-score-card-container">
<div id="insects-score-card"></div>
</div>
</div>
</div> 




Javascript
<script>
// Quiz data for planets
const planetsQuizData = [
  {
    question: "Which planet is third from our Sun?",
    image: "images/earth.jpg", // Replace with actual image URLs
    answer: "Earth",
  },
  {
    question: "Which planet is fifth from our Sun?",
    image: "images/jupiter.jpg", // Replace with actual image URLs
    answer: "Jupiter",
  },
  {
    question: "Which planet is sixth from our Sun?",
    image: "images/saturn.jpg", // Replace with actual image URLs
    answer: "Saturn",
  },
  // Add more planet questions and answers here
];

// Quiz data for insects
const insectsQuizData = [
  {
    question: "What is the common name of this butterfly?",
    image: "images/monarch.jpg",
    answer: "Monarch",
  },
  {
    question: "What is the common name of this butterfly?",
    image: "images/ruddydaggerwing.jpg",
    answer: "Ruddy Daggerwing",
  },
  {
    question: "What is the common name of this butterfly?",
    image: "images/zebralongwing.jpg",
    answer: "Zebra Longwing",
	
  },
  // Add more insect questions and answers here
];


// Fisher-Yates shuffle function
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// Modify the generateQuiz function to include question validation
function generateQuiz(quizData, quizFormId, quizContentId, scoreCardContainerId, scoreCardId) {
  const quizForm = document.getElementById(quizFormId);
  const quizContent = document.getElementById(quizContentId);
  const scoreCardContainer = document.getElementById(scoreCardContainerId);
  const scoreCard = document.getElementById(scoreCardId);
  let quizSubmitted = false; // Flag to track quiz submission

  // Clear existing content
  quizContent.innerHTML = "";
  scoreCard.innerHTML = "";
  scoreCardContainer.style.display = "none";

  // Shuffle the quiz data to randomize questions
  shuffleArray(quizData);

  const incorrectAnswers = []; // Array to store incorrect answers and their correct answers

  quizData.forEach((questionData, index) => {
    const questionElement = document.createElement("div");
    questionElement.classList.add("question");

    const questionText = document.createElement("p");
    questionText.textContent = `${index + 1}. ${questionData.question}`;
    questionElement.appendChild(questionText);

    if (questionData.image) {
      const imageContainer = document.createElement("div");
      const imageElement = document.createElement("img");
      imageElement.src = questionData.image;
      imageElement.alt = `Image for Question ${index + 1}`;
      imageElement.classList.add("image-style");
      imageContainer.appendChild(imageElement);
      questionElement.appendChild(imageContainer);
    }

    const answerInput = document.createElement("input");
    answerInput.type = "text";
    answerInput.name = `${quizFormId}-q${index + 1}`;
    answerInput.classList.add("answerInput");
    answerInput.setAttribute("autocomplete", "off"); // Disable autocomplete
    questionElement.appendChild(answerInput);

    quizContent.appendChild(questionElement);
  });

  quizForm.addEventListener("submit", function (e) {
    e.preventDefault();

    if (quizSubmitted) {
      return; // Don't process the form again if already submitted
    }

    // Check if all questions have been answered
    const answerInputs = quizForm.querySelectorAll("input[type='text']");
    for (const input of answerInputs) {
      if (input.value.trim() === "") {
        alert("Please answer all questions before submitting.");
        return;
      }
    }

    const userAnswers = [];
    let score = 0;

    quizData.forEach((questionData, index) => {
      const userAnswer = document.querySelector(`input[name=${quizFormId}-q${index + 1}]`).value.trim();

      if (userAnswer.toLowerCase() === questionData.answer.toLowerCase()) {
        score++;
      } else {
        // Store incorrect answers and their correct answers
        incorrectAnswers.push({
          question: questionData.question,
          userAnswer: userAnswer,
          correctAnswer: questionData.answer,
        });
      }
    });

    const totalQuestions = quizData.length;
    const resultPercentage = ((score / totalQuestions) * 100).toFixed(2);
    const resultMessage = `You scored ${score} out of ${totalQuestions}. (${resultPercentage}%)`;

    const scoreCardSection = document.createElement("div");
    const h2Element = document.createElement("h2");
    h2Element.textContent = "Results:";
    const pElement = document.createElement("p");
    pElement.textContent = resultMessage;

    scoreCardSection.appendChild(h2Element);
    scoreCardSection.appendChild(pElement);

    scoreCard.innerHTML = "";
    scoreCard.appendChild(scoreCardSection);
    scoreCardContainer.style.display = "block";

    // Display incorrect answers if there are any
    if (incorrectAnswers.length > 0) {
      const incorrectAnswersSection = document.createElement("div");
      incorrectAnswersSection.innerHTML = "
Incorrect Answers:
";

      incorrectAnswers.forEach((incorrectAnswer, index) => {
        const incorrectAnswerElement = document.createElement("p");
        incorrectAnswerElement.innerHTML = `${index + 1}. ${incorrectAnswer.question}
Your Answer: ${incorrectAnswer.userAnswer}
Correct Answer: ${incorrectAnswer.correctAnswer}`;
        incorrectAnswersSection.appendChild(incorrectAnswerElement);
      });

      scoreCard.appendChild(incorrectAnswersSection);
    }

    // Disable input fields and submit button after submission
    answerInputs.forEach((input) => (input.disabled = true));

    const submitButton = quizForm.querySelector("button[type='submit']");
    submitButton.disabled = true;

    quizSubmitted = true; // Set the flag to true
  });
}

// Reset the quiz and clear input fields
function resetQuiz(quizFormId, scoreCardContainerId) {
  const quizForm = document.getElementById(quizFormId);
  const scoreCardContainer = document.getElementById(scoreCardContainerId);

  // Clear input fields
  const answerInputs = quizForm.querySelectorAll("input[type='text']");
  answerInputs.forEach((input) => (input.value = ""));

  // Enable input fields and submit button
  answerInputs.forEach((input) => (input.disabled = false));
  const submitButton = quizForm.querySelector("button[type='submit']");
  submitButton.disabled = false;

  // Hide the score card
  scoreCardContainer.style.display = "none";
}

// Generate the planets quiz when the page loads
generateQuiz(
  planetsQuizData,
  "planets-quiz-form",
  "planets-quiz-content",
  "planets-score-card-container",
  "planets-score-card"
);

// Generate the insects quiz when the page loads
generateQuiz(
  insectsQuizData,
  "insects-quiz-form",
  "insects-quiz-content",
  "insects-score-card-container",
  "insects-score-card"
);

// Event listener for "Try Again" buttons
const tryAgainButtons = document.querySelectorAll(".try-again-btn");
tryAgainButtons.forEach((button) => {
  button.addEventListener("click", function () {
    const quizFormId = button.getAttribute("data-quiz-form");
    const scoreCardContainerId = button.getAttribute("data-score-card-container");

    // Reset and regenerate the specific quiz
    resetQuiz(quizFormId, scoreCardContainerId);
    if (quizFormId === "planets-quiz-form") {
      generateQuiz(
        planetsQuizData,
        quizFormId,
        "planets-quiz-content",
        scoreCardContainerId,
        "planets-score-card"
      );
    } else if (quizFormId === "insects-quiz-form") {
      generateQuiz(
        insectsQuizData,
        quizFormId,
        "insects-quiz-content",
        scoreCardContainerId,
        "insects-score-card"
      );
    }
  });
});

<script>