-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (186 loc) · 18.2 KB
/
index.html
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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>HSK1 random char</title>
</head>
<style>
.list-group-item:empty{
display:none;
}
</style>
<body>
<div class="container">
<br><br>
<div class="progress">
<div id="progressbar" class="progress-bar" role="progressbar"></div>
</div>
<div id="myRandomDiv" class="container-fluid" style="font-size:100px">
</div>
<div id="myRandomPinyinDiv" class="container-fluid" style="font-size:50px">
</div>
<br><br>
<a id="myButton" class="btn btn-primary" href="#" role="button">HSK1</a>
<br><br>
<ul class="list-group list-group-flush">
<li class="list-group-item"><div id="myRandomDefDiv" ></div></li>
<li class="list-group-item"><div id="myRandomDef2Div" ></div> </li>
<li class="list-group-item"><div id="myRandomDef3Div" ></div> </li>
<li class="list-group-item"><div id="myRandomDef4Div" ></div></li>
</ul>
<br>
<br><br><br><br><br>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script type="text/javascript" charset="utf-8">
var hsk1 = ['起', '果', '热', '院', '四', '回', '西', '国', '高', '怎', '系', '北', '一', '七', '三', '上', '下', '不', '东', '子', '医', '字', '个', '十', '中', '午', '气', '学', '么', '开', '水', '九', '习', '书', '汉', '雨', '买', '见', '视', '零', '觉', '了', '二', '在', '五', '些', '生', '坐', '电', '块', '影', '很', '校', '客', '样', '家', '桌', '去', '京', '亮', '想', '友', '人', '没', '什', '对', '今', '叫', '他', '们', '面', '候', '苹', '做', '小', '少', '吃', '同', '名', '后', '吗', '听', '会', '爱', '爸', '租', '呢', '住', '岁', '作', '你', '和', '茶', '椅', '的', '车', '站', '那', '钟', '哪', '狗', '认', '识', '话', '日', '都', '语', '时', '菜', '说', '请', '读', '儿', '先', '钱', '我', '八', '六', '老', '关', '兴', '这', '再', '写', '打', '商', '猫', '谁', '明', '星', '昨', '飞', '谢', '是', '喂', '多', '喜', '喝', '大', '天', '冷', '看', '太', '几', '出', '女', '她', '好', '睡', '妈', '工', '现', '衣', '能', '里', '分', '饭', '馆', '姐', '前', '欢', '师', '脑', '火', '漂', '月', '有', '朋', '服', '年', '期', '本', '米', '店', '机', '来', '杯', '点']
var hsk1_pinyin = ['qǐ', 'guǒ', 'rè', 'yuàn', 'sì', 'húi', 'xī', 'guó', 'gāo', 'zěn', 'xì', 'běi', 'yī', 'qī', 'sān', 'shàng', 'xià', 'bù', 'dōng', 'zǐ', 'yì', 'zì', 'gè', 'shí', 'zhōng', 'wǔ', 'qì', 'xué', 'yāo', 'kāi', 'shǔi', 'jǐu', 'xí', 'shū', 'hàn', 'yǔ', 'mǎi', 'jiàn', 'shì', 'líng', 'jué', 'le', 'èr', 'zài', 'wǔ', 'xiē', 'shēng', 'zuò', 'diàn', 'kuài', 'yǐng', 'hěn', 'xiào', 'kè', 'yáng', 'jiā', 'zhuō', 'qù', 'jīng', 'liàng', 'xiǎng', 'yǒu', 'rén', 'méi', 'shí', 'dùi', 'jīn', 'jiào', 'tā', 'men', 'miàn', 'hòu', 'píng', 'zuò', 'xiǎo', 'shǎo', 'chī', 'tóng', 'míng', 'hòu', 'ma', 'tīng', 'hùi', 'ài', 'bà', 'zū', 'ní', 'zhù', 'sùi', 'zuò', 'nǐ', 'hé', 'chá', 'yǐ', 'de', 'chē', 'zhàn', 'nà', 'zhōng', 'nǎ', 'gǒu', 'rèn', 'shì', 'huà', 'rì', 'dū', 'yǔ', 'shí', 'cài', 'shuō', 'qǐng', 'dú', 'ér', 'xiān', 'qián', 'wǒ', 'bā', 'lìu', 'lǎo', 'guān', 'xīng', 'zhè', 'zài', 'xiě', 'dǎ', 'shāng', 'māo', 'shúi', 'míng', 'xīng', 'zuó', 'fēi', 'xiè', 'shì', 'wèi', 'duō', 'xǐ', 'hē', 'dà', 'tiān', 'lěng', 'kàn', 'tài', 'jī', 'chū', 'nv̌', 'tā', 'hǎo', 'shùi', 'mā', 'gōng', 'xiàn', 'yī', 'néng', 'lǐ', 'fēn', 'fàn', 'guǎn', 'jiě', 'qián', 'huān', 'shī', 'nǎo', 'huǒ', 'piāo', 'yuè', 'yǒu', 'péng', 'fú', 'nián', 'qī', 'běn', 'mǐ', 'diàn', 'jī', 'lái', 'bēi', 'diǎn']
var hsk1_def = ['to rise', 'fruit', 'to warm up', 'courtyard', 'four', 'to circle', 'the West', 'surname Guo', 'surname Gao', 'how', 'to connect', 'north', 'one', 'seven', 'surname San', 'see 上聲|上声[shang3 sheng1]', 'down', '(negative prefix)', 'surname Dong', 'son', 'medical', 'letter', 'individual', 'ten', 'China', '7th earthly branch: 11 a.m.-1 p.m., noon, 5th solar month (6th June-6th July), year of the Horse', 'gas', 'to learn', 'exclamatory final particle', 'to open', 'surname Shui', 'nine', 'surname Xi', 'abbr. for 書經|书经[Shu1 jing1]', 'Han ethnic group', 'rain', 'to buy', 'to see', 'variant of 視|视[shi4]', 'zero', 'a nap', '(modal particle intensifying preceding clause)', 'two', '(located) at', 'five', 'some', 'to be born', 'surname Zuo', 'electric', 'lump (of earth)', 'picture', '(adverb of degree)', 'to proofread', 'customer', 'manner', 'see 傢伙|家伙[jia1 huo5]', 'table', 'to go', 'abbr. for Beijing', 'bright', 'to think', 'friend', 'man', '(negative prefix for verbs)', 'what', 'right', 'today', 'to shout', 'he or him', 'plural marker for pronouns, and nouns referring to individuals', 'face', 'to wait', '(artemisia)', 'to do', 'small', 'few', 'to eat', '(used in given names)', 'name', 'surname Hou', 'see 嗎啡|吗啡, morphine', 'smile (archaic)', 'can', 'to love', 'father', 'to hire', 'particle indicating that a previously asked question is to be applied to the preceding word ("What about ...?", "And ...?")', 'to live', 'variant of 歲|岁[sui4], year', 'worker', 'you (informal, as opposed to courteous 您[nin2])', 'old variant of 和[he2]', 'tea', 'chair', 'of', 'surname Che', 'station', 'surname Na', 'surname Zhong', 'how', 'dog', 'to recognize', 'to know', 'dialect', 'abbr. for 日本[Ri4 ben3], Japan', 'surname Du', 'dialect', 'old variant of 時|时[shi2]', 'dish (type of food)', 'to persuade', 'to ask', 'comma', 'child', 'early', 'surname Qian', 'I', 'eight', 'six', 'prefix used before the surname of a person or a numeral indicating the order of birth of the children in a family or to indicate affection or familiarity', 'surname Guan', 'surname Xing', 'this', 'again', 'to write', 'dozen (loanword)', 'Shang Dynasty (c. 1600-1046 BC)', 'cat', 'who', 'Ming Dynasty (1368-1644)', 'star', 'yesterday', 'to fly', 'surname Xie', 'is', 'hello (when answering the phone)', 'many', 'to be fond of', 'to drink', 'big', 'day', 'surname Leng', 'to look after', 'highest', 'small table', 'to go out', 'archaic variant of 汝[ru3]', 'she', 'good', 'to sleep', 'ma', 'work', 'to appear', 'clothes', 'surname Neng', 'variant of 裡|里[li3]', 'to divide', 'food', 'variant of 館|馆[guan3]', 'older sister', 'front', 'variant of 歡|欢[huan1]', 'surname Shi', 'brain', 'surname Huo', 'to float', 'moon', 'to have', 'friend', 'clothes', 'surname Nian', 'variant of 期[qi1]', 'root', 'surname Mi', 'inn', 'surname Ji', 'to come', 'cup', 'point']
var hsk1_def2 = ['to raise', 'result', 'to heat up', 'institution', '4', 'to go back', 'abbr. for Spain 西班牙[Xi1 ban1 ya2]', '', '', '', 'to relate to', 'to be defeated (classical)', '1', '7', '', '', 'downwards', 'not', '', 'child', 'medicine', 'symbol', 'this', '10', 'Chinese', 'ancient Chinese compass point: 180° (south)', 'air', 'to study', '', 'to start', '', '9', '', '', 'Chinese (language)', 'CL:陣|阵[zhen4],場|场[chang2]', 'to purchase', 'to meet', 'variant of 示[shi4]', 'nought', 'a sleep', '(completed action marker)', '2', '(to be) in', '5', 'few', 'to give birth', '', 'electricity', 'chunk', 'image', 'quite', 'to check', 'visitor', 'pattern', '', 'desk', 'to go to (a place)', 'surname Jing', 'clear', 'to believe', '', 'person', 'have not', '', 'correct', 'modern', 'to call', '(used for either sex when the sex is unknown or unimportant)', '', 'side', 'to inquire after', 'duckweed', 'to make', 'tiny', 'less', 'to consume', 'variant of 同[tong2]', 'noun (part of speech)', '', '', '', 'to be possible', 'to be fond of', 'dad', 'to rent', 'particle for inquiring about location ("Where is ...?")', 'to dwell', 'years old', 'workshop', '', '', 'tea plant', '', "~'s (possessive particle)", '', 'to stand', '', '', 'which', 'CL:隻|只[zhi1],條|条[tiao2]', 'to know', 'knowledge', 'language', '', '', 'language', '', 'vegetable', '', 'to invite', 'phrase marked by pause', 'son', 'prior', '', 'me', '8', '6', 'old (of people)', '', '', 'these', 'once more', '', '', 'surname Shang', 'CL:隻|只[zhi1]', 'also pr. [shui2]', 'surname Ming', 'heavenly body', '', '', '', 'are', '', 'much', 'to like', 'My goodness!', 'huge', 'sky', '', 'to take care of', 'greatest', '', 'to come out', '', '', 'well', 'to lie down', 'mom', 'worker', 'present', 'CL:件[jian4]', '', '', 'to separate', 'cuisine', '', '', 'forward', '', '', 'mind', '', 'to drift', 'month', 'there is', '', 'dress', '', 'period', 'stem', '', 'shop', '', 'to arrive', 'trophy cup', 'dot']
var hsk1_def3 = ['to get up', 'resolute', 'hot (of weather)', 'CL:個|个[ge4]', '', 'to turn around', 'Spanish', '', '', '', 'to tie up', '', 'single', '', '', '', 'below', 'no', '', 'seed', 'doctor', 'character', 'that', '', 'surname Zhong', '', 'smell', 'to imitate', '', 'to turn on', '', '', '', '', 'the Han dynasty (206 BC-220 AD)', '', '', 'to appear (to be sth)', '', 'zero sign', 'CL:場|场[chang2]', '', '(Beijing dialect) stupid', 'to exist', '', 'several', 'life', '', 'electrical', 'piece', 'film', 'very', 'to compare', 'guest', 'way', '', 'classifier for tables of guests at a banquet etc', '(of a time etc) last', 'Jing ethnic minority', 'resonant', 'to suppose', '', 'people', 'not', '', 'couple', 'present', 'to order', "(used before sb's name for emphasis)", '', 'surface', 'to watch', '', 'to produce', 'few', 'to lack', 'to eat at (a cafeteria etc)', '', 'place (e.g. among winners)', '', '', '', 'to be able to', 'to like', 'pa', 'to charter', 'particle signaling a pause, to emphasize the preceding words and allow the listener time to take them on board ("ok?", "are you with me?")', 'to stay', '', '(slang) troublesome', '', '', 'CL:杯[bei1],壺|壶[hu2]', '', '(used after an attribute)', '', 'to halt', '', '', '', '', 'to admit', 'Taiwan pr. [shi4]', 'spoken words', '', '', 'speech', '', 'cuisine', '', 'please (do sth)', '', '', 'former', '', 'my', '', '', 'venerable (person)', '', '', '(commonly pr. [zhei4] before a classifier, esp. in Beijing)', 're-', '', '', '', '(dialect) to hide oneself', '', 'Ming (c. 2000 BC), fourth of the legendary Flame Emperors, 炎帝[Yan2 di4] descended from Shennong 神農|神农[Shen2 nong2] Farmer God', 'satellite', '', '', '', 'am', '', 'often', 'to enjoy', '', 'large', 'heaven', '', 'to watch', 'too (much)', '', 'to occur', '', '', 'proper', '', 'mother', 'skill', 'now', '', '', '', 'to distribute', 'cooked rice', '', '', 'ahead', '', '', 'head', '', '', 'monthly', 'there are', '', 'garment', '', 'cycle', 'origin', '', 'store', '', 'to come round', 'classifier for certain containers of liquids: glass, cup', 'drop']
var hsk1_def4 = ['to set out', 'indeed', 'heat', '', '', 'to answer', '', '', '', '', 'to bind', '', 'a (article)', '', '', '', 'lower', '', '', 'egg', 'to cure', 'word', 'size', '', '', '', 'weather', 'science', '', 'to boil', '', '', '', '', '', '', '', 'to interview', '', 'fractional', '', '', '', 'in the middle of doing sth', '', 'measure word indicating a small amount or small number (greater than 1)', 'to grow', '', '', 'classifier for pieces of cloth, cake, soap etc', 'movie', 'awfully', '', '', 'appearance', '', '', 'just passed', '', 'to shine', 'to wish', '', 'CL:個|个[ge4],位[wei4]', '', '', 'pair', 'current', 'to ask', '(used as a meaningless mock object)', '', 'aspect', 'season', '', 'to write', 'young', 'to be missing', 'to eradicate', '', 'famous', '', '', '', 'will', 'affection', 'papa', 'to rent out', '(at the end of a declarative sentence) particle indicating continuation of a state or action', 'to reside', '', 'high-maintenance (person)', '', '', '', '', '(used to form a nominal expression)', '', 'to stop', '', '', '', '', '', '', 'speech', '', '', '', '', 'CL:盤|盘[pan2],道[dao4]', '', 'to treat (to a meal etc)', '', '', 'in advance', '', '', '', '', 'experienced', '', '', '', 'second', '', '', '', '(coll.) modem', '', '', 'small amount', '', '', '', 'yes', '', 'a lot of', 'to be happy', '', 'major', '', '', 'to guard', 'very', '', 'to produce', '', '', 'good to', '', '', 'profession', 'existing', '', '', '', 'to allocate', 'meal', '', '', 'first', '', '', 'essence', '', '', 'CL:個|个[ge4],輪|轮[lun2]', 'to exist', '', 'to serve (in the military, a prison sentence etc)', '', '', 'source', '', 'CL:家[jia1]', '', 'ever since', '', 'speck']
var hsk1_rem = [...hsk1];
var hsk1_pinyin_rem = [...hsk1_pinyin];
var hsk1_def_rem = [...hsk1_def];
var hsk1_def2_rem = [...hsk1_def2];
var hsk1_def3_rem = [...hsk1_def3];
var hsk1_def4_rem = [...hsk1_def4];
let _speechSynth
let _voices
const _cache = {}
/**
* retries until there have been voices loaded. No stopper flag included in this example.
* Note that this function assumes, that there are voices installed on the host system.
*/
function loadVoicesWhenAvailable (onComplete = () => {}) {
_speechSynth = window.speechSynthesis
const voices = _speechSynth.getVoices()
if (voices.length !== 0) {
_voices = voices
onComplete()
} else {
return setTimeout(function () { loadVoicesWhenAvailable(onComplete) }, 100)
}
}
/**
* Returns the first found voice for a given language code.
*/
function getVoices (locale) {
if (!_speechSynth) {
throw new Error('Browser does not support speech synthesis')
}
if (_cache[locale]) return _cache[locale]
_cache[locale] = _voices.filter(voice => voice.lang === locale)
return _cache[locale]
}
/**
* Speak a certain text
* @param locale the locale this voice requires
* @param text the text to speak
* @param onEnd callback if tts is finished
*/
function playByText (locale, text, onEnd) {
const voices = getVoices(locale)
// TODO load preference here, e.g. male / female etc.
// TODO but for now we just use the first occurrence
const utterance = new window.SpeechSynthesisUtterance()
utterance.voice = voices[0]
utterance.pitch = 1
utterance.rate = 1
utterance.voiceURI = 'native'
utterance.volume = 1
utterance.rate = 1
utterance.pitch = 0.8
utterance.text = text
utterance.lang = locale
if (onEnd) {
utterance.onend = onEnd
}
_speechSynth.cancel() // cancel current speak, if any is running
_speechSynth.speak(utterance)
}
// on document ready
loadVoicesWhenAvailable(function () {
console.log("loaded")
})
function speak (text) {
setTimeout(() => playByText("zh-CN", text), 30)
}
var randomDiv = document.getElementById("myRandomDiv");
var randomPinyinDiv = document.getElementById("myRandomPinyinDiv");
var randomDefDiv = document.getElementById("myRandomDefDiv");
var randomDef2Div = document.getElementById("myRandomDef2Div");
var randomDef3Div = document.getElementById("myRandomDef3Div");
var randomDef4Div = document.getElementById("myRandomDef4Div");
randomDiv.innerHTML = "一";
randomPinyinDiv.innerHTML= "Yī";
randomDefDiv.innerHTML= "One";
randomDef2Div.innerHTML= "";
randomDef3Div.innerHTML= "";
randomDef4Div.innerHTML= "";
document.getElementById("progressbar").setAttribute("aria-valuemax", hsk1.length)
document.getElementById("progressbar").setAttribute("aria-valuenow", 0)
document.getElementById("progressbar").setAttribute("style", "width: " + "0%")
function getProgress() {
var d = document.getElementById("progressbar").getAttribute("aria-valuenow");
return d;
}
function setProgress(value) {
document.getElementById("progressbar").setAttribute("aria-valuenow", value);
document.getElementById("progressbar").setAttribute("style", "width: " + value*100/hsk1.length + "%" );
document.getElementById("progressbar").innerHTML = (value + "/" + hsk1.length);
}
function increment() {
var i = getProgress();
i++;
setProgress(i);
}
function decrement() {
var d = getProgress();
setProgress(d - 1);
}
function resetButton() {
var r = getProgress();
setProgress(r = 0);
}
document.body.addEventListener("click", function() {
randomIndex = Math.ceil((Math.random()*hsk1_rem.length-1));
newText = hsk1_rem[randomIndex];
newTextPinyin = hsk1_pinyin_rem[randomIndex];
newTextDef = hsk1_def_rem[randomIndex];
newTextDef2 = hsk1_def2_rem[randomIndex];
newTextDef3 = hsk1_def3_rem[randomIndex];
newTextDef4 = hsk1_def4_rem[randomIndex];
randomDiv.innerHTML = newText;
randomPinyinDiv.innerHTML = newTextPinyin;
randomDefDiv.innerHTML = newTextDef;
randomDef2Div.innerHTML = newTextDef2;
randomDef3Div.innerHTML = newTextDef3;
randomDef4Div.innerHTML = newTextDef4;
increment();
speak(newText);
if (hsk1_rem.length == 1) {
hsk1_rem=[...hsk1];
hsk1_pinyin_rem=[...hsk1_pinyin];
hsk1_def_rem=[...hsk1_def];
hsk1_def2_rem=[...hsk1_def2];
hsk1_def3_rem=[...hsk1_def3];
hsk1_def4_rem=[...hsk1_def4];
resetButton();
}
else {hsk1_rem.splice(randomIndex,1); hsk1_pinyin_rem.splice(randomIndex,1); hsk1_def_rem.splice(randomIndex,1); hsk1_def2_rem.splice(randomIndex,1); hsk1_def3_rem.splice(randomIndex,1); hsk1_def4_rem.splice(randomIndex,1);}
}, true);
</script>
</body>
</html>