-
Notifications
You must be signed in to change notification settings - Fork 5
/
hardware.html
154 lines (147 loc) · 22 KB
/
hardware.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
<!doctype html><html lang=en>
<head>
<meta charset=utf-8>
<title>Greenfoxified Code Maven from Crunchzilla</title>
<link rel=icon type="image/png" href=maven/favicon.png><link rel="shortcut icon" href=maven/favicon.ico><style style="display:none">.CodeMirror{line-height:1em;font-family:monospace;position:relative;overflow:hidden}.CodeMirror-scroll{overflow-x:auto;overflow-y:hidden;height:300px;position:relative;outline:0}.CodeMirror-scrollbar{float:right;overflow-x:hidden;overflow-y:scroll;margin-left:-1px}.CodeMirror-scrollbar-inner{width:1px}.CodeMirror-scrollbar.cm-sb-overlap{position:absolute;z-index:1;float:none;right:0;min-width:12px}.CodeMirror-scrollbar.cm-sb-nonoverlap{min-width:12px}.CodeMirror-scrollbar.cm-sb-ie7{min-width:18px}.CodeMirror-gutter{position:absolute;left:0;top:0;z-index:10;background-color:#f7f7f7;border-right:1px solid #eee;min-width:2em;height:100%}.CodeMirror-gutter-text{color:#aaa;text-align:right;padding:.4em .2em .4em .4em;white-space:pre!important}.CodeMirror-lines{padding:.4em;white-space:pre;cursor:text}.CodeMirror-lines *{pointer-events:none}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;-o-border-radius:0;border-radius:0;border-width:0;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;padding:0;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-wrap .CodeMirror-scroll{overflow-x:hidden}.CodeMirror textarea{outline:none!important}.CodeMirror pre.CodeMirror-cursor{z-index:10;position:absolute;visibility:hidden;border-left:1px solid black;border-right:0;width:0}.cm-keymap-fat-cursor pre.CodeMirror-cursor{width:auto;border:0;background:transparent;background:rgba(0,200,0,.4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800,endColorstr=#4c00c800)}.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id){filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.CodeMirror-focused pre.CodeMirror-cursor{visibility:visible}div.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused div.CodeMirror-selected{background:#d7d4f0}.CodeMirror-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-s-default span.cm-keyword{color:#708}.cm-s-default span.cm-atom{color:#219}.cm-s-default span.cm-number{color:#164}.cm-s-default span.cm-def{color:#00f}.cm-s-default span.cm-variable{color:black}.cm-s-default span.cm-variable-2{color:#05a}.cm-s-default span.cm-variable-3{color:#085}.cm-s-default span.cm-property{color:black}.cm-s-default span.cm-operator{color:black}.cm-s-default span.cm-comment{color:#a50}.cm-s-default span.cm-string{color:#a11}.cm-s-default span.cm-string-2{color:#f50}.cm-s-default span.cm-meta{color:#555}.cm-s-default span.cm-error{color:#f00}.cm-s-default span.cm-qualifier{color:#555}.cm-s-default span.cm-builtin{color:#30a}.cm-s-default span.cm-bracket{color:#cc7}.cm-s-default span.cm-tag{color:#170}.cm-s-default span.cm-attribute{color:#00c}.cm-s-default span.cm-header{color:blue}.cm-s-default span.cm-quote{color:#090}.cm-s-default span.cm-hr{color:#999}.cm-s-default span.cm-link{color:#00c}span.cm-header,span.cm-strong{font-weight:bold}span.cm-em{font-style:italic}span.cm-emstrong{font-style:italic;font-weight:bold}span.cm-link{text-decoration:underline}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.speech-bubble-green{position:relative;padding:15px 30px;margin:0;color:#000;background:#1c3;background:-webkit-gradient(linear,0 0,0 100%,from(#afe),to(#1c3));background:-moz-linear-gradient(#afe,#1c3);background:-o-linear-gradient(#afe,#1c3);background:linear-gradient(#afe,#1c3);-webkit-border-top-left-radius:25px 50px;-webkit-border-top-right-radius:25px 50px;-webkit-border-bottom-right-radius:25px 50px;-webkit-border-bottom-left-radius:25px 50px;-moz-border-radius:25px /50px;border-radius:25px /50px}.speech-bubble-green:before{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 50px;border-style:solid;border-color:transparent #1c3;display:block;width:0}.speech-bubble-green:after{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 20px;border-style:solid;border-color:transparent #fff;display:block;width:0}.speech-bubble-blue{position:relative;padding:15px 30px;margin:0;color:#000;background:#a9f;background:-webkit-gradient(linear,0 0,0 100%,from(#cef),to(#a9f));background:-moz-linear-gradient(#cef,#a9f);background:-o-linear-gradient(#cef,#a9f);background:linear-gradient(#cef,#a9f);-webkit-border-top-left-radius:25px 50px;-webkit-border-top-right-radius:25px 50px;-webkit-border-bottom-right-radius:25px 50px;-webkit-border-bottom-left-radius:25px 50px;-moz-border-radius:25px /50px;border-radius:25px /50px}.speech-bubble-blue:before{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 50px;border-style:solid;border-color:transparent #a9f;display:block;width:0}.speech-bubble-blue:after{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 20px;border-style:solid;border-color:transparent #fff;display:block;width:0}.speech-bubble-red{position:relative;padding:15px 30px;margin:0;color:#000;background:#f59;background:-webkit-gradient(linear,0 0,0 100%,from(#fdd),to(#f59));background:-moz-linear-gradient(#fdd,#f59);background:-o-linear-gradient(#fdd,#f59);background:linear-gradient(#fdd,#f59);-webkit-border-top-left-radius:25px 50px;-webkit-border-top-right-radius:25px 50px;-webkit-border-bottom-right-radius:25px 50px;-webkit-border-bottom-left-radius:25px 50px;-moz-border-radius:25px /50px;border-radius:25px /50px}.speech-bubble-red:before{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 50px;border-style:solid;border-color:transparent #f59;display:block;width:0}.speech-bubble-red:after{content:"";position:absolute;bottom:-30px;left:50px;border-width:0 0 30px 20px;border-style:solid;border-color:transparent #fff;display:block;width:0}body{font-family:Arial,sans-serif;line-height:1.5;width:810px;margin:10px auto;padding:0 1em}iframe{width:400px;float:left;height:300px;border:1px solid black;border-left:0}.CodeMirror{float:left;width:400px;height:300px;border:1px solid black;font-size:12px}.button{text-align:center;font-size:10px;line-height:1;font-weight:700;padding:4px 6px;position:relative;display:inline-block;text-decoration:none;background-color:#f5f5f5;background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e7e7e7));background-image:-webkit-linear-gradient(top,#f5f5f5,#e7e7e7);background-image:-moz-linear-gradient(top,#f5f5f5,#e7e7e7);background-image:-ms-linear-gradient(top,#f5f5f5,#e7e7e7);background-image:-o-linear-gradient(top,#f5f5f5,#e7e7e7);color:#888;border-radius:3px;box-shadow:0 2px 4px #aaa,inset 0 2px 4px #fff;cursor:pointer}.button:hover{color:#555}.button:active{color:#333;background:#f5f5f5;box-shadow:0 1px 2px #aaa,inset 0 1px 2px #fff}.errorLine{background:#e8f2ff!important}.not-selectable{-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}#lesson-section-div{float:left;margin-left:100px;margin-top:2px;width:400px;text-align:center}progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:150px;height:8px;color:green}progress[value]::-webkit-progress-bar{background-color:#eee;border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,0.25) inset}progress[value]::-webkit-progress-value{background-image:-webkit-linear-gradient(-35deg,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.25)),-webkit-linear-gradient(left,#3a3,#5c5);border-radius:2px;background-size:20px 10px,100% 100%,100% 100%}progress[value]::-moz-progress-bar{background-image:-moz-linear-gradient(125deg,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.25)),-moz-linear-gradient(left,#3a3,#5c5);border-radius:2px;background-size:20px 10px,100% 100%,100% 100%}#lesson-section{font-size:12px;color:#777;font-weight:700}#lesson-number{font-size:10px;line-height:1;margin:10px;color:#555}#tutor{width:100%;height:260px}#tutor-avatar{width:200px;float:left;cursor:pointer}#tutor-talk{width:600px;float:left;cursor:pointer;font-size:16px}.tutor-code{font-family:monospace;cursor:pointer;font-size:14px}#code-errors{display:none;font-size:14px;color:#f37}#info-links{display:block;text-align:center;margin:20px;font-size:11px;color:#888;cursor:default}.info-link{cursor:pointer}.info-link:hover{color:#555}.info-link:active{color:#222}#simplemodal-overlay{background-color:#fff;opacity:.85}#simplemodal-container{border:7px solid #aaa;border-radius:4px;padding:12px;background-color:#fff;opacity:1;font-size:12px;cursor:pointer}#simplemodal-container h3{font-size:14px;font-weight:bold}.simplemodal-closex{position:absolute;top:-6px;right:-6px;z-index:3200;cursor:pointer;color:#999;border:4px solid #aaa;border-radius:30px;background:#fff;font-size:14px;font-weight:bold;line-height:1em;padding:0 3px;cursor:pointer}.simplemodal-closex:hover{color:#777}.simplemodal-closex:active{color:#555}
</style>
<meta property="og:title" content="Code Maven from Crunchzilla" /><meta property="og:url" content="http://www.crunchzilla.com/code-maven" /><meta property="og:image" content="http://www.crunchzilla.com/maven/maven1-h250.png" /><meta property="og:description" content="Code Maven gets teens excited about programming. It is an interactive tutorial where anyone can experiment with learning to code." /><meta name="description" content="Code Maven gets teens excited about programming. It is an interactive tutorial where anyone can experiment with learning to code." /></head><body><noscript>
<h2>
Code Maven gets teens excited about programming. It is an
interactive tutorial where anyone can experiment with
learning to code.
<p>
Code Maven from Crunchzilla uses Javascript. Please
enable Javascript if you want to play with Code
Maven. Otherwise, Code Maven will not be able to play with
you.
<br><br><br>
</h2>
</noscript><div class=not-selectable unselectable=on id=tutor><div id=tutor-avatar unselectable=on><img id=tutor-img unselectable=on src="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 style="overflow:hidden;" class=not-selectable unselectable=on><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 id=lesson-section-div><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 class=not-selectable unselectable=on style="overflow: hidden; width: 100%; line-height: 10px;"><div style="text-align: center;"><progress id=lesson-progress max=100 value=0 title="0% completed"></progress></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>FAQ</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>© 2015</span></div><div id=how-to-play style="display: none;"><h3>How to Play</h3>Code Maven teaches teens and adults a little about Javascript programming!<br><br>It's easy to play. Follow the instructions and do what Code Maven says. If you get stuck, just skip to the next lesson. You can always come back to it later!<br><br>Click on the Reset button if you really mess up your code and want to start over on a lesson. Click on the Back button to go back to a previous lesson. You can jump to a specific lesson or back to the beginning using the "Lesson Sections" link.<br><br>Code Maven 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=faq style="display: none;"><h3>Frequently Asked Questions</h3><b>What is the c in things like <code>c.save()</code>?</b><br><br><code>c</code> is a variable Code Maven creates for you that contains the Canvas' 2D context. The code that creates the variable <code>c</code>, which is hidden, looks like<br><br><code>var c = document.getElementById('pane').getContext('2d');</code><br><br><b>How can I save my code and use it outside of Code Maven?</b><br><br>Short answer: You can copy-and-paste your code and then load that code in an HTML file (either loading a separate Javascript file or inlining the Javascript in your HTML file).<br><br>Longer answer: A minimal HTML file that works would look like this:<br><br><code><html><body><br><canvas id=pane width=400 height=300></canvas><br><script><br>var c = document.getElementById('pane').getContext('2d');<br><br>// PASTE YOUR CODE HERE<br><br></script></body></html></code><br><br>If you copy that into a file, then copy-and-paste your code into it, then save the file with a filename ending in .html, you should be able to load the file in any web browser.<br><br><b>Is there any other code that is hidden from me?</b><br><br>There is also a bit of hidden code to try to stop animations when you change lessons and the code you write is instrumented to try to prevent infinite loops. You shouldn't need those to run your code outside of Code Maven.<br><br><b>Why aren't you telling me more about the syntax and terminology of Javascript?</b><br><br>There are already a lot of tutorials and textbooks out there that teach Javascript programming by explaining what a variable is, what variable scope is, what the syntax of an if statement looks like, how each of the operators work, and so on. If you want that, there are many choices available, many of which are excellent supplements to Code Maven.<br><br>What is hard to find is a tutorial that is fun, immersive, and gets you immediately building cool things. Code Maven skips a lot of the syntax and explanation you can get elsewhere (Google for it when you need it) and instead jumps straight into the fun of what you can do if you learn to code.<br><br><b>Why doesn't this work perfectly on an iPad (or other mobile device)?</b><br><br>Code Maven will load on many mobile devices, might even be a bit playable depending on your device, but it isn't designed for mobile. Why not?<br><br>Mostly because it is hard to type on mobile. Writing large amounts on a mobile device is difficult, and it is even worse when what you are trying to write is code and you need to keep looking at other parts of the code. Trying to write large amounts of traditional code on a mobile device is not a good experience.<br><br>Because of that, no one seems to have created a great app yet for learning to code on mobile, but there are good apps out there that teach programming concepts (such as Hopscotch, Move the Turtle, and Cargo-bot).<br><br><b>Can I use Code Maven offline (when not connected to the internet)?</b><br><br>Sure! Code Maven only uses the internet at the very beginning, to load the website, and then never contacts the internet again.<br><br>
So, for example, you can load Code Maven on a
laptop, then go on an airplane or walk to a park where there is
no internet connection, open your laptop there, and use Code
Maven without the internet. It even still saves your place so
you get back to the same lesson when you return! You don’t need
an internet connection except at the very beginning
when the website loads.
<br><br>
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<div id=about style="display: none;">
<h3>About</h3>
Code Maven from Crunchzilla is an interactive tutorial
that focuses 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 Maven 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 Maven 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 Maven 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 and educational
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 Maven is extremely protective of privacy. Code Maven
keeps almost no information about people who use the website.
<br><br>
Code Maven does not require registration. It does not have
your e-mail address. It does not know who you are. When you
use Code Maven, you are essentially anonymous.
<br><br>
Code Maven 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 Maven does not even know
what lesson you were on or how many lessons people using Code
Maven 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 Maven 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 Maven can be reached at maven@crunchzilla.com
<br><br>
Code Maven would love to hear your suggestions for how she can
teach better. Code Maven doesn't like complaints, but you can send
them to her too, and she will get very sad.
<br><br>
Code Maven 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 Maven does not like your web browser. Your browser
is really old. You need a new web browser.
<br><br>
Code Maven likes <a href="http://google.com/chrome">Chrome</a>
and <a href="http://mozilla.com/firefox">Firefox</a>. You can
play with Code Maven if you have those. Go get them and let's play!
<br><br>
If you want to try to use Code Maven anyway, go ahead and try, but
Code Maven probably will not come out to play. Your web browser
isn't good. She does not like it at all.
<div class="simplemodal-close simplemodal-closex">X</div>
</div>
<script src=scripthw.js></script>
</body>
</html>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img",1);//-->
</script>