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

No:22499

60

Spanish lesson (bird teacher)
Developer User9819｜Date and time 23/10/22 22:10:08
Build time 75.365 sec｜Game capacity 4.701KB｜

Bird Teacher - Spanish Lesson

Bird Pictogram

This is a simple game called "Bird Teacher - Spanish Lesson" implemented as a single HTML file and containing JavaScript. It utilizes bird pictograms to teach Spanish bird names. When the page loads, the user sees a heading, a start button, an image container (initially empty), and a translation container (hidden). The user can start the lesson by clicking the start button. Once the lesson starts, the first bird pictogram is displayed in the image container. The user can click on the image to reveal the translation of the bird name. After a delay of 1.5 seconds, the next bird pictogram is shown, and after another delay of 3 seconds, its translation is revealed. This continues until all the bird pictograms have been shown. After showing all the birds, the start button is displayed again with the text "Play Again". Clicking it restarts the lesson from the beginning. Please note that you would need to provide your own bird pictogram images (bird.png, eagle.png, hummingbird.png, parrot.png, owl.png, and penguin.png) and update the `imgSrc` values in the `birdPictograms` array accordingly.

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <title>Bird Teacher - Spanish Lesson</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
      }

h1 {
        color: #2c3e50;
        margin-top: 50px;
      }

#image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
      }

#image {
        width: 200px;
        height: 200px;
      }

button {
        background-color: #2ecc71;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-top: 50px;
        cursor: pointer;
        border-radius: 5px;
      }

#translation-container {
        margin-top: 50px;
        display: none;
      }

#translation {
        font-size: 24px;
        color: #34495e;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Bird Teacher - Spanish Lesson</h1>

<div id="image-container">
      <img id="image" src="" alt="Bird Pictogram">
    </div>

<button id="start-button">Start Lesson</button>

<div id="translation-container">
      <p id="translation"></p>
    </div>

<script>
      // Bird pictograms mapping
      const birdPictograms = [
        { name: "bird", imgSrc: "bird.png", translation: "pájaro" },
        { name: "eagle", imgSrc: "eagle.png", translation: "águila" },
        { name: "hummingbird", imgSrc: "hummingbird.png", translation: "colibrí" },
        { name: "parrot", imgSrc: "parrot.png", translation: "loro" },
        { name: "owl", imgSrc: "owl.png", translation: "búho" },
        { name: "penguin", imgSrc: "penguin.png", translation: "pingüino" }
      ];

// Elements
      const startButton = document.getElementById("start-button");
      const image = document.getElementById("image");
      const translationContainer = document.getElementById("translation-container");
      const translation = document.getElementById("translation");

// Game state
      let currentBirdIndex = 0;

// Function to start the lesson
      function startLesson() {
        startButton.style.display = "none";
        translationContainer.style.display = "block";
        showBird();
      }

// Function to show the current bird pictogram
      function showBird() {
        const currentBird = birdPictograms[currentBirdIndex];
        image.src = currentBird.imgSrc;
      }

// Function to show the translation of the current bird
      function showTranslation() {
        const currentBird = birdPictograms[currentBirdIndex];
        translation.textContent = currentBird.translation;
      }

// Function to handle when user clicks the image
      function handleImageClick() {
        showTranslation();

if (currentBirdIndex === birdPictograms.length - 1) {
          image.removeEventListener("click", handleImageClick);
          translationContainer.style.display = "none";
          image.src = "";
          startButton.textContent = "Play Again";
          startButton.style.display = "block";
          currentBirdIndex = 0;
        } else {
          currentBirdIndex++;
          setTimeout(showBird, 1500);
          setTimeout(showTranslation, 3000);
        }
      }

// Event listeners
      startButton.addEventListener("click", startLesson);
      image.addEventListener("click", handleImageClick);
    </script>
  </body>
</html>
```

This is a simple game called "Bird Teacher - Spanish Lesson" implemented as a single HTML file and containing JavaScript. It utilizes bird pictograms to teach Spanish bird names.

When the page loads, the user sees a heading, a start button, an image container (initially empty), and a translation container (hidden). The user can start the lesson by clicking the start button.

Once the lesson starts, the first bird pictogram is displayed in the image container. The user can click on the image to reveal the translation of the bird name. After a delay of 1.5 seconds, the next bird pictogram is shown, and after another delay of 3 seconds, its translation is revealed. This continues until all the bird pictograms have been shown.

After showing all the birds, the start button is displayed again with the text "Play Again". Clicking it restarts the lesson from the beginning.

Please note that you would need to provide your own bird pictogram images (bird.png, eagle.png, hummingbird.png, parrot.png, owl.png, and penguin.png) and update the `imgSrc` values in the `birdPictograms` array accordingly.