My pokemom quiz consisted of 3 parts, the html, the javascript, and the css Much like the pokemon game, the html file was the outline of the quiz and basically was the blueprint that made this quiz. This html code called the javascript code and essentially was the brains of the operation to code the logic of the quiz and how it would all work. Finally, the css part of the code. The html calls this file to make the page/quiz look good. So, it calls this css file to design the quiz and make it visualling appealing to the veiwers.

First up, the html code. This code is just the outline of the website and calls the main files that will be coding this prokect.

<html>

<head>
    <link rel="stylesheet" type="text/css" href="QuizStyle.css">
</head>

<body>
    <div class="quiz-container">
        <h1>Test Your Pokemon Knowledge</h1>
        <p id="question"></p>
        <div id="options"></div>
        <button id="next-button" disabled>Next</button>
        <p id="result"></p>
    </div>
    <script src="Qscript.js"></script>
</body>

</html>

For the javascript part of the quiz, it essentially organizes the quiz and displays a multiple choice quiz based on pokemon. It loads questions and options, allowing the user to select an answer by clicking on a button. After answering, it checks the response, updates the score, and disables further interactions with the options. The user can then proceed to the next question, and the final score is displayed when all questions have been answered.

const questions = [
  {
      question: "What is the first Pokémon ever created?",
      options: ["Bulbasaur", "Charmander", "Pikachu", "Rhydon"],
      answer: "Rhydon",
  },
  {
      question: "Which type is strong against Water-type Pokémon?",
      options: ["Fire", "Electric", "Grass", "Psychic"],
      answer: "Grass",
  },
  {
      question: "What device do trainers use to access a database of all their Pokemon?",
      options: ["Pokélist", "Pokédex", "Pokémon Training Chart", "Poké-Catalog"],
      answer: "Pokédex",
  },
  {
      question: "As of October 2023, how many Pokémon generations are there?",
      options: ["6","7","9","13"],
      answer: "9",
  },
  {
      question: "Who gave Ash Ketchum his first Pokémon?",
      options: ["Professor Oak", "Nurse Joy", "Professor X", "Mr. Fox"],
      answer: "Professor Oak",
  },
  {
      question: "Who does Pikachu evolve into?",
      options: ["Pichu", "Chuchu", "Pekuchi","Raichu"],
      answer: "Raichu",
  },
  {
      question: "What is the first Pokémon the Pokédex? (Not first created)",
      options: ["Bulbasaur", "Pikachu", "Charizard", "Squirtle"],
      answer: "Bulbasaur",
  },
  {
      question: "How do you make a ditto return to its normal form?",
      options: ["Make it cry", "Give it food", "Beat it in a battle", "Make it laugh"],
      answer: "Make it laugh",
  },
  {
      question: "What Pokemon was Ash's first catch?",
      options: ["Pikachu","Squirtle","Caterpie","Magicarp"],
      answer: "Caterpie",
  },
  {
      question: "Which of these Pokémon is a fairy type",
      options: ["Jigglypuff", "Diglett", "Eevee", "Snorlax"],
      answer: "Jigglypuff",
  },
  // Add more questions
];

let currentQuestionIndex = 0;
let score = 0;

const questionElement = document.getElementById("question");
const optionsList = document.getElementById("options");
const resultElement = document.getElementById("result");
const nextButton = document.getElementById("next-button");

function loadQuestion() {
  const question = questions[currentQuestionIndex];
  questionElement.textContent = question.question;

  optionsList.innerHTML = "";
  question.options.forEach((option, index) => {
      const optionButton = document.createElement("button");
      optionButton.textContent = option;
      optionButton.classList.add("option");
      optionButton.addEventListener("click", () => checkAnswer(option));
      optionsList.appendChild(optionButton);
  });
}

function checkAnswer(selectedOption) {
  const question = questions[currentQuestionIndex];
  if (selectedOption === question.answer) {
      score++;
  }
  optionsList.querySelectorAll(".option").forEach((option) => {
      option.disabled = true;
  });
  resultElement.textContent = `Your score: ${score} / ${currentQuestionIndex + 1}`;
  nextButton.disabled = false;
}

function nextQuestion() {
  if (currentQuestionIndex < questions.length - 1) {
      currentQuestionIndex++;
      loadQuestion();
      resultElement.textContent = "";
      nextButton.disabled = true;
      optionsList.querySelectorAll(".option").forEach((option) => {
          option.disabled = false;
      });
  } else {
      resultElement.textContent = `Quiz completed. Your final score: ${score} / ${questions.length}`;
  }
}

nextButton.addEventListener("click", nextQuestion);
loadQuestion();

Finnally, the css part of the quiz. It sets the overall body style with a specific font and background color. The quiz container is styled to have a centered, light background, rounded corners, and a subtle shadow. The heading is colored in orange, and the list of options is formatted with padding and margins. Buttons are styled with an orange background, white text, rounded edges, and a hover effect. Disabled buttons have a gray background and a disabled cursor. The “result” element is styled to be bold.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;
}

.quiz-container {
    background-color: #ffffff42;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

h1 {
    color: #ffbb00;
}

#options-list {
    list-style: none;
    padding: 0;
}

#options-list li {
    margin: 5px;
}

button {
    background-color: #ffbb00;
    color: #fff;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

button:hover {
    background-color: #fc7100;
}

#result {
    font-weight: bold;
}