背单词有四个选项并且可以判断对错的前端代码
时间: 2023-08-04 10:02:40 浏览: 36
以下是一个简单的背单词的前端程序代码,其中包含了四个选项和判断对错的功能。
```html
<!DOCTYPE html>
<html>
<head>
<title>背单词</title>
</head>
<body>
<h1>背单词</h1>
<p id="word">apple</p>
<div>
<button onclick="checkAnswer('correct')">正确</button>
<button onclick="checkAnswer('wrong')">错误</button>
</div>
<div>
<button onclick="selectOption('A')">A. 苹果</button>
<button onclick="selectOption('B')">B. 香蕉</button>
<button onclick="selectOption('C')">C. 橘子</button>
<button onclick="selectOption('D')">D. 西瓜</button>
</div>
<p id="result"></p>
<script>
// 单词列表
const words = [
{ word: 'apple', options: ['A. 苹果', 'B. 香蕉', 'C. 橘子', 'D. 西瓜'], answer: 'A' },
{ word: 'banana', options: ['A. 芒果', 'B. 香蕉', 'C. 橘子', 'D. 西瓜'], answer: 'B' },
{ word: 'orange', options: ['A. 苹果', 'B. 香蕉', 'C. 橘子', 'D. 西瓜'], answer: 'C' },
{ word: 'watermelon', options: ['A. 苹果', 'B. 香蕉', 'C. 橘子', 'D. 西瓜'], answer: 'D' }
];
let currentWordIndex = 0;
// 初始化页面
function init() {
const currentWord = words[currentWordIndex];
document.getElementById('word').innerText = currentWord.word;
document.getElementById('result').innerText = '';
const optionButtons = document.querySelectorAll('button:not([onclick^="checkAnswer"])');
optionButtons.forEach((button, index) => {
button.innerText = currentWord.options[index];
});
}
// 选择答案
function selectOption(option) {
const currentWord = words[currentWordIndex];
currentWord.selectedOption = option;
}
// 检查答案
function checkAnswer(answer) {
const currentWord = words[currentWordIndex];
if (currentWord.selectedOption === currentWord.answer && answer === 'correct') {
document.getElementById('result').innerText = '正确!';
} else if (currentWord.selectedOption !== currentWord.answer && answer === 'wrong') {
document.getElementById('result').innerText = '错误!';
}
currentWordIndex++;
if (currentWordIndex >= words.length) {
currentWordIndex = 0;
}
init();
}
init();
</script>
</body>
</html>
```
这个程序使用了一个包含四个单词和对应选项和答案的数组 `words`。程序会初始化页面显示第一个单词和对应的选项。用户可以选择其中一个选项,然后点击“正确”或“错误”按钮来判断答案是否正确。如果用户选择了正确的选项并且点击了“正确”按钮,程序会在页面上显示“正确!”;如果用户选择了错误的选项并且点击了“错误”按钮,程序会在页面上显示“错误!”。然后程序会自动跳转到下一个单词,直到所有单词都被背完。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)