<div id="scoreContainer" style="text-align: center;">
<h1><font color="#FF2800">学</font><font color="#FF5000">历</font><font color="#FF7800">值</font>:<span id="currentScore">0</span></h1>
</div>
<div id="questionContainer">
<p><font color="#FF0094">请</font><font color="#FF1380">根</font><font color="#FF006C">据</font><font color="#FF1359">下</font><font color="#FF0045">图</font><font color="#FF1331">题</font><font color="#FF001E">目</font><font color="#FF130A">给</font><font color="#FF0000">出</font><font color="#FF1313">正</font><font color="#FF0000">确</font><font color="#FF1313">答</font><font color="#FF0000">案</font>:</p>
<div id="imageContainer" style="display: center;">
<img id="questionImage" src="" alt="">
</div>
<input type="text" id="userAnswer" placeholder="请输入内容">
<button id="submitAnswer">提交</button>
<p id="result"></p>
</div>
<audio id="correctSound">
<source src="+2.mp3" type="audio/mpeg">
</audio>
<audio id="wrongSound">
<source src="-1.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript">
var images = [
  { 'image': '1.jpg', 'answer': 'aaa' },
  { 'image': '2.jpg', 'answer': 'bbb' },
  { 'image': '3.jpg', 'answer': '333' },
  { 'image': '4.jpg', 'answer': '444' },
  { 'image': '5.jpg', 'answer': '555' },
  { 'image': '6.jpg', 'answer': '666' },
  { 'image': '7.jpg', 'answer': '777' },
  // ... 添加剩余的图片和答案...
];
var score = 0;
var currentIndex = 0;
var hasShownCongratulation = false;

function showQuestion() {
  var imageUrl = images[currentIndex].image;
  document.getElementById("questionImage").src = imageUrl;
}

function checkAnswer() {
  var userAnswer = document.getElementById("userAnswer").value.trim();
  var correctAnswer = images[currentIndex].answer;

  if (userAnswer === correctAnswer) {
    document.getElementById("result").textContent = "回答正确!得分 +2";
    score += 2;
    document.getElementById("currentScore").textContent = score;
    document.getElementById("correctSound").play();
    
    if (score >= 80 && !hasShownCongratulation) {
      alert('恭喜您,您的学历值已达到80分以上!再接再厉,加油!加80');
      score += 80;
      hasShownCongratulation = true;
    }
    
  } else {
    document.getElementById("result").textContent = "回答错误!得分 -1";
    score -= 1;
    document.getElementById("currentScore").textContent = score;
    document.getElementById("wrongSound").play();
  }

  currentIndex++;
  if (currentIndex >= images.length) {
    alert('所有题目已经做完,本次游戏结束!');
    currentIndex = 0;
    score = 0;

    // 跳转到指定页面
    location.href = "2.html";
  }
  
  
  showQuestion();
  document.getElementById("userAnswer").value = "";
}

$(document).ready(function() {
  showQuestion();

  $("#submitAnswer").click(function() {
    checkAnswer();
  });

  // 使用回车键提交答案
  $("#userAnswer").on('keypress', function(e) {
    if (e.which === 13) {
      checkAnswer();
    }
  });
});
</script>
趣味答题游戏 - 挑战你的知识库!

原文地址: https://www.cveoy.top/t/topic/o8R1 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录