-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (199 loc) · 9.26 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
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Code Monster from Crunchzilla</title>
<link rel=icon type="image/png" href=cm/favicon.png>
<link rel="shortcut icon" href=cm/favicon.ico>
<link rel=stylesheet href=cm/combined.min.css>
<meta property="og:title" content="Code Monster from Crunchzilla" />
<meta property="og:image" content="cm/monster2.png" />
<meta property="og:description" content="Code Monster is an easy way to get kids excited about programming. Code Monster starts with fun experiments using concepts like parameters, variables, loops, and functions, building more and more, until kids are able to play with the wonders of fractals, animation, and physics." />
<meta name="description" content="Code Monster gets kids excited about programming. It is a combination of a game and tutorial where kids experiment with learning to code." />
</head>
<body>
<noscript>
<h2>
Code Monster use Javascript. Please enable Javascript
if you want the play with the Code Monster. Otherwise,
Code Monster will not be able to play with you.
</h2>
</noscript>
<div class=not-selectable unselectable=on id=tutor>
<div id=tutor-avatar unselectable=on><img id=tutor-img uselectable=on src=cm/tutor0.png /></div>
<div id=tutor-talk unselectable=on>
<p class="speech-bubble-green" unselectable=on id=tutor-message> </p>
</div>
</div>
<div id=code-errors class=not-selectable unselectable=on></div>
<div class=not-selectable unselectable=on style="overflow:hidden;">
<textarea id=code name=code></textarea>
<iframe id=preview></iframe>
</div>
<div class=not-selectable unselectable=on style="overflow: hidden; width: 100%;">
<div style="float: left; width: 100px;">
<span class="button not-selectable" title="Reset the code of this lesson" unselectable=on id=reset-button>RESET</span>
</div>
<div style="float: left; margin-left: 100px; margin-top: 2px; width: 400px; text-align: center;">
<span id=lesson-section></span>
</div>
<div style="float: right;">
<span id=lesson-number style="display: none;">Lesson 1</span>
<span class="button not-selectable" title="Go back one lesson" style="margin-right:10px;" unselectable=on id=back-button>BACK</span>
</div>
</div>
<div id=info-links class=not-selectable unselectable=on>
<span class=info-link unselectable=on>How to Play</span>
|
<span class=info-link unselectable=on>Lesson Sections</span>
|
<span class=info-link unselectable=on>About</span>
|
<span class=info-link unselectable=on>Terms of Use</span>
|
<span class=info-link unselectable=on>Privacy</span>
|
<span class=info-link unselectable=on>Contact</span>
|
<span unselectable=on>© 2012</span>
</div>
<div id=how-to-play style="display: none;">
<h3>How to Play</h3>
Code Monster teaches kids and adults a little about Javascript programming!
<br><br>
It's easy to play. Follow the instructions and do what Code
Monster says. If you get stuck, just skip to the next lesson.
You can always come back to it later!
<br><br>Click on the Back button to go back to a previous
lesson (or click on it a bunch to reset the lessons for another
player). Click on the Reset button if you really mess up your
code and want to start over on a lesson.
<br><br>
Code Monster saves what lesson you are on, so feel free to stop
at any time and come back later. As long as you come back on the
same browser on the same machine, you'll get back to your lesson.
<br><br>
Have fun!
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=lesson-sections style="display: none;">
<h3>Jump to a Lesson Section</h3>
<ol id=lesson-sections-list>
</ol>
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=about style="display: none;">
<h3>About</h3>
Code Monster from Crunchzilla is live Javascript programming for
fun. The focus is on action. Code changes immediately yield
visible results.
<br><br>
Projects start with simple boxes and colors, rapidly progressing
into exciting experiments with simple animation and
fractals. Important programming concepts like variables, loops,
conditionals, expressions, and functions are introduced
by example.
<br><br>
Code Monster is a gentle and fun introduction to
programming concepts. It is a first step in learning to program. It is
not intended to teach all of computer science and programming.
<br><br>
Code Monster is based in Seattle, WA. It is part of the
Crunchzilla suite of game and educational projects developed by
Geeky Ventures.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=terms-of-use style="display: none;">
<h3>Terms of Use</h3>
Code Monster from Crunchzilla is a website provided by Geeky Ventures.
In order to use the Site, you must accept the terms set forth below.
If you are a minor, your parent or guardian must accept the terms and
full responsibility for your use of the website. THESE TERMS OF
SERVICE CONSTITUTE A BINDING LEGAL AGREEMENT BETWEEN YOU AND GEEKY
VENTURES. BY USING THE WEBSITE, YOU AGREE TO THESE TERMS.
<br><br>
The website HTML, text, images, audio, video, software or other
content that is made available on this website are the property of
Geeky Ventures or its content suppliers. Before you use this content
in some way please take care to ensure that you have the relevant
rights and permissions. You are welcome to display on your computer,
download and print pages from this website for personal, educational
and non-commercial use only.
<br><br>
THE WEBSITE IS PROVIDED "AS IS". Your use of this website is at your
own risk. Geeky Ventures disclaims all warranties, expressed or
implied, including without limitation, warranties of merchantability
and fitness of a particular purpose. Geeky Ventures disclaims
liability for any direct, indirect, incidental, special,
consequential, exemplary, punitive or other damages, or lost profits,
that may result directly or indirectly from the use of the
website. This includes, without limitation, any damage to computer
systems, hardware or software, loss of data, or any other performance
failures, any errors, bugs, viruses or other defects that result from,
or are associated with the use of this website.
<br><br>
Geeky Ventures may modify this agreement at any time, and such
modifications shall be effective immediately.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=privacy style="display: none;">
<h3>Privacy Policy</h3>
Code Monster is extremely protective of privacy. Code Monster
keeps almost no information about people who use the website.
<br><br>
Code Monster does not require registration. It does not have
your e-mail address. It does not know who you are. When you
use Code Monster, you are essentially anonymous.
<br><br>
Code Monster does not use cookies. If you leave the website and
come back, there is a feature that will get you back to the
lesson you were on. That does not use cookies. It is done
using HTML5 Local Storage, which stores data on your machine,
not remotely on the webservers. Code Monster does not even know
what lesson you were on or how many lessons people using Code
Monster have completed, and it is a bit of a shame that we do
not, but that is how seriously we take privacy.
<br><br>
Like nearly all websites, Code Monster has web server logs that
may contain the IP address used to access the web server. That
is standard in nearly all webservers and not an attempt at data
collection.
<br><br>
In keeping with standard language in privacy policies,
personally identifiable information will not be disclosed to a
third party unless required by law and we may update this policy
from time to time at our sole discretion.
<br><br>
We are very protective of your privacy. We like it that way.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=contact style="display: none;">
<h3>Contact</h3>
Code Monster can be reached at [email protected]
<br><br>
Code Monster would love to hear your suggestions for how he can
teach better. Code Monster no like complaints, but you can send
them to Code Monster too, and he'll eat them up -- yum, yum! -- with
his big nasty pointy teeth.
<br><br>
Code Monster from Crunchzilla is a product of Geeky Ventures.
Geeky Ventures is based in Seattle, WA.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=old-browser-warning style="display: none;">
<h3>Old Browser Warning</h3>
Oh my. Code Monster no like your web browser. Your browser
old. You need new browser.
<br><br>
Code Monster like <a href="http://google.com/chrome">Chrome</a>
and <a href="http://mozilla.com/firefox">Firefox</a>. You can
play with Code Monster with those. Go get 'em and let's play!
<br><br>
If you want to try to use Code Monster anyway, go ahead and try, but
Code Monster probably no come out to play. Your web browser
scary. Me no likey.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<script src=cm/combined.min.js></script>
</body>
</html>