-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html~
236 lines (200 loc) · 12.7 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sudoku Solver.js</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/multiLang.css">
<script src="./helperfunctions.js"></script>
<script src="./algorithm.js"></script>
<script src="./generator.js"></script>
<script src="./canvas.js"></script>
<script src="./offCanvasMenu.js"></script>
<link rel="stylesheet" href="./css/offCanvasMenu.css">
</head>
<body class="en" style="font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;">
<div id="inner">
<br>
<!--language selection-->
<button class="language" onclick="document.body.className='en'"><img height=40 src="./images/EN.png"/></button>
<button class="language" onclick="document.body.className='de'"><img height=40 src="./images/DE.png"/></button>
<button class="language" onclick="document.body.className='fr'"><img height=40 src="./images/FR.png"/></button>
<button class="language" onclick="document.body.className='it'"><img height=40 src="./images/IT.png"/></button>
<button class="language" onclick="document.body.className='es'"><img height=40 src="./images/ES.png"/></button>
<button class="language" onclick="window.location.href='https://creativecommons.org/licenses/by-nc-sa/3.0/ch/'"><img src="./images/by-nc-sa.png" height=40></a></button>
<button class="language" onclick="window.location.href='https://github.com/braindef/sudoku.js'"><img height=40 src="./images/github.png"/></button>
<br>
<br>
</div>
<p lang="en"> test</p>
<div id="inner">
<h1>Sudoku Solver<br></h1>
<p lang="en">This Sudoku-Solver should solve all valid Sudokus. It uses a recursive backtracking algorithm that does stupidely go from the first to the last field but always selects the best possible move(s). You can save the Sudoku to the URL and then copy the URL to send this specific Sudoku to a friend. If you refere with an url with # and then 81 numbers where 0 means empty field you can load a sudoku to the website for example <a href="./index.html#000000000000000000000000000000000000000000000000010000000000000000000000000000000" target="_blank">> HERE <</a> You can find the complete Source on <a href="https://github.com/braindef/sudoku.js">GITHUB</a></p>
<p lang="de">Dieser Sudoku Solver sollte alle gültigen Sudokus lösen können. Er verwendet einen rekursiven backtracking Algorithmus. Der Algrithmus ist so programmiert dass nicht stupide vom ersten zum letzten Feld durchläfut aberimmer die beste Lösung auf dem Sudoku sucht. Sie können das angezeigte Sudoku in die Adresszeile kopieren mit dem "Sudoku in die URL kopieren". Beispiel <a href="./index.html#000000000000000000000000000000000000000000000000010000000000000000000000000000000" target="_blank">> HERE <</a>. Sie finden den kompletten Quellcode auf <a href="https://github.com/braindef/sudoku.js">GITHUB</a></p>
<p lang="fr">Français: Pas encore traduit (you can send a git pull request)</p>
<p lang="it">Italiano: Non ancora tradotto (you can send a git pull request)</p>
<p lang="es">Español: Todavía no ha sido traducido (you can send a git pull request)</p>
</div>
<div id="inner">
<!-- The selection Buttons above the board-->
<!-- <div id="main">-->
<span lang="en" id="menubutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ load </span>
<span lang="en" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(0)">📁 easy</span>
<span lang="en" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(1)">📁 medium</span>
<span lang="en" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(2)">📁 hard</span>
<span lang="de" id="menubutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Laden</span>
<span lang="de" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(0)">📁 Easy</span>
<span lang="de" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(1)">📁 Mittel</span>
<span lang="de" id="menubutton" style="font-size:30px;cursor:pointer" onclick="generate(2)">📁 Schwer</span>
<br>
</div>
<br>
<!-- THE Off Canvas Menu-->
<div id="mySidenav" class="sidenav">
<a lang="en" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#" onclick="load(testBoard1)">Example 1 (EASY)</a>
<a href="#" onclick="load(testBoard2)">Example 2</a>
<a href="#" onclick="load(testBoard3)">Example 3 (Ambigious Solution)</a>
<a href="#" onclick="load(testBoard4)">Example 4</a>
<a href="#" onclick="load(testBoard5)">Example 5</a>
<a href="#" onclick="load(testBoard6)">Example 6</a>
<a href="#" onclick="load(testBoard7)">Example 7</a>
<a href="#" onclick="load(testBoard8)">Example 8</a>
<a href="#" onclick="load(testBoard9)">Example 9 (BIG)</a>
<a href="#" onclick="load(unsolvable)">Unsolvable</a>
</div>
<!-- The Sudoku Grid Table with 3x3 cells that contains each 9 input fileds-->
<div id="inner">
<table id="table" background="sudoku-leer.png">
<tr>
<td>
<input id=f11 step="1"/> <input id=f12 step="1"/> <input id=f13 step="1"/>
<br>
<input id=f21 step="1"/> <input id=f22 step="1"/> <input id=f23 step="1"/>
<br>
<input id=f31 step="1"/> <input id=f32 step="1"/> <input id=f33 step="1"/>
</td>
<td>
<input id=f14 step="1"/> <input id=f15 step="1"/> <input id=f16 step="1"/>
<br>
<input id=f24 step="1"/> <input id=f25 step="1"/> <input id=f26 step="1"/>
<br>
<input id=f34 step="1"/> <input id=f35 step="1"/> <input id=f36 step="1"/>
</td>
<td>
<input id=f17 step="1"/> <input id=f18 step="1"/> <input id=f19 step="1"/>
<br>
<input id=f27 step="1"/> <input id=f28 step="1"/> <input id=f29 step="1"/>
<br>
<input id=f37 step="1"/> <input id=f38 step="1"/> <input id=f39 step="1"/>
</td>
</tr>
<tr>
<td>
<input id=f41 step="1"/> <input id=f42 step="1"/> <input id=f43 step="1"/>
<br>
<input id=f51 step="1"/> <input id=f52 step="1"/> <input id=f53 step="1"/>
<br>
<input id=f61 step="1"/> <input id=f62 step="1"/> <input id=f63 step="1"/>
</td>
<td>
<input id=f44 step="1"/> <input id=f45 step="1"/> <input id=f46 step="1"/>
<br>
<input id=f54 step="1"/> <input id=f55 step="1"/> <input id=f56 step="1"/>
<br>
<input id=f64 step="1"/> <input id=f65 step="1"/> <input id=f66 step="1"/>
</td>
<td>
<input id=f47 step="1"/> <input id=f48 step="1"/> <input id=f49 step="1"/>
<br>
<input id=f57 step="1"/> <input id=f58 step="1"/> <input id=f59 step="1"/>
<br>
<input id=f67 step="1"/> <input id=f68 step="1"/> <input id=f69 step="1"/>
</td>
</tr>
<tr>
<td>
<input id=f71 step="1"/> <input id=f72 step="1"/> <input id=f73 step="1"/>
<br>
<input id=f81 step="1"/> <input id=f82 step="1"/> <input id=f83 step="1"/>
<br>
<input id=f91 step="1"/> <input id=f92 step="1"/> <input id=f93 step="1"/>
</td>
<td>
<input id=f74 step="1"/> <input id=f75 step="1"/> <input id=f76 step="1"/>
<br>
<input id=f84 step="1"/> <input id=f85 step="1"/> <input id=f86 step="1"/>
<br>
<input id=f94 step="1"/> <input id=f95 step="1"/> <input id=f96 step="1"/>
</td>
<td>
<input id=f77 step="1"/> <input id=f78 step="1"/> <input id=f79 step="1"/>
<br>
<input id=f87 step="1"/> <input id=f88 step="1"/> <input id=f89 step="1"/>
<br>
<input id=f97 step="1"/> <input id=f98 step="1"/> <input id=f99 step="1"/>
</td>
</tr>
</table>
</div>
<!-- The Buttons below the Board-->
<!--English-->
<div id="inner">
<button lang="en" class="controls" onclick="showPreviousSolution()" style="background-color:Lavender; width:240; margin: auto; float:left;"> < prev. Solution </button>
<button lang="de" class="controls" onclick="showPreviousSolution()" style="background-color:Lavender; width:240; margin: auto; float:left;"> < vorherige</button>
<input id="numSolutions" style="background-color:white; width:100;"/>
<button lang="en" class="controls" onclick="showNextSolution()" style="background-color:Lavender; width:240; margin: auto; float:right;"> next Solution ></button>
<button lang="de" class="controls" onclick="showNextSolution()" style="background-color:Lavender; width:240; margin: auto; float:right;">nächste ></button>
<br><br>
<button lang="en" class="controls" onclick="reset()" style="background-color:lightgray">clear</button>
<button lang="de" class="controls" onclick="reset()" style="background-color:lightgray">leeren</button>
<button lang="en" class="controls" onclick="auto(testBoard)" style="background-color:lightgreen; ">SOLVE</button>
<!--<button onclick="check()" style="background-color:orange">check answers</button>-->
<button lang="de" class="controls" onclick="auto(testBoard)" style="background-color:lightgreen; ">Automatisch LÖSEN</button>
<button lang="en" class="controls" onclick="toHash()" style="background-color:yellow">generate URL and QRCode (BOTTOM)</button>
<button lang="de" class="controls" onclick="toHash()" style="background-color:yellow">URL und QRCode generieren (UNTEN)</button>
<input lang="en" class="controls" size="6em" style="width:400;" value="Iterations to try:" readonly=true>
<input lang="de" class="controls" size="6em" style="width:400;" value="Max. Iterationen" readonly=true>
<input id="iterations" type="number" min="1" steps="1" value="5000" style="width:180; background-color:#E5E4E2; float:right"/>
<input lang="en" class="controls" size="6em" style="width:400" value="Animationdelay [ms]:" readonly=true>
<input lang="de" class="controls" size="6em" style="width:400" value="Wartezeit pro Zug [ms]:" readonly=true>
<input id="time" type="number" min="1" steps="1" value="100" style="width:180; background-color: #E5E4E2; float:right;"/>
<br>
</div>
<div id="inner">
<p style="display:none;" >selectionArray: <span id=selectionArray>--</span></p>
<p>Time: <span id="elapsed">--</span></p>
</div>
<!-- The slowmotion board-->
<div id="inner" >
<canvas id="mycanvas" width="600" height="600"></canvas> <br> <!--<canvas id="mycanvas" width="600" height="100" style="float:left"></canvas>-->
<br>
<font color="black">● initial values</font>
<br>
<font color="red">● guessed out of several possibilities</font>
<br>
<font color="green">● unambigiously solved</font>
<br><br>
</div>
<div id="inner">
<h1>SOURCE:</h1>
<a href="https://github.com/braindef/sudoku.js">https://github.com/braindef/sudoku.js</a>
</div>
<div id="inner">
<h1>Sudoku QR-Code</h1>
<p lang="en">With this website you can have Sudokus as QR-Codes: First enter the Sudoku, then copy the Sudocu in the URL then creating an QR-Code from this URL with eg qrencode on Ubuntu or Linux that can be installed with "<code>sudo apt-get install qrencode</code>"</p>
<p lang="de">Mit dieser Seite können Sudokus auch als QR-Codes verlinkt werden: Zuerst das Sudoku eingeben oder Laden, dann in die URL kopieren und dann von dieser URL einen QR-Code erstellen mit z.B. dem Linux Programm qrencode (das man mit "<code>sudo apt-get install qrencode</code>" installieren kann)</p>
<!--<img src="./QRcode.png" width=600/>-->
<div id="qrcode"></div>
<!-- USING JQUERY ONLY FOR qrcode.js-->
<script type="text/javascript" src="./qrcodejs/jquery.min.js"></script>
<script type="text/javascript" src="./qrcodejs/qrcode.js"></script>
<script type="text/javascript">
</script>
<br>
<br>
<a id="link" href="http://0x8.ch/sudoku.js/code/sudoku.js/index.html">http://0x8.ch/sudoku.js/code/sudoku.js/index.html</a>
<br>
<br>
</div>
</div>
</html>