Wednesday, 27 February 2013

Teaching Scratch in Schools

In a couple of weeks I'm going to start teaching computer programming to some 7 and 8 year olds in my local school.

I've seen my two children (6 and 8 years) really take to programming in the past few years (using Scratch) and because programming is my day job I've been able to support them and help them learn. Quite a few friends have asked if I can teach their kids, so I thought "why not do this at school?"

Programming is great for developing many of the traditional skills such as maths and logical thinking... it's also great fun and keeps them away from all the games!

I've found the best tool for teaching children programming is Scratch because it's very visual (so no need to remember commands), it's quick to get results, it's easy to install and is free. It's also has an active online community, see http://scratch.mit.edu/

See how it's been going...

Preparation

Talking to teacher friends of mine one thing is clear: I need to be prepared! Specifically, I need to get some lesson plans together and aim for some specific learning outcomes, these can then be broken down into bite sized pieces that can be tackled and completed in each lesson.

So this blog post is an initial brain dump of ideas... hopefully this will come together into something more coherent soon, and I'll come back and update this as the lessons progress.

To get the children's interest I'm going to set out two projects that they can work on: an art project or a game project. The children can choose whichever interests them most, or switch if they want to try something different.

Introducing scratch

For those children that have never used Scratch before I need to show them how it works, but I'm keen not to spend too long at the front of the class, preferring instead to get them going so that they can learn 'on the job'.

This is a great book that walks you through the basics (as well as more advanced stuff):

