SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>大英 U2T2 · 词汇练习</title>
<style>
  *{box-sizing:border-box;}
  body{
    margin:0;padding:24px 12px 60px;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
    background:#f4f6fb;color:#1f2937;line-height:1.65;
    -webkit-text-size-adjust:100%;
  }
  .wrap{max-width:840px;margin:0 auto;}
  header{text-align:center;margin-bottom:22px;}
  header h1{font-size:22px;margin:0 0 6px;color:#1e3a8a;}
  header p{margin:0;color:#6b7280;font-size:14px;}

  .part{background:#fff;border-radius:16px;padding:18px 18px 8px;margin-bottom:18px;
        box-shadow:0 2px 12px rgba(30,58,138,.06);}
  .part h2{font-size:17px;margin:0 0 14px;padding-left:10px;border-left:4px solid #3b6ef6;color:#1e3a8a;}

  .q{padding:12px 0;border-bottom:1px dashed #e8ecf4;}
  .q:last-child{border-bottom:none;}

  .num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
       padding:0 6px;margin-right:8px;border-radius:8px;background:#eef4ff;color:#3b6ef6;
       font-size:13px;font-weight:700;vertical-align:middle;}

  .stem{font-size:15px;margin-bottom:10px;}

  .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  @media(max-width:560px){.opts{grid-template-columns:1fr;}}

  .opt{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border:1.5px solid #e5e9f2;
       border-radius:10px;background:#fff;cursor:pointer;font-size:14px;transition:.15s;}
  .opt:hover{border-color:#a9c2ff;background:#f7faff;}
  .opt input{accent-color:#3b6ef6;margin:5px 0 0;flex:none;}
  .opt.sel{border-color:#3b6ef6;background:#eef4ff;}
  .opt.correct{border-color:#16a34a;background:#ecfdf5;}
  .opt.wrong{border-color:#dc2626;background:#fef2f2;}
  .opt.correct b{color:#16a34a;}
  .opt.wrong b{color:#dc2626;}

  /* 匹配题 */
  .match-options{background:#f8faff;border:1px solid #e3ecff;border-radius:12px;
                 padding:12px 14px;margin-bottom:6px;font-size:14px;}
  .match-options div{margin:5px 0;}

  .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .word{font-weight:700;color:#1e3a8a;font-size:15px;min-width:110px;}
  .prompt{font-size:15px;}

  select.sel,input.txt{
    padding:7px 10px;border:1.5px solid #e5e9f2;border-radius:9px;font-size:14px;
    font-family:inherit;outline:none;background:#fff;color:#1f2937;
  }
  select.sel:focus,input.txt:focus{border-color:#3b6ef6;box-shadow:0 0 0 3px rgba(59,110,246,.12);}
  input.txt{width:170px;}
  select.sel.right{border-color:#16a34a;background:#ecfdf5;}
  select.sel.wrong{border-color:#dc2626;background:#fef2f2;}
  input.txt.right{border-color:#16a34a;background:#ecfdf5;}
  input.txt.wrong{border-color:#dc2626;background:#fef2f2;}

  /* 词性转换的目标词性提示 */
  .target{font-size:14px;color:#6b7280;}

  /* 反馈 */
  .fb{display:none;margin-top:10px;padding:10px 14px;border-radius:10px;font-size:13.5px;}
  .fb.show{display:block;}
  .fb.ok{background:#ecfdf5;border-left:4px solid #16a34a;}
  .fb.bad{background:#fef2f2;border-left:4px solid #dc2626;}
  .fb-head{font-weight:700;margin-bottom:4px;}
  .fb.ok .fb-head{color:#16a34a;}
  .fb.bad .fb-head{color:#dc2626;}
  .fb-line{margin:3px 0;color:#374151;}
  .fb-line b{color:#1e3a8a;}
  .ans{color:#16a34a;font-weight:700;}

  /* 按钮区 */
  .actions{text-align:center;margin-top:8px;}
  button{font-family:inherit;font-size:15px;padding:11px 28px;border-radius:12px;
         border:none;cursor:pointer;transition:.18s;margin:6px 6px;}
  button.primary{background:#3b6ef6;color:#fff;box-shadow:0 4px 14px rgba(59,110,246,.35);}
  button.primary:hover{background:#2f5ce0;transform:translateY(-1px);}
  button.primary:disabled{background:#9db4f0;box-shadow:none;cursor:default;transform:none;}
  button.ghost{background:#fff;color:#3b6ef6;border:1.5px solid #c7d8ff;}
  button.ghost:hover{background:#f0f5ff;}

  .score{margin-top:14px;font-size:16px;font-weight:700;color:#1e3a8a;display:none;}
  .score.show{display:block;}
  .score .big{font-size:26px;color:#3b6ef6;}
  .tip{font-size:13px;color:#9ca3af;margin-top:4px;font-weight:400;}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>大英 U2T2 · 词汇与短语练习</h1>
    <p>共 20 题 · 全部做完后点击"提交并查看答案"</p>
  </header>

  <section class="part">
    <h2>一、选词填空（1–10）</h2>
    <div id="part1"></div>
  </section>

  <section class="part">
    <h2>二、英文释义匹配（11–15）</h2>
    <div class="match-options" id="matchOptions"></div>
    <div id="part2"></div>
  </section>

  <section class="part">
    <h2>三、词性转换（16–20）填写词汇表中的原词</h2>
    <div id="part3"></div>
  </section>

  <div class="actions">
    <button class="primary" id="submitBtn">提交并查看答案</button>
    <button class="ghost" id="resetBtn">重做一遍</button>
    <div class="score" id="score"></div>
  </div>
</div>

<script>
/* ==================== 数据区 ==================== */

const mcqData = [
  {
    n:1,
    stem:'After graduation, she decided to ________ a career in journalism.',
    options:['take away','embark on','go off','open up'],
    answer:1,
    translation:'毕业后，她决定开始从事新闻业。',
    analysis:'固定短语。embark on/upon sth. 意为“开始，着手（尤指新的、有挑战性的事）”。其他选项：take away（拿走）；go off（爆炸，响起）；open up（打开，敞开心扉）。'
  },
  {
    n:2,
    stem:'The movie aims to ________ the war as a senseless tragedy rather than a heroic victory.',
    options:['signify','cherish','portray','huddle'],
    answer:2,
    translation:'这部电影旨在将战争描绘成一场毫无意义的悲剧，而不是英雄的胜利。',
    analysis:'动词搭配。portray 意为“描写，刻画”，固定搭配 portray sb./sth. as sth.。其他选项：signify（代表，意味着）；cherish（珍爱）；huddle（蜷缩）。'
  },
  {
    n:3,
    stem:'When ________ with a difficult situation, she always remains calm and tries to find a solution.',
    options:['confronted','compared','charged','conquered'],
    answer:0,
    translation:'当面临困难局面时，她总是保持冷静并设法找到解决办法。',
    analysis:'四级高频搭配。be confronted with sth. 意为“面临、遭遇（困难、危险等）”。compared：be compared with 意为“与……相比较”；charged：be charged with 意为“被指控……”；conquered 是及物动词，一般不跟 with。'
  },
  {
    n:4,
    stem:'Staying up late every night will seriously ________ your health.',
    options:['alleviate','signify','cherish','jeopardize'],
    answer:3,
    translation:'每晚熬夜会严重危及你的健康。',
    analysis:'动词辨析。jeopardize 意为“危及，危害，损害”。其他选项：alleviate（减轻）；signify（意味着）；cherish（珍视）。'
  },
  {
    n:5,
    stem:'The government has taken measures to ________ the severe drought in the region.',
    options:['afflict','alleviate','deprive','jeopardize'],
    answer:1,
    translation:'政府已采取措施缓解该地区的严重旱情。',
    analysis:'动词搭配。alleviate 意为“减轻，缓和（痛苦、灾情等）”，常搭配 pain、poverty、drought。其他选项：afflict（使受痛苦）；deprive（剥夺）；jeopardize（危及）。'
  },
  {
    n:6,
    stem:'Many local residents were ________ of clean drinking water after the heavy storm.',
    options:['alleviated','confronted','deprived','cherished'],
    answer:2,
    translation:'暴风雨过后，许多当地居民被剥夺了干净的饮用水。',
    analysis:'核心固定搭配。deprive sb. of sth.“剥夺某人某物”，被动 be deprived of，常指被剥夺资源、权利等。其他选项：alleviate（减轻）；confront（面对）；cherish（珍视）。'
  },
  {
    n:7,
    stem:'Teamwork is an ________ part of the project; without it, we can never meet the deadline.',
    options:['perpetual','integral','rigorous','anonymous'],
    answer:1,
    translation:'团队合作是这个项目不可或缺的一部分；没有它，我们永远无法在截止日期前完成。',
    analysis:'形容词搭配。integral 意为“不可或缺的”，an integral part of …（……不可或缺的一部分）。其他选项：perpetual（无休止的）；rigorous（严格缜密的）；anonymous（匿名的）。'
  },
  {
    n:8,
    stem:'A red rose can ________ love and passion.',
    options:['signify','portray','huddle','afflict'],
    answer:0,
    translation:'红玫瑰可以象征爱情和激情。',
    analysis:'动词辨析。signify 意为“象征，表示，意味着”。其他选项：portray（描绘）；huddle（蜷缩）；afflict（折磨）。'
  },
  {
    n:9,
    stem:'I ________ the time I spent with my grandparents during my childhood.',
    options:['deprive','cherish','alleviate','confront'],
    answer:1,
    translation:'我珍视童年时与祖父母一起度过的时光。',
    analysis:'动词词义。cherish 意为“珍爱，珍视”。其他选项：deprive（剥夺）；alleviate（减轻）；confront（面对）。'
  },
  {
    n:10,
    stem:'A good manager should ________ to inspire his team.',
    options:['live on','lead by example','share in sth.','stand in line'],
    answer:1,
    translation:'一个好的经理应该以身作则来激励他的团队。',
    analysis:'短语辨析。lead by example 意为“以身作则”。其他选项：live on（继续活着）；share in sth.（分担）；stand in line（排队）。'
  }
];

const matchOptions = [
  'A. an area of knowledge or activity.',
  'B. (of a person) with a name that is not known.',
  'C. the quality of being easily broken or damaged.',
  'D. very thorough and careful; strict and severe.',
  'E. continuing forever; never ending.'
];

const matchData = [
  {n:11, word:'domain',    answer:'A', analysis:'名词词义。常指知识或活动的领域，如 the domain of science（科学领域）。'},
  {n:12, word:'anonymous', answer:'B', analysis:'形容词词义，意为“无名的，不署名的”。如 an anonymous letter（匿名信）。'},
  {n:13, word:'fragility', answer:'C', analysis:'名词词义，意为“脆弱，不稳定”。其形容词为 fragile（脆弱的）。'},
  {n:14, word:'rigorous',  answer:'D', analysis:'形容词辨析，意为“严格的；缜密的；精确的”。常搭配 rigorous testing（严密的测试）、rigorous training（严格的训练）。'},
  {n:15, word:'perpetual', answer:'E', analysis:'形容词词义，意为“连续不断的，无休止的”。副词形式为 perpetually。'}
];

/* —— 新格式：原词（词性）→ 填空（目标词性） —— */
const transData = [
  {n:16, word:'significance', srcPos:'（名词）', targetPos:'（动词）', answer:'signify',
   analysis:'名词 significance（重要性，意义）的动词原形是 signify（代表，意味着）。'},
  {n:17, word:'alleviation', srcPos:'（名词）', targetPos:'（动词）', answer:'alleviate',
   analysis:'名词 alleviation（减轻，缓和）的动词原形是 alleviate。注意拼写：双写 l。'},
  {n:18, word:'deprivation', srcPos:'（名词）', targetPos:'（动词）', answer:'deprive',
   analysis:'名词 deprivation（剥夺，丧失）的动词原形是 deprive。牢记搭配：deprive sb. of sth.'},
  {n:19, word:'confrontation', srcPos:'（名词）', targetPos:'（动词）', answer:'confront',
   analysis:'名词 confrontation（对抗，冲突）的动词原形是 confront（勇敢面对，正视）。'},
  {n:20, word:'perpetually', srcPos:'（副词）', targetPos:'（形容词）', answer:'perpetual',
   analysis:'副词 perpetually（连续不断地）的形容词原形是 perpetual（连续不断的，无休止的）。'}
];

const LETTERS = ['A','B','C','D'];

/* ==================== 构建界面 ==================== */

const part1 = document.getElementById('part1');
const part2 = document.getElementById('part2');
const part3 = document.getElementById('part3');
const matchOptionsBox = document.getElementById('matchOptions');
const scoreBox = document.getElementById('score');
const submitBtn = document.getElementById('submitBtn');
const resetBtn = document.getElementById('resetBtn');

function build(){
  /* --- 第一部分 --- */
  part1.innerHTML = '';
  mcqData.forEach(q => {
    const div = document.createElement('div');
    div.className = 'q';
    div.id = 'q' + q.n;
    div.innerHTML = `
      <div class="stem"><span class="num">${q.n}</span>${q.stem}</div>
      <div class="opts">
        ${q.options.map((o,i)=>`
          <label class="opt">
            <input type="radio" name="q${q.n}" value="${i}">
            <span><b>${LETTERS[i]}.</b> ${o}</span>
          </label>`).join('')}
      </div>
      <div class="fb"></div>`;
    part1.appendChild(div);
  });

  /* --- 第二部分 --- */
  matchOptionsBox.innerHTML = matchOptions.map(t => `<div>${t}</div>`).join('');
  part2.innerHTML = '';
  matchData.forEach(q => {
    const div = document.createElement('div');
    div.className = 'q';
    div.id = 'm' + q.n;
    div.innerHTML = `
      <div class="row">
        <span class="num">${q.n}</span>
        <span class="word">${q.word}</span>
        <select class="sel">
          <option value="">请选择 A–E</option>
          ${['A','B','C','D','E'].map(L=>`<option value="${L}">${L}</option>`).join('')}
        </select>
      </div>
      <div class="fb"></div>`;
    part2.appendChild(div);
  });

  /* --- 第三部分：原词（词性）→ 输入框（目标词性） --- */
  part3.innerHTML = '';
  transData.forEach(q => {
    const div = document.createElement('div');
    div.className = 'q';
    div.id = 't' + q.n;
    div.innerHTML = `
      <div class="row">
        <span class="num">${q.n}</span>
        <span class="prompt"><b>${q.word}</b> ${q.srcPos} →</span>
        <input type="text" class="txt" placeholder="填写原词" autocomplete="off" spellcheck="false">
        <span class="target">${q.targetPos}</span>
      </div>
      <div class="fb"></div>`;
    part3.appendChild(div);
  });

  /* --- 状态复位 --- */
  scoreBox.className = 'score';
  scoreBox.innerHTML = '';
  submitBtn.disabled = false;
  submitBtn.textContent = '提交并查看答案';

  bindEvents();
}

function bindEvents(){
  /* 单选高亮 */
  document.querySelectorAll('input[type=radio]').forEach(r => {
    r.addEventListener('change', () => {
      document.querySelectorAll(`input[name="${r.name}"]`).forEach(x =>
        x.closest('.opt').classList.toggle('sel', x.checked));
    });
  });
  /* 回车提交 */
  document.querySelectorAll('input.txt').forEach(inp => {
    inp.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); grade(); }
    });
  });
}

/* ==================== 判分 ==================== */

function feedback(ok, correctText, yourText, analysis, extra){
  return `
    <div class="fb-head">${ok ? '✅ 回答正确' : '❌ 回答错误'}</div>
    <div class="fb-line"><b>正确答案：</b><span class="ans">${correctText}</span></div>
    ${yourText !== null ? `<div class="fb-line"><b>你的答案：</b>${yourText || '（未作答）'}</div>` : ''}
    ${extra ? `<div class="fb-line"><b>题干翻译：</b>${extra}</div>` : ''}
    <div class="fb-line"><b>解析：</b>${analysis}</div>`;
}

function grade(){
  let score = 0;
  const total = mcqData.length + matchData.length + transData.length;

  /* ---------- 一、选词填空 ---------- */
  mcqData.forEach(q => {
    const card = document.getElementById('q' + q.n);
    const opts = card.querySelectorAll('.opt');
    const chosen = card.querySelector('input:checked');
    const fb = card.querySelector('.fb');
    const chosenIdx = chosen ? Number(chosen.value) : -1;
    const ok = chosenIdx === q.answer;
    if (ok) score++;

    opts.forEach(o => o.classList.remove('correct','wrong'));
    opts[q.answer].classList.add('correct');
    if (chosenIdx !== -1 && !ok) opts[chosenIdx].classList.add('wrong');

    fb.className = 'fb show ' + (ok ? 'ok' : 'bad');
    fb.innerHTML = feedback(
      ok,
      `${LETTERS[q.answer]}. ${q.options[q.answer]}`,
      chosenIdx === -1 ? '' : `${LETTERS[chosenIdx]}. ${q.options[chosenIdx]}`,
      q.analysis,
      q.translation
    );

    card.querySelectorAll('input').forEach(i => i.disabled = true);
  });

  /* ---------- 二、释义匹配 ---------- */
  matchData.forEach(q => {
    const card = document.getElementById('m' + q.n);
    const sel = card.querySelector('select');
    const fb = card.querySelector('.fb');
    const val = sel.value;
    const ok = val === q.answer;
    if (ok) score++;

    sel.classList.remove('right','wrong');
    sel.classList.add(ok ? 'right' : 'wrong');
    sel.disabled = true;

    fb.className = 'fb show ' + (ok ? 'ok' : 'bad');
    fb.innerHTML = feedback(ok, q.answer, val, q.analysis, null);
  });

  /* ---------- 三、词性转换 ---------- */
  transData.forEach(q => {
    const card = document.getElementById('t' + q.n);
    const inp = card.querySelector('input');
    const fb = card.querySelector('.fb');
    const val = inp.value.trim();
    const ok = val.toLowerCase() === q.answer.toLowerCase();
    if (ok) score++;

    inp.classList.remove('right','wrong');
    inp.classList.add(ok ? 'right' : 'wrong');
    inp.disabled = true;

    fb.className = 'fb show ' + (ok ? 'ok' : 'bad');
    fb.innerHTML = feedback(ok, q.answer, val, q.analysis, null);
  });

  /* ---------- 总分 ---------- */
  const pct = Math.round(score / total * 100);
  let comment = '';
  if (pct === 100)      comment = '太棒了，全部正确！🎉';
  else if (pct >= 85)   comment = '很不错，再巩固一下错题就完美啦！';
  else if (pct >= 60)   comment = '基础还行，重点复习错题里的搭配。';
  else                  comment = '别灰心，把解析里的固定搭配抄一遍再读两遍～';

  scoreBox.className = 'score show';
  scoreBox.innerHTML = `得分：<span class="big">${score}</span> / ${total}　（正确率 ${pct}%）
    <div class="tip">${comment}</div>`;

  submitBtn.disabled = true;
  submitBtn.textContent = '已提交';

  scoreBox.scrollIntoView({behavior:'smooth', block:'center'});
}

/* ==================== 事件绑定 ==================== */
submitBtn.addEventListener('click', grade);
resetBtn.addEventListener('click', () => {
  build();
  window.scrollTo({top:0, behavior:'smooth'});
});

/* 初始化 */
build();
</script>
</body>
</html>