This is an exciting idea we’ve been kicking around for months now, but we haven’t had time to make it happen. Hopefully we’ll get to it soon.
We’ve worked very hard to make Blackbird Code present helpful, readable error messages whenever the user needs them. But it’s not necessarily enough. Consider this, for example: A user is trying to draw a circle, but they accidentally position the circle entirely off the canvas, so won’t get drawn. A standard JavaScript system (and most teaching systems) would simply ignore the circle, which of course is very confusing to a beginning user (“Where did it go?”). Blackbird Code shows an error saying that it’s being drawn to the left of the canvas. Here’s the full text of the error, with example values:
The circle is not visible because it is drawn to the right of the canvas.
The center of the circle is at position:
x = 1000, y = 100
The radius of the circle is 30, and the width of the canvas is 780, so the circle will not appear.
This may be better than other systems, but it’s still a lot to read and understand, and it doesn’t tell you how the x coordinate of the circle ended up being 1000. We’d like to do better.
The idea is, when an error like that appears, the user sees the error message, and also a button saying, Explore this error. When they click it, they go to a special page which shows the line of code that triggered the error (in big bold text), along with a few lines before it. There’s also a canvas, and a box showing the values of all the variables at the time the error occurred.
Now, in this case, since the problem is a circle displayed off the canvas, we can actually show a diagram of the canvas and the undisplayed area around it, with the size and location of the circle. The user can adjust the properties of the Circle object and see how that affects the display, and whether it fixes the error.
In addition, the page explains how this particular error can be prevented by using the ‘render invisible’ directive, a technique that students may not be aware of.
We could also use the Error Workshop Page to help the student with other kinds of errors.
Many errors are caused by incorrect parameters to function calls. In that case, we could highlight the incorrect parameter, showing its value, and explaining what the parameter is for and what types of value are allowed.
When an expression has an invalid result (such as 1 / 0 or 5 - 'cat') the Error Workshop Page could highlight the expression, show the values of its component expressions, and explain what had gone wrong.
Actually, both of these use the expression display system written for our Step Mode debugger; but highlighted as the main point of an entire page, this kind of display could really come into its own. They way it works is that it shows you the value of any expression when you mouse over the operator. For example, suppose you write:
var d = -1;
c = b * 5 + a[d];...and mouse over the * in the second line. It highlights the expression b * 5 and shows the value of b and of b * 5.
It might also explain that it’s not multiplying b * (5 + a[d]) because * has higher operator precedence than +.
Most importantly, it highlights a[d] and explains that this expression is invalid because d is -1 and array a has no element in position -1.
It’s possible to do most of this stuff in the debugger, but it’ll be a lot clearer on the Error Workshop Page.