SynQuest/example/reader.html at main · Starry-49/SynQuest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Geno知识阅读</title>
  <meta name="description" content="Reader page for the Geno example portal. Read knowledge modules and linked questions.">
  <link rel="stylesheet" href="assets/styles.css?v=20260328f">
</head>
<body>
  <main class="page-shell">
    <nav class="page-nav">
      <a class="nav-brand" href="./">
        <img src="../logo.png" alt="Geno logo">
        <span>Geno</span>
      </a>
      <div class="nav-links">
        <a href="./">首页</a>
        <a href="./practice.html">答题页</a>
        <a href="./reader.html" aria-current="page">Reader</a>
        <a href="https://github.com/Starry-49/SynQuest" target="_blank" rel="noreferrer">GitHub</a>
      </div>
    </nav>

    <section class="hero hero-reader reader-hero">
      <div class="hero-grid">
        <div class="hero-home-copy">
          <div class="hero-eyebrow">
            <img src="../logo.png" alt="Geno logo">
            <span>Knowledge Reader</span>
          </div>
          <h1 id="readerTitle">Geno知识阅读</h1>
          <p class="hero-copy" id="readerSubtitle">
            围绕知识模块组织阅读，查看事实、关联题目与答案解析。
          </p>
        </div>

        <div class="hero-home-aside hero-kpi-grid">
          <article class="hero-kpi">
            <span class="label">Read</span>
            <span class="value">Module</span>
            <h3>知识模块阅读</h3>
            <p class="panel-subtitle">先看概念、事实和关键词，再决定是否继续看题。</p>
          </article>
          <article class="hero-kpi">
            <span class="label">Map</span>
            <span class="value">Question</span>
            <h3>题目映射</h3>
            <p class="panel-subtitle">快速定位该模块对应的示例题、答案解析与相关图像。</p>
          </article>
          <article class="hero-kpi">
            <span class="label">Trace</span>
            <span class="value">KB</span>
            <h3>回到知识源</h3>
            <p class="panel-subtitle">Reader 适合做教学内容校对，也适合检查知识库是否足以支撑题目生成。</p>
          </article>
        </div>
      </div>
    </section>

    <section class="reader-layout">
      <aside class="reader-sidebar">
        <section class="panel">
          <div class="panel-title">
            <div>
              <h2>知识模块</h2>
              <p class="panel-subtitle">切换当前阅读模块。</p>
            </div>
          </div>
          <div id="moduleTree" class="tree-list"></div>
        </section>

        <section class="panel">
          <div class="panel-title">
            <div>
              <h2>关联题目</h2>
              <p class="panel-subtitle">浏览当前模块下的题目详情。</p>
            </div>
          </div>
          <div id="questionTree" class="tree-list"></div>
        </section>
      </aside>

      <section class="reader-main">
        <section class="section-panel">
          <div id="readerContent"></div>
        </section>
      </section>
    </section>
  </main>

  <script src="assets/reader.js?v=20260328e"></script>
</body>
</html>