console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>词汇综合练习（含拼写填空）</title>
<style>
*{box-sizing:border-box;}
body{max-width:760px;margin:20px auto;font-size:16px;padding:0 14px;font-family:system-ui, sans-serif;line-height: 1.5;}
h2{text-align:center;margin-bottom:20px;}
h3.section-title{margin-top:35px;padding-bottom:8px;border-bottom:2px solid #eee;color:#333;}
.q{margin:20px 0;padding:16px;border:1px solid #ddd;border-radius:12px;}
.q-text{margin-bottom:12px;font-weight:500;}
/* 选项按钮样式 */
.opt{display:block;margin:9px 0;padding:11px 12px;border:1px solid #aaa;border-radius:8px;cursor:pointer;font-size:15px;}
.opt:active{background:#e8f0fe;}
.opt.selected{background:#cfe2ff; border-color:#6ea8fe;}
.opt.right{background:#dcf4dd;border-color:#39b54a;}
.opt.wrong{background:#ffe9e9;border-color:#f05656;}
/* 输入框填空样式 */
input[type="text"] {
font-size: 16px;
padding: 8px 12px;
border: 1px solid #aaa;
border-radius: 8px;
width: 250px;
margin-left: 8px;
outline: none;
transition: 0.2s;
}
input[type="text"]:focus {
border-color: #6ea8fe;
box-shadow: 0 0 5px rgba(110, 168, 254, 0.5);
}
input[type="text"].right {
border-color: #39b54a;
background-color: #dcf4dd;
color: #2b7a33;
font-weight: bold;
}
input[type="text"].wrong {
border-color: #f05656;
background-color: #ffe9e9;
color: #c0392b;
text-decoration: line-through;
}
.explain{margin-top:12px;padding:12px;background:#f5f7fa;border-radius:8px;color:#444;display:none;line-height:1.6;white-space:pre-wrap;font-size:14.5px;}
#score{font-size:20px;font-weight:bold;margin:30px 0;text-align:center;display:none;color:#2c3e50;}
.btn-group{display:flex;gap:12px;justify-content:center;margin-top:20px;margin-bottom: 50px;flex-wrap:wrap;}
button{padding:10px 20px;font-size:16px;border-radius:8px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:0.2s;}
button:hover{background:#f0f0f0;}
</style>
</head>
<body>
<h2>词汇综合练习</h2>
<div id="container"></div>
<div id="score"></div>
<div class="btn-group">
<button onclick="resetAll()">全部重置</button>
<button onclick="checkAll()" style="background:#4a90e2; color:#fff; border-color:#4a90e2;">提交 + 查看全部解析</button>
</div>
<script>
const examData = [
{
section: "一、选词填空",
type: "choice", // 标识题型：选择题
questions: [
{
q:"1. The fact that the traffic police officer was caught speeding on the highway is highly ________.",
options:["A. ironic","B. reasonable","C. ordinary","D. sufficient"],
answer:"A",
explain:"【答案】A. ironic\n【题干翻译】交警在高速公路上超速被抓，这一事实极具讽刺意味（ironic）。\n【四级考点】语境逻辑与形容词辨析。\n【选项辨析】ironic：具有讽刺意味的；reasonable：合理的；ordinary：普通的；sufficient：充足的。"
},
{
q:"2. When he said he was \"starving to death,\" he didn't mean it ________; he just wanted to emphasize how hungry he was.",
options:["A. practically","B. literally","C. virtually","D. extremely"],
answer:"B",
explain:"【答案】B. literally\n翻译：他说“饿死了”并不是字面意义，只是想强调很饿。\nliterally：字面上地；practically/virtually：几乎；extremely：极其。"
},
{
q:"3. The company's ________ was severely damaged after it was revealed that they had been selling fake products to customers.",
options:["A. capability","B. curiosity","C. credibility","D. capacity"],
answer:"C",
explain:"【答案】C. credibility\n翻译：这家公司被曝售卖假货后，信誉严重受损。\ncredibility：信誉、可信度；capability/capacity：能力、容量；curiosity：好奇心。"
},
{
q:"4. With the new government policy supporting small businesses, the local tech industry has begun to ________.",
options:["A. flourish","B. expand","C. emerge","D. evolve"],
answer:"A",
explain:"【答案】A. flourish\n翻译：在扶持小企业政策下，本地科技产业开始蓬勃发展。\nflourish：繁荣、蓬勃发展；expand：规模扩大；emerge：出现；evolve：演变进化。"
},
{
q:"5. The price of the travel package covers flights and hotel ________, but meals are not included.",
options:["A. occupation","B. accumulation","C. accommodation","D. accompaniment"],
answer:"C",
explain:"【答案】C. accommodation\n翻译：套餐包含机票和酒店住宿，不含餐食。\naccommodation：住宿；occupation：职业、占领；accumulation：积累；accompaniment：伴随物。"
},
{
q:"6. The newly built medical center is formally ________ with a top university hospital, sharing resources and experts.",
options:["A. dedicated","B. aligned","C. affiliated","D. contributed"],
answer:"C",
explain:"【答案】C. affiliated\n翻译：新建医疗中心正式隶属于一所顶尖大学医院。\nbe affiliated with：隶属于；dedicated：专注的；aligned：结盟；contributed：贡献。"
},
{
q:"7. Because of the tight deadline, the team has had a very ________ schedule this week, running from one meeting to another.",
options:["A. historic","B. heroic","C. hesitant","D. hectic"],
answer:"D",
explain:"【答案】D. hectic\n翻译：截止时间紧张，这周日程非常忙碌。\nhectic：忙碌的；historic：历史性的；heroic：英勇的；hesitant：犹豫的。"
},
{
q:"8. Economists predict that the housing prices will continue to rise for the ________ future.",
options:["A. forgettable","B. forgivable","C. formidable","D. foreseeable"],
answer:"D",
explain:"【答案】D. foreseeable\n翻译：经济学家预测，在可预见的未来房价持续上涨。\nfor the foreseeable future 固定搭配：在可预见的未来。"
}
]
},
{
section: "二、英文释义匹配",
type: "choice",
questions: [
{
q:"9. discern",
options:[
"A. To admit that something is true after first denying it.",
"B. To recognize or find out the difference between things that are not obvious.",
"C. A method that leads to a particular result.",
"D. Side by side and keeping up with the latest information.",
"E. Allowing a two-way flow of information between a computer and a user."
],
answer:"B",
explain:"【答案】B. \n【中文翻译】识别或找出那些不明显的事物之间的区别。\n【四级考点】同义替换。常用来替换 tell the difference。\n【核心搭配】discern A from B（把A和B区分开）。"
},
{
q:"10. concede",
options:[
"A. To admit that something is true after first denying it.",
"B. To recognize or find out the difference between things that are not obvious.",
"C. A method that leads to a particular result.",
"D. Side by side and keeping up with the latest information.",
"E. Allowing a two-way flow of information between a computer and a user."
],
answer:"A",
explain:"【答案】A. \n【中文翻译】在最初否认之后，承认某事是真实的。\n【四级考点】态度题/写作让步段。\n【核心搭配】I concede that...（我承认……）。"
},
{
q:"11. recipe",
options:[
"A. To admit that something is true after first denying it.",
"B. To recognize or find out the difference between things that are not obvious.",
"C. A method that leads to a particular result.",
"D. Side by side and keeping up with the latest information.",
"E. Allowing a two-way flow of information between a computer and a user."
],
answer:"C",
explain:"【答案】C. \n【中文翻译】导致某种特定结果的方法或途径。\n【四级考点】熟词僻义。常考引申义“方法、诀窍”。\n【核心搭配】a recipe for success（成功的秘诀）。"
},
{
q:"12. interactive",
options:[
"A. To admit that something is true after first denying it.",
"B. To recognize or find out the difference between things that are not obvious.",
"C. A method that leads to a particular result.",
"D. Side by side and keeping up with the latest information.",
"E. Allowing a two-way flow of information between a computer and a user."
],
answer:"E",
explain:"【答案】E. \n【中文翻译】允许在计算机和用户之间进行双向信息流动的。\n【四级考点】科技/教育类高频词。\n【核心搭配】interactive teaching（互动教学）。"
},
{
q:"13. abreast",
options:[
"A. To admit that something is true after first denying it.",
"B. To recognize or find out the difference between things that are not obvious.",
"C. A method that leads to a particular result.",
"D. Side by side and keeping up with the latest information.",
"E. Allowing a two-way flow of information between a computer and a user."
],
answer:"D",
explain:"【答案】D. \n【中文翻译】并排且朝向同一方向；跟上最新信息。\n【四级考点】固定搭配。\n【核心搭配】keep abreast of sth.（跟上……的步伐）。"
}
]
},
{
section: "三、词性转换（请手动拼写单词）",
type: "fill", // 标识题型：填空题
questions: [
{
q:"14. dedication (动词：奉献/致力于) → ",
answer:"dedicate",
explain:"【正确答案】dedicate\n【四级考点】固定搭配与介词。\n【解析】动词 dedicate 极高频。黄金搭配：be dedicated to doing sth.（致力于做某事）。这里的 to 是介词，后接动名词。"
},
{
q:"15. align (名词：结盟/队列) → ",
answer:"alignment",
explain:"【正确答案】alignment\n【四级考点】词缀拼写与短语。\n【解析】动词 align 变名词时，注意拼写规则：双写 l 再加 ment。常考短语 in alignment with（与……保持一致）。"
},
{
q:"16. erasure (动词：擦除/抹去) → ",
answer:"erase",
explain:"【正确答案】erase\n【四级考点】科技类高频动词。\n【解析】常见搭配 erase data（清除数据）。注意辨析：erase 是动词，erasure 是名词，eraser 是橡皮擦。"
},
{
q:"17. practicality (形容词：实际的/实用的) → ",
answer:"practical",
explain:"【正确答案】practical\n【四级考点】词族转换与阅读高频词。\n【解析】常用搭配 a practical solution（一个切实可行的解决方案）。"
},
{
q:"18. luxury (形容词：奢华的/豪华的) → ",
answer:"luxurious",
explain:"【正确答案】luxurious\n【四级考点】拼写易错点。\n【解析】变形容词时，不是直接加 -ous，而是把 y 变 i 加 ous：luxurious（奢华的）。如 luxurious hotel（豪华酒店）。"
}
]
}
];
let score = 0;
let totalQuestions = 0;
const container = document.getElementById('container');
// 渲染题目
examData.forEach((sectionData, sIdx) => {
const h3 = document.createElement('h3');
h3.className = 'section-title';
h3.innerText = sectionData.section;
container.appendChild(h3);
sectionData.questions.forEach((item, qIdx) => {
totalQuestions++;
const divQ = document.createElement('div');
divQ.className='q';
divQ.dataset.type = sectionData.type;
divQ.dataset.answer = item.answer;
// 如果是选择题
if (sectionData.type === "choice") {
divQ.innerHTML = `<div class="q-text">${item.q}</div>`;
item.options.forEach(opt=>{
const btn = document.createElement('div');
btn.className='opt';
btn.innerText = opt;
btn.onclick = ()=>{
divQ.querySelectorAll('.opt').forEach(b=>b.classList.remove('selected'));
btn.classList.add('selected');
}
divQ.appendChild(btn);
});
}
// 如果是填空题
else if (sectionData.type === "fill") {
// 渲染题干和输入框
divQ.innerHTML = `<div class="q-text">${item.q}
<input type="text" class="fill-input" placeholder="在此拼写" autocomplete="off" spellcheck="false">
</div>`;
// 绑定回车键，防止触发表单默认提交
divQ.querySelector('input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') { e.preventDefault(); }
});
}
const expDom = document.createElement('div');
expDom.className = 'explain';
expDom.innerText = item.explain;
divQ.appendChild(expDom);
container.appendChild(divQ);
});
});
// 提交并查看解析
function checkAll(){
score = 0;
document.querySelectorAll('.q').forEach(qBlock=>{
const type = qBlock.dataset.type;
const ans = qBlock.dataset.answer;
if (type === "choice") {
const selected = qBlock.querySelector('.opt.selected');
if(selected){
const selLetter = selected.innerText.trim().slice(0,1);
if(selLetter === ans){
selected.classList.add('right');
score++;
}else{
selected.classList.add('wrong');
qBlock.querySelectorAll('.opt').forEach(b=>{
if(b.innerText.trim().slice(0,1) === ans) b.classList.add('right');
});
}
} else {
// 没选的话直接显示正确答案
qBlock.querySelectorAll('.opt').forEach(b=>{
if(b.innerText.trim().slice(0,1) === ans) b.classList.add('right');
});
}
}
else if (type === "fill") {
const input = qBlock.querySelector('input');
// 获取输入值，去空格并转小写进行比对
const userAns = input.value.trim().toLowerCase();
const correctAns = ans.trim().toLowerCase();
if (userAns === correctAns && userAns !== "") {
input.classList.add('right');
score++;
} else {
input.classList.add('wrong');
// 如果答错了，在解析里特殊提示一下正确答案
const expDom = qBlock.querySelector('.explain');
expDom.innerText = `【正确答案】: ${ans}\n` + expDom.innerText.replace(`【正确答案】${ans}\n`, '');
}
}
// 显示解析
qBlock.querySelector('.explain').style.display = 'block';
})
document.getElementById('score').style.display='block';
document.getElementById('score').innerText=`本次得分：${score} / ${totalQuestions}`;
}
// 全部重置
function resetAll(){
score=0;
document.querySelectorAll('.opt').forEach(b=>b.classList.remove('selected','right','wrong'));
document.querySelectorAll('.fill-input').forEach(i => {
i.value = '';
i.classList.remove('right','wrong');
});
document.querySelectorAll('.explain').forEach(e=>e.style.display='none');
document.getElementById('score').style.display='none';
// 还原解析中可能被修改过的文本
document.querySelectorAll('.q').forEach((qBlock, idx) => {
let item;
if (idx < 8) item = examData[0].questions[idx];
else if (idx < 13) item = examData[1].questions[idx - 8];
else item = examData[2].questions[idx - 13];
qBlock.querySelector('.explain').innerText = item.explain;
});
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>