Click here for free DL of the app version that can save data.

No:40597

←

Prev Next

→

国旗クイズ
Developer User18209｜Date and time 24/2/3 19:09:04
Build time 10.441 sec｜Game capacity 2.456KB｜

Script

了解。以下に国旗クイズの実装例を示します。

国旗クイズ

このコードでは、5つの国とそれぞれの国旗を配列として定義します。クイズの問題数や正解数を管理する変数を初期化し、`showQuestion()`関数を呼び出して最初の問題を表示します。回答するボタンを押すと`checkAnswer()`関数が呼び出され、回答が正解かどうかを判定します。現在の問題番号を更新し、まだ問題が残っていれば次の問題を表示し、問題がすべて終了したら`showResult()`関数を呼び出して結果を表示します。このように実装することで、1枚のHTMLファイルに国旗クイズを実装し、JavaScriptを使用して処理を実行することができます。スマートフォンでもプレイできるようにしています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

了解。以下に国旗クイズの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>国旗クイズ</title>
</head>
<body>
  <h1>国旗クイズ</h1>
  <div id="quiz-container"></div>
  <button onclick="checkAnswer()">回答する</button>
  <div id="result"></div>

let currentQuestion = 0;
    let score = 0;

function showQuestion() {
      const quizContainer = document.getElementById("quiz-container");
      quizContainer.innerHTML = `
        <p>${flags[currentQuestion].flag}</p>
        <label for="answer">上記の国の名前は？</label>
        <input type="text" id="answer">
      `;
    }

function checkAnswer() {
      const answerInput = document.getElementById("answer");
      const userAnswer = answerInput.value;
      const correctAnswer = flags[currentQuestion].country;

if (userAnswer === correctAnswer) {
        score++;
      }

currentQuestion++;

if (currentQuestion < flags.length) {
        showQuestion();
      } else {
        showResult();
      }
    }

function showResult() {
      const resultContainer = document.getElementById("result");
      resultContainer.innerHTML = `
        <h3>クイズ結果</h3>
        <p>正解数: ${score} / ${flags.length}</p>
      `;
    }

showQuestion();
  </script>
</body>
</html>
```

このように実装することで、1枚のHTMLファイルに国旗クイズを実装し、JavaScriptを使用して処理を実行することができます。スマートフォンでもプレイできるようにしています。