Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

New Tour.

  • Loading branch information...
commit 5e6242b541eda3cb31da23676e69d552fcd7ef20 1 parent 0fa7eb0
Steve Klabnik steveklabnik authored

Showing 1 changed file with 135 additions and 1,001 deletions. Show diff stats Hide diff stats

  1. +135 1,001 lessons/tour.rb
1,136 lessons/tour.rb
... ... @@ -1,18 +1,24 @@
1   -lesson_set "Hackety Hack" do
2   - lesson "Your first program"
3   - page "Let's Get Going, Shall We?" do flow do
  1 +lesson_set "Hackety Hack Tour" do
  2 + lesson "Welcome!"
  3 + page "Why hello there!" do flow do #the flow is needed for the right layout!
4 4 para "Welcome to your very first lesson in hacking!"
5 5 para "This whole side of the screen is the ", em("Hackety Hack Tutor"),
6 6 ". You can move forward through the lessons by clicking the ",
7   - em("Next"), " button ("
  7 + em("Next"), " button("
8 8 icon_button :arrow_right, nil do
9 9 alert "You should click on the actual button, below! =)"
10 10 end
11 11 para "). Give it a shot!"
12 12 end end
13 13
14   - page "The Tutor Controls" do
15   - para "Before we jump right in, just take a minute to look at the controls in the bar below."
  14 + page "Good Job!" do
  15 +
  16 + para "See? Super easy. Let's explore the rest of Hackety Hack."
  17 + para "You can access the different functions of Hackety through the buttons ",
  18 + "on the left side of the screen. For example, you got here by clicking ",
  19 + "on 'Lessons.' There are 8 of those buttons, ",
  20 + "but since you're already on Lessons, let's talk about them first."
  21 + para "Before we move on, just take a minute to look at the controls in the bar below."
16 22 flow do
17 23 icon_button :arrow_left, nil
18 24 para strong("back"), ": goes back one page"
@@ -31,1015 +37,143 @@
31 37 end
32 38 para "Don't forget! Press "
33 39 icon_button :arrow_right, nil
34   - para "to move to the next lesson. Have at it!"
35   - end
36   -
37   - # the flow is to have the image in the same line as the text
38   - page "Coming Back to your lesson" do flow do
39   - para "Clicking the close button at the bottom will stop the lesson. ",
40   - "To come back to it is easy as pie! Just click the lightbulb ( "
41   - image "#{HH::STATIC}/tab-tour.png", :margin => 6
42   - para ") in the sidebar on the far left. Then click on the Lesson Set you were ",
43   - " following and you'll go back to the lesson, right where you left off! ",
44   - strong("Give it a try right now")
45   - end end
46   -
47   - page "A small aside about programming" do
48   - para "Let's have a small chat about programming before we write your ",
49   - "first program."
50   - para "When we build software, we often talk about ", em("writing"), " programs. ",
51   - "This is no accident; computers speak ", em("languages"), " just like ",
52   - "people do! Well, almost just like people. Computers are kind of stupid ",
53   - "and so their languages are much simpler than human languages. English ",
54   - "is far more complicated than anything a computer can understand!"
55   - para "In this tutorial, you'll be learning a computer language called ",
56   - em("Ruby"), ". "
57   - end
58   -
59   - page "A small aside about Ruby" do
60   - para "Ruby was written by an upstanding guy named Matz. When he was creating Ruby, ",
61   - "Matz specifically wanted to make it a pleasant languages for people ",
62   - "as well as for computers. I think he did a pretty solid job!"
63   - para "Ruby is a very versatile language. You can make any kind of program ",
64   - "that you can imagine, and several that you can't! People make lots ",
65   - "of different things with it, including web sites, games, and tons of ",
66   - "fun things! In fact, Hackety Hack itself is written using Ruby!"
  40 + para "to move to the next part. Have at it!"
  41 + end
  42 +
  43 + lesson "Lessons"
  44 +
  45 + page "A Lesson lesson." do
  46 + para "When you click on the Lesson button, it'll bring you to a list of all of ",
  47 + "the lessons that come with Hackety. For now, there's two: This Tour, and ",
  48 + "a basic introduction to Ruby. More Lessons will be added, and eventually, ",
  49 + "you'll be able to write and share your own Lessons with other Hackety ",
  50 + "Hackers."
  51 + para "Lessons are just simple Ruby files. They're fun to make! You can even make ",
  52 + "lessons advance automatically based on certain events. For example, click ",
  53 + " on the Home button to move on."
  54 + para "The home button looks like this:"
  55 + image "#{HH::STATIC}/tab-home.png", :margin => 6 do
  56 + alert("Not this one, silly! the one on the left!")
  57 + end
  58 + next_when :tab_opened, :Home
67 59 end
68 60
69   - page "Your first program" do flow do
70   - para "Let's start with a very simple program.\n"
71   - para "Click on the "
72   - image "#{HH::STATIC}/tab-new.png", :margin => 6
73   - para "icon in the tab bar on the left to begin."
  61 + lesson "Home"
  62 + page "Welcome Home" do
  63 + para "This is the home screen, which shows you two very important things: your ",
  64 + "own programs, and the sample programs. Everyone starts off with one simple ",
  65 + "program: Hello, world! I won't even ask you to open it, check it out:\n"
  66 + embed_code 'alert "Hello, world!"', :run_button => true
  67 + para "This is an actual Ruby program, click the button to try it out! You'll ",
  68 + "learn more about Ruby itself in the Beginning Ruby Lesson."
  69 + end
  70 +
  71 + page "Samples" do flow do
  72 + para "If you click on the 'Samples' tab, you can see a bunch of sample programs ",
  73 + "that we've included for some inspiration. There's a few interesting ",
  74 + "animations, some games, and a few other things."
  75 + para "That's all there really is to say about the homepage. Try opening the ",
  76 + "Editor. Here's its icon:"
  77 + image "#{HH::STATIC}/tab-new.png", :margin => 6 do
  78 + alert("Not this one, silly! the one on the left!")
  79 + end
