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

No:13706

126

←

Prev Next

→

もかちゃんのクイズゲーム🐥
Developer おまめちゃん｜Date and time 23/8/29 14:30:00
Build time 26.473 sec｜Game capacity 3.878KB｜

Script

了解です！以下にもかちゃんのクイズゲームの実装例を示します。

もかちゃんのクイズゲーム🐥

問題が表示されます

選択肢を選んでください

この実装例では、もかちゃんのクイズゲームをスマホで遊ぶことを想定しています。クイズの問題が表示され、選択肢から正解を選ぶと正解・不正解の結果が表示されます。次の問題へ進むこともできます。全ての問題が終了すると、最終的な正答数が表示されます。このように、HTMLとJavaScriptを組み合わせることで、もかちゃんのクイズゲームを実装することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です！以下にもかちゃんのクイズゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>もかちゃんのクイズゲーム</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }
    .quiz-container {
      width: 300px;
      text-align: center;
    }
    h1 {
      font-size: 20px;
      margin-bottom: 20px;
    }
    p {
      margin-bottom: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1>もかちゃんのクイズゲーム🐥</h1>
    <p id="question">問題が表示されます</p>
    <p>選択肢を選んでください</p>
    <div id="choices">
      <button onclick="checkAnswer(0)">選択肢1</button>
      <button onclick="checkAnswer(1)">選択肢2</button>
      <button onclick="checkAnswer(2)">選択肢3</button>
    </div>
    <p id="result"></p>
    <button id="next-button" style="display: none;" onclick="nextQuestion()">次の問題へ</button>
  </div>

let currentQuestion = 0;
    let score = 0;

function showQuestion() {
      const questionElement = document.getElementById("question");
      const choicesElement = document.getElementById("choices");
      const resultElement = document.getElementById("result");
      const nextButton = document.getElementById("next-button");

questionElement.textContent = questions[currentQuestion].question;

choicesElement.innerHTML = "";
      for (let i = 0; i < questions[currentQuestion].choices.length; i++) {
        const button = document.createElement("button");
        button.textContent = questions[currentQuestion].choices[i];
        button.setAttribute("onclick", `checkAnswer(${i})`);
        choicesElement.appendChild(button);
      }

resultElement.textContent = "";
      nextButton.style.display = "none";
    }

function checkAnswer(choice) {
      const resultElement = document.getElementById("result");
      const nextButton = document.getElementById("next-button");

if (choice === questions[currentQuestion].correctAnswer) {
        resultElement.textContent = "正解！✨";
        score++;
      } else {
        resultElement.textContent = "不正解！💦";
      }

nextButton.style.display = "block";
    }

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

この実装例では、もかちゃんのクイズゲームをスマホで遊ぶことを想定しています。クイズの問題が表示され、選択肢から正解を選ぶと正解・不正解の結果が表示されます。次の問題へ進むこともできます。全ての問題が終了すると、最終的な正答数が表示されます。

このように、HTMLとJavaScriptを組み合わせることで、もかちゃんのクイズゲームを実装することができます。