-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (99 loc) · 4.58 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Braille</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" href="css/master.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Braille Converter</h1>
<p>Press on the braille dots to make them dark thereby selecting the raised dots. The light dots simulate dots that are not raised whereas the raised ones are shown in the dark colour. By pressing the convert button below, the inputted braille is translated to the English character it represents. There exist thirty-eight combinations of raised dots that are not English characters. Can you find them all?</p>
</div>
<div class="col-12 d-flex justify-content-center">
<div class="row braille-container ">
<div class="col-6">
<div id="1" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="2" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="3" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="4" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="5" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="6" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
</div>
</div>
<div class="col-12 text-center">
<button type="button" class="button1" onclick="getChar()">Convert</button>
<p id="letterPlace">Select braille shape to determine it's letter</p>
</div>
<div class="col-12">
<hr>
<h2 class="text-center">Test yourself</h2>
<p>Select the raised dots by making them dark and representing the correct braille image. If the selected braille does not match the correct letter, the correct letter will be shown.</p>
<p id="placeTestLetter" class="text-center"></p>
<div class="col-12 d-flex justify-content-center">
<div class="row braille-container ">
<div class="col-6">
<div id="7" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="8" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="9" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="10" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="11" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
<div class="col-6">
<div id="12" class="checkmark mb-3" data-checked="false" onclick="toggleClick(this)"></div>
</div>
</div>
</div>
</div>
<div class="col-12 text-center">
<button type="button" class="button1" onclick="testBraille()">Submit</button>
</div>
<div class="col-12 text-center">
<p id="correctness"></p>
</div>
<div class="col-12 text-center">
<div class="centerBraille" id="containSingleBraille"></div>
<hr>
</div>
<div class="col-12 text-center">
<h2>Generate Your Own Braille</h2>
</div>
<div class="col-12">
<p>Enter text below for it to be translated into braille. Spaces will be translated as blank spaces, however, other characters that are not English letters cannot be displayed.</p>
</div>
<div id="containBraille" class="col-12 text-center">
</div>
<div class="col-12 text-center">
<input id="textIn" class="mb-3" type="text" placeholder="Enter text here...">
</div>
</div>
</div>
</body>
<script src="js/main.js" charset="utf-8"></script>
</html>