74 80 next_when :tab_opened, :Editor
75 81 end end
76 82
77   - page "Asking" do
78   - para "In the large box, type the following code exactly as written:"
79   - embed_code "# Asking and saying\n" +
80   - 'name = ask("Your name please?")' + "\n" +
81   - "puts(name)"
82   - para "Click ", em("Run"), " when you're finished."
83   - next_when :program_run, :code => /\Wask\W.*\Wputs\W/
84   - end
85   -
86   - page "Okay, what happened?" do
87   - para "Congrats! See, that was a peice of cake!"
88   - para "Now, take a moment to look at the program. See if you can figure ",
89   - "out how it works. What do you suppose the ", code("ask"),
90   - " command does? And what is that ", code("name"), " word for?"
91   - para "Now ", em("Save"), " the program. Call it ", em("Asking"), ". "
92   - next_when :save, :any
93   - end
94   -
95   - page "Let's Hang on to This" do
96   - flow do
97   - para "Now click on the ", em("Home"), " icon ( "
98   - image "#{HH::STATIC}/tab-home.png", :margin => 6
99   - para ") in the tab bar."
100   - next_when :tab_opened, :Home
  83 + lesson "Editor"
  84 + page "Using the Editor" do
  85 + para "This is where the magic happens: all of your programs will be created in ",
  86 + "the editor. Give it a shot: try typing this program in.\n"
  87 + embed_code 'name = ask "What is your name?"
  88 +alert "Hello, " + name + "."'
  89 + para "\nAfter doing so, you can try running the program by pressing the ",
  90 + "'Run' button in the lower right corner."
  91 + end
  92 +
  93 + page "Saving and Uploading Programs" do
  94 + para "To save your program, simply click the 'Save' button. It'll prompt you for ",
  95 + "a title, and then the program will appear on your Home screen."
  96 + para "Once you've saved your program, two new buttons appear: 'Copy' and 'Upload.",
  97 + "' Copy will duplicate your program, and then ask you for a new name. This ",
  98 + " is really useful if you'd like to modify one of the example programs. ",
  99 + "Upload will send a copy of your program to the Hackety Hack website, ",
  100 + "where you can show it off to other Hackety Hackers. :) More about this ",
  101 + "when we talk about Preferences."
  102 + end
  103 +
  104 + lesson "Help"
  105 + page "Getting Help" do flow do
  106 + para "The next tab is the Help tab. It looks like this: "
  107 + image "#{HH::STATIC}/tab-help.png", :margin => 6 do
  108 + alert("Not this one, silly! the one on the left!")
