Learning to program

The purpose is to give a chance to learn to program, using a real programming language, with plenty of help to hand.

There are already some great tools around, but there is a bit of a gap between them. Let's look at the two best:

• Scratch is a fantastic free program which allows young pupils to produce animations and games by dragging and dropping code blocks. It is educationally brilliant, and you can do nice things with it, but it is essentially a purely teaching language - you couldn't do anything genuinely productive with it.
• Greenfoot is another extremely good tool. Basically it teaches you to write Java. Not some messed up version of Java, but the real thing, primarily through writing games. This is again hugely motivational for students.

However, the gap between them is vast. By the end of Year 7 (age 12), students should have mastered Scratch, but very few are mature enough for Greenfoot. And there is nothing really for them.

The aim of this is to build on the knowledge of Scratch, giving them drag and drop code snippets, but in this case of a real and useful language, that does real, useful tasks. But what it drops is not blocks, but code snippets - plain text - which they need to edit to use. They are forced to confront real programming, but with help thrown in.

The middle panel on the image is the key one. In the top half students write their code. This is rendered in a target web page below.

However, in doing so, several things happen.

• First, code is automatically (well, when they press a button) indented and syntax is highlighted
• Code is validated and syntax errors are explained
• Moving a mouse over key words gives help on the right hand side

On the left hand side are a pile of examples and code snippets. Clicking them inserts them into the code section, avoiding a teacher having to run madly round a class explaining, again, that you need several semi-colons in a for statement, or you can't have an 'else' without an 'if'.

The right hand side is for help and exercises Various exercises are suggested. Short text answers can be completed, or the current code submitted, the answer being stored under the user id in the back-end database

As long as they have loggged in all code is automatically saved every time they try and run.

There is no hidden or generated code or non-standard hacks. The input is standard JavaScript, the outcome is standard JavaScript. JQuery is used to simplify some tasks, but code is there and visible for pupils to manipulate themselves.

How to Use

At the moment, you can just use it. Go now

If you want to save your work you need to have a login. Logins are tied to schools, and I can create you a school if you email me. If you don't want to, just use the default, hogwarts (and note that it's case sensitive).

At present the process of a teacher seeing a student's work is rather clunky. Everything is saved in a database, a different table per school. It needs a few queries hacked together to make it easy to get them out, but I just haven't done them yet. It's a small task to do a basic job on this, and it will appear shortly (written 18 Jan 2012, and I'll be disappointed if it's more than a couple of weeks).

In a similar vein it needs a few queries for pupils to get their work back next time they log on. Again, a couple of weeks and it will be there.

Why JavaScript? You should have used Java Python Smalltalk Ruby

There are several reasons to use JavaScript

• There are exam board tasks set in JavaScript, so pupils just have to learn it.
• Whether you like it or not, it's a language that you need to understand to do many increasingly everyday tasks on the web.
• It's actually an excellent language. Yes, it's got some very odd 'features' and some parts are just plain stupid, but that's true of many languages. But it's also got many really nice aspects. Douglas Crockford, for example:

  JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdas without having to balance all those parens.

• The syntax like the C and Java family is a big plus. Once you've got that and the the concepts of variables, assignments, loops and functions then you can migrate to language X in confidence. I move my classes on to Greenfoot and Java.
• There are wierdnesses but they can, mainly, be avoided, and in many cases used for clear teaching purposes.

Price

Free to use.

Status

I'm trialing this on some of my classes, and it works OK, but it still needs more doing.

Suggestions are welcome. Things I think are needed include:

• Some of the error warnings are incomphrehensible to students. Its a relatively straightforward job to fix this, but still needs doing in too many cases. Aim is that ALL messages are understandable by year 8's.
• A much improved HTML editor.
• Indenting system produces occasional nasty screw-ups.
• Ability for schools to add their own examples and exercises. This would be quite easy.
• Improve speed. Main issue is that it's on cheap and slow hosting space, though there are still many code optimizations to do.
• Restore work in a simple manner. Which is nearly there anyway.
• Context sensitive help needs souping up.
• Pin the execises to a tab - at present they move around confusingly.
• What else?