-
Notifications
You must be signed in to change notification settings - Fork 0
/
vtest_num.html
126 lines (113 loc) · 2.61 KB
/
vtest_num.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
<!DOCTYPE html>
<html>
<head>
<title>Vocabulary test for number</title>
<style type="text/css">
html, body{
width: 100%;
height: 100%;
background-color: #F4F4F4;
}
body {
overflow: hidden;
}
#root {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 100%;
width: 90%;
}
#en, #zh {
width: 100%;
margin: 10px;
text-align: center;
}
#en {
position: absolute;
bottom: 50%;
font-size: 500%;
color: #339933;
}
#zh {
position: absolute;
top: 50%;
font-size: 300%;
color: #339933;
}
</style>
</head>
<body>
<div id = "root">
<div id = "en"></div>
<br/><br/>
<div id = "zh"></div>
</div>
<script>
var data, idx, type, recalling;
window.onload = function() {
var text = document.getElementById('data').innerHTML;
var textlines = text.split('\n').filter(function(val) {return val!=='';});
data = textlines.map(function(val) {return val.split(';');});
recalling = false;
if(data.length>0) {
ask();
window.addEventListener("click", update, false);
window.addEventListener("keypress", function(evt) {
if (evt.keyCode == 32 /* space bar */) {
update();
}
}, false);
} else {
document.getElementById('en').innerHTML = 'Sorry, there\'s no data!';
document.getElementById('zh').innerHTML = '对不起，没有数据！';
}
};
function ask() {
while(true) {
var new_idx = Math.floor(Math.random()*data.length);
if(idx!==new_idx || data.length==1) {
idx = new_idx;
break;
}
}
type = Math.floor(Math.random()*2);
if(type===0) {
document.getElementById('en').innerHTML = data[idx][0];
document.getElementById('zh').innerHTML = '';
} else {
document.getElementById('en').innerHTML = '';
document.getElementById('zh').innerHTML = data[idx][1];
}
recalling = true;
};
function answer() {
document.getElementById('en').innerHTML = data[idx][0];
document.getElementById('zh').innerHTML = data[idx][1];
recalling = false;
};
function update() {
if(recalling) {
answer();
} else {
ask();
}
};
</script>
<script id="data" type="text/template">
one;一
two;二
three;三
four;四
five;五
six;六
seven;七
eight;八
nine;九
ten;十
</script>
</body>
</html>