SynQuest/example/practice.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!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="Practice page for the Geno example portal. Browse, answer, quiz, and generate questions.">
  <link rel="stylesheet" href="assets/styles.css?v=20260331a">
</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" aria-current="page">答题页</a>
        <a href="./reader.html">Reader</a>
        <a href="https://github.com/Starry-49/SynQuest" target="_blank" rel="noreferrer">GitHub</a>
      </div>
    </nav>

    <section class="hero hero-practice">
      <div class="hero-grid">
        <div class="hero-home-copy">
          <div class="hero-eyebrow">
            <img src="../logo.png" alt="Geno logo">
            <span>Practice Workspace</span>
          </div>
          <h1>Geno题库练习与生成</h1>
          <p class="hero-copy">
            在这里可以完成题库筛选、在线作答、抽题测试，以及基于知识模块扩展新题。
          </p>
          <div class="hero-actions">
            <button class="button button-primary" id="startQuizButton">开始测试</button>
            <button class="button button-secondary" id="generateButton">生成示例新题</button>
          </div>
        </div>

        <div class="hero-home-aside hero-kpi-grid">
          <article class="hero-kpi">
            <span class="label">Answer</span>
            <span class="value">Local</span>
            <h3>浏览器内答题</h3>
            <p class="panel-subtitle">每道题都可以直接作答、提交和查看解析，记录保存在本地浏览器中。</p>
          </article>
          <article class="hero-kpi">
            <span class="label">Quiz</span>
            <span class="value">Random</span>
            <h3>抽题连续练习</h3>
            <p class="panel-subtitle">从当前筛选结果里抽取指定数量题目，进入独立测试模式。</p>
          </article>
          <article class="hero-kpi">
            <span class="label">Generate</span>
            <span class="value">KB</span>
            <h3>知识模块扩题</h3>
            <p class="panel-subtitle">把知识库里的事实转成新题，先在前端验证，再导出为 JSON。</p>
          </article>
        </div>
      </div>

      <div class="stats-grid stats-grid-wide">
        <div class="stat-tile"><span class="value" id="statQuestionCount">--</span><span class="label">示例题量</span></div>
        <div class="stat-tile"><span class="value" id="statKnowledgeCount">--</span><span class="label">知识模块</span></div>
        <div class="stat-tile"><span class="value" id="statGeneratedCount">--</span><span class="label">生成题总量</span></div>
        <div class="stat-tile"><span class="value" id="statFilteredCount">--</span><span class="label">当前筛选</span></div>
        <div class="stat-tile"><span class="value" id="statAnsweredCount">--</span><span class="label">已作答</span></div>
        <div class="stat-tile"><span class="value" id="statCorrectCount">--</span><span class="label">答对数</span></div>
        <div class="stat-tile"><span class="value" id="statImageCount">--</span><span class="label">图片题</span></div>
      </div>
    </section>

    <section class="section-panel workspace-guide">
      <div class="section-title">
        <div>
          <h2>工作区</h2>
          <p class="panel-subtitle">按任务切换当前面板，聚焦筛题、测验或生成。</p>
        </div>
      </div>
      <div class="guide-strip">
        <button class="button button-secondary workspace-switch active" data-tab-target="filters" data-scroll-target="workspaceTop">1. 筛题</button>
        <button class="button button-secondary workspace-switch" data-tab-target="quiz" data-scroll-target="workspaceTop">2. 测验</button>
        <button class="button button-secondary workspace-switch" data-tab-target="generator" data-scroll-target="workspaceTop">3. 生成</button>
        <button class="button button-tertiary workspace-jump" data-scroll-target="knowledgeSection">知识模块</button>
        <button class="button button-tertiary workspace-jump" data-scroll-target="bankSection">题库结果</button>
      </div>
    </section>

    <section class="workspace-shell">
      <aside class="workspace-sidebar" id="workspaceTop">
        <article class="panel tabbed-panel" data-tab-panel="filters" id="filterPanel">
          <div class="panel-title">
            <div>
              <h2>筛选器</h2>
              <p class="panel-subtitle">按来源、主题、题型和关键词快速定位题目。</p>
            </div>
          </div>
          <div class="field">
            <label for="searchInput">关键词</label>
            <input id="searchInput" class="text-input" type="text" placeholder="例如：HMM、BLAST、组装">
          </div>
          <div class="field">
            <label>来源</label>
            <div id="sourceFilterList" class="chip-group"></div>
          </div>
          <div class="field">
            <label for="topicSelect">主题</label>
            <select id="topicSelect" class="select-input"></select>
          </div>
          <div class="field">
            <label for="typeSelect">题型</label>
            <select id="typeSelect" class="select-input"></select>
          </div>
        </article>

        <article class="panel tabbed-panel hidden" data-tab-panel="quiz" id="quizPanel">
          <div class="panel-title">
            <div>
              <h2>抽题测试</h2>
              <p class="panel-subtitle">从当前筛选结果中抽取一组题目，进入连续测试。</p>
            </div>
          </div>
          <div class="field">
            <label for="quizCount">抽题数量</label>
            <input id="quizCount" class="number-input" type="number" min="1" max="30" value="10">
          </div>
          <div class="panel-actions">
            <button class="button button-secondary" id="randomBrowseButton">随机浏览</button>
            <button class="button button-primary" id="startQuizButtonAside">开始测验</button>
          </div>
          <div class="callout">
            如果你只是想逐题查看，也可以直接在下方题卡内作答，不必进入测验模式。
          </div>
        </article>

        <article class="panel tabbed-panel hidden" data-tab-panel="generator" id="generatorPanel">
          <div class="panel-title">
            <div>
              <h2>知识驱动生成</h2>
              <p class="panel-subtitle">从示例知识模块出题，先扩展当前浏览器会话，再决定是否导出。</p>
            </div>
          </div>
          <div class="field">
            <label for="generatorModule">知识模块</label>
            <select id="generatorModule" class="select-input"></select>
          </div>
          <div class="field">
            <label for="generatorCount">生成数量</label>
            <input id="generatorCount" class="number-input" type="number" min="1" max="12" value="4">
          </div>
          <div class="panel-actions">
            <button class="button button-primary" id="generateButtonAside">生成并加入</button>
            <button class="button button-secondary" id="exportButton">导出新题</button>
            <button class="button button-secondary" id="clearGeneratedButton">清空生成题</button>
            <button class="button button-tertiary" id="clearAnswerButton">清空答题记录</button>
          </div>
        </article>
      </aside>

      <section class="workspace-main">
        <section class="section-panel" id="knowledgeSection">
          <div class="section-title">
            <div>
              <h2>知识模块</h2>
              <p class="panel-subtitle">当前模块：<strong id="activeModuleLabel">全部知识模块</strong></p>
            </div>
          </div>
          <div id="knowledgeList" class="knowledge-list knowledge-list-wide"></div>
        </section>

        <section class="quiz-shell hidden" id="quizShell"></section>

        <section class="section-panel" id="bankSection">
          <div class="section-title section-title-stack">
            <div>
              <h2 id="resultHeadline">题库浏览</h2>
              <p class="panel-subtitle">标准题库与当前浏览器会话中的本地生成题会在这里统一呈现。</p>
            </div>
            <div class="badge-row">
              <span class="tag tag-brand">Answerable</span>
              <span class="tag tag-accent">Generated</span>
            </div>
          </div>
          <div id="questionList" class="question-list"></div>
        </section>
      </section>
    </section>
  </main>

  <script src="assets/synquest-browser.js?v=20260328d"></script>
  <script src="assets/app.js?v=20260331c"></script>
  <script>
    document.getElementById("startQuizButtonAside").addEventListener("click", () => {
      document.getElementById("startQuizButton").click();
    });
    document.getElementById("generateButtonAside").addEventListener("click", () => {
      document.getElementById("generateButton").click();
    });

    const activateWorkspaceTab = (tabName) => {
      document.querySelectorAll(".workspace-switch").forEach((button) => {
        button.classList.toggle("active", button.dataset.tabTarget === tabName);
      });
      document.querySelectorAll(".tabbed-panel").forEach((panel) => {
        panel.classList.toggle("hidden", panel.dataset.tabPanel !== tabName);
      });
    };

    document.querySelectorAll(".workspace-switch").forEach((button) => {
      button.addEventListener("click", () => {
        activateWorkspaceTab(button.dataset.tabTarget);
        const target = document.getElementById(button.dataset.scrollTarget);
        if (target) {
          target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      });
    });

    document.querySelectorAll(".workspace-jump").forEach((button) => {
      button.addEventListener("click", () => {
        const target = document.getElementById(button.dataset.scrollTarget);
        if (target) {
          target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      });
    });
  </script>
</body>
</html>