-
Notifications
You must be signed in to change notification settings - Fork 47
/
index.html
111 lines (102 loc) · 3.97 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
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cats of Jasnah. Teach your 4-year-old logic</title>
<link href="cats-of-jasnah.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="splash" style="display:none">★</div>
<div class="back" onclick="window.location.reload()">←</div>
<div class="forward" onclick="next_level()">
→
</div>
<h1 onclick="window.location.reload()">Cats of Jasnah</h1>
<div class="level-display">LEVEL: <span class="level-number"></span> | <span class=stars></span></div>
<img class="trophy" src="trophy.png">
<div class="number-bar">
<div class="number-line">
<button class="coj-btn" onclick="submit(0)" type="button">0</button>
<button class="coj-btn" onclick="submit(1)" type="button">1</button>
<button class="coj-btn" onclick="submit(2)" type="button">2</button>
<button class="coj-btn" onclick="submit(3)" type="button">3</button>
<button class="coj-btn" onclick="submit(4)" type="button">4</button>
<button class="coj-btn" onclick="submit(5)" type="button">5</button>
<button class="coj-btn" onclick="submit(6)" type="button">6</button>
<button class="coj-btn" onclick="submit(7)" type="button">7</button>
<button class="coj-btn" onclick="submit(8)" type="button">8</button>
<button class="coj-btn" onclick="submit(9)" type="button">9</button>
</div>
<div class="desc">
To answer questions, tap the numbers above or just use your keyboard.
</div>
</div>
<p class=clue onclick="speak(clue)"></p>
<div class=github>
<a href=https://countable.github.io/raindough>by RainDough</a><br>
<a href="https://github.com/countable/cats-of-jasnah">GitHub</a>
</div>
<div class="instructions">
<b>Instructions:</b><br /><br />
A logic game for young children.
<b
>Warning: the game will speak out loud (since young kids cannot read the
questions), so check your volume.</b
>
Choose a level to start.<br /><br />
<div class='topics'>
</div>
</div>
<br />
<svg class="hidden" viewbox="0 0 160 140">
<ellipse class="face" cx="70" cy="95" ry="45" rx="55" />
<ellipse cx="45" cy="90" rx="5" ry="7" fill="black" />
<ellipse cx="95" cy="90" rx="5" ry="7" stroke="black" fill="black" />
<g id="whiskers" class="whiskers">
<line x1="105" y1="100" x2="135" y2="90" style="stroke: black;" />
<line x1="105" y1="100" x2="135" y2="110" style="stroke: black;" />
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
<!-- ears -->
<g id="earz" class="ears">
<polyline
points="108 62, 103 40, 80 51"
style="stroke: none; fill: #ff88dd;"
/>
</g>
<use xlink:href="#earz" transform="scale(-1 1) translate(-140 0)" />
<!-- mouth -->
<!--<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />-->
<path
class="frown"
d="M 50 110 C 70 90, 80 90, 90 110"
stroke="black"
fill="transparent"
/>
<path
class="smile"
d="M 50 110 C 70 120, 80 120, 90 110"
stroke="black"
fill="transparent"
/>
<path
class="mouth"
d="M 55 110 C 70 115, 80 115, 85 110"
stroke="black"
fill="transparent"
/>
<!-- nose -->
<!--<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
style="stroke: #ff88dd; fill: #ffcccc"/>-->
</svg>
<img id=logo src=raindough.png>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=GIMBLQYR"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"
></script>
<script src="./levels.js"></script>
<script src="./cats-of-jasnah.js"></script>
</body>
</html>