在线英语单词默写练习 - 提升词汇量 - 常规

<p>{&quot;title&quot;:&quot;英语单词默写&quot;,&quot;description&quot;:&quot;使用这个网页练习英语单词默写，测试你的词汇量和拼写能力。点击开始，开始默写单词，输入答案并检查，挑战自己！&quot;,&quot;keywords&quot;:&quot;英语单词默写, 在线练习, 词汇测试, 拼写练习, 英语学习, 英文学习, 学习英语, 学习英文, 在线学习&quot;,&quot;content&quot;:&quot;<!DOCTYPE html></p>
<html>
<head>
<title>英语单词默写</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>英语单词默写</h1>
<div id="word-container">
<h2 id="word">点击开始</h2>
</div>
<div id="input-container">
<input type="text" id="input" placeholder="输入单词" disabled>
<button id="check-btn" disabled>检查</button>
</div>
<script src="script.js"></script>
</body>
</html>
<pre><code class="language-css">body {
font-family: Arial, sans-serif;
text-align: center;
}

h1 {
margin-top: 50px;
}

#word-container {
margin-top: 50px;
}

#input-container {
margin-top: 20px;
}

input[type=&quot;text&quot;] {
padding: 5px;
margin-right: 10px;
}

button {
padding: 5px 10px;
}
</code></pre>
<pre><code class="language-javascript">const words = ['apple', 'banana', 'cat', 'dog', 'elephant'];
let currentIndex = 0;

const wordElement = document.getElementById('word');
const inputElement = document.getElementById('input');
const checkButton = document.getElementById('check-btn');

// 初始化页面
function initialize() {
wordElement.textContent = '点击开始';
inputElement.value = '';
inputElement.disabled = true;
checkButton.disabled = true;
checkButton.removeEventListener('click', checkWord);
wordElement.addEventListener('click', startQuiz);
}

// 开始默写
function startQuiz() {
currentIndex = 0;
wordElement.textContent = words[currentIndex];
inputElement.disabled = false;
checkButton.disabled = false;
checkButton.addEventListener('click', checkWord);
wordElement.removeEventListener('click', startQuiz);
}

// 检查单词
function checkWord() {
const userInput = inputElement.value.trim().toLowerCase();
const currentWord = words[currentIndex].toLowerCase();

if (userInput === currentWord) {
alert('回答正确！');
} else {
alert('回答错误！');
}

currentIndex++;
if (currentIndex &lt; words.length) {
wordElement.textContent = words[currentIndex];
inputElement.value = '';
} else {
alert('已完成所有单词！');
initialize();
}
}

// 初始化页面
initialize();
</code></pre>