101 109 end
102   - end
103   -
104   - page "Your Saved Programs" do
105   - para "Notice that the program is listed under ", em("Programs"),
106   - " You should see the name ", em("Asking"), ". Well done!"
107   - end
108   -
109   - page "A Note About Saving" do
110   - para "In the first line of your program, you placed a short comment. ",
111   - "Comments start with the number sign. That criss-cross ",
112   - "chex mix thing. Comments are ignored by Ruby."
113   - para "However, Hackety Hack will check the beginning of your program for a",
114   - " comment. If one is found, it will be used as the description. "
115   - end
116   -
117   - page "How Asking Works" do
118   - para "The ", code("ask"), " command you used pops up a window ",
119   - "and lets the person at the computer type something in. Whatever they ",
120   - "end up typing is handed back to your program. You stored ",
121   - "the typing in the ", code("name"), " variable."
122   -
123   - para "So how does Ruby know that ", code("ask"), " is a command and ",
124   - code("name"), " is a variable? Because of their position in the ",
125   - '"sentences" of your code. For example, variables are created with ',
126   - "an equals sign. Since ", code("name"), " comes before the equals ",
127   - "sign, it is a variable."
128   -
129   - embed_code 'name = ask("Your name please?")'
130   -
131   - para "Part of coding is simply just spotting the order of things."
132   -
133   - para strong("EXTRA CREDIT"), ": Try changing the question to something ",
134   - "a bit meaner. Make your program all crabby."
135   - end
136   -
137   - page "A small note about order" do
138   - para "If you've paid close attention, you'll have noticed that the code ",
139   - "works in order, top to bottom! It's sort of like a to-do list."
140   - para "This is pretty similar to English. You have to start somewhere! ",
141   - "And just like English, programming languages also have grammar and ",
142   - "syntax rules that govern where commands, variables, and other things ",
143   - "go. We're not going to study those rules directly, we'll just pick ",
144   - "them up as we go. But if you loved English class, you could learn ",
145   - "those things if you'd like."
146   - para "However, we don't think about nouns and verbs when we talk in English, ",
147   - "and so don't over-think it! You'll pick it up pretty easily, as we go along."
148   - end
149   -
150   - page "Saying" do
151   - para "Now we're going to do something else with that name."
152   -
153   - para "Here's the new program (the first 2 lines are the same):"
154   - embed_code "# Asking and saying\n" +
155   - 'name = ask("Your name please?")' + "\n" +
156   - 'puts("Your name is #{name.length()} letters long")'
157   -
158   - para "Type this one in carefully. You'll notice in the quotes that there ",
159   - "is a little number sign and some curly braces. The curly braces are ",
160   - "right above your square bracket keys (on a US keyboard)."
161   -
162   - para "Click ", em("Save"), " to save what you've done so far. Then, ",
163   - em("Run.")
164   - end
165   -
166   - page "What's it Good For?" do
167   - para "The ", code("puts"), " command is nice, because you can tell the ",
168   - "person at the computer what's going on or just tell him something. ",
169   - "You can ",
170   - "say ", strong("sending e-mail"), " or ", strong("downloading mp3"),
171   - " or ", strong("just crunching away..."), " depending on what your ",
172   - "program is doing. It's a very simple thing, but hey.. this is only ",
173   - "lesson 1!!"
174   -
175   - para "We'll skip explanation of the other stuff for now, but run the ",
176   - "program a few more times and see if you can tell for yourself:"
177   - item "What does ", code('name.length()'), " do?"
178   - item "What's that thing surrounding it? ", code('#{....}')
179   - end
180   -
181   - page "Counting" do
182   - para "Okay, again: keep the first two lines of the program and go like this:"
183   - embed_code "# Asking and saying\n" +
184   - 'name = ask("Your name please?")' + "\n" +
185   - "1.upto(name.length()) do |x|\n" +
186   - ' puts "Your name has #{x} letters."' + "\n" +
187   - "end"
188   -
189   - para "Notice the pipe symbols in the program. At the end of the third ",
190   - "line, you'll see ", code("|x|"), ". Those two lines around the ",
191   - code("x"), " are pipe symbols. They are like a little waterslide that ",
192   - code("x"), " is shooting down. The pipe symbol is right above your ",
193   - "Enter key. Press shift and that key and you'll see a pipe."
194   - end
195   -
196   - page "upto" do
197   - para "Just like ", code("ask"), " and ", code("puts"), " are commands, so also ",
198   - "is ", code("upto"), " a command. But why does it have a dot before it? ",
199   - "Why is it attached to the number 1?"
200   -
201   - para "Every command has a front and a back. The front of a command can ",
202   - "attach to something with a dot. The back of a command can attach to ",
203   - "something with parentheses."
204   -
205   - embed_code(
206   - "1.upto(6) do |x|\n" +
207   - " puts(\"Holding up \#{x} fingers\")\n" +
208   - "end")
209   -
210   - para "The ", code("upto"), " command is a part of every number. In this ",
211   - "case, it is a part of the number 1. Think of it as a vicious dog that ",
212   - "has a leash to its owner. The dot is the leash."
213   - end
214   -
215   - page "Upto the Dog" do
216   - embed_code "1.upto(6) do |x|"
217   - para "Back to the dog analogy! So, the parentheses are the dog's mouth, ",
218   - "eating the number six. The thing to remember is: commands are owned ",
219   - "by whatever is on the left-side of the dot. And its gobbling up ",
220   - "everything in the parentheses. This gives the command energy to do ",
221   - "its job!! You know: Scooby Snacks."
222   -
223   - embed_code('"Hello?".upto(6)')
224   -
225   - para "See, that won't work. Because quoted things don't own a dog called ",
226   - code("upto"), ". Because ", code("upto"), " is for counting!!"
227   -
228   - para "We're counting from 1 ", em("up to"), " 6. Nice and easy to read."
229   - end
230   -
231   - page "What Went Wrong?" do
232   - para "Info about error messages can be shown by pressing ", em("Shift + /"),
233   - " (on some keyboards try ", em("Alt + /"), "). So if you think or know something went wrong, like now, ",
234   - "you can give it a try."
235   - end
236   -
237   - page "Lesson One Complete!" do
238   - para "At this point, you probably have a lot of questions and you may ",
239   - "feel that there's a lot of unexplained stuff in there. Well, of ",
240   - "course there is!! You can't just know everything right away. But you ",
241   - "have learned some things:"
242   -
243   - item strong("Commands"), " do things, just like ", em("dogs"), " do things."
244   - item strong("Variables"), em(" store "), "things."
245   - item "You create a variable with ", strong("an equals sign"),
246   - ". That's how Ruby knows -- by that equals sign!"
247   - item "Commands are owned by the thing on the left-side of the dot."
248   - item "Commands eat useful things in ", strong("parentheses"),
249   - ", as if they were biscuits."
250   - item "The commands ", code("ask"), ", ", code("puts"), " and ", code("upto"), " were explored a bit."
251   -
252   - para "That's pretty good, actually. Take a rest, enjoy your accolades ",
253   - " and let your brain soak in what you've got so far."
254   -
255   - # TODO: add an EXTRA CREDIT?
256   - end
257   -
258   -
259   - lesson "Getting Outdoors"
260   -
261   - page "What now?" do
262   - para "In Lesson One, we asked some things and we said some things. Not bad, ",
263   - "not bad. But not incredibly useful, you know? How about this: let's",
264   - " make the computer do something."
265   -
266   - para "Specifically: let's get outdoors and start writing code that can ",
267   - "connect to the Web."
268   - end
269   -
270   - page "Downloading" do
271   - flow do
272   - para "Start a new program. (Just click on the "
273   - image "#{HH::STATIC}/tab-new.png", :margin => 6
274   - para ")"
275   - end
276   -
277   - embed_code "# A simple file downloader.\n" +
278   - 'url = ask("Enter a Web address:")' + "\n" +
279   - 'save_as = ask("Save the file as:")' + "\n" +
280   - 'Web.download(url, save_as)'
281   -
282   - para "Save the program as ", strong("Downloader")
283   - end
284   -
285   - page "Running the Program" do
286   - para "This program asks twice. In the first ", code("ask"),
287   - " box, type in an address to some file on the Web. How about the Dead ",
288   - "Hensons' rendition of the \"Pinball Number Count\"?"
289   -
290   - para em("http://www.deadhensons.com/media/pinball_clip.mp3")
291   -
292   - para "Then, in the second box, type in a name for the downloaded file. ",
293   - "Like: ", em("pinball.mp3")
294   -
295   - para "What did the program do? Can you tell just by looking at the code?"
296   - end
297   -
298   - page "Where Did the File Go?" do
299   - para "So, you saw the file downloading, right? Now to find where it ",
300   - "downloaded. Hackety Hack keeps your downloaded files in a folder, ",
301   - "right next to where your programs are saved. Let's go dig it up!"
302   -
303   - para strong(em(HH::USER))
304   -
305   - para "Go to the folder above (use Windows Explorer if you are on Windows, ",
306   - "or start at \"My Computer\" and click down through each folder)."
307   - end
308   -
309   - page "Your Hacks Folder" do
310   - para "You should see a group of files ending in .rb, as well as a folder ",
311   - "marked ", strong("Downloads"), ". Aha! Each of the .rb files is one of ",
312   - "your programs. These are genuine Ruby programs you can pass around to ",
313   - "other Hackety Hackers. If a friend gives you a script, you can copy ",
314   - "it into this folder and it will appear in Hackety Hack!"
315   - para "A small note! Sometimes, the .rb isn't displayed. This depends on ",
316   - "the settings on your specific computer!"
317   -
318   - para "Now, check the ", strong("Downloads"), " folder. Well, well, well. "
319   - "Fancy that. "
320   - end
321   -
322   - page "The Web Library" do
323   - para "To download the MP3, we use the ", code("Web.download"), " command. ",
324   - "This is just another command like ", code("ask"), " and ", code("puts"),
325   - ", except that it is a part of Hackety Hack's Web library of commands. ",
326   - "(In Ruby, these commands are also called ", strong("methods"),
327   - ". Just so you know.)"
328   -
329   - para "To keep things organized, some commands are kept in libraries. ",
330   - "Stuff like ", code("Web.fetch"), ", ", code("Web.page"), " and ",
331   - code("Web.download"), " all happen to relate to working with the ",
332   - "Internet, so they are kept in the ", code("Web"), " library."
333   - end
334   -
335   - page "As For Your Private Library" do
336   - para "In upcoming lessons, you'll learn how to add your own libraries and ",
337   - "how to use libraries from other hackers. This opens Hackety Hack up ",
338   - "to new commands that don't come with it."
339   -
340   - para strong("EXTRA CREDIT"), ": Hackety Hack comes with a command ",
341   - code("ask_save_file()"), " which is a special kind of ", code("ask"),
342   - ". See if you can change the third line of your program to use this ",
343   - "command (TIP: a command can have no arguments)."
344   - end
345   -
346   - page "Fetching (Not Saving!)" do
347   - para "While we're in the Web library, let's play with ",
348   - code("Web.fetch"), ". I mean you basically know everything there is ",
349   - "to know about ", code("Web.download"), ". It downloads files from ",
350   - "the Internet and saves them. ", strong("THE END"), "."
351   -
352   - para "But ", code("Web.fetch"), " is a bit smarter. It grabs things off ",
353   - "the Internet and, rather than saving, lets you play with the thing a ",
354   - "bit."
355   - end
356   -
357   - page "MeFi" do
358   - para "Here's the next example. Save this one as ", em("MeFi"), "."
359   -
360   - embed_code "# Read the Metafilter feed.\n" +
361   - 'url = "http://xml.metafilter.com/rss.xml"' + "\n" +
362   - 'Web.fetch(url) do |feed|' + "\n" +
363   - " puts feed\n" +
364   - "end"
365   -
366   - para "Run the script. You'll see Hackety Hack download a file... but ",
367   - "something else happens... hmmm!"
368   - end
369   -
370   - page "Blog, You Know?" do
371   - para "Metafilter is a blog. So this example could work with any blog you ",
372   - "like. The Web address we're using here is Metafilter's news feed. ",
373   - "(Often sites will call this RSS or XML. Often, blogs will have a ",
374   - "link in a sidebar or something.)"
375   -
376   - para "Here are a few other feeds:"
377   - item "http://digg.com/rss/index.xml"
378   - item "http://feeds.engadget.com/weblogsinc/engadget"
379   - item "http://feeds.feedburner.com/boingboing/iBag"
380   - end
381   -
382   - page "Playing With Fetch" do
383   - para "Okay, so we've got Metafilter's feed with all the latest news ",
384   - "posted on the blog. So, then what? What good is this? Can't you ",
385   - "just go ", strong("straight to metafilter.com in a regular browser??")
386   -
387   - para "Let's add a few lines to our program:"
388   - embed_code "# Read the Metafilter feed.\n" +
389   - 'url = "http://xml.metafilter.com/rss.xml"' + "\n" +
390   - 'Web.fetch(url) do |feed|' + "\n" +
391   - " feed.items().reject!() do |item|\n" +
392   - " item.description().length() > 500\n" +
393   - " end\n" +
394   - " puts( feed.items() )\n" +
395   - "end"
396   - end
397   -
398   - page "Ahh! Complicated!" do
399   - para "Okay, let's step through this program. It's quite a bit more ",
400   - "complicated, isn't it? But it's only seven lines, so I think we can ",
401   - "figure it out."
402   -
403   - para "The Metafilter news gets saved in a variable called ", code("feed"),
404   - ". So we can play with it. In line 4, the ", code("reject!"),
405   - " command is used. This command deletes things from a list. ",
406   - "And the news feed contains a list of news ", code("items"),
407   - ". Hmmm. How does this all fit together?"
408   -
409   - end
410   -
411   - page "Hidden in the Feed " do
412   - para "On the previous page we wrote:"
413   -
414   - embed_code "puts( feed.items() )\n"
415   -
416   - para "When you run this, the ", code("items"), " will be listed as ",
417   - strong(em("an Array")), " which is a list of things."
418   - end
419   -
420   - page "Quickly, About Arrays" do
421   - para "You can create arrays (also known as \"lists\") with square ",
422   - "brackets."
423   -
424   - para "Try this little program. (You can hit Ctrl-Z to undo your changes ",
425   - "one-by-one and Ctrl-Y to redo those changes again.)"
426   -
427   - embed_code 'puts(["HELLO", 1, 2, 3])'
428   -
429   - para "As you can see, you put square brackets on each end. And commas ",
430   - "between each item. Like a caterpillar stapled to the screen. The ",
431   - "square brackets are the staples and the commas are the caterpillar's ",
432   - "legs."
433   - end
434   -
435   - page "Back to Reject!" do
436   - para "Now that we know that a blog feed is just an ordinary list of ",
437   - "things, we can start treating it like one. The ", code("reject!"),
438   - " method will delete stuff from the list that we don't want. ",
439   - "It has an exclamation point ", strong("because it's dangerous!!"),
440   - " Kablooey. It deletes that stuff for good. "
441   -
442   - embed_code "# Read the Metafilter feed.\n" +
443   - 'url = "http://xml.metafilter.com/rss.xml"' + "\n" +
444   - "Web.fetch(url) do |feed|\n" +
445   - " feed.items().reject!() do |item|\n" +
446   - " item.description().length() > 500\n" +
447   - " end\n" +
448   - " puts( feed.items() )\n" +
449   - "end"
450   -
451   - para "This program will remove any thing from the list which is longer ",
452   - "than 500 letters. We just want to focus on the short little ",
453   - "Metafilter posts that show up sometimes. We're not in the mood for ",
454   - "anything too long."
455   - end
456   -
457   - page "We Read a Feed in a Very Special Way" do
458   - para "AH! So this is pretty handy, huh? If you like blogs, this is just ",
459   - "the start. You could write programs to watch your favorite blogs ",
460   - "for certain words. You could write a program to only show items ",
461   - "containing MP3s. And we'll get into some other fancy things soon ",
462   - "enough."
463   - end
464   -
465   - page "Methods again" do
466   - para "There is one more thing that you should know about methods: ",
467   - "you can leave out the parenthesis if you want, they are there just ",
468   - "to more easily see what the methods are. But you can also write:"
469   -
470   - embed_code "# Read the Metafilter feed.\n" +
471   - 'url = "http://xml.metafilter.com/rss.xml"' + "\n" +
472   - "Web.fetch url do |feed|\n" +
473   - " feed.items.reject! do |item|\n" +
474   - " item.description.length > 500\n" +
475   - " end\n" +
476   - " puts feed.items \n" +
477   - "end"
478   -
479   - para "It works just the same!"
480   - end
481   -
482   - page "About the Do and End" do
483   - embed_code " feed.items().reject!() do |item|\n" +
484   - " item.description().length() > 500\n" +
485   - " end"
486   - para "We're going to skip getting too detailed on the ", code("do ... end"),
487   - " part, except to say: it checks to find blog entries longer than 500 ",
488   - "letters. But we saw this in the last lesson, when we counted ",
489   - code("upto"), ":"
490   -
491   - embed_code(
492   - "1.upto(6) do |x|\n" +
493   - " puts(\"Holding up \#{x} fingers\")\n" +
494   - "end")
495   -
496   - para "This ", code("do ... end"), " section is called a ", strong("block"),
497   - ". It's usually slightly indented, but that's not necessary at all. ",
498   - "Indenting the block makes it stand out a bit more, to help us see it."
499   - end
500   -
501   - page "Lesson Two Meets a Timely End" do
502   - para "Well, that was thrilling! You moved right off into doing some ",
503   - "useful things. We started to grab stuff off the Web: downloading ",
504   - "files and fetching blogs."
505   -
506   - para "Here's a few programming bits you've picked up:"
507   - item "The ", strong("Web library"), " contains commands for horsing ",
508   - "around with the Internet."
509   - item code(strong("Web.download")), " saves files off the web."
510   - item "They get stored in ", strong("your Hackety Hack folder"), "."
511   - item "Your programs are saved in that folder, too!"
512   - item code(strong("Web.fetch")), " can grab blog feeds and web pages."
513   - item "You can dissect a feed and change it or get stuff out of it."
514   - item "Web feeds are just ", strong("a list of items"), "."
515   - item "A list is also called ", strong("an Array"), "."
516   -
517   - para "Very, very good. I do say. Take a break, eat a gigantic Dagwood ",
518   - "sandwich, and please return when you are duly refreshed."
519   - end
520   -
521   -
522   -
523   - lesson "Secret Agent"
524   -
525   - page "Something Interesting" do
526   - para "So, you're still trying to get comfortable with Ruby, but we've ",
527   - "seen a lot more of what Hackety Hack can do. Downloading and eating ",
528   - "blogs, not bad."
529   -
530   - para "But this lesson's going to hopscotch all that other stuff. In this ",
531   - "lesson, you'll learn to create a program that lets you encrypt and ",
532   - "decrypt messages!! ",
533   - "And we'll start to figure out what all the little pieces are: ",
534   - "strings, numbers, blocks. Stuff like that."
535   - end
536   -
537   - page "window" do
538   - para "Start up another new program. Save this one as ",
539   - strong("Secret Agent"), ":"
540   -
541   - embed_code "# Encrypting messages\n" +
542   - "window do\n" +
543   - " stack do\n" +
544   - ' title "Cypher"' + "\n" +
545   - ' para "My Secret Agent application"' + "\n" +
546   - " end\n" +
547   - "end"
548   -
549   - para em("Save"), " it ", "and ", em("Run"), " it."
550   -
551   - para "We're using a few things we've seen before, but let's go over each ",
552   - "of them, to be clear."
553   -
554   - para "We've talked about commands (also called ", strong("methods"),
555   - ".) What are the methods in the code? "
556   - end
557   -
558   - page "Let's See If You Were Right" do
559   - para "There are four methods in all: ", code("window"), ", ", code("stack"),
560   - ", ", code("title"), " and ", code("para"), "."
561   -
562   - para code("window"), " opens a new window, while ", code("stack"), " creates a ",
563   - "box with it's content stacked into a pile. Try removing ",
564   - code("stack do"), " and its matching " , code("end"),
565   - " to see the difference."
566   -
567   - para "The ", code("para"), ' method means "paragraph" here.'
568   - end
569   -
570   - page "Blocks" do
571   - para "Attached to ", code("window"), " is a block."
572   -
573   - embed_code "window do\n" +
574   - " ...\n" +
575   - "end\n"
576   -
577   - para "The block is everything between ", code("do"), " and ", code("end"),
578   - ". A block is a group of code attached to a command. Again: a ",
579   - strong("group of code"), " attached to a method."
580   -
581   - para "A block is like ", strong("a new lung"), ". You plug it in to make a ",
582   - "method breathe. The ", code("window"), " method gives its block one ",
583   - "puff of air. And the block uses that puff of air to make all the parts ",
584   - "that go inside the window. One window, made in one puff of air."
585   - end
586   -
587   - page "Blocks (cont'd.)" do
588   - para "We used a block a few other times. Here's one:"
589   -
590   - embed_code(
591   - "1.upto(6) do |x|\n" +
592   - " puts(\"Holding up \#{x} fingers\")\n" +
593   - "end")
594   -
595   - para "In this one, the block gets ", strong("six puffs of air"),
596   - " from the method ", code("upto"), ". Every time we count a new number, ",
597   - "the block gets a puff. And it uses that puff to say something and ",
598   - "take a short nap."
599   -
600   - para "Puff. Puff. Puff. Puff. Puff. Puff! And after that sixth one, ",
601   - "that block's life is over and done."
602   - end
603   -
604   - page "So, Is It Totally Disassembled?" do
605   - para "Okay, so we've almost finished taking this apart:"
606   -
607   - embed_code "# Encrypting messages\n" +
608   - "window do\n" +
609   - " stack do\n" +
610   - ' title "Cypher"' + "\n" +
611   - ' para "My Secret Agent application"' + "\n" +
612   - " end\n" +
613   - "end"
614   -
615   - para "First, we have the ", code("window"), " method, which ",
616   - "is attached to a block, an iron lung that gets turned on and handed ",
617   - "a puff of air. In the block, the ", code("stack"), " command runs ",
618   - "and in turn hands a puff of air to another block containing the ",
619   - "code that displays the title and the paragraph."
620   - end
621   -
622   - page "Words in Strings" do
623   - para "Let's talk about the quoted phrases."
624   - embed_code '"My Secret Agent application"'
625   -
626   - para "This is a string. It's a short string of letters. When you think ",
627   - '"string", just imagine each letter is ',
628   - strong("clipped to a clothesline"), ". The little quotes are the clips ",
629   - "on each end, hooked on to the clothesline."
630   - end
631   -
632   - page "Upsy Reversy" do
633   - para "Strings are great for messing with words. Try changing the third ",
634   - "line to:"
635   - embed_code 'title "Cypher".upcase().reverse()'
636   -
637   - para "And run it. And think about that."
638   -
639   - para "What is ", code("title"), "? And what are ", code("upcase"),
640   - " and ", code("reverse"), "??"
641   - end
642   -
643   - page "Button" do
644   - para "Let's change the insides of the window a bit."
645   -
646   - embed_code "# Encrypting messages\n" +
647   - "window do\n" +
648   - " stack do\n" +
649   - ' title "Cypher"' + "\n" +
650   - ' edit_box "put your text here"' + "\n" +
651   - ' button "Encrypt/Decrypt"' + "\n" +
652   - " end\n" +
653   - "end"
654   -
655   - para em("Run"), " it."
656   - para "Hey neat! Try writing some text and clicking on the button. Did it ",
657   - "work?"
658   - end
659   -
660   - page "Well, Not Really" do
661   - para "Hmm. Actually. That didn't do anything. That is unacceptable!"
662   -
663   - para "Let's change the line defining the button, giving it a block:"
664   -
665   - embed_code ' button "Encrypt/Decrypt" do' + "\n" +
666   - ' puts "the button got pressed!"' + "\n" +
667   - ' end'
668   -
669   - para "That tells Hackety Hack to attach the button to the ",
670   - "block that contains the ", code("puts")," command. Try running it again ",
671   - "and press the button a few times. Watch the output on the Hackety ",
672   - "Hack window. So what happens? Every time the button gets pressed it ",
673   - "gives a puff of air to the block and its code get executed."
674   - end
675   -
676   - page "ROT 13" do
677   - embed_code "# Encrypting messages\n" +
678   - "window do\n" +
679   - " stack do\n" +
680   - ' title "Cypher"' + "\n" +
681   - ' box = edit_box "put your text here"' + "\n" +
682   - ' button "Encrypt/Decrypt" do' + "\n" +
683   - ' txt = box.text' + "\n" +
684   - ' box.text = txt.rot13' + "\n" +
685   - " end\n" +
686   - " end\n" +
687   - "end"
688   -
689   - para "The edit box is stored in a variable named ", code("box"),
690   - ". Its content can then be accessed with ", code("box.text"),
691   - ", while content of the box is changed with ", code("box.text ="), "."
692   -
693   - para "In Hackety Hack strings have the method ", code("rot13"),
694   - " that can be used to encrypt and decrypt their content."
695   -
696   - para strong("ROT 13"), ' means "rotate by 13 places" and is a simple ',
697   - "encryption method where each letter is replaced by the letter 13 ",
698   - "positions beyond it in the alphabet (when you reach the Z you ",
699   - "to continue with the A). So A becomes N, B becomes O, and so on... ",
700   - "Because there are 26 letters in the English language, you'll ",
701   - "get the original text back."
702   - end
703   -
704   - page "Lesson Three is In The Bag" do
705   - para "Wonderful, you've made a very simple program that helps you ",
706   - "encrypt messages. But look at all you learned:"
707   -
708   - item "You used ", strong(code("window")), " to make a little application ",
709   - "with its own window."
710   - item "Methods like ", code("edit_box"), " and ", code("button"),
711   - " were used to add content to the window."
712   - item strong("Strings"), " are letters inside quotes. (Clipped to a ",
713   - "clothesline.)"
714   - item strong("Blocks"), " are like lungs, they can get one or more puffs ",
715   - "of air from the method they are attached to."
716   -
717   - para "For now, have a rest. The next lesson will be short, but you ",
718   - "deserve a break after making your own super Secret Agent program."
719   - end
720   -
721   -
722   -
723   - lesson "The Ruby Language"
724   -
725   - page "Cheating" do
726   - para "You've done some useful things. Downloaded files, built a simple ",
727   - "encryption application. But let's stop and figure out how to ",
728   - "speed up your learning."
  110 + para " Click it, and it'll open up a new window. Browse around and come back, ",
  111 + "I'll be here."
  112 + next_when :tab_opened, :Help
  113 + end end
