<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>成语 on Kuqilin&#39;s Blog</title>
    <link>https://www.kuqilin.top/zh-tw/tags/%E6%88%90%E8%AF%AD/</link>
    <description>Recent content from Kuqilin&#39;s Blog</description>
    <generator>Hugo</generator>
    <language>zh-TW</language>
    
    <managingEditor>kuqilin@outlook.com (Kuqilin)</managingEditor>
    <webMaster>kuqilin@outlook.com (Kuqilin)</webMaster>
    
    <copyright>本部落格所有文章除特別聲明外，均採用 BY-NC-SA 授權協議。轉載請註明出處！</copyright>
    
    <lastBuildDate>Sun, 16 Aug 2026 11:43:32 +0800</lastBuildDate>
    
    
    <atom:link href="https://www.kuqilin.top/zh-tw/tags/%E6%88%90%E8%AF%AD/index.xml" rel="self" type="application/rss&#43;xml" />
    

    
      
    

    <item>
      <title>望文生义 · 成语辨析小测</title>
      <link>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-ce-yu/</link>
      <pubDate>Sun, 16 Aug 2026 11:22:15 &#43;0800</pubDate>
      <author>kuqilin@outlook.com (Kuqilin)</author>
      <guid>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-ce-yu/</guid>
      <description>
        <![CDATA[<h1>望文生义 · 成语辨析小测</h1><p>作者：Kuqilin（kuqilin@outlook.com）</p>
        
          <p>成语最怕「望文生义」。小测随机抽一个成语，从「原意」与常见的「易错点」中二选一——小心，错误选项往往就是你第一反应想选的那个。题库共 315 条，答对/答错即时反馈，换题无刷新。</p>
<p>独立小测页面可以随时打开：</p>
<a href="https://kuqilin.github.io/wang-wen-sheng-yi/quiz.html" title="望文生义 · 成语辨析小测" target="_blank">望文生义 · 成语辨析小测</a>
<h2 id="内嵌版直接在文章里玩">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%89%88%e7%9b%b4%e6%8e%a5%e5%9c%a8%e6%96%87%e7%ab%a0%e9%87%8c%e7%8e%a9"></a>
内嵌版：直接在文章里玩
</h2><p>以下小测直接嵌在正文里，和博客共用视觉与深浅色模式，手机上也能自适应宽度正常玩。</p>
<style>
.wq-quiz { max-width: 560px; margin: 24px auto; text-align: center; padding: 28px 24px 24px; border: 1px solid #99c2cc; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(25,118,140,.10); font-family: inherit; color: #24292e; }
.wq-quiz .wq-badge { font-size: 13px; letter-spacing: 2px; color: #408d9f; margin-bottom: 14px; }
.wq-quiz .wq-idiom { font-size: 44px; font-weight: 700; color: #24292e; margin-bottom: 4px; line-height: 1.3; }
.wq-quiz .wq-question { font-size: 15px; color: #7d7d7d; margin-bottom: 22px; }
.wq-quiz .wq-options { display: flex; flex-direction: column; gap: 12px; }
.wq-quiz button.wq-opt { display: block; width: 100%; font-family: inherit; font-size: 16px; line-height: 1.7; text-align: left; padding: 12px 16px; border: 2px solid #99c2cc; border-radius: 10px; background: #fff; color: #24292e; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; box-shadow: none; }
.wq-quiz button.wq-opt:hover { border-color: #408d9f; background: #eaf2f5; transform: translateY(-1px); }
.wq-quiz button.wq-opt:disabled { cursor: default; transform: none; }
.wq-quiz button.wq-opt.wq-correct { border-color: #22863a; background: #f0fff4; color: #22863a; }
.wq-quiz button.wq-opt.wq-wrong { border-color: #d73a49; background: #ffeef0; color: #d73a49; }
.wq-quiz button.wq-opt.wq-dim { opacity: .55; }
.wq-quiz .wq-feedback { margin-top: 18px; font-size: 15px; min-height: 24px; color: #7d7d7d; }
.wq-quiz .wq-feedback.wq-ok { color: #22863a; }
.wq-quiz .wq-feedback.wq-bad { color: #d73a49; }
.wq-quiz button.wq-next { margin-top: 16px; font-family: inherit; font-size: 16px; padding: 10px 32px; border: none; border-radius: 10px; background: #19768c; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(25,118,140,.35); }
.wq-quiz button.wq-next:hover { background: #00677f; }
.wq-quiz button.wq-next[hidden] { display: none; }
.wq-quiz .wq-count { margin-top: 18px; font-size: 12px; color: #73abb9; }
@keyframes wqFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wq-quiz button.wq-opt { animation: wqFadeUp .22s ease; }
.wq-quiz .wq-idiom.wq-flash { animation: wqFadeUp .3s ease; }
@keyframes wqPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.wq-quiz .wq-feedback.wq-ok, .wq-quiz .wq-feedback.wq-bad { animation: wqPop .3s ease; }
/* 深色模式：跟随主题 html[data-theme="dark"] */
html[data-theme="dark"] .wq-quiz { background: #272b30; border-color: #3e7f92; color: #c9d1d9; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq-quiz .wq-badge { color: #6db7c7; }
html[data-theme="dark"] .wq-quiz .wq-idiom { color: #e6edf3; }
html[data-theme="dark"] .wq-quiz .wq-question { color: #8b949e; }
html[data-theme="dark"] .wq-quiz button.wq-opt { border-color: #3e7f92; background: #272b30; color: #c9d1d9; }
html[data-theme="dark"] .wq-quiz button.wq-opt:hover { border-color: #6db7c7; background: rgba(64,141,159,.18); }
html[data-theme="dark"] .wq-quiz button.wq-opt.wq-correct { border-color: #7ee787; background: rgba(46,160,67,.18); color: #7ee787; }
html[data-theme="dark"] .wq-quiz button.wq-opt.wq-wrong { border-color: #ff7b72; background: rgba(248,81,73,.16); color: #ff7b72; }
html[data-theme="dark"] .wq-quiz .wq-feedback { color: #8b949e; }
html[data-theme="dark"] .wq-quiz .wq-feedback.wq-ok { color: #7ee787; }
html[data-theme="dark"] .wq-quiz .wq-feedback.wq-bad { color: #ff7b72; }
html[data-theme="dark"] .wq-quiz button.wq-next { background: #2b93ab; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq-quiz button.wq-next:hover { background: #19768c; }
html[data-theme="dark"] .wq-quiz .wq-count { color: #6db7c7; }
</style>
<div class="wq-quiz">
<div class="wq-badge">🧐 望文生义 · 成语释义二选一</div>
<div class="wq-idiom" id="wq-idiom"></div>
<div class="wq-question">下列选项中，哪一个是这个成语的正确释义？</div>
<div class="wq-options" id="wq-options"></div>
<div class="wq-feedback" id="wq-feedback"></div>
<button class="wq-next" id="wq-next" hidden>下一题 ➡️</button>
<div class="wq-count" id="wq-count"></div>
</div>
<script>
(function () {
  if (!document.getElementById("wq-idiom")) return;
  const idiomEl = document.getElementById("wq-idiom");
  const box = document.getElementById("wq-options");
  const feedback = document.getElementById("wq-feedback");
  const next = document.getElementById("wq-next");
  const countEl = document.getElementById("wq-count");

  function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  // 连续两次不抽同一题
  let last = null;
  function pick(DATA) {
    let e;
    do {
      e = DATA[Math.floor(Math.random() * DATA.length)];
    } while (e === last && DATA.length > 1);
    last = e;
    return e;
  }

  const goodEmojis = ["👍", "🎉", "🌟", "💯", "🏆", "👏"];
  const badEmojis = ["😅", "🤔", "💡", "🙈"];
  function rand(a) { return a[Math.floor(Math.random() * a.length)]; }

  fetch("/wang-wen-sheng-yi/wang-wen-sheng-yi.json", { cache: "no-store" })
    .then(r => { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
    .then(data => {
      const usable = data.filter(
        e => e["成语"] && e["原意"] && e["易错点"] && e["原意"] !== e["易错点"]
      );
      if (!usable.length) {
        idiomEl.textContent = "📭 题库为空";
        countEl.textContent = "JSON 里没有可出的题（每条需含 成语/原意/易错点，且原意不等于易错点）。";
        return;
      }
      countEl.textContent = "📚 题库共 " + data.length + " 条，可出题 " + usable.length + " 条";

      function renderQuestion() {
        const entry = pick(usable);
        idiomEl.textContent = entry["成语"];
        idiomEl.classList.remove("wq-flash");
        void idiomEl.offsetWidth;
        idiomEl.classList.add("wq-flash");

        box.innerHTML = "";
        feedback.className = "wq-feedback";
        feedback.textContent = "";
        next.hidden = true;

        const options = shuffle([
          { text: entry["原意"], correct: true },
          { text: entry["易错点"], correct: false },
        ]);

        let answered = false;
        for (const opt of options) {
          const btn = document.createElement("button");
          btn.className = "wq-opt";
          btn.textContent = opt.text;
          btn.dataset.correct = opt.correct ? "true" : "false";
          btn.addEventListener("click", () => {
            if (answered) return;
            answered = true;
            for (const b of box.children) b.disabled = true;
            for (const b of box.children) {
              if (b.dataset.correct === "true") b.classList.add("wq-correct");
            }
            if (opt.correct) {
              feedback.className = "wq-feedback wq-ok";
              feedback.textContent = rand(goodEmojis) + " 回答正确！";
            } else {
              btn.classList.add("wq-wrong");
              for (const b of box.children) {
                if (b !== btn && b.dataset.correct !== "true") b.classList.add("wq-dim");
              }
              feedback.className = "wq-feedback wq-bad";
              feedback.textContent = rand(badEmojis) + " 回答错误，选错了释义。";
            }
            next.hidden = false;
          });
          box.appendChild(btn);
        }
      }

      next.addEventListener("click", renderQuestion);
      renderQuestion();
    })
    .catch(err => {
      idiomEl.textContent = "❌ 题库加载失败";
      countEl.textContent = "错误：" + err.message;
    });
})();
</script>
<p>内嵌版直接复用独立页面同款逻辑（随机抽题、防连抽、即时判题、前端换题），数据从站点根目录的 <code>/wang-wen-sheng-yi/wang-wen-sheng-yi.json</code> 实时加载，改题库后无需清缓存。</p>
<h2 id="内嵌网页版独立页面嵌入">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%bd%91%e9%a1%b5%e7%89%88%e7%8b%ac%e7%ab%8b%e9%a1%b5%e9%9d%a2%e5%b5%8c%e5%85%a5"></a>
内嵌网页版：独立页面嵌入
</h2><p>把独立的 <code>quiz.html</code> 页面以 iframe 形式嵌进来，外观是「页面套页面」，自带整页背景色与居中卡片，左上角有「首页」按钮、右上角有「关于」按钮：</p>
<iframe src="/wang-wen-sheng-yi/quiz.html" loading="lazy" title="望文生义成语小测" style="width:100%;height:600px;border:1px solid #99c2cc;border-radius:12px;background:#fff;"></iframe>
<blockquote>
<p><strong>注意：这个版本不适合手机等小屏幕。</strong> 独立页面按桌面卡片设计（卡片固定 560px 宽、iframe 固定 600px 高，还有固定在角落的按钮），在小屏上会被挤压甚至溢出，体验很差。手机访问请用上面的<strong>内嵌版</strong>（自适应宽度），或直接打开外链的独立小测页面。</p>
</blockquote>

        
        <hr><p>本文2026-08-16首發於<a href='https://www.kuqilin.top/'>Kuqilin's Blog</a>，最後修改於2026-08-16</p><p>本部落格所有文章除特別聲明外，均採用 BY-NC-SA 授權協議。轉載請註明出處！</p>]]>
      </description>
      
        <category>记录</category>
      
    </item>
    
      
    

    <item>
      <title>望文生义 · 成语辨析小测</title>
      <link>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-1/</link>
      <pubDate>Sun, 16 Aug 2026 11:22:15 &#43;0800</pubDate>
      <author>kuqilin@outlook.com (Kuqilin)</author>
      <guid>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-1/</guid>
      <description>
        <![CDATA[<h1>望文生义 · 成语辨析小测</h1><p>作者：Kuqilin（kuqilin@outlook.com）</p>
        
          <p>成语最怕「望文生义」。小测随机抽一个成语，从「原意」与常见的「易错点」中二选一——小心，错误选项往往就是你第一反应想选的那个。题库共 315 条，答对/答错即时反馈，换题无刷新。</p>
<p>独立小测页面可以随时打开：</p>
<a href="https://kuqilin.github.io/wang-wen-sheng-yi/quiz.html" title="望文生义 · 成语辨析小测" target="_blank">望文生义 · 成语辨析小测</a>
<h2 id="内嵌版直接在文章里玩">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%89%88%e7%9b%b4%e6%8e%a5%e5%9c%a8%e6%96%87%e7%ab%a0%e9%87%8c%e7%8e%a9"></a>
内嵌版：直接在文章里玩
</h2><p>以下小测直接嵌在正文里，和博客共用视觉与深浅色模式，手机上也能自适应宽度正常玩。</p>
<style>
.wq-quiz { max-width: 560px; margin: 24px auto; text-align: center; padding: 28px 24px 24px; border: 1px solid #99c2cc; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(25,118,140,.10); font-family: inherit; color: #24292e; }
.wq-quiz .wq-badge { font-size: 13px; letter-spacing: 2px; color: #408d9f; margin-bottom: 14px; }
.wq-quiz .wq-idiom { font-size: 44px; font-weight: 700; color: #24292e; margin-bottom: 4px; line-height: 1.3; }
.wq-quiz .wq-question { font-size: 15px; color: #7d7d7d; margin-bottom: 22px; }
.wq-quiz .wq-options { display: flex; flex-direction: column; gap: 12px; }
.wq-quiz button.wq-opt { display: block; width: 100%; font-family: inherit; font-size: 16px; line-height: 1.7; text-align: left; padding: 12px 16px; border: 2px solid #99c2cc; border-radius: 10px; background: #fff; color: #24292e; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; box-shadow: none; }
.wq-quiz button.wq-opt:hover { border-color: #408d9f; background: #eaf2f5; transform: translateY(-1px); }
.wq-quiz button.wq-opt:disabled { cursor: default; transform: none; }
.wq-quiz button.wq-opt.wq-correct { border-color: #22863a; background: #f0fff4; color: #22863a; }
.wq-quiz button.wq-opt.wq-wrong { border-color: #d73a49; background: #ffeef0; color: #d73a49; }
.wq-quiz button.wq-opt.wq-dim { opacity: .55; }
.wq-quiz .wq-feedback { margin-top: 18px; font-size: 15px; min-height: 24px; color: #7d7d7d; }
.wq-quiz .wq-feedback.wq-ok { color: #22863a; }
.wq-quiz .wq-feedback.wq-bad { color: #d73a49; }
.wq-quiz button.wq-next { margin-top: 16px; font-family: inherit; font-size: 16px; padding: 10px 32px; border: none; border-radius: 10px; background: #19768c; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(25,118,140,.35); }
.wq-quiz button.wq-next:hover { background: #00677f; }
.wq-quiz button.wq-next[hidden] { display: none; }
.wq-quiz .wq-count { margin-top: 18px; font-size: 12px; color: #73abb9; }
@keyframes wqFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wq-quiz button.wq-opt { animation: wqFadeUp .22s ease; }
.wq-quiz .wq-idiom.wq-flash { animation: wqFadeUp .3s ease; }
@keyframes wqPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.wq-quiz .wq-feedback.wq-ok, .wq-quiz .wq-feedback.wq-bad { animation: wqPop .3s ease; }
/* 深色模式：跟随主题 html[data-theme="dark"] */
html[data-theme="dark"] .wq-quiz { background: #272b30; border-color: #3e7f92; color: #c9d1d9; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq-quiz .wq-badge { color: #6db7c7; }
html[data-theme="dark"] .wq-quiz .wq-idiom { color: #e6edf3; }
html[data-theme="dark"] .wq-quiz .wq-question { color: #8b949e; }
html[data-theme="dark"] .wq-quiz button.wq-opt { border-color: #3e7f92; background: #272b30; color: #c9d1d9; }
html[data-theme="dark"] .wq-quiz button.wq-opt:hover { border-color: #6db7c7; background: rgba(64,141,159,.18); }
html[data-theme="dark"] .wq-quiz button.wq-opt.wq-correct { border-color: #7ee787; background: rgba(46,160,67,.18); color: #7ee787; }
html[data-theme="dark"] .wq-quiz button.wq-opt.wq-wrong { border-color: #ff7b72; background: rgba(248,81,73,.16); color: #ff7b72; }
html[data-theme="dark"] .wq-quiz .wq-feedback { color: #8b949e; }
html[data-theme="dark"] .wq-quiz .wq-feedback.wq-ok { color: #7ee787; }
html[data-theme="dark"] .wq-quiz .wq-feedback.wq-bad { color: #ff7b72; }
html[data-theme="dark"] .wq-quiz button.wq-next { background: #2b93ab; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq-quiz button.wq-next:hover { background: #19768c; }
html[data-theme="dark"] .wq-quiz .wq-count { color: #6db7c7; }
</style>
<div class="wq-quiz">
<div class="wq-badge">🧐 望文生义 · 成语释义二选一</div>
<div class="wq-idiom" id="wq-idiom"></div>
<div class="wq-question">下列选项中，哪一个是这个成语的正确释义？</div>
<div class="wq-options" id="wq-options"></div>
<div class="wq-feedback" id="wq-feedback"></div>
<button class="wq-next" id="wq-next" hidden>下一题 ➡️</button>
<div class="wq-count" id="wq-count"></div>
</div>
<script>
(function () {
  if (!document.getElementById("wq-idiom")) return;
  const idiomEl = document.getElementById("wq-idiom");
  const box = document.getElementById("wq-options");
  const feedback = document.getElementById("wq-feedback");
  const next = document.getElementById("wq-next");
  const countEl = document.getElementById("wq-count");

  function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  // 连续两次不抽同一题
  let last = null;
  function pick(DATA) {
    let e;
    do {
      e = DATA[Math.floor(Math.random() * DATA.length)];
    } while (e === last && DATA.length > 1);
    last = e;
    return e;
  }

  const goodEmojis = ["👍", "🎉", "🌟", "💯", "🏆", "👏"];
  const badEmojis = ["😅", "🤔", "💡", "🙈"];
  function rand(a) { return a[Math.floor(Math.random() * a.length)]; }

  fetch("/wang-wen-sheng-yi/wang-wen-sheng-yi.json", { cache: "no-store" })
    .then(r => { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
    .then(data => {
      const usable = data.filter(
        e => e["成语"] && e["原意"] && e["易错点"] && e["原意"] !== e["易错点"]
      );
      if (!usable.length) {
        idiomEl.textContent = "📭 题库为空";
        countEl.textContent = "JSON 里没有可出的题（每条需含 成语/原意/易错点，且原意不等于易错点）。";
        return;
      }
      countEl.textContent = "📚 题库共 " + data.length + " 条，可出题 " + usable.length + " 条";

      function renderQuestion() {
        const entry = pick(usable);
        idiomEl.textContent = entry["成语"];
        idiomEl.classList.remove("wq-flash");
        void idiomEl.offsetWidth;
        idiomEl.classList.add("wq-flash");

        box.innerHTML = "";
        feedback.className = "wq-feedback";
        feedback.textContent = "";
        next.hidden = true;

        const options = shuffle([
          { text: entry["原意"], correct: true },
          { text: entry["易错点"], correct: false },
        ]);

        let answered = false;
        for (const opt of options) {
          const btn = document.createElement("button");
          btn.className = "wq-opt";
          btn.textContent = opt.text;
          btn.dataset.correct = opt.correct ? "true" : "false";
          btn.addEventListener("click", () => {
            if (answered) return;
            answered = true;
            for (const b of box.children) b.disabled = true;
            for (const b of box.children) {
              if (b.dataset.correct === "true") b.classList.add("wq-correct");
            }
            if (opt.correct) {
              feedback.className = "wq-feedback wq-ok";
              feedback.innerHTML = rand(goodEmojis) + " 回答正确！<br>🔎参见原书编号 " + entry["编号"];
            } else {
              btn.classList.add("wq-wrong");
              for (const b of box.children) {
                if (b !== btn && b.dataset.correct !== "true") b.classList.add("wq-dim");
              }
              feedback.className = "wq-feedback wq-bad";
              feedback.innerHTML = rand(badEmojis) + " 回答错误，选错了释义。<br>🔎参见原书编号 " + entry["编号"];
            }
            next.hidden = false;
          });
          box.appendChild(btn);
        }
      }

      next.addEventListener("click", renderQuestion);
      renderQuestion();
    })
    .catch(err => {
      idiomEl.textContent = "❌ 题库加载失败";
      countEl.textContent = "错误：" + err.message;
    });
})();
</script>
<p>内嵌版直接复用独立页面同款逻辑（随机抽题、防连抽、即时判题、前端换题），数据从站点根目录的 <code>/wang-wen-sheng-yi/wang-wen-sheng-yi.json</code> 实时加载，改题库后无需清缓存。</p>
<h2 id="内嵌网页版独立页面嵌入">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%bd%91%e9%a1%b5%e7%89%88%e7%8b%ac%e7%ab%8b%e9%a1%b5%e9%9d%a2%e5%b5%8c%e5%85%a5"></a>
内嵌网页版：独立页面嵌入
</h2>
  <blockquote class="alert-blockquote important">
    <p class="alert-heading">
      Important
    </p>
    <p><p><strong>这个版本不适合手机等小屏幕。</strong> 独立页面按桌面卡片设计（卡片固定 560px 宽、iframe 固定 600px 高，还有固定在角落的按钮），在小屏上会被挤压甚至溢出，体验很差。手机访问请用上面的<strong>内嵌版</strong>（自适应宽度），或直接打开外链的独立小测页面。</p></p>
  </blockquote>

<p>把独立的页面以 iframe 形式嵌进来，外观是「页面套页面」，自带整页背景色与居中卡片，左上角有「首页」按钮、右上角有「关于」按钮。</p>
<p><strong>释义二选一：</strong></p>
<iframe src="/wang-wen-sheng-yi/quiz.html" loading="lazy" title="望文生义成语小测" style="width:100%;height:600px;border:1px solid #99c2cc;border-radius:12px;background:#fff;"></iframe>

        
        <hr><p>本文2026-08-16首發於<a href='https://www.kuqilin.top/'>Kuqilin's Blog</a>，最後修改於2026-08-16</p><p>本部落格所有文章除特別聲明外，均採用 BY-NC-SA 授權協議。轉載請註明出處！</p>]]>
      </description>
      
        <category>记录</category>
      
    </item>
    
      
    

    <item>
      <title>望文生义 · 成语用法辨析</title>
      <link>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-2/</link>
      <pubDate>Sun, 16 Aug 2026 11:43:32 &#43;0800</pubDate>
      <author>kuqilin@outlook.com (Kuqilin)</author>
      <guid>https://www.kuqilin.top/zh-tw/post/wang-wen-sheng-yi-2/</guid>
      <description>
        <![CDATA[<h1>望文生义 · 成语用法辨析</h1><p>作者：Kuqilin（kuqilin@outlook.com）</p>
        
          <p>释义认得，实战才是真考验。小测随机抽一个成语，给你两句含成语的句子，判断哪句用得<strong>正确</strong>——答完还会给出原意与易错点解析，并标注原书编号。答对/答错即时反馈，换题无刷新。</p>
<p>独立小测页面可以随时打开：</p>
<a href="https://kuqilin.github.io/wang-wen-sheng-yi/quiz1.html" title="成语用法辨析 · 二选一" target="_blank">成语用法辨析 · 二选一</a>
<h2 id="内嵌版直接在文章里玩">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%89%88%e7%9b%b4%e6%8e%a5%e5%9c%a8%e6%96%87%e7%ab%a0%e9%87%8c%e7%8e%a9"></a>
内嵌版：直接在文章里玩
</h2><p>以下小测直接嵌在正文里，和博客共用视觉与深浅色模式，手机上也能自适应宽度正常玩。</p>
<style>
@keyframes wqFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wqPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.wq2-quiz { max-width: 560px; margin: 24px auto; text-align: center; padding: 28px 24px 24px; border: 1px solid #99c2cc; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(25,118,140,.10); font-family: inherit; color: #24292e; }
.wq2-quiz .wq2-badge { font-size: 13px; letter-spacing: 2px; color: #408d9f; margin-bottom: 14px; }
.wq2-quiz .wq2-idiom { font-size: 44px; font-weight: 700; color: #24292e; margin-bottom: 4px; line-height: 1.3; }
.wq2-quiz .wq2-question { font-size: 15px; color: #7d7d7d; margin-bottom: 22px; }
.wq2-quiz .wq2-options { display: flex; flex-direction: column; gap: 12px; }
.wq2-quiz button.wq2-opt { display: block; width: 100%; font-family: inherit; font-size: 15px; line-height: 1.8; text-align: left; padding: 12px 16px; border: 2px solid #99c2cc; border-radius: 10px; background: #fff; color: #24292e; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; box-shadow: none; }
.wq2-quiz button.wq2-opt:hover { border-color: #408d9f; background: #eaf2f5; transform: translateY(-1px); }
.wq2-quiz button.wq2-opt:disabled { cursor: default; transform: none; }
.wq2-quiz button.wq2-opt.wq2-correct { border-color: #22863a; background: #f0fff4; color: #22863a; }
.wq2-quiz button.wq2-opt.wq2-wrong { border-color: #d73a49; background: #ffeef0; color: #d73a49; }
.wq2-quiz button.wq2-opt.wq2-dim { opacity: .55; }
.wq2-quiz .wq2-feedback { margin-top: 18px; font-size: 15px; min-height: 24px; line-height: 1.8; color: #7d7d7d; }
.wq2-quiz .wq2-feedback.wq2-ok { color: #22863a; }
.wq2-quiz .wq2-feedback.wq2-bad { color: #d73a49; }
.wq2-quiz button.wq2-next { margin-top: 16px; font-family: inherit; font-size: 16px; padding: 10px 32px; border: none; border-radius: 10px; background: #19768c; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(25,118,140,.35); }
.wq2-quiz button.wq2-next:hover { background: #00677f; }
.wq2-quiz button.wq2-next[hidden] { display: none; }
.wq2-quiz .wq2-count { margin-top: 18px; font-size: 12px; color: #73abb9; }
.wq2-quiz .wq2-idiom.wq2-flash { animation: wqFadeUp .3s ease; }
.wq2-quiz button.wq2-opt { animation: wqFadeUp .22s ease; }
.wq2-quiz .wq2-feedback.wq2-ok, .wq2-quiz .wq2-feedback.wq2-bad { animation: wqPop .3s ease; }
/* 深色模式：跟随主题 html[data-theme="dark"] */
html[data-theme="dark"] .wq2-quiz { background: #272b30; border-color: #3e7f92; color: #c9d1d9; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq2-quiz .wq2-badge { color: #6db7c7; }
html[data-theme="dark"] .wq2-quiz .wq2-idiom { color: #e6edf3; }
html[data-theme="dark"] .wq2-quiz .wq2-question { color: #8b949e; }
html[data-theme="dark"] .wq2-quiz button.wq2-opt { border-color: #3e7f92; background: #272b30; color: #c9d1d9; }
html[data-theme="dark"] .wq2-quiz button.wq2-opt:hover { border-color: #6db7c7; background: rgba(64,141,159,.18); }
html[data-theme="dark"] .wq2-quiz button.wq2-opt.wq2-correct { border-color: #7ee787; background: rgba(46,160,67,.18); color: #7ee787; }
html[data-theme="dark"] .wq2-quiz button.wq2-opt.wq2-wrong { border-color: #ff7b72; background: rgba(248,81,73,.16); color: #ff7b72; }
html[data-theme="dark"] .wq2-quiz .wq2-feedback { color: #8b949e; }
html[data-theme="dark"] .wq2-quiz .wq2-feedback.wq2-ok { color: #7ee787; }
html[data-theme="dark"] .wq2-quiz .wq2-feedback.wq2-bad { color: #ff7b72; }
html[data-theme="dark"] .wq2-quiz button.wq2-next { background: #2b93ab; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
html[data-theme="dark"] .wq2-quiz button.wq2-next:hover { background: #19768c; }
html[data-theme="dark"] .wq2-quiz .wq2-count { color: #6db7c7; }
</style>
<div class="wq2-quiz">
<div class="wq2-badge">📝 成语用法辨析 · 二选一</div>
<div class="wq2-idiom" id="wq2-idiom"></div>
<div class="wq2-question">下面哪个句子中，这个成语使用得<strong>正确</strong>？</div>
<div class="wq2-options" id="wq2-options"></div>
<div class="wq2-feedback" id="wq2-feedback"></div>
<button class="wq2-next" id="wq2-next" hidden>下一题 ➡️</button>
<div class="wq2-count" id="wq2-count"></div>
</div>
<script>
(async function () {
  if (!document.getElementById("wq2-idiom")) return;
  const idiomEl = document.getElementById("wq2-idiom");
  const box = document.getElementById("wq2-options");
  const feedback = document.getElementById("wq2-feedback");
  const next = document.getElementById("wq2-next");
  const countEl = document.getElementById("wq2-count");

  function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  // 连续两次不抽同一题
  let last = null;
  function pick(DATA) {
    let e;
    do {
      e = DATA[Math.floor(Math.random() * DATA.length)];
    } while (e === last && DATA.length > 1);
    last = e;
    return e;
  }

  const goodEmojis = ["👍", "🎉", "🌟", "💯", "🏆", "👏"];
  const badEmojis = ["😅", "🤔", "💡", "🙈"];
  function rand(a) { return a[Math.floor(Math.random() * a.length)]; }

  // 1. 解析数据（原意/易错点），加载失败不影响出题
  let legacyMap = {};
  try {
    const respLegacy = await fetch("/wang-wen-sheng-yi/wang-wen-sheng-yi.json", { cache: "no-store" });
    if (respLegacy.ok) {
      const legacyData = await respLegacy.json();
      legacyData.forEach(item => {
        if (item["成语"]) {
          legacyMap[item["成语"]] = {
            原意: item["原意"] || "",
            易错点: item["易错点"] || ""
          };
        }
      });
    }
  } catch (e) {
    // 忽略：没有解析也能出题
  }

  // 2. 题目数据
  let data;
  try {
    const resp = await fetch("/wang-wen-sheng-yi/wang-wen-sheng-yi-quiz.json", { cache: "no-store" });
    if (!resp.ok) throw new Error("HTTP " + resp.status);
    data = await resp.json();
  } catch (err) {
    idiomEl.textContent = "❌ 题库加载失败";
    countEl.textContent = "错误：" + err.message;
    return;
  }

  const usable = data.filter(
    e => e["编号"] && e["成语"] && e["正确"] && e["错误"] && e["正确"] !== e["错误"]
  );
  if (!usable.length) {
    idiomEl.textContent = "📭 题库为空";
    countEl.textContent = "JSON 里没有可出的题（每条需含 编号/成语/正确/错误，且正确不等于错误）。";
    return;
  }
  countEl.textContent = "📚 题库共 " + data.length + " 条，可出题 " + usable.length + " 条";

  function renderQuestion() {
    const entry = pick(usable);
    idiomEl.textContent = entry["成语"];
    idiomEl.classList.remove("wq2-flash");
    void idiomEl.offsetWidth;
    idiomEl.classList.add("wq2-flash");

    box.innerHTML = "";
    feedback.className = "wq2-feedback";
    feedback.textContent = "";
    next.hidden = true;

    const options = shuffle([
      { text: entry["正确"], correct: true },
      { text: entry["错误"], correct: false },
    ]);

    const legacy = legacyMap[entry["成语"]] || {};
    const 原意 = legacy["原意"] || "";
    const 易错点 = legacy["易错点"] || "";
    const 编号 = entry["编号"] || "";

    let answered = false;
    for (const opt of options) {
      const btn = document.createElement("button");
      btn.className = "wq2-opt";
      btn.innerHTML = opt.text;
      btn.dataset.correct = opt.correct ? "true" : "false";
      btn.addEventListener("click", () => {
        if (answered) return;
        answered = true;
        for (const b of box.children) b.disabled = true;
        for (const b of box.children) {
          if (b.dataset.correct === "true") b.classList.add("wq2-correct");
        }
        let analysis = "";
        if (原意 || 易错点) {
          analysis = "<br>📝 解析：" + (原意 || "（无原意）") + "<br>⚠️ 易错点：" + (易错点 || "（无易错点）");
        }
        analysis += "<br>🔎 参见原书编号 " + 编号;
        if (opt.correct) {
          feedback.className = "wq2-feedback wq2-ok";
          feedback.innerHTML = rand(goodEmojis) + " 回答正确！" + analysis;
        } else {
          btn.classList.add("wq2-wrong");
          for (const b of box.children) {
            if (b !== btn && b.dataset.correct !== "true") b.classList.add("wq2-dim");
          }
          feedback.className = "wq2-feedback wq2-bad";
          feedback.innerHTML = rand(badEmojis) + " 回答错误，选错了用法。" + analysis;
        }
        next.hidden = false;
      });
      box.appendChild(btn);
    }
  }

  next.addEventListener("click", renderQuestion);
  renderQuestion();
})();
</script>
<p>本小测与《望文生义 · 成语辨析小测》共用解析数据（原意/易错点），答对答错都会给出解析与原书编号，支持深浅色模式。</p>
<h2 id="内嵌网页版独立页面嵌入">
<a class="header-anchor" href="#%e5%86%85%e5%b5%8c%e7%bd%91%e9%a1%b5%e7%89%88%e7%8b%ac%e7%ab%8b%e9%a1%b5%e9%9d%a2%e5%b5%8c%e5%85%a5"></a>
内嵌网页版：独立页面嵌入
</h2>
  <blockquote class="alert-blockquote important">
    <p class="alert-heading">
      Important
    </p>
    <p><p><strong>这个版本不适合手机等小屏幕。</strong> 独立页面按桌面卡片设计（卡片固定 560px 宽、iframe 固定 600px 高，还有固定在角落的按钮），在小屏上会被挤压甚至溢出，体验很差。手机访问请用上面的<strong>内嵌版</strong>（自适应宽度），或直接打开外链的独立小测页面。</p></p>
  </blockquote>

<p>把独立的 <code>quiz1.html</code> 页面以 iframe 形式嵌进来，外观是「页面套页面」，自带整页背景色与居中卡片，左上角有「首页」按钮、右上角有「关于」按钮：</p>
<iframe src="/wang-wen-sheng-yi/quiz1.html" loading="lazy" title="成语用法辨析小测" style="width:100%;height:600px;border:1px solid #99c2cc;border-radius:12px;background:#fff;"></iframe>

        
        <hr><p>本文2026-08-16首發於<a href='https://www.kuqilin.top/'>Kuqilin's Blog</a>，最後修改於2026-08-16</p><p>本部落格所有文章除特別聲明外，均採用 BY-NC-SA 授權協議。轉載請註明出處！</p>]]>
      </description>
      
        <category>记录</category>
      
    </item>
    
  </channel>
</rss>
