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

No:8646

1666

←

Prev Next

→

Language (Grades 1-4, Chinese Humanistic Version o..ALL
Developer User4224｜Date and time 23/7/17 18:12:50
Build time 39.23 sec｜Game capacity 5.181KB｜

Script

以下是一个简单的HTML游戏示例，展示了一些与1至4年级中国人教版古诗词相关的题目。此游戏适用于智能手机操作。

古诗词游戏

这个游戏会依次展示三个问题，并提供四个选项供玩家选择。选择正确答案后，按钮会变成绿色，选择错误答案则会变成红色。最后，游戏会显示玩家的得分并提供再玩一次的选项。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下是一个简单的HTML游戏示例，展示了一些与1至4年级中国人教版古诗词相关的题目。此游戏适用于智能手机操作。

```html
<!DOCTYPE html>
<html>
<head>
  <title>古诗词游戏</title>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 50px;
    }
    
    #question {
      font-size: 20px;
      margin-bottom: 20px;
    }
    
    #choices {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .choice {
      margin: 10px;
    }
    
    #result {
      font-size: 18px;
      margin-top: 20px;
    }
    
    #play-again {
      margin-top: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <h1>古诗词游戏</h1>
  <div id="question"></div>
  <div id="choices"></div>
  <div id="result"></div>
  <button id="play-again">再玩一次</button>

let currentQuestion = 0;
      let score = 0;

function showQuestion() {
        const questionElem = document.getElementById("question");
        const choicesElem = document.getElementById("choices");

questionElem.textContent = questions[currentQuestion].question;
        choicesElem.innerHTML = "";

for (let i = 0; i < questions[currentQuestion].choices.length; i++) {
          const choiceElem = document.createElement("button");
          choiceElem.className = "choice";
          choiceElem.textContent = questions[currentQuestion].choices[i];
          choiceElem.addEventListener("click", handleChoice);
          choicesElem.appendChild(choiceElem);
        }
      }

function handleChoice(event) {
        const selectedChoice = event.target;
        const selectedAnswer = Number(selectedChoice.textContent);

if (selectedAnswer === questions[currentQuestion].correctAnswer) {
          selectedChoice.style.backgroundColor = "green";
          score++;
        } else {
          selectedChoice.style.backgroundColor = "red";
        }

disableChoices();
        showResult();
        showNextButton();
      }

function disableChoices() {
        const choicesElem = document.getElementById("choices");
        const choiceElems = choicesElem.getElementsByClassName("choice");

for (let i = 0; i < choiceElems.length; i++) {
          choiceElems[i].disabled = true;
        }
      }

function showResult() {
        const resultElem = document.getElementById("result");

if (currentQuestion === questions.length - 1) {
          resultElem.textContent = `你的得分是 ${score}/${questions.length}`;
        }
      }

function showNextButton() {
        const nextButton = document.getElementById("play-again");
        nextButton.style.display = "block";
        nextButton.focus();
        nextButton.addEventListener("click", handleNext);
      }

function handleNext() {
        const nextButton = document.getElementById("play-again");

currentQuestion++;

if (currentQuestion === questions.length) {
          nextButton.textContent = "再玩一次";
          nextButton.removeEventListener("click", handleNext);
          nextButton.addEventListener("click", restartGame);
        } else {
          nextButton.style.display = "none";
          showQuestion();
        }

resetChoices();
        resetResult();
      }

function resetChoices() {
        const choicesElem = document.getElementById("choices");
        const choiceElems = choicesElem.getElementsByClassName("choice");

for (let i = 0; i < choiceElems.length; i++) {
          choiceElems[i].disabled = false;
          choiceElems[i].style.backgroundColor = "";
        }
      }

function resetResult() {
        const resultElem = document.getElementById("result");
        resultElem.textContent = "";
      }

function restartGame() {
        currentQuestion = 0;
        score = 0;

const nextButton = document.getElementById("play-again");
        nextButton.textContent = "再玩一次";
        nextButton.removeEventListener("click", restartGame);

showQuestion();
        resetChoices();
        resetResult();
      }

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