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

No:6996

The game of Shotoku Taishi! Five people will ask y..ALL
Developer User3589｜Date and time 23/7/4 22:20:57
Build time 27.347 sec｜Game capacity 3.52KB｜

Script

聖徳太子ゲーム！

5人から同時に質問されるぞ！

プレイヤーはそれぞれの質問を正確に返答しよう！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聖徳太子ゲーム</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 24px;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>聖徳太子ゲーム！</h1>
    <h2>5人から同時に質問されるぞ！</h2>
    <h3>プレイヤーはそれぞれの質問を正確に返答しよう！</h3>

// 正解を用意
      const answers = [
        "574年 - 622年",
        "法隆寺",
        "第四代",
        "厩戸王",
        "大阪府岸和田市"
      ];

// 質問と回答を表示する関数
      function displayQuestions() {
        const questionsDiv = document.getElementById("questions");
        const answersDiv = document.getElementById("answers");

// 質問と回答の数を同じにする
        while (answersDiv.firstChild) {
          answersDiv.firstChild.remove();
        }
        while (questionsDiv.firstChild) {
          questionsDiv.firstChild.remove();
        }

// ランダムな順番で質問を表示
        const shuffledQuestions = shuffleArray(questions);
        for (let i = 0; i < shuffledQuestions.length; i++) {
          const question = shuffledQuestions[i];
          const questionElement = document.createElement("h4");
          questionElement.innerText = question;
          questionsDiv.appendChild(questionElement);

const answerInput = document.createElement("input");
          answerInput.type = "text";
          answerInput.id = "answer" + i;
          answerInput.placeholder = "回答を入力してください";
          answersDiv.appendChild(answerInput);
          
          const submitButton = document.createElement("button");
          submitButton.innerText = "回答を確定";
          submitButton.addEventListener("click", function() {
            checkAnswer(i);
          });
          answersDiv.appendChild(submitButton);
        }
      }

// ランダムな順番で配列を並び替える関数
      function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      }

// 回答をチェックする関数
      function checkAnswer(questionIndex) {
        const answerInput = document.getElementById("answer" + questionIndex);
        const userAnswer = answerInput.value;
        const correctAnswer = answers[questionIndex];
        if (userAnswer === correctAnswer) {
          answerInput.style.backgroundColor = "lightgreen";
          answerInput.disabled = true;
        } else {
          answerInput.style.backgroundColor = "pink";
        }
      }

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