-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
102 lines (102 loc) · 3.46 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1">
<title>KSS Typing Tool</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./bundle.js"></script>
</head>
<body>
<div class="container showing" id="loader">
<div class="center">
<p>Loading Contents...</p>
<p id="progressMsg"></p>
<div id="bar_cont">
<progress max="68" value="0"></progress> <!-- 68 files -->
</div>
</div>
</div>
<div class="container" id="start">
<div class="center">
<p id="logo"> - KSS Typing System - </p>
<div id="note">
<h3>説明</h3>
<p>このタイピングには、プログラミングでよく出る語が集められています。</p>
<p>このページはオンラインにあります。家でも練習するとよいでしょう。</p>
<p>https://typing.kss-pc.club/</p>
<p class="splitter"></p>
<h3>語句の説明について</h3>
<p>このタイピングでは、語句の説明が併記されています。</p>
<p>記号について<br>[n]: 名詞、[adj]: 形容詞、[adv]: 副詞、[v]: 動詞、[prep]: 前置詞、[pron]: 代名詞</p>
<p>上記記号が行の終わりにないときは、訳ではなく単に説明です。<br>学習に役立ててください。</p>
<p class="splitter"></p>
<h3>慣れてきた人のための設定</h3>
<p>難易度を上げても得点は変わりません。<br>下のチェックボックスをONにするかはあなた次第...<br>（レーティング計測時はすべてOFFにしてください）</p>
<p>ただ、チェックボックスをONにすると、より語彙が定着しますよ？</p>
<div class="material chk">
<input type="checkbox" name="hideEn" id="hideEn">
<label for="hideEn">綴りを隠す</label>
</div>
<div class="material chk">
<input type="checkbox" name="hideJa" id="hideJa">
<label for="hideJa">説明を隠す</label>
</div>
<div class="material chk">
<input type="checkbox" name="hidePh" id="hidePh">
<label for="hidePh">発音記号を隠す</label>
</div>
</div>
<p id="p2s">Press Space to Start</p>
</div>
</div>
<div class="container" id="main">
<div class="cont">
<div class="typed">0</div>
<div class="time">
残り<span id="remTime"></span>
<div class="timeRemainingBar_container">
<progress max="300" value="300"></progress> <!-- 300 sec -->
</div>
</div>
</div>
<div class="eng">
<label>入力する文字</label>
<div class="center"><span class="typed_char"></span><span class="next_char"></span><span class="remaining_char"></span></div>
</div>
<div class="pho">
<label>発音記号（or 略す前）</label>
<div class="center"></div>
</div>
<div class="jap">
<label>説明</label>
<div class="center"></div>
</div>
<div class="keyboard"></div>
</div>
<div class="container" id="end">
<div class="center">
<p>終了！</p>
</div>
</div>
<div class="container" id="score">
<p id="score">20000</p>
<div class="con">
<p id="correct"></p>
<p class="splitter"></p>
<p id="incorrect"></p>
<p class="splitter"></p>
<p id="total"></p>
<p class="splitter"></p>
<p id="rate"></p>
<p class="splitter"></p>
<p id="scoreT"></p>
<p class="splitter"></p>
<p id="pm"></p>
<p class="splitter"></p>
<p id="ps"></p>
<button>終了する</button>
</div>
</div>
</body>
</html>