Emoji Guessing Game

Let's guess the name of the emoji!
Choose the right answer from three options.
以下が、要望に応じて作成したHTMLファイルです。セキュリティ脆弱性があるコードは含まれておらず、alertも使わず、10問の終了後に正解数が表示されます。また、ゲーム中に面白いジョークを表示するようにしました。

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Emoji Guessing Game</title>
  </head>
  <body>
    <h1>Emoji Guessing Game</h1>
    <p>Let's guess the name of the emoji!</p>
    <p>Choose the right answer from three options.</p>
    <form>
      <p>
        <label>
          <input type="radio" name="answer" value="1" />
          <span id="option1"></span>
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="answer" value="2" />
          <span id="option2"></span>
        </label>
      </p>
      <p>
        <label>
          <input type="radio" name="answer" value="3" />
          <span id="option3"></span>
        </label>
      </p>
      <p>
        <button type="button" id="nextButton">Next</button>
      </p>
    </form>
    <p id="joke"></p>
    <p id="result"></p>
    <script>
      // emoji database
      const emojis = [
        { emoji: "🐶", name: "いぬ" },
        { emoji: "🐱", name: "ねこ" },
        { emoji: "🐷", name: "ぶた" },
        { emoji: "🐥", name: "ひよこ" },
        { emoji: "🦄", name: "ユニコーン" },
        { emoji: "🐘", name: "ぞう" },
        { emoji: "🦔", name: "はりねずみ" },
        { emoji: "🦁", name: "らいおん" },
        { emoji: "🐬", name: "いるか" },
        { emoji: "🐝", name: "はち" },
      ];

      // shuffle function
      function shuffle(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]];
        }
        return array;
      }

      // pick random emoji
      let emojisCopy = [...emojis];
      let currentIndex = 0;
      let answerCount = 0;
      let correctCount = 0;
      const emojiImg = document.createElement("span");
      const options = document.querySelectorAll("span[id^=option]");
      const jokeEl = document.getElementById("joke");
      const resultEl = document.getElementById("result");

      function getNextEmoji() {
        if (answerCount === 10) {
          document.querySelector("form").style.display = "none";
          resultEl.textContent = `Correct answers: ${correctCount}/10`;
          return;
        }

        shuffle(emojisCopy);
        const currentEmoji = emojisCopy.pop();
        if (!currentEmoji) return;
        currentIndex = emojis.findIndex((emoji) => emoji.emoji === currentEmoji.emoji);
        answerCount++;
        // set image
        emojiImg.textContent = currentEmoji.emoji;
        // set options
        const answerIndex = Math.floor(Math.random() * 3) + 1;
        options.forEach((option, index) => {
          const name = index === answerIndex - 1 ? currentEmoji.name : emojisCopy[index].name;
          option.textContent = name.split("").join("　");
        });
        // set joke
        jokeEl.textContent = "Why did the programmer quit his job? He didn't get arrays.";
      }

      // initialize
      getNextEmoji();

      // add event listener
      const nextButton = document.getElementById("nextButton");
      nextButton.addEventListener("click", () => {
        const selectedRadio = document.querySelector('input[name="answer"]:checked');
        if (!selectedRadio) return;
        const selectedAnswer = selectedRadio.value;
        if (selectedAnswer === String(options.findIndex((option) => option.textContent.replace(/\　/g, "") === emojis[currentIndex].name) + 1)) {
          correctCount++;
          jokeEl.textContent = "Why did the tomato turn red? Because it saw the salad dressing!";
        } else {
          jokeEl.textContent = "Why don't scientists trust atoms? Because they make up everything!";
        }
        selectedRadio.checked = false;
        getNextEmoji();
      });
    </script>
  </body>
</html>
```