gojuon/index.html at main · shkao/gojuon · 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
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#faf5e6">
<meta name="description" content="從漢字字源與台味諧音口訣學日語五十音:間隔重複複習、限時速答、字源翻卡、配對與測驗。">
<title>五十音不靠背 · 學習遊戲</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app">
  <div class="appbar">
    <img src="assets/img/hero.jpg" alt="浮世繪虎斑貓" onerror="this.style.display='none'">
    <div>
      <div class="t1">五十音<span>不靠背</span></div>
      <div class="t2">字源 × 諧音 × 科學複習</div>
    </div>
    <button class="spk-test" id="spkTest" title="測試發音">🔊</button>
  </div>

  <!-- 分頁列:手機固定底部,桌機移至頂部 -->
  <div class="tabbar">
    <button data-panel="table" class="active"><span class="ico">表</span>五十音表</button>
    <button data-panel="flash"><span class="ico">源</span>字源翻卡</button>
    <button data-panel="match"><span class="ico">合</span>配對</button>
    <button data-panel="train"><span class="ico">練</span>練功</button>
    <button data-panel="quiz"><span class="ico">試</span>測驗</button>
  </div>

  <main>
    <!-- 五十音表 -->
    <section id="table" class="panel active">
      <div class="chips" id="setChips">
        <button data-set="seion" class="on">清音</button>
        <button data-set="dakuon">濁音</button>
        <button data-set="handakuon">半濁音</button>
        <button data-set="yoon">拗音</button>
      </div>
      <div class="mode-toggle">
        <button id="hiraBtn" class="on">平假名</button><button id="kataBtn">片假名</button>
      </div>
      <div class="legend">熟練度
        <span><i class="lv-1"></i>初學</span>
        <span><i class="lv-2"></i>練習中</span>
        <span><i class="lv-3"></i>熟悉</span>
        <span><i class="lv-4"></i>秒答</span>
      </div>
      <div id="gridArea"></div>
    </section>

    <!-- 字源翻卡 -->
    <section id="flash" class="panel">
      <div class="flash-area">
        <div class="chips warm" id="deckChips">
          <button data-deck="seion" class="on">清音字源</button>
          <button data-deck="dakuon">濁音・半濁音</button>
          <button data-deck="yoon">拗音</button>
        </div>
        <p class="flash-tip" id="flashTip">這個漢字變成了哪個假名?想一想,再點卡片翻面。</p>
        <div class="flashcard" id="flashcard">
          <div class="inner">
            <div class="face front">
              <div class="kanji" id="flashKanji"></div>
              <div class="hint">點一下翻面</div>
            </div>
            <div class="face back">
              <div class="pair" id="flashPair"></div>
              <div class="romaji" id="flashRomaji"></div>
              <div id="flashMnemo"></div>
              <div class="note" id="flashNote"></div>
            </div>
          </div>
        </div>
        <div class="flash-ctrl">
          <button class="btn" id="flashPrev">上一張</button>
          <button class="btn accent" id="flashPlay">🔊 發音</button>
          <button class="btn primary" id="flashNext">下一張</button>
        </div>
        <div class="flash-ctrl">
          <button class="btn" id="flashShuffle">洗牌</button>
        </div>
        <div class="flash-progress" id="flashProgress"></div>
      </div>
    </section>

    <!-- 字源配對 -->
    <section id="match" class="panel">
      <p class="match-tip">翻開兩張卡,把「字源漢字」和它變成的「平假名」配成對!</p>
      <div class="match-head">
        <span class="stat">步數:<span id="matchMoves">0</span></span>
        <button class="btn" id="matchRestart">重新開始</button>
      </div>
      <div class="match-grid" id="matchGrid"></div>
      <div class="match-win" id="matchWin"></div>
    </section>

    <!-- 練功:間隔複習 + 限時速答 -->
    <section id="train" class="panel">
      <div class="chips warm" id="trainChips">
        <button data-tm="srs" class="on">間隔複習</button>
        <button data-tm="drill">限時速答</button>
      </div>
      <div class="quiz-box" id="trainBox"></div>
      <p class="train-note">
        間隔複習採 Leitner 盒制:答對升一級、答錯歸零,依到期日自動排程,把快忘記的假名撈回來。
        限時速答訓練「看到就反應」:60 秒內快答,系統記錄每個假名的反應時間,越弱、越慢的字出現越頻繁。
        熟練度會即時畫回五十音表。
      </p>
    </section>

    <!-- 測驗 -->
    <section id="quiz" class="panel">
      <div class="quiz-box" id="quizBox">
        <div id="quizStart">
          <h2 style="margin-bottom:8px">十題挑戰</h2>
          <p style="color:#6b6357;font-size:.9rem">混合出題:讀音、平片假名互認、字源、聽力。</p>
          <div class="quiz-range">
            <label><input type="checkbox" id="rangeSeion" checked disabled>清音(必選)</label>
            <label><input type="checkbox" id="rangeDakuon">濁音・半濁音</label>
            <label><input type="checkbox" id="rangeYoon">拗音</label>
          </div>
          <p style="color:#6b6357;font-size:.9rem">最佳紀錄:<b id="bestScore">—</b></p>
          <br>
          <button class="btn primary" id="quizGo">開始測驗</button>
        </div>
        <div id="quizPlay" hidden>
          <div class="quiz-meta">
            <span>第 <span id="quizNum">1</span> / 10 題</span>
            <span class="streak" id="quizStreak"></span>
          </div>
          <div class="quiz-q" id="quizQ"></div>
          <div class="quiz-big" id="quizBig"></div>
          <div class="quiz-opts" id="quizOpts"></div>
          <div class="quiz-fb" id="quizFb"></div>
        </div>
        <div id="quizDone" class="quiz-result" hidden>
          <h2>測驗結束!</h2>
          <div class="score"><span id="finalScore"></span> / 10</div>
          <p id="finalMsg" style="color:#6b6357;font-size:.92rem"></p>
          <br>
          <button class="btn primary" id="quizAgain">再玩一次</button>
        </div>
      </div>
    </section>
    <footer>字源與例詞取材自《五十音不靠背》(神奇裘莉 著)</footer>
  </main>

  <!-- 詳情彈出卡:手機為 bottom sheet,桌機為置中對話框 -->
  <div class="sheet-backdrop" id="sheetBackdrop"></div>
  <div class="sheet" id="sheet"><div class="grab"></div><div id="sheetBody"></div></div>
</div>

<script src="assets/js/data.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>