-
Notifications
You must be signed in to change notification settings - Fork 1
/
tips.html
107 lines (94 loc) · 6.29 KB
/
tips.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KanjiThing tips</title>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="media/icon64x64.png">
<style>
#maincontent { text-align: center; }
#image-left img { float: left; margin-right: 15px; }
#image-right img {float: right; margin-left: 15px; }
div:is(#image-left, #image-right) {
max-width: 85%;
margin: auto;
padding-top: 30px;
display: table;
}
div:is(#image-left, #image-right) span {
font-size: 150%;
}
div:is(#image-left, #image-right) img {
display: block;
box-shadow:
5px 5px 5px #6665D2,
5px -5px 5px #6665D2,
-5px 5px 5px #6665D2,
-5px -5px 5px #6665D2;
}
</style>
</head>
<body>
<header>
<img src="media/icon256x256.png" alt="KanjiThing icon" width="192" height="192" />
<h1>KanjiThing tips</h1>
</header>
<!-- Badges -->
<div id="githubbadges" style="text-align: center">
<a href="https://github.com/aiden2480/kanjithing/commits"><img src="https://img.shields.io/github/last-commit/aiden2480/kanjithing?color=red" title="GitHub commit history" /></a>
<a href="https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab/reviews"><img src="https://img.shields.io/chrome-web-store/rating/nccfelhkfpbnefflolffkclhenplhiab?color=orange" title="Google chrome store rating" /></a>
<a href="https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab"><img src="https://img.shields.io/chrome-web-store/v/nccfelhkfpbnefflolffkclhenplhiab?color=yellow" title="Last version published on chrome web store" /></a>
<a href="https://github.com/aiden2480/kanjithing/actions/workflows/updatewebstore.yml"><img src="https://img.shields.io/github/workflow/status/aiden2480/kanjithing/Publish%20to%20chrome%20webstore?label=Publish%20workflow&color=green" title="Webstore publish workflow status" /></a>
<a href="https://github.com/aiden2480/kanjithing/blob/main/LICENCE"><img src="https://img.shields.io/github/license/aiden2480/kanjithing?color=blue" /></a>
<a href="https://aiden2480.github.io/kanjithing/"><img src="https://img.shields.io/badge/GitHub%20Pages-active-af6eeb" /></a>
</div>
<div id="itemdescription">
<b>Learn kanji stroke order from the browser</b>
</div>
<br />
<div id="maincontent">
<h2>The following is a basic guide to the layout of the extension interface</h2>
<!-- Main layout of the applciation -->
<div id="image-left">
<img src="media/tips/default.png" alt="Screenshot of KanjiThing user interface" width="800px"/>
<span>
The image to the left depicts the main layout of the popup. On the left, a video drawing guide is shown with a control panel underneath. The control panel
can be used to pause/play/rewind the drawing video, select a new set to learn kanji from, or select a new kanji from the selected set to learn. Using the
mouse, the character displayed can be traced and the drawing can be given a score based on how close the drawing is. This can be done by clicking the green
tick button. <br />
The right side shows the character translation and the two different types of readings for each character, the <ruby>音読み<rt>おんよみ</rt></ruby> and the
<ruby>訓読み<rt>くんよみ</rt></ruby>. The difficulty and grade are also shown, along with several example words containing the character.
</span>
</div>
<div id="image-right">
<img src="media/tips/tracing.png" alt="Screenshot of KanjiThing user interface" width="800px"/>
<span>
The video guide shows the correct drawing of the kanji, and the video may be sped up or slowed down in the settings page. When drawing, if you make a mistake
and wish to undo a segment you've traced over, hold the <code>Ctrl</code> key and drag to erase. <br />
By default, the dropdown set menu contains kanji from Units 1-12 in the Japanese textbook Wakatta, plus a list of every prescribed kanji on the Japanese
continuers HSC prescribed kanji list (<a href="https://bit.ly/3OcDlwY">Available here - page 66</a>). These sets can be edited from the settings page. Arrow
keys may be used to navigate the menus, the up and down arrows will increment and decrement the set, and the left and right arrows will adjust the selected
kanji in the same manner.
</span>
</div>
<div id="image-left">
<img src="media/tips/ctxmenu.png" alt="Screenshot of KanjiThing settings page" width="600px"/>
<span>
The extension has built-in context menu functionality, allowing you to highlight characters you don't understand and add them to a custom set to study later.
The selection can be added to any previously created set, or a new one can be created. <br />
The extension icon will change after you select a set to add the characters to. If it was successful, a green tick will appear. If an error occured, a red x
will appear. Usually an error will only occur in the event that the selection didn't contain any kanji in it.
</span>
</div>
<div id="image-right">
<img src="media/tips/settings.png" alt="Screenshot of KanjiThing settings page" width="600px"/>
<span>
The settings page, accessible from the popup modal by pressing the slash key, allows you to edit which sets are available in the extension. You may enable/disable
sets to learn, as well as create new ones, edit old ones, or delete ones you've already learnt. In addition, the speed with which the drawing guide video, and the
visibility of the settings button can both be edited. You may also export and import your local configuration to share with your classmates, or reset settings back
to the defaults.
</span>
</div>
</div>
</body>
</html>