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

No:36465

○×クイズ。AIが数学の問題を出し、◯か✕のボタンで答える。その後正解か不正解か表示し、◯と✕のボタ..ALL
Developer User16795｜Date and time 24/1/17 20:05:04
Build time 12.099 sec｜Game capacity 2.696KB｜

Script

○×クイズ

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
   <title>○×クイズ</title>
   <style>
      #question {
         font-size: 24px;
         margin-bottom: 20px;
      }
      #answer {
         display: flex;
         margin-bottom: 20px;
      }
      #answer button {
         margin-right: 10px;
         font-size: 18px;
         padding: 5px 10px;
      }
      #next {
         display: none;
         font-size: 18px;
         padding: 5px 10px;
      }
   </style>
</head>
<body>
   <h1>○×クイズ</h1>
   <div id="question"></div>
   <div id="answer">
      <button id="true-btn">◯</button>
      <button id="false-btn">×</button>
   </div>
   <button id="next">次へ</button>

const questions = [
         {
            question: "1 + 1 = 2",
            answer: true
         },
         {
            question: "2 + 2 = 4",
            answer: true
         },
         {
            question: "3 + 3 = 6",
            answer: true
         },
         {
            question: "4 + 4 = 8",
            answer: true
         },
         // Add more questions here
      ];

let currentQuestionIndex = 0;

function showQuestion() {
         const currentQuestion = questions[currentQuestionIndex];
         questionElement.textContent = currentQuestion.question;

trueButton.style.display = "inline-block";
         falseButton.style.display = "inline-block";
         nextButton.style.display = "none";
      }

function checkAnswer(answer) {
         const currentQuestion = questions[currentQuestionIndex];

if (answer === currentQuestion.answer) {
            questionElement.textContent = "正解！";
         } else {
            questionElement.textContent = "不正解！";
         }

trueButton.style.display = "none";
         falseButton.style.display = "none";
         nextButton.style.display = "inline-block";
      }

function nextQuestion() {
         currentQuestionIndex++;
         if (currentQuestionIndex === questions.length) {
            currentQuestionIndex = 0;
         }
         showQuestion();
      }

trueButton.addEventListener("click", function() {
         checkAnswer(true);
      });

falseButton.addEventListener("click", function() {
         checkAnswer(false);
      });

nextButton.addEventListener("click", function() {
         nextQuestion();
      });

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