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

No:17956

100

←

Prev Next

→

LEARNING WITH PIBBY
Developer User4616｜Date and time 23/9/25 9:22:15
Build time 38.729 sec｜Game capacity 3.938KB｜

Script

Learning with Pibby

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Learning with Pibby</title>
  <style>
    body {
      background-color: #f0f0f0;
      text-align: center;
      margin-top: 100px;
    }
    
    #gameTitle {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    #startButton {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    
    #gameArea {
      display: none;
    }
    
    #pibbyImage {
      width: 100%;
      max-width: 300px;
      margin-bottom: 20px;
    }
    
    #question {
      font-size: 18px;
      margin-bottom: 20px;
    }
    
    .option {
      display: inline-block;
      padding: 10px 20px;
      margin-right: 10px;
      font-size: 16px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    
    #score {
      font-size: 18px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <h1 id="gameTitle">Learning with Pibby</h1>
  
  <button id="startButton">Start Game</button>
  
  <div id="gameArea">
    <img src="pibby.png" id="pibbyImage">
    <h2 id="question"></h2>
    <div>
      <button class="option"></button>
      <button class="option"></button>
      <button class="option"></button>
      <button class="option"></button>
    </div>
    <h3 id="score">Score: 0</h3>
  </div>
  
  <script>
    // Game variables
    var score = 0;
    var questionIndex = 0;
    
    // Questions and answers
    var questions = [
      {
        question: "What is the symbol for addition?",
        options: ["🔺", "🔵", "➕", "🟥"],
        answer: "➕"
      },
      {
        question: "What is the symbol for multiplication?",
        options: ["🔺", "🌕", "✖️", "🟡"],
        answer: "✖️"
      },
      {
        question: "What is the symbol for division?",
        options: ["➗", "🔵", "🌑", "🔺"],
        answer: "➗"
      },
      {
        question: "What is the symbol for subtraction?",
        options: ["🔵", "📉", "➖", "🌓"],
        answer: "➖"
      }
    ];
    
    // Get required elements
    var startButton = document.getElementById("startButton");
    var gameArea = document.getElementById("gameArea");
    var questionElement = document.getElementById("question");
    var optionButtons = document.getElementsByClassName("option");
    var scoreElement = document.getElementById("score");
    
    // Start the game
    startButton.addEventListener("click", function() {
      startGame();
    });
    
    // Function to start the game
    function startGame() {
      score = 0;
      questionIndex = 0;
      scoreElement.innerText = "Score: " + score;
      gameArea.style.display = "block";
      startButton.style.display = "none";
      showQuestion();
    }
    
    // Function to display the current question
    function showQuestion() {
      var currentQuestion = questions[questionIndex];
      questionElement.innerText = currentQuestion.question;
      
      for (var i = 0; i < optionButtons.length; i++) {
        optionButtons[i].innerText = currentQuestion.options[i];
        optionButtons[i].addEventListener("click", checkAnswer);
      }
    }
    
    // Function to check user's answer
    function checkAnswer(event) {
      var selectedOption = event.target.innerText;
      var currentQuestion = questions[questionIndex];
      
      if (selectedOption === currentQuestion.answer) {
        score++;
      }
      
      questionIndex++;
      
      if (questionIndex < questions.length) {
        showQuestion();
      } else {
        endGame();
      }
      
      scoreElement.innerText = "Score: " + score;
    }
    
    // Function to end the game
    function endGame() {
      gameArea.style.display = "none";
      startButton.style.display = "block";
      startButton.innerText = "Play Again";
    }
  </script>
</body>
</html>