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

No:6556

210

←

Prev Next

→

Perm Rules! Learn by playing quiz games! A total o..ALL
Developer User3589｜Date and time 23/7/2 20:02:55
Build time 35.373 sec｜Game capacity 3.532KB｜

Script

了解です。以下に、HTMLとJavaScriptを使用して実装されたクイズゲームを示します。

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

このゲームでは、5つの問題が自動的に表示され、選択肢のいずれかをクリックして回答します。正解すると次の問題が表示され、不正解の場合は再度考えるように促されます。最後の問題を正解すると、ゲーム終了のメッセージが表示されます。ご希望の要件を満たすクイズゲームの実装となっていますが、お使いの環境や制約によっては動作しない場合があります。その場合は適宜修正を行ってください。なお、絵文字はフォントのサポート状況によって表示されない可能性があるため、ここでは使用していません。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解です。以下に、HTMLとJavaScriptを使用して実装されたクイズゲームを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>パーミルール！クイズゲーム</title>
</head>
<body>
  <h1>パーミルール！クイズゲームで学ぼう！</h1>
  <div id="quiz-container"></div>

// 問題の表示
    function showQuestion(questionIndex) {
      const quizContainer = document.getElementById("quiz-container");
      quizContainer.innerHTML = "";

const questionTitle = document.createElement("h2");
      questionTitle.textContent = quizData[questionIndex].question;
      quizContainer.appendChild(questionTitle);

const options = quizData[questionIndex].options;
      for (let i = 0; i < options.length; i++) {
        const option = document.createElement("p");
        option.textContent = options[i];
        option.style.cursor = "pointer";
        option.addEventListener("click", () => {
          checkAnswer(i, questionIndex);
        });
        quizContainer.appendChild(option);
      }
    }

// 回答のチェック
    function checkAnswer(optionIndex, questionIndex) {
      if (optionIndex === quizData[questionIndex].answer) {
        alert("正解です！次の問題に進みます！");
        if (questionIndex < quizData.length - 1) {
          showQuestion(questionIndex + 1);
        } else {
          alert("クイズ終了です！お疲れ様でした！");
        }
      } else {
        alert("不正解です！もう一度考えてみてください！");
      }
    }

// ゲームの開始
    showQuestion(0);
  </script>
</body>
</html>
```

このゲームでは、5つの問題が自動的に表示され、選択肢のいずれかをクリックして回答します。正解すると次の問題が表示され、不正解の場合は再度考えるように促されます。最後の問題を正解すると、ゲーム終了のメッセージが表示されます。

ご希望の要件を満たすクイズゲームの実装となっていますが、お使いの環境や制約によっては動作しない場合があります。その場合は適宜修正を行ってください。なお、絵文字はフォントのサポート状況によって表示されない可能性があるため、ここでは使用していません。