729 114
730   - flow do
731   - para "In the tab bar of Hackety Hack, you'll see a series of little ",
732   - "icons: a little house, a lightbulb. Click on the "
733   - image "#{HH::STATIC}/tab-cheat.png", :margin => 6
734   - para "icon. This icon brings up the Cheat Sheet."
  115 + page "Okay, well... Shoes." do
  116 + para "That's a lot of help! Hackety Hack is built with Shoes, which is a ",
  117 + "toolkit for creating GUI programs in Ruby. All of the programs that ",
  118 + "you make in Hackety Hack are built with Shoes. That manual contains ",
  119 + "the entire Shoes reference, and there's a lot! Luckily, there's also ",
  120 + "a much shorter cheat sheet too. Go ahead click it:"
  121 + image "#{HH::STATIC}/tab-cheat.png", :margin => 6 do
  122 + alert("Not this one, silly! the one on the left!")
735 123 end
736   -
737 124 next_when :tab_opened, :Cheat
738 125 end
739 126
740   - page "I Recommend That You Cheat Immediately" do
741   - para "You don't need to read the whole thing just yet. We're just going ",
742   - "to glance over a few parts of it to get you comfortable with reading ",
743   - "the Cheat Sheet. You can keep this out while you're writing ",
744   - "programs in the main window."
745   - end
746   -
747   - page "Numbers" do
748   - para "Let's read the second box on the Cheat Sheet, which talks about ",
749   - "Numbers. ", em("Any Series of Digits.")
750   -
751   - para "Each box on the Cheat Sheet is carefully put together. On the left ",
752   - "side, the title of the topic with an easy description. A Number. ",
753   - "What is a Number? It's any series of digits! And, on the right ",
754   - "side is a few short examples with the numbers highlighted in a color."
755   - end
756   -
757   - page "Looking at the Numbers Examples" do
758   - para "The two examples here illustrate two uses of numbers: first, ",
759   - "multiplying a number. And, second, using a number with a method and ",
760   - "a block."
761   -
762   - para "In the main window, start a new program. Let's get multiplication ",
763   - "working. Type in the following: "
764   -
765   - embed_code "days = years * 365"
766   -
767   - end
768   -
769   - page "Days and Years" do
770   - para "Did it work? (It did not.) "
771   - para "So, how can we fix this program? Try setting the ", code("years"),
772   - " variable right before running that code."
773   -
774   - para "And also add at the end: ", code("puts days")
775   -
776   - para "Any luck?"
777   -
778   - end
779   -
780   - page "On to the Times" do
781   - para "Move to the second example on the cheat sheet. Try:"
782   -
783   - embed_code '5.times { puts "Odelay!" }'
784   -
785   - end
786   -
787   - page "Numbers are done" do
788   - para "And that's it. These two examples are the key to using numbers. ",
789   - "Numbers are for math. Or numbers are for repeating something. "
790   - end
791   -
792   - page "Arrays" do
793   - para "Move down to the fifth box on the cheat sheet. ", strong("Arrays"),
794   - ". ", em("A List of Things."), " We've seen Arrays before, too. ",
795   - "So much is familiar to you already."
796   -
797   - para "The Cheat Sheet gives another two examples to jog your memory about ",
798   - "how Arrays work. The first example makes an Array of book titles."
799   -
800   - embed_code 'books = ["Don Quixote", "Bluebeard"]'
801   -
802   - para "Then ", code("puts"), " the variable you're storing the Array in!"
803   -
804   - end
805   -
806   - page "Briefly, More Arrays" do
807   - para "The second example in the Array cheat sheet has a bunch of ",
808   - "variables named ", code("one"), ", ", code("two"), " and so on. The ",
809   - "example makes an Array and then runs the ", code("each"),
810   - " method with a block."
811   -
812   - para strong("For EXTRA CREDIT"), ": get that ", code("each"),
813   - " method and its block hooked on to the ", code("books"), " array!"
814   - end
815   -
816   -
817   -
818   - page "More help" do
819   - flow do
820   - para "Hackety Hack is based on a library called Shoes. It is Shoes ",
821   - "that contains methods like ", code("window"), " and ", code("button"),
822   - ". You can browse the Shoes help by clicking on "
823   - image "#{HH::STATIC}/tab-help.png", :margin => 6
824   - para ". The search option it contains is very useful."
  127 + lesson "Cheat"
  128 + page "Short and sweet." do flow do
  129 + para "The Cheat Sheet is much simpler. It just contains some helpful bits ",
  130 + "that you should find useful. A quick reference of often used bits. ",
  131 + "And a short sheet deserves a short explanation. Check out the About ("
  132 + image "#{HH::STATIC}/tab-hand.png", :margin => 6 do
  133 + alert("Not this one, silly! the one on the left!")
