趣味知识问答：挑战你的学习值！
<html>
<head>
<title>趣味知识问答</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<body style="text-align: center;">
<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 id="correctAnswerContainer" style="display: none;">
<p>正确答案是：<span id="correctAnswer"></span></p>
<button onclick="hideCorrectAnswer()">隐藏正确答案</button>
</div>
</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': '3.jpg', 'answer': '333' },
{ 'image': '4.jpg', 'answer': '444' },
{ 'image': '5.jpg', 'answer': '555' },
{ 'image': '6.jpg', 'answer': '666' },
{ 'image': '7.jpg', 'answer': '777' },
{ 'image': '2.jpg', 'answer': 'bbb' }
];
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();
// 显示正确答案
document.getElementById("correctAnswerContainer").style.display = "block";
document.getElementById("correctAnswer").textContent = correctAnswer;
}
currentIndex++;
if (currentIndex >= images.length) {
alert("所有题目已经做完，本次游戏结束！");
currentIndex = 0;
score = 0;
// 跳转到指定页面
location.href = "2.html";
}
showQuestion();
document.getElementById("userAnswer").value = "";
}
function hideCorrectAnswer() {
document.getElementById("correctAnswerContainer").style.display = "none";
}
$(document).ready(function() {
showQuestion();
$("#submitAnswer").click(function() {
checkAnswer();
});
// 使用回车键提交答案
$("#userAnswer").on('keypress', function(e) {
if (e.which === 13) {
checkAnswer();
}
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/o8RV 著作权归作者所有。请勿转载和采集!