forked from countable/cats-of-jasnah
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (107 loc) · 4.19 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
<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="back" onclick="set_level(Math.max(0,cur_level-1))">←</div>
<div class="forward" onclick="set_level(Math.min(7,cur_level+1))">
→
</div>
<h1 onclick="window.location.reload()">Cats of Jasnah</h1>
<div class="level-display">LEVEL: <span class="level-number"></span></div>
<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></p>
<span id="forkongithub"
><a href="https://github.com/countable/cats-of-jasnah"
>Fork me on GitHub</a
></span
>
<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 />
<ul>
<li onclick="set_level(0)">0. counting</li>
<li onclick="set_level(1)">1. one category</li>
<li onclick="set_level(2)">2. negation</li>
<li onclick="set_level(3)">3. combination</li>
<li onclick="set_level(4)">4. conjunction</li>
<li onclick="set_level(5)">5. negation and conjunction</li>
<li onclick="set_level(6)">6. triple combination</li>
<li onclick="set_level(7)">7. triple conjunction</li>
</ul>
</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>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"
></script>
<script src="./cats-of-jasnah.js"></script>
</body>
</html>