825 134 end
826   - para "Instead things like strings and arrays are built into Ruby itself. ",
827   - "You can easily find more information and help about Ruby by simply ",
828   - "searching with Google."
829   - end
830   -
831   -
832   - lesson "Turtle"
833   -
834   - page "Starting the Turtle" do
835   - para "In Hackety Hack you can control a ", strong("turtle"),
836   - " that will make nice drawings for you."
837   -
838   - embed_code "Turtle.start do\n" +
839   - " forward\n turnleft\n"*4 +
840   - "end"
841   -
842   - para code("Turtle.start"), " will tell the Turtle to start drawing. ",
843   - "It will draw using the commands inside the block."
844   -
845   - para "The nice thing about the Turtle is that you can make him move one ",
846   - "command at a time, this way it will be more easy to understand exactly ",
847   - "what happens, and to find mistakes in the code (sometimes called bugs)."
848   -
849   - para "If you run the code, a window will open. That window is the ",
850   - "playground of the turtle. There you can execute a single command at a ",
851   - "time, or, if you prefer, execute the whole code ad any speed you like. ",
852   - "Play a little with the buttons to understand how they work. If you ",
853   - "wrote the code correctly the turtle should be drawing a square."
854   - end
855   -
856   - page "Turtle is growing" do
857   - para "Think the square is too small? You might want to make it a little ",
858   - "bigger:"
859   -
860   - embed_code "Turtle.start do\n" +
861   - " forward 200\n turnleft\n"*4 +
862   - "end"
863   -
864   - para "I'll admit: it's still not much of a drawing. But what I really ",
865   - "wanted to show you is something else. To make only one change (making ",
866   - "the square bigger) you had to change the code in ", em("four"),
867   - " places."
868   -
869   - para "You should never be doing repetitive things like this when using a ",
870   - "computer. As a programmer you always want the computer to do the ",
871   - "boring stuff for you. Computers have been ", em("made"), " to do ",
872   - "boring and repetitive tasks in the place of humans."
873   -
874   - para "Whenever you find yourself doing something boring on the computer, ",
875   - "you probably are doing something wrong."
876   - end
877   -
878   -
879   - page "Be Lazy!" do
880   - para "You could write the following instead:"
881   -
882   - embed_code "Turtle.start do\n" +
883   - " 4.times do\n" +
884   - " forward 200\n" +
885   - " turnleft\n" +
886   - " end\n" +
887   - "end"
888   -
889   - para "Looks much better right?"
890   -
891   - para "Methods like ", code("times"), " that have a block which gets called ",
892   - "multiple times are called ", strong("loops"), "."
893   - end
894   -
895   - page "Really Lazy" do
896   -
897   - para "If you still aren't convinced, try writing the following program without a ",
898   - "loop"
899   -
900   - embed_code "Turtle.start do\n" +
901   - " 36.times do\n" +
902   - " forward\n" +
903   - " turnleft 170\n" +
904   - " end\n" +
905   - "end"
906   -
907   - para "Sometimes it isn't even possible to not use a loop, here is an ",
908   - "example:"
909   -
910   - embed_code "Turtle.start do\n" +
911   - " # to_i changes to integer (a number)\n" +
912   - " n = ask(\"how many times?\").to_i\n" +
913   - " n.times do\n" +
914   - " forward\n" +
915   - " turnleft 172\n" +
916   - " end\n" +
917   - "end"
918   -
919   - para "In this case you cannot know in advance how many times the loop will be run."
920   - end
  135 + para ") tab next."
  136 + next_when :tab_opened, :About
  137 + end end
