問題ゲーム

以下が、要望に基づいて作成したアプリのソースコードです。セキュリティ脆弱性を避けるため、evalを使ったり、外部サイトにリダイレクトさせるような処理は行っていません。また、alertも使用していません。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>問題ゲーム</title>
  </head>
  <body>
    <h1>問題ゲーム</h1>
    <p>以下の問題に答えてください。</p>
    <div id="question"></div>
    <div id="choices"></div>
    <button onclick="checkAnswer()">回答する</button>
    <br/>
    <br/>
    <div id="result"></div>

    <script>
      // 問題と答えのデータ
      const data = [
        {
          question: "モンゴルの気候は？",
          choices: ["砂漠気候", "温帯湿潤気候", "地中海性気候", "大陸性気候"],
          answer: "砂漠気候",
        },
        {
          question: "パラオ共和国の気候は？",
          choices: ["アンドス山脈気候", "熱帯モンスーン気候", "熱帯雨林気候", "砂漠気候"],
          answer: "熱帯雨林気候",
        },
        {
          question: "ジャマイカの気候は？",
          choices: ["温帯湿潤気候", "地中海性気候", "砂漠気候", "熱帯モンスーン気候"],
          answer: "温帯湿潤気候",
        },
        {
          question: "コスタリカの気候は？",
          choices: ["熱帯モンスーン気候", "砂漠気候", "熱帯雨林気候", "寒帯夏雨気候"],
          answer: "熱帯雨林気候",
        },
        {
          question: "モロッコの気候は？",
          choices: ["温帯湿潤気候", "乾燥帯気候", "亜熱帯地中海性気候", "熱帯モンスーン気候"],
          answer: "亜熱帯地中海性気候",
        },
        {
          question: "エジプトの気候は？",
          choices: ["地中海性気候", "砂漠気候", "温帯湿潤気候", "熱帯モンスーン気候"],
          answer: "砂漠気候",
        },
        {
          question: "ドイツの気候は？",
          choices: ["温帯湿潤気候", "砂漠気候", "地中海性気候", "熱帯モンスーン気候"],
          answer: "温帯湿潤気候",
        },
        {
          question: "タイの気候は？",
          choices: ["温帯湿潤気候", "砂漠気候", "地中海性気候", "熱帯モンスーン気候"],
          answer: "熱帯モンスーン気候",
        },
        {
          question: "カナダの気候は？",
          choices: ["寒帯気候", "熱帯モンスーン気候", "地中海性気候", "砂漠気候"],
          answer: "寒帯気候",
        },
        {
          question: "インドネシアの気候は？",
          choices: ["寒帯気候", "地中海性気候", "熱帯モンスーン気候", "砂漠気候"],
          answer: "熱帯モンスーン気候",
        },
      ];

      // 現在の問題番号を保持する変数
      let currentQuestionIndex = 0;
      // 答えの数
      const numAnswers = data.length;

      // 初期表示時の問題を表示する
      showQuestion();

      // 次の問題に進む
      function nextQuestion() {
        currentQuestionIndex++;
        // 全ての問題に回答した場合は、結果を表示する
        if (currentQuestionIndex >= numAnswers) {
          showResult();
        } else {
          showQuestion();
        }
      }

      // 結果を表示する
      function showResult() {
        const resultDiv = document.querySelector("#result");
        const numCorrectAnswers = document.querySelectorAll(".correct").length;
        const msg = `あなたの正答数は${numCorrectAnswers} / ${numAnswers}でした！`;
        resultDiv.innerHTML = msg;
      }

      // 問題を表示する
      function showQuestion() {
        // 問題を取得する
        const question = data[currentQuestionIndex].question;
        // 選択肢を取得する
        const choices = data[currentQuestionIndex].choices;
        // HTMLを生成する
        const questionDiv = document.querySelector("#question");
        questionDiv.innerHTML = question;
        const choicesDiv = document.querySelector("#choices");
        let choiceHtml = "";
        for (let i = 0; i < choices.length; i++) {
          choiceHtml += `<input type="radio" name="answer" value="${choices[i]}"> ${choices[i]}<br>`;
        }
        choicesDiv.innerHTML = choiceHtml;
      }

      // 回答をチェックする
      function checkAnswer() {
        const choices = document.getElementsByName("answer");
        let selectedAnswer = "";
        for (let i = 0; i < choices.length; i++) {
          if (choices[i].checked) {
            selectedAnswer = choices[i].value;
            break;
          }
        }
        if (selectedAnswer === "") {
          return;
        }
        if (selectedAnswer === data[currentQuestionIndex].answer) {
          choicesDiv = document.querySelector("#choices");
          choicesDiv.innerHTML += "<span class='correct'>○</span>";
        } else {
          choicesDiv = document.querySelector("#choices");
          choicesDiv.innerHTML += "<span class='incorrect'>×</span>";
        }
        // 次の問題に進む
        setTimeout(nextQuestion, 1000);
      }
    </script>
  </body>
</html>
```

ジョークとして、問題文に「パラオ共和国の気候は？」という問題を入れました。実はパラオ共和国は、南太平洋に位置する熱帯の島国で、常に温暖で多雨な熱帯雨林気候が続いています。しかし、日本でこの国名を聞くと、「パラオでも食えるか！」という有名なCMを思い出す人も多いです。このジョークが、プレイヤーたちに少しでも笑いを提供できるといいですね。