The basics:
  • The Stage—where the sprites perform
  • The Palette—where you find all the commands (e.g. to move a sprite)
  • The Scripts Area—where you arrange commands into programs
  • The Sprite List—when you start using multiple sprites this is where you manage them (e.g. to create new ones, or switch between each sprite's scripts).

Art project

Aim: Program the computer to produce pictures using shapes, colours and randomness. 

Here's some inspiration: 
Challenges:
  1. Draw on the screen with the pen
  2. Draw shapes, starting with a square
  3. Explore other shapes like triangles, pentagons etc
  4. How would you draw a circle with the pen?
  5. Repetition
  6. Randomness
  7. Using keyboard input to change things (such as shape or colour)

Games project

Aim: Create a computer game that is fun and challenging. E.g. a chase game where you have to avoid the aliens for as long as possible.

Plenty of inspiration here, especially for those with memories of early home computers like the ZX spectrum and BBC micro:

Challenges:
  • Move your sprite about with the keyboard
  • Create an alien sprite, and make the game end if you touch it
  • Now make the alien sprite follow your character 
  • Add in extra hazards
  • Add in lives so that your sprite can survive a few alien impacts before the end of the game
  • and so on...

Friday, 8 February 2013

Some example Smalltalk code for a simple quiz

I've been playing with Pharo Smalltalk over the past few weeks and have been impressed with its elegance and feature set, literally everything is right there in the environment, from UI dialog boxes, to sound effects.

One of the things that surprised me though was the lack of example code on the internet. This is a real contrast to something like Python/Django, which has example code for everything easily available.

So I'm going to try posting a bit of code now and again to see if this of use to others.

In this example:
  • Some simple classes for a quiz, you can easily extend this to ask any sorts of text questions
  • Basic use of OrderedCollection
  • Popup dialog boxes for the questions and answers
First add a new category for your quiz classes, I called mine EricQuiz:

SystemOrganization addCategory: #EricQuiz


Now add a new class Question and its methods:

Object subclass: #Question
    instanceVariableNames: 'question answers correctAnswer'
    classVariableNames: '' 

    poolDictionaries: '' 
    category: 'EricQuiz'
askQuestion
    "Ask the question and return 1 if answered correctly, 0 otherwise. If the user gets the answer wrong, they can try again."
    | choice | 
    choice := UIManager default chooseFrom: answers 
        message: question. 
    (choice = correctAnswer) ifTrue: [ 
        self inform: 'Correct!!'. 
        ^ 1 
    ifFalse: [ 
        (self confirm: 'Sorry wrong answer. Try again?') 
        ifTrue: [ ^ self askQuestion ] 
        ifFalse: [ ^ 0 ] 
    

setAnswers: 
list 
    answers := list 

setCorrectAnswer: 
index 
    correctAnswer := index 

setQuestion: 
text 
    question := text

Now add the Quiz class, which is a collection of questions and a score.

Object subclass: #Quiz 
    instanceVariableNames: 'questions score' 
    classVariableNames: '' 
    poolDictionaries: '' 
    category: 'EricQuiz'

Add these methods as class methods:

capitalCitiesQuiz 
    | quiz | 
    quiz := Quiz new. 
    quiz questions add: (Question new setQuestion: 'What''s the capital of England'; setAnswers: #('Paris' 'London' 'Amsterdam'); setCorrectAnswer: 2). 
    quiz questions add: (Question new setQuestion: 'What''s the capital of the Netherlands'; setAnswers: #('Brussles' 'Schipol' 'Amsterdam'); setCorrectAnswer: 3). 
    ^ quiz

spellingQuiz 
    | quiz | 
    quiz := Quiz new. 
    quiz questions add: (Question new 
        setQuestion: 'Which is the correct spelling?'; 
        setAnswers: #('Abuve' 'Above' 'Abov'); 
        setCorrectAnswer: 2). 
    quiz questions add: (Question new 
        setQuestion: 'Which is the correct spelling?'; 
        setAnswers: #('Anser' 'Ansor' 'Answer' 'Arnser'); 
        setCorrectAnswer: 3). 
    quiz questions add: (Question new 
        setQuestion: 'Which is the correct spelling?'; 
        setAnswers: #('Ardvark' 'Ardvarc' 'Aardvark'); 
        setCorrectAnswer: 3). 
    ^ quiz

And these as instance methods:

askQuestions
    score := 0. 
    questions do: [ :question | 
        score := score + question askQuestion ]. 
    self inform: 'You scored ', score asString, ' out of ', (questions size) asString

questions 
    questions ifNil: [ questions := OrderedCollection new ]. 
    ^ questions

questions: anObject 
    questions := anObject

Finally, you can run the quiz by running:

Quiz capitalCitiesQuiz askQuestions.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
Update:

For basic language examples, like Strings and Streams, there's a great free book called "Smalltalk by Example: the Developer's Guide" by Alex Sharp:
http://stephane.ducasse.free.fr/FreeBooks/ByExample/

Thanks to St├ęphane Ducasse for the links: http://stephane.ducasse.free.fr/FreeBooks.html

Seaside: an elegant web framework in Smalltalk

I've been playing with a web framework called Seaside and I think it's very interesting. Coming from a background in Perl, mod_python, and Django it really makes you think again about the best way to design and build web applications.

Seaside provides inspiration for where web frameworks are heading, away from the technicalities of HTTP requests and back towards something more direct like desktop UI programming.

Here's the best bit I've seen...

Imagine you have a delete method on a record that the user can call by clicking on a Delete button on a web page, but you want them to confirm the delete first, here's how you do it in Seaside:

Here's the bit that renders the button -- this is in the app code, not in a template (there are no templates) -- notice the callback:

html anchor
  callback: [ self removeContact: aContact ];
  with: 'remove'.


And here's the removeContact code, actioned by the that callback above:

removeContact: aContact
  (self confirm: 'Are you sure you want to remove', (aContact asString))
  ifTrue: [ Contact removeContact: aContact ]


That 'confirm' bit actually interrupts the method, renders a web page with the confirmation form, then restarts the method passing back in true/false. There is no URLs, no templates, no fiddling about with param decoding, just concise code. I think that's amazing!

From Wikipedia:
Over the last few years, some best practices have come to be widely accepted in the web development field: 
  • Share as little state as possible.
  • Use clean, carefully chosen, and meaningful URLs.
  • Use templates to separate the model from the presentation. 
Seaside deliberately breaks all of these rules; Avi Bryant describes it as a 'heretical' framework. He argues that this careful and reasoned rejection of the conventional wisdoms of web development has led to a very effective model for the development of web applications.
More info:
http://en.wikipedia.org/wiki/Seaside_(software)
http://onsmalltalk.com/rails-vs-seaside

Previously I wrote:

"I'm not planning to do any real client development in it yet but I think it could provide inspiration for where web frameworks are going." I would love to program some real Seaside web apps but I'm not ready yet, see discussion of this below.