921 138
  139 + lesson "About"
  140 + page "About Hackety" do
  141 + para "The classic About box. These have been around basically since the ",
  142 + "beginning of time. It's just a fun little image that tells you what ",
  143 + "version of Hackety Hack you're using. It'll change with every release."
  144 + para "Time for the last one: open up the Preferences tab."
  145 + next_when :tab_opened, :Prefs
  146 + end
  147 +
  148 + lesson "Preferences"
  149 + page "I do prefer..." do
  150 + para "This lets you adjust your preferences for Hackety Hack. Right now, there's ",
  151 + "only one preference: linking Hackety with your account on ",
  152 + link("hackety-hack.com", :click => "http://hackety-hack.com"), ". You ",
  153 + strong("do"), " have one of those, right?"
  154 + para "If you link your account, you can upload your programs to the website ",
  155 + "and easily share them with others! More interesting features will be ",
  156 + "developed along these lines, so sign up, stick your info in, and prepare ",
  157 + "for all kinds of awesome."
  158 + para "I won't make you click the button to advance this time... instead, just ",
  159 + "click the arrow to advance."
  160 + end
  161 +
  162 + lesson "Quit"
  163 + page "Self-explanatory" do
  164 + para "If you did click the quit button, well, you wouldn't be here anymore. ",
  165 + "And that'd be unfortunate. So, don't click it until you're good and ready. ",
  166 + "When it's your time to go, it'll be there waiting for you. Come back soon!"
  167 + end
  168 +
  169 + lesson "... and beyond!"
