-
Notifications
You must be signed in to change notification settings - Fork 47
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (117 loc) · 6.44 KB
/
index.html
File metadata and controls
126 lines (117 loc) · 6.44 KB
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>🐻哪吒学汉字🐻</title>
<meta name="theme-color" content="#ff6f91">
<link rel="apple-touch-icon" href="favicon.ico">
<link rel="stylesheet" href="./css/style.css">
</head>
<body id="body">
<div id="app" class="flex-center" :class="['theme-' + theme]" v-cloak>
<div class="body-bg"></div>
<div class="container">
<div class="btn-top btn-theme" @click="changeTheme">🍀</div>
<img class="btn-top audio-img" :class="{ off: !bgPlay }" @click="toggleBg" src="img/audio.png" alt="">
<div class="btn-top click-read" :class="{ off: !isClickRead }" @click="toggleCr" v-show="hanziShow">👆</div>
<div class="go-top" @click="goTop" v-show="hanziShow">🔝</div>
<div class="mask flex-center" v-if="notStart">
<div>
<div><button class="game-button mb10" @click="startApp">开始学习, 当前进度: {{ lockInd }} / {{ list.length }}</button></div>
<div><button class="game-button mb10 own w100" @click="goMath">学习数学</button></div>
<div><button class="game-button own w100" @click="goPoem">学习古诗词</button></div>
</div>
</div>
<header>
<!-- 🐻 -->
<h1 class="flex-center" @click="flagClick">哪吒学汉字</h1>
<!-- <p>点击汉字或播放按钮听发音，点击左右箭头切换！</p> -->
</header>
<div id="hanzi-section" v-show="hanziShow">
<div class="hanzi-list" id="hanzi-list">
<div class="hanzi-item" :class="{locked: lockInd < ind, on: lockInd == ind, tested: item.isTest}" v-for="(item, ind) in list" :key="ind" @click="hanziClick(item, ind)">
{{ item.w }}
</div>
</div>
</div>
<main id="learning-section" v-show="cardShow">
<div class="character-display" v-if="currItem">
<!-- <button id="prevChar" class="nav-button"><</button> -->
<div class="char-card">
<div id="character" class="big-char" @click="readItem(currItem, true)">{{ currItem.w }}</div>
<div id="pinyin" class="pinyin" @click="readItem(currItem, true)">{{ currItem.y }}</div>
<div id="meaning" class="meaning">{{ currItem.p }}</div>
<button @click="readItem(currItem)" class="play-button">▶️ 听发音</button>
</div>
<!-- <button id="nextChar" class="nav-button">></button> -->
</div>
<p class="instructions" v-if="currItem" @click="speakText(currItem.s)">▶️ 句子：{{ currItem.s }}</p> <!-- 点击开始游戏，巩固学习！ -->
<div class="game-selection mb15">
<button class="game-button" :class="[gameStep.includes(1) && 'own']" @click="goGame('stroke')">🖋️ 1. 书写笔画</button>
<button class="game-button" :class="[gameStep.includes(2) && 'own']" @click="goGame('listen')">👂 2. 听音辨字</button>
<button class="game-button" :class="[gameStep.includes(3) && 'own']" @click="goGame('draw')">🧩 3. 画一画吧 </button>
<!-- <button class="game-button" data-game="char_meaning">💡 认字识意</button> -->
<!-- <button class="game-button" data-game="pinyin_match">🧩 拼音匹配</button> -->
</div>
<div class="game-actions">
<button @click="goBack(1)" class="action-button"><span>👈</span> 返回列表</button>
</div>
</main>
<section id="game-section" v-show="gameShow">
<h2>游戏时间！🥳</h2>
<div id="game-content">
<div v-show="gameType === 'listen'">
<p class="question-text"><span @click="readItem(currItem, true)">🔊</span>听声音，选择正确的汉字：</p>
<div class="options-grid">
<button class="option-button" :class="[item.status]" v-for="(item, ind) in randomList" :key="ind" @click="listenClick(item)">
{{ item.w }}
</button>
</div>
</div>
<div v-show="gameType === 'stroke'" class="text-center mb15" id="stroke-list"></div>
<div v-show="gameType === 'stroke'" class="flex ai-c jc-sa w100">
<div id="stroke-ani" clas="stroke-box"></div>
<div id="stroke-write" clas="stroke-box"></div>
</div>
<div v-show="gameType === 'draw'" class="flex-center draw-wrap">
<div class="draw-box">
<img :src="drawImg" ><span :class="[drawType]" :style="{ background: drawColor, '--p-done': `${drawStatus}%`, '--p-not': `${100 - drawStatus}%`, '--d-done': `${drawStatus / 100}`, '--d-not': `${1 - drawStatus / 100}`}"></span>
</div>
<div class="flex-col jc-sa">
<button class="option-button" :class="[item.status]" v-for="(item, ind) in randomList" :key="ind" @click="drawClick(item)">
{{ item.w }}
</button>
</div>
</div>
</div>
<div class="game-feedback">
<div v-if="gameStatus">
<span id="feedback-icon">{{ gameStatus === 'correct' ? '✅' : '❌' }}</span>
<span id="feedback-text">{{ gameStatus === 'correct' ? '太棒了！' : '再试一次哦！' }}</span>
</div>
<div v-if="strokeStatus">
<span id="feedback-text"><span v-if="strokeStatus[0] == strokeStatus[1]">✅</span>
完成了 <b>{{ strokeStatus[0] }}</b> / {{ strokeStatus[1] }} 个笔画</span>
</div>
</div>
<div class="game-actions">
<button id="nextQuestion" class="action-button hidden">下一题</button>
<button @click="goBack(2)" class="action-button"><span>👈</span> 返回学习</button>
</div>
</section>
</div>
<audio id="audioBg" src="audio/bg1.mp3"></audio>
<audio id="correctSound" src="audio/correct.mp3"></audio> <!-- 成功音效 -->
<audio id="wrongSound" src="audio/wrong.mp3"></audio> <!-- 失败音效 -->
</div>
<script src="js/lib/hanzi-writer.min.js"></script>
<script src="js/lib/vue.global.prod.min.js"></script>
<script src="js/lib/dataList.js"></script>
<!-- <script src="js/lib/dataWriter.js"></script> -->
<script src="js/utils.js"></script>
<script src="js/index.js"></script>
</body>
</html>