Many thanks to everyone for responding to my urgent cry for help last
Thursday. I held my third and final class in the series on Friday and
it went well. I've written up my report on my blog:
http://www.ultrasaurus.com/sarahblog/2009/05/teaching-kids-to-code-lesson-3/
It's almost the end of school for the year. I'm working with the
school to establish a programming class as part of the tech curriculum
for future years, since this little pilot program was such a success.
Great work everyone!
Sarah
On May 28, 2009, at 8:38 PM, Edward Heil wrote:
Sarah, hi! Great stuff!
I have some more answers for you which I'll give you in the context
of a reply to Joel, expanding on what he says, and correcting some
things where I think he might have misunderstood what the students
were trying for --
So, replying to Joel --
On May 28, 2009, at 10:09 PM, Joel Fernandes wrote:
1. couldn't find 'url' in the shoes manual, probably what you're
looking for is 'link'
Actually, they probably do mean "url" -- as in a multiple-page app
like this little demo:
class TwoPages < Shoes
url '/', :mainpage
url '/other', :otherpage
def mainpage
para "this is the main page... "
para link("this way to the other", :click => '/other')
end
def otherpage
para "this is the other page... "
para link("this way to the main page", :click => '/')
end
end
Shoes.app
This stuff is in the Nobody Knows Shoes book, p. 43.
Shoes urls only work when you subclass Shoes, as I did here:
class TwoPages < Shoes
then you can define different pages with urls and symbols and
methods named after those symbols.
When you just put stuff inside the Shoes.app block, you don't need
to (and can't) use urls and different pages defined that way.
So... to make this work they'd have to use a subclass of shoes, like
this:
class OurApp < Shoes
url '/', :index
[...stuff...]
end
Shoes.app # you always need this line, to make stuff happen
Next step -- get rid of the "index" line -- the index method gets
called automagically because it is assigned to the url "/" in the
"url" line.
Third step -- as you said, the assignments of click handlers are
taking place in a different context than the index method; they
don't work together right at all that way. I don't know how I'd
explain exactly how that works to the students, honestly, cause I'm
a little fuzzy myself, but here's how I'd sum it up in a very simple
rule:
When you're doing the thing with the pages and URLs, you've got to
put EVERYTHING for a page inside the method for that page ("def
index...end"). EVERYTHING. Nothing goes outside those methods,
cause those methods build all the pages of the app (in this case,
the one page of the app, "index".
So all those click handlers go inside the "def index....end".
Final thing -- click handlers on buttons have to be actual code, not
a Shoes URL, so this line won't work:
button "Go Back", :click => "/"
You can fix it two ways. You can make it a link:
para link("Go Back", :click => '/')
Or you can use the "visit" method to visit the URL, in a block of
code attached to the button:
button "Go Back" do
visit "/"
end
So a full working app with those changes -- subclass Shoes, get rid
of the call to index(), move the click handler assignments into "def
index...end" and fix the button so it visits the Shoes URL right --
would look like this -- and with those four small changes, it works
great!
======================cut here===============
class OurApp < Shoes
url '/', :index
def index
clear
para "Which is correct?"
stack {
@correct = button "A bed of clams"
@wrong1 =button "A coalition of cheetahs"
@wrong2 =button "A gulp of swallows"
}
@correct.click {
clear
para "Correct"
image "http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Balloons-aj.svg/550px-Balloons-aj.svg.png
"
button "Go Back" do
visit "/"
end
}
@wrong1.click {
clear
para "Wrong!"
image "http://icanhascheezburger.files.wordpress.com/2007/05/cheez_doing_it_wrong.jpg
"
}
@wrong2.click {
clear
para "Wrong, your consolation prize is..."
image "http://farm2.static.flickr.com/1166/1230713908_083d7f6c53_o.jpg
",
:width => 500
}
end # this is the end of the index method, which lays out the "/"
page
end # this is the end of the subclass, which contains all the pages
(well, one page)
Shoes.app
======================cut here===============
http://www.ultrasaurus.com