922 170 page "What now?" do
923   -
924   - para "Sometimes loops will not be enough to avoid code duplication. ",
925   - "The following code draws two squares."
926   -
927   - embed_code "Turtle.start do\n" +
928   - " goto 120, 120\n" +
929   - " 4.times do\n" +
930   - " forward\n" +
931   - " turnleft\n" +
932   - " end\n" +
933   - " goto 480, 480\n" +
934   - " 4.times do\n" +
935   - " forward\n" +
936   - " turnleft\n" +
937   - " end\n" +
938   - "end"
939   -
940   - para "We used a new method: ", code("goto"), ". With ", code("goto"),
941   - " you can make the turtle go to any position you want. He will not draw ",
942   - "anything while moving. The method takes two parameters, the first is ",
943   - "the distance of the turtle from the left, while the second is the ",
944   - "distance from the top. As an exercise try drawing the squares in the other ",
945   - "two corners instead."
  171 + para "This concludes the Hackety Hack tour. Good job! Now you know everything ",
  172 + "that Hackety Hack can do. It's pretty simple!"
  173 + para "This isn't the only lesson that we have for you, though. Give the ",
  174 + "'Beginning Programming' lesson a shot to actually start learning how to ",
  175 + "make programs of your own."
  176 + para "What are you waiting for? Get going!"
