npm - @arcaneorion/dsh-teaching-board - Versions diffs - 0.4.1 → 0.5.1 - Mend

@arcaneorion/dsh-teaching-board 0.4.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/skills/stage-panel/submode/learn/templates/lesson.html ADDED Viewed

@@ -0,0 +1,782 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LocalWeb Learn</title>
+<style>
+  :root {
+    color-scheme: light;
+    --line: #07111b;
+    --base: #31566e;
+    --deck: #2e4f67;
+    --panel: #fff8d6;
+    --paper: #ffffff;
+    --yellow: #ffd43b;
+    --cyan: #35d8ff;
+    --orange: #ffb454;
+    --green: #9ee493;
+    --red: #ff7b7b;
+    --muted: #586875;
+    --ink: #142331;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; min-height: 100%; }
+  body {
+    background:
+      linear-gradient(135deg, rgba(53,216,255,.12), transparent 38%),
+      repeating-linear-gradient(90deg, rgba(7,17,27,.08) 0 1px, transparent 1px 56px),
+      repeating-linear-gradient(0deg, rgba(7,17,27,.07) 0 1px, transparent 1px 56px),
+      var(--base);
+    color: var(--ink);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  button, textarea, input { font: inherit; }
+  .app {
+    min-height: 100vh;
+    padding: clamp(14px, 2.5vw, 28px);
+  }
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 16px;
+    align-items: end;
+    border: 4px solid var(--line);
+    background: var(--panel);
+    box-shadow: 8px 8px 0 var(--line);
+    padding: clamp(18px, 3vw, 30px);
+  }
+  .eyebrow {
+    display: inline-flex;
+    width: fit-content;
+    border: 3px solid var(--line);
+    background: var(--yellow);
+    padding: 6px 10px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    font-weight: 900;
+    text-transform: uppercase;
+  }
+  h1 {
+    margin: 14px 0 8px;
+    font-size: clamp(34px, 5.5vw, 72px);
+    line-height: .95;
+    letter-spacing: 0;
+  }
+  .subtitle {
+    max-width: 78ch;
+    margin: 0;
+    color: #263b4a;
+    font-size: clamp(15px, 1.8vw, 19px);
+    line-height: 1.55;
+  }
+  .stage {
+    border: 3px solid var(--line);
+    background: var(--deck);
+    color: var(--panel);
+    min-width: 170px;
+    padding: 14px;
+    box-shadow: 5px 5px 0 var(--line);
+  }
+  .stage span {
+    display: block;
+    color: var(--yellow);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+    font-weight: 900;
+    text-transform: uppercase;
+  }
+  .stage strong { display: block; margin-top: 8px; font-size: 18px; line-height: 1.2; }
+  .layout {
+    display: grid;
+    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.35fr);
+    gap: 18px;
+    margin-top: 18px;
+  }
+  .stack { display: grid; gap: 18px; align-content: start; }
+  .card {
+    border: 4px solid var(--line);
+    background: var(--panel);
+    box-shadow: 7px 7px 0 var(--line);
+    padding: 16px;
+  }
+  .card h2 {
+    margin: 0 0 12px;
+    font-size: 19px;
+    line-height: 1.2;
+  }
+  .summary {
+    margin: 0;
+    color: #223746;
+    line-height: 1.6;
+  }
+  .objectives {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .objectives li {
+    display: grid;
+    grid-template-columns: 26px 1fr;
+    gap: 8px;
+    align-items: start;
+    border: 2px solid var(--line);
+    background: var(--paper);
+    padding: 9px;
+    line-height: 1.45;
+  }
+  .objectives b {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--line);
+    background: var(--cyan);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+  }
+  .concepts {
+    display: grid;
+    gap: 10px;
+  }
+  .concept {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-height: 148px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    text-align: left;
+    perspective: 900px;
+    cursor: pointer;
+  }
+  .concept:focus-visible {
+    outline: 4px solid var(--cyan);
+    outline-offset: 3px;
+  }
+  .concept-inner {
+    position: relative;
+    display: grid;
+    width: 100%;
+    min-height: 148px;
+    transform-style: preserve-3d;
+    transition: transform .28s ease;
+  }
+  .concept.is-flipped .concept-inner { transform: rotateY(180deg); }
+  .concept-face {
+    grid-area: 1 / 1;
+    width: 100%;
+    min-height: 148px;
+    display: grid;
+    align-content: start;
+    gap: 8px;
+    border: 3px solid var(--line);
+    background: var(--paper);
+    padding: 12px;
+    backface-visibility: hidden;
+    box-shadow: 4px 4px 0 var(--line);
+  }
+  .concept-back {
+    background: #e8f8ff;
+    transform: rotateY(180deg);
+  }
+  .concept strong { display: block; font-size: 18px; }
+  .concept p { margin: 0; line-height: 1.55; }
+  .concept small { color: var(--muted); line-height: 1.45; }
+  .flip-hint {
+    align-self: end;
+    width: fit-content;
+    border: 2px solid var(--line);
+    background: var(--yellow);
+    padding: 2px 6px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    font-weight: 900;
+  }
+  .map {
+    position: relative;
+  }
+  .logic-map {
+    display: grid;
+    gap: 8px;
+    padding: 20px;
+    border: 3px solid var(--line);
+    background:
+      linear-gradient(90deg, rgba(7,17,27,.06) 1px, transparent 1px),
+      linear-gradient(0deg, rgba(7,17,27,.06) 1px, transparent 1px),
+      rgba(255,255,255,.55);
+    background-size: 28px 28px;
+  }
+  .logic-ascii {
+    margin: 0;
+    min-height: 260px;
+    border: 3px solid var(--line);
+    background:
+      linear-gradient(90deg, rgba(7,17,27,.06) 1px, transparent 1px),
+      linear-gradient(0deg, rgba(7,17,27,.06) 1px, transparent 1px),
+      rgba(255,255,255,.65);
+    background-size: 28px 28px;
+    color: var(--line);
+    padding: 20px;
+    overflow: auto;
+    white-space: pre;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: clamp(13px, 1.2vw, 16px);
+    font-weight: 800;
+    line-height: 1.65;
+  }
+  .logic-node {
+    display: grid;
+    gap: 7px;
+    width: min(100%, 560px);
+    border: 3px solid var(--line);
+    background: var(--paper);
+    padding: 12px;
+    box-shadow: 5px 5px 0 var(--line);
+  }
+  .logic-node.current { background: var(--yellow); }
+  .logic-node.next { background: #dff7ff; }
+  .logic-node.prerequisite { background: #f4f0df; }
+  .logic-node.warning { background: #ffe0d4; }
+  .node-top {
+    display: grid;
+    gap: 7px;
+    align-items: start;
+  }
+  .logic-node b { font-size: 17px; }
+  .tag {
+    border: 2px solid var(--line);
+    background: var(--deck);
+    color: var(--panel);
+    padding: 2px 6px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    white-space: nowrap;
+    width: fit-content;
+  }
+  .logic-node p { margin: 0; color: #273b49; line-height: 1.45; }
+  .logic-arrow {
+    display: grid;
+    grid-template-columns: 34px minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    width: min(100%, 560px);
+    min-height: 46px;
+    color: var(--line);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-weight: 900;
+  }
+  .logic-arrow-mark {
+    display: grid;
+    place-items: center;
+    font-size: 28px;
+  }
+  .logic-arrow-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    font-size: 12px;
+  }
+  .logic-arrow-label::before,
+  .logic-arrow-label::after {
+    content: "";
+    height: 3px;
+    flex: 1;
+    min-width: 12px;
+    background: var(--line);
+  }
+  .logic-arrow-label span {
+    border: 2px solid var(--line);
+    background: var(--panel);
+    color: var(--line);
+    padding: 3px 7px;
+    white-space: nowrap;
+    text-align: center;
+  }
+  .examples {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+  .example {
+    border: 3px solid var(--line);
+    background: var(--paper);
+    padding: 12px;
+  }
+  .example[data-type="nonexample"],
+  .example[data-type="counterexample"] { background: #ffe6dc; }
+  .example[data-type="worked"] { background: #e8f8ff; }
+  .example h3 { margin: 0 0 8px; font-size: 17px; }
+  .example p { margin: 0; white-space: pre-wrap; line-height: 1.55; }
+  .questions {
+    display: grid;
+    gap: 12px;
+  }
+  .question {
+    border: 3px solid var(--line);
+    background: var(--paper);
+    padding: 12px;
+  }
+  .question h3 {
+    margin: 0 0 10px;
+    font-size: 16px;
+    line-height: 1.35;
+  }
+  textarea {
+    width: 100%;
+    min-height: 88px;
+    resize: vertical;
+    border: 3px solid var(--line);
+    background: #fffdf2;
+    color: var(--ink);
+    padding: 10px;
+    line-height: 1.45;
+  }
+  .option {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    margin: 8px 0;
+    line-height: 1.35;
+  }
+  .option input { margin-top: 3px; }
+  .hint {
+    margin: 8px 0 0;
+    color: var(--muted);
+    font-size: 13px;
+    line-height: 1.45;
+  }
+  .next-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+  .next-item {
+    border: 3px solid var(--line);
+    background: var(--paper);
+    color: inherit;
+    padding: 10px;
+    text-align: left;
+    cursor: pointer;
+    box-shadow: 4px 4px 0 var(--line);
+    transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
+  }
+  .next-item:hover,
+  .next-item:focus-visible {
+    background: #e8f8ff;
+    transform: translate(-2px, -2px);
+    box-shadow: 6px 6px 0 var(--line);
+  }
+  .next-item.is-selected {
+    background: var(--yellow);
+    transform: translate(3px, 3px);
+    box-shadow: 1px 1px 0 var(--line);
+  }
+  .next-item strong { display: block; margin-bottom: 6px; }
+  .next-item p { margin: 0; color: #354b59; font-size: 14px; line-height: 1.45; }
+  .submit {
+    display: grid;
+    gap: 10px;
+  }
+  .submit-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 150px;
+    gap: 10px;
+  }
+  .confidence {
+    border: 3px solid var(--line);
+    background: var(--paper);
+    padding: 10px;
+  }
+  .confidence label {
+    display: block;
+    font-size: 13px;
+    font-weight: 800;
+    margin-bottom: 8px;
+  }
+  .confidence input { width: 100%; }
+  .send {
+    border: 4px solid var(--line);
+    background: var(--yellow);
+    color: var(--line);
+    padding: 12px 14px;
+    font-weight: 900;
+    box-shadow: 5px 5px 0 var(--line);
+    cursor: pointer;
+  }
+  .send:disabled {
+    cursor: not-allowed;
+    opacity: .62;
+    box-shadow: none;
+    transform: translate(3px, 3px);
+  }
+  .sent {
+    border: 3px solid var(--line);
+    background: var(--green);
+    padding: 10px;
+    display: none;
+    line-height: 1.4;
+  }
+  .sent.is-visible { display: block; }
+  .empty {
+    border: 3px dashed rgba(7,17,27,.45);
+    padding: 12px;
+    color: #445663;
+    background: rgba(255,255,255,.35);
+  }
+  @media (max-width: 860px) {
+    .hero, .layout, .submit-row { grid-template-columns: 1fr; }
+    .stage { min-width: 0; }
+    .examples, .next-grid { grid-template-columns: 1fr; }
+    .logic-node,
+    .logic-arrow { width: 100%; }
+  }
+</style>
+</head>
+<body>
+<div class="app">
+  <header class="hero">
+    <div>
+      <div class="eyebrow">LocalWeb Learn</div>
+      <h1 id="title">学习面板</h1>
+      <p class="subtitle" id="subtitle"></p>
+    </div>
+    <div class="stage">
+      <span>Stage</span>
+      <strong id="stage">Concept</strong>
+    </div>
+  </header>
+  <main class="layout">
+    <div class="stack">
+      <section class="card">
+        <h2>本轮目标</h2>
+        <p class="summary" id="summary"></p>
+        <ul class="objectives" id="objectives"></ul>
+      </section>
+      <section class="card">
+        <h2>概念卡</h2>
+        <div class="concepts" id="concepts"></div>
+      </section>
+    </div>
+    <div class="stack">
+      <section class="card">
+        <h2>结构图解</h2>
+        <div class="map" id="map"></div>
+      </section>
+      <section class="card">
+        <h2>例子与边界</h2>
+        <div class="examples" id="examples"></div>
+      </section>
+      <section class="card">
+        <h2>问答训练</h2>
+        <div class="questions" id="questions"></div>
+      </section>
+      <section class="card">
+        <h2>下一步</h2>
+        <div class="next-grid" id="next"></div>
+      </section>
+      <section class="card submit" id="submit-card">
+        <h2>发送到 CLI</h2>
+        <div class="submit-row">
+          <textarea id="confusion" placeholder="还有哪里不确定？可以留空。"></textarea>
+          <div class="confidence">
+            <label for="confidence">信心分数 <span id="confidence-value">3</span>/5</label>
+            <input id="confidence" type="range" min="1" max="5" value="3">
+          </div>
+        </div>
+        <button class="send" id="send">提交回答</button>
+        <div class="sent" id="sent">已发送到 CLI 等待队列。回到终端继续。</div>
+      </section>
+    </div>
+  </main>
+</div>
+<script id="lesson-data" type="application/json">__LOCALWEB_LESSON_DATA__</script>
+<script>
+const lesson = JSON.parse(document.getElementById('lesson-data').textContent);
+const inputId = "__LOCALWEB_INPUT_ID__";
+const interactive = __LOCALWEB_INTERACTIVE__;
+const panelId = "__LOCALWEB_PANEL_ID__";
+let selectedNext = null;
+function text(value, fallback = '') {
+  return value == null ? fallback : String(value);
+}
+function esc(value) {
+  return text(value).replace(/[&<>"']/g, (ch) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+  }[ch]));
+}
+function list(value) {
+  return Array.isArray(value) ? value : [];
+}
+function byId(id) {
+  return document.getElementById(id);
+}
+function renderBasics() {
+  byId('title').textContent = text(lesson.title, '学习面板');
+  byId('subtitle').textContent = text(lesson.subtitle, '');
+  byId('stage').textContent = text(lesson.stage, 'Concept');
+  byId('summary').textContent = text(lesson.summary, '暂无摘要。');
+  const objectives = list(lesson.objectives);
+  byId('objectives').innerHTML = objectives.length
+    ? objectives.map((item, index) => `<li><b>${index + 1}</b><span>${esc(item)}</span></li>`).join('')
+    : '<li><b>1</b><span>理解当前知识点，并暴露真实卡点。</span></li>';
+}
+function renderConcepts() {
+  const concepts = list(lesson.concepts);
+  byId('concepts').innerHTML = concepts.length
+    ? concepts.map((item) => {
+      const back = item.back || item.detail || item.note || '把这个概念放回当前问题里，检查它承担的是目标、手段还是桥梁。';
+      return `<button class="concept" type="button" aria-pressed="false">
+        <span class="concept-inner">
+          <span class="concept-face concept-front">
+            <strong>${esc(item.term || '概念')}</strong>
+            <p>${esc(item.definition || '')}</p>
+            <span class="flip-hint">点击翻面</span>
+          </span>
+          <span class="concept-face concept-back">
+            <strong>${esc(item.term || '概念')}：补充视角</strong>
+            <p>${esc(back)}</p>
+            ${item.note && item.note !== back ? `<small>${esc(item.note)}</small>` : ''}
+            <span class="flip-hint">点击返回</span>
+          </span>
+        </span>
+      </button>`;
+    }).join('')
+    : '<div class="empty">暂无概念卡。</div>';
+}
+function renderMap() {
+  const structure = lesson.structure && typeof lesson.structure === 'object' ? lesson.structure : {};
+  const diagram = text(structure.diagram).trim();
+  if (diagram) {
+    byId('map').innerHTML = `<pre class="logic-ascii">${esc(diagram)}</pre>`;
+    return;
+  }
+  const nodes = list(structure.nodes);
+  const edges = list(structure.edges);
+  if (!nodes.length) {
+    byId('map').innerHTML = '<div class="empty">暂无结构节点。</div>';
+    return;
+  }
+  const nodeKey = (node, fallbackId = 'node') => text(node.id || node.label || fallbackId);
+  const nodeMap = new Map(nodes.map((node, index) => [
+    nodeKey(node, `node-${index}`),
+    node,
+  ]));
+  const nodeCard = (node, fallbackId = 'node') => `<article class="logic-node ${esc(node.kind || '')}" data-node-id="${esc(nodeKey(node, fallbackId))}">
+      <div class="node-top">
+        <b>${esc(node.label || node.id || '节点')}</b>
+        <span class="tag">${esc(node.kind || 'node')}</span>
+      </div>
+      ${node.detail ? `<p>${esc(node.detail)}</p>` : ''}
+    </article>`;
+  let rows = '';
+  if (edges.length) {
+    const connectedNodeIds = new Set();
+    rows = edges.map((edge, index) => {
+      const fromId = text(edge.from);
+      const toId = text(edge.to);
+      if (fromId) connectedNodeIds.add(fromId);
+      if (toId) connectedNodeIds.add(toId);
+      const fromNode = nodeMap.get(fromId) || { id: fromId, label: fromId, kind: 'support' };
+      const toNode = nodeMap.get(toId) || { id: toId, label: toId, kind: 'support' };
+      const shouldShowFrom = index === 0 || text(edges[index - 1]?.to) !== fromId;
+      return `${shouldShowFrom ? nodeCard(fromNode, fromId) : ''}
+        <div class="logic-arrow" data-from="${esc(fromId)}" data-to="${esc(toId)}">
+          <div class="logic-arrow-mark">↓</div>
+          <div class="logic-arrow-label"><span>${esc(edge.label || '推出')}</span></div>
+        </div>
+        ${nodeCard(toNode, toId)}`;
+    }).join('');
+    const unconnectedRows = nodes
+      .filter((node, index) => !connectedNodeIds.has(nodeKey(node, `node-${index}`)))
+      .map((node, index) => nodeCard(node, `unconnected-${index}`))
+      .join('');
+    rows = `${rows}${unconnectedRows}`;
+  } else {
+    rows = nodes.map((node, index) => nodeCard(node, `node-${index}`)).join('');
+  }
+  byId('map').innerHTML = `<div class="logic-map">${rows}</div>`;
+}
+function renderExamples() {
+  const examples = list(lesson.examples);
+  byId('examples').innerHTML = examples.length
+    ? examples.map((item) => `<article class="example" data-type="${esc(item.type || 'example')}">
+        <h3>${esc(item.title || '例子')}</h3>
+        <p>${esc(item.body || '')}</p>
+      </article>`).join('')
+    : '<div class="empty">暂无例子。</div>';
+}
+function questionHtml(question, index) {
+  const qid = text(question.id, `q${index + 1}`).replace(/[^A-Za-z0-9_-]/g, '-');
+  const qtype = text(question.type, 'short');
+  let control = '';
+  if (qtype === 'choice') {
+    const options = list(question.options);
+    control = options.length
+      ? options.map((option) => `<label class="option">
+          <input type="radio" name="${esc(qid)}" value="${esc(option.id || option.label || '')}">
+          <span>${esc(option.label || option.id || '')}</span>
+        </label>`).join('')
+      : '<div class="empty">这个选择题还没有选项。</div>';
+  } else {
+    control = `<textarea data-answer="${esc(qid)}" placeholder="先写你的当前理解，CLI 会负责审计。"></textarea>`;
+  }
+  return `<article class="question" data-question-id="${esc(qid)}" data-question-type="${esc(qtype)}">
+    <h3>${index + 1}. ${esc(question.prompt || '问题')}</h3>
+    ${control}
+    ${question.hint ? `<p class="hint">提示：${esc(question.hint)}</p>` : ''}
+  </article>`;
+}
+function renderQuestions() {
+  const questions = list(lesson.questions);
+  byId('questions').innerHTML = questions.length
+    ? questions.map(questionHtml).join('')
+    : '<div class="empty">暂无问答训练。本面板可作为纯展示材料。</div>';
+  if (!interactive) {
+    byId('submit-card').style.display = 'none';
+  }
+}
+function renderNext() {
+  const next = list(lesson.next);
+  byId('next').innerHTML = next.length
+    ? next.map((item) => `<button class="next-item" type="button" data-next-id="${esc(item.id || item.label || '')}" aria-pressed="false">
+        <strong>${esc(item.label || item.id || '下一步')}</strong>
+        <p>${esc(item.description || '')}</p>
+      </button>`).join('')
+    : '<div class="empty">暂无下一步建议。</div>';
+}
+function bindConceptCards() {
+  document.querySelectorAll('.concept').forEach((card) => {
+    card.addEventListener('click', () => {
+      const flipped = !card.classList.contains('is-flipped');
+      card.classList.toggle('is-flipped', flipped);
+      card.setAttribute('aria-pressed', flipped ? 'true' : 'false');
+    });
+  });
+}
+function bindNextCards() {
+  byId('next').addEventListener('click', (event) => {
+    const card = event.target.closest('.next-item');
+    if (!card) return;
+    document.querySelectorAll('.next-item').forEach((item) => {
+      item.classList.remove('is-selected');
+      item.setAttribute('aria-pressed', 'false');
+    });
+    card.classList.add('is-selected');
+    card.setAttribute('aria-pressed', 'true');
+    selectedNext = {
+      id: card.dataset.nextId || '',
+      label: card.querySelector('strong')?.textContent || '',
+      description: card.querySelector('p')?.textContent || '',
+    };
+  });
+}
+function collectAnswers() {
+  const rows = [];
+  document.querySelectorAll('.question').forEach((card) => {
+    const id = card.dataset.questionId || '';
+    const type = card.dataset.questionType || 'short';
+    const prompt = card.querySelector('h3')?.textContent || id;
+    let answer = '';
+    if (type === 'choice') {
+      const checked = card.querySelector('input[type="radio"]:checked');
+      answer = checked ? checked.value : '';
+    } else {
+      answer = card.querySelector('textarea')?.value.trim() || '';
+    }
+    rows.push({ id, type, prompt, answer });
+  });
+  return rows;
+}
+function markdownPayload() {
+  const answers = collectAnswers();
+  const confidence = byId('confidence').value;
+  const confusion = byId('confusion').value.trim();
+  const lines = [
+    `# Learn 回答：${text(lesson.title, '学习面板')}`,
+    '',
+    `- lesson_id: ${text(lesson.id, '')}`,
+    `- stage: ${text(lesson.stage, '')}`,
+    `- confidence: ${confidence}/5`,
+    `- selected_next: ${selectedNext ? selectedNext.id : ''}`,
+    '',
+    '## Answers',
+  ];
+  answers.forEach((item) => {
+    lines.push('', `### ${item.id}`, '', `- type: ${item.type}`, `- prompt: ${item.prompt}`, '', item.answer ? item.answer : '_未作答_');
+  });
+  lines.push('', '## Selected Next', '', selectedNext ? `- ${selectedNext.label}: ${selectedNext.description}` : '_未选择_');
+  lines.push('', '## Confusion', '', confusion ? confusion : '_无_');
+  return lines.join('\n');
+}
+function bindSubmit() {
+  const confidence = byId('confidence');
+  confidence.addEventListener('input', () => {
+    byId('confidence-value').textContent = confidence.value;
+  });
+  byId('send').addEventListener('click', () => {
+    const payload = markdownPayload();
+    window.parent.postMessage({
+      localweb: true,
+      type: 'panel_input',
+      input_id: inputId,
+      text: payload,
+      label: 'learn answers',
+      panel_id: panelId,
+      meta: {
+        mode: 'learn',
+        lesson_id: text(lesson.id, ''),
+        stage: text(lesson.stage, ''),
+      },
+    }, '*');
+    byId('send').disabled = true;
+    byId('sent').classList.add('is-visible');
+  });
+}
+renderBasics();
+renderConcepts();
+renderMap();
+renderExamples();
+renderQuestions();
+renderNext();
+bindConceptCards();
+bindNextCards();
+bindSubmit();
+</script>
+</body>
+</html>