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

No:9679

466

←

Prev Next

→

Perm Rules! Learn by playing quiz games! A total o..ALL
Developer User3589｜Date and time 23/7/26 19:19:33
Build time 36.612 sec｜Game capacity 4.253KB｜

Script

了解です！以下に実装例を示します。

パーミルール！クイズゲームで学ぼう！

この実装例では、5つの問題と選択肢があります。ユーザーが選択した回答が正解かどうかを判定し、次の問題に進む仕組みです。最後の問題を回答するとゲームが終了します。

←

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>

// 問題のカウンター
    var counter = 0;

// クイズの表示
    function showQuiz() {
      var quizContainer = document.getElementById("quiz");
      var currentQuestion = questions[counter];

// 問題文を表示
      var questionText = document.createElement("p");
      questionText.textContent = currentQuestion.question;
      quizContainer.appendChild(questionText);

// 選択肢を表示
      var choices = currentQuestion.choices;
      for (var choice in choices) {
        var label = document.createElement("label");
        var radioButton = document.createElement("input");
        radioButton.type = "radio";
        radioButton.name = "answer";
        radioButton.value = choice;
        label.appendChild(radioButton);
        label.appendChild(document.createTextNode(choices[choice]));
        quizContainer.appendChild(label);
        quizContainer.appendChild(document.createElement("br"));
      }

// 次の問題へのボタンを表示
      var nextButton = document.createElement("button");
      nextButton.textContent = "次の問題へ";
      nextButton.addEventListener("click", function() {
        checkAnswer();
      });
      quizContainer.appendChild(nextButton);
    }

// 回答のチェック
    function checkAnswer() {
      var userAnswer = document.querySelector('input[name="answer"]:checked').value;
      var currentQuestion = questions[counter];
      if (userAnswer === currentQuestion.correctAnswer) {
        alert("正解！次の問題に進みましょう！");
      } else {
        alert("不正解！もう一度考えてみましょう！");
      }

// 次の問題へ進む
      counter++;
      showNextQuestion();
    }

// 次の問題の表示
    function showNextQuestion() {
      var quizContainer = document.getElementById("quiz");
      quizContainer.innerHTML = "";

// ゲーム終了判定
      if (counter === questions.length) {
        var finishMessage = document.createElement("p");
        finishMessage.textContent = "お疲れ様でした！ゲームは終了です！";
        quizContainer.appendChild(finishMessage);
      } else {
        // 次の問題を表示
        showQuiz();
      }
    }

// ゲーム開始
    showNextQuestion();
  </script>
</body>
</html>
```