946 177 end
947 178
948   - page "Our Newborn Method" do
949   - para "There are many ways to avoid writing the same code twice. ",
950   - "We will now explore just one more."
951   -
952   - para "We need to avoid having to write the code for the square twice. ",
953   - "We do this by creating a method of our own."
954   -
955   - embed_code "def square\n" +
956   - " 4.times do\n" +
957   - " forward\n" +
958   - " turnleft\n" +
959   - " end\n" +
960   - "end\n" +
961   - "\n" +
962   - "Turtle.start do\n" +
963   - " goto 120, 120\n" +
964   - " square\n" +
965   - " goto 480, 480\n" +
966   - " square\n" +
967   - "end"
968   -
969   - para "To create a method the ", code("def"), " keyword is used. ",
970   - code("def"), " means ", strong("define"), "."
971   - end
972   -
973   - page "The Method is Hungry" do
974   - para "We can add a parameter to the method. ", "This means giving the ",
975   - "method something to eat. This \"food\" will then be stored in a ",
976   - "variable. In the example below the variable has been called ",
977   - code("size")
978   -
979   - embed_code "def square(size)\n" +
980   - " 4.times do\n" +
981   - " # the size of the square will\n" +
982   - " # depend on the parameter\n" +
983   - " forward size\n" +
984   - " turnleft\n" +
985   - " end\n" +
986   - "end\n" +
987   - "\n" +
988   - "Turtle.start do\n" +
989   - " goto 220, 220\n" +
990   - " # big square\n" +
991   - " square(200)\n" +
992   - " goto 480, 480\n" +
993   - " # smaller square\n" +
994   - " square(100)\n" +
995   - "end"
996   -
997   - para "We now can use the same method to draw squares of different sizes. ",
998   - "Unfortunately this still doesn't look too much like art. We really ",
999   - "need to do something about this."
1000   - end
1001   -
1002   - page "Cubism" do
1003   - embed_code "def square(size)\n" +
1004   - " 4.times do\n" +
1005   - " forward size\n" +
1006   - " turnleft\n" +
1007   - " end\n" +
1008   - "end\n" +
1009   - "\n" +
1010   - "Turtle.start do\n" +
1011   - " 50.times do\n" +
1012   - " goto rand(500), rand(500)\n" +
1013   - " square rand(100)\n" +
1014   - " end\n" +
1015   - "end"
1016   -
1017   - para "Here we used the ", code("rand"), " method, which we haven't seen ",
1018   - "yet. ", code("rand"), " means ", strong("random"), ". Calling this method is like ",
1019   - "throwing a die. We use its parameter to tell ", code("rand"), " how ",
1020   - "many faces the die has. Computers start counting by 0 so if we say the ",
1021   - "die has 6 faces, it will be numbered from 0 to 5. Try running the ",
1022   - "following code:"
1023   -
1024   - embed_code "30.times{print rand(6)}"
1025   -
1026   - end
1027   -
1028   - page "Ready to Draw" do
1029   - para "Okay."
1030   - para "You are now ready to try writing you own paintings! The ",
1031   - "turtle has many other methods you can use."
1032   - end
1033   -
1034   -
1035   - lesson "The End"
1036   -
1037   - page "Game Over, Roll Credits" do
1038   - para "You did so AWESOME!!"
1039   -
1040   - para "So, where to now? Well, you might try to go to the Hackety Hack ",
1041   - "website, or look at the samples displayed in the home tab. Or just ",
1042   - "try experimenting. You've got help pages. And you know where the ",
1043   - "cheat sheet is. Hack away!"
1044   - end
1045 179 end

0 comments on commit 5e6242b

Please sign in to comment.
Something went wrong with that request. Please try again.