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

No:20307

Vocabulary and Grammar leson. Topic- food
Developer User9012｜Date and time 23/10/9 4:50:15
Build time 17.091 sec｜Game capacity 4.741KB｜

Script

Sure, here's an example of a simple food-related vocabulary and grammar game implemented as a single HTML file using JavaScript:

Food Vocabulary Game

Click on the correct name of the food:

To test the game, you would need to create an "images" folder in the same directory as the HTML file and add the corresponding food images (`emozi_all/game.png`, `emozi_all/banana.png`, `emozi_all/carrot.png`, `emozi_all/pizza.png`, `emozi_all/spaghetti.png`) inside the "images" folder. This game displays a food image and three options. You need to select the correct name of the food by clicking on the corresponding option button. The game will indicate if the selected answer is correct or wrong, and move on to the next food until all the foods have been completed.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple food-related vocabulary and grammar game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>

<head>
    <title>Food Vocabulary Game</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Food Vocabulary Game</h1>
    <img id="foodImage" src="" alt="Food Image" width="200" height="200">
    <br>
    <p id="instruction">Click on the correct name of the food:</p>
    <br>
    <div id="options">
        <button id="option1"></button>
        <button id="option2"></button>
        <button id="option3"></button>
    </div>
    <br>
    <p id="result"></p>

let currentFoodIndex;
        let correctOptionIndex;

// Function to start the game
        function startGame() {
            currentFoodIndex = 0;
            showFoodImage(currentFoodIndex);
            setOptions(currentFoodIndex);
            showResult('');
        }

// Function to display the food image
        function showFoodImage(index) {
            const foodImage = document.getElementById('foodImage');
            foodImage.src = foodVocabulary[index].image;
        }

// Function to set the options for the current food
        function setOptions(index) {
            const options = document.getElementById('options');
            const shuffledOptions = shuffleOptions(index);
            for (let i = 0; i < shuffledOptions.length; i++) {
                const optionButton = document.getElementById(`option${i + 1}`);
                optionButton.textContent = shuffledOptions[i].name;
                optionButton.onclick = function () { checkAnswer(shuffledOptions[i] === foodVocabulary[index]); };
            }
        }

// Function to shuffle the options
        function shuffleOptions(index) {
            const options = [foodVocabulary[index]];
            while (options.length < 3) {
                const randomIndex = Math.floor(Math.random() * foodVocabulary.length);
                if (!options.includes(foodVocabulary[randomIndex])) {
                    options.push(foodVocabulary[randomIndex]);
                }
            }
            correctOptionIndex = options.findIndex(option => option === foodVocabulary[index]);
            return shuffleArray(options);
        }

// Function to shuffle an array
        function shuffleArray(array) {
            return array.sort(() => Math.random() - 0.5);
        }

// Function to check the selected answer
        function checkAnswer(isCorrect) {
            if (isCorrect) {
                showResult("Correct answer! Well done! Choose the next food.");
            } else {
                showResult(`Wrong answer! The correct answer was ${foodVocabulary[currentFoodIndex].name}. Choose the next food.`);
            }
            currentFoodIndex++;
            if (currentFoodIndex < foodVocabulary.length) {
                showFoodImage(currentFoodIndex);
                setOptions(currentFoodIndex);
            } else {
                showResult("Congratulations! You completed all the foods.");
                disableOptions();
            }
        }

// Function to display the result message
        function showResult(message) {
            const result = document.getElementById('result');
            result.textContent = message;
        }

// Function to disable option buttons after completing the game
        function disableOptions() {
            for (let i = 0; i < 3; i++) {
                const optionButton = document.getElementById(`option${i + 1}`);
                optionButton.onclick = null;
            }
        }

// Start the game
        startGame();
    </script>
</body>

</html>
```

To test the game, you would need to create an "images" folder in the same directory as the HTML file and add the corresponding food images (`apple.png`, `banana.png`, `carrot.png`, `pizza.png`, `spaghetti.png`) inside the "images" folder.

This game displays a food image and three options. You need to select the correct name of the food by clicking on the corresponding option button. The game will indicate if the selected answer is correct or wrong, and move on to the next food until all the foods have been completed.