Target Audience
The target audience is elementary school students. kindergarten, 1st grade, ...
Target Computer
Windows XP. This is what is available in the computer lab at the school where I volunteer.
Development and Testing
Little Turtle was developed on a Windows 7 system and Firefox was used for testing.
It does not run on IE.
Directories
To simplify things, all of the Little Turtle files are in a single directory.
HTML5 and Javascript
HTML5 and JavaScript are used to provide the animation and user interface. Because of this, Little Turtle may not work with older web browsers. Use a modern web browser such Firefox, Chrome, Safari, ...
Kenitic.js
I plan (someday) to convert my Javascript to a Javascript framework like kinetic.js. (Its another thing I need to learn how to do.)
Commands
I have gone back and forth on the design and limits of the turtle commands. Currently I have settled on the ones documented in the Little Turtle help. With a little experimenting I hope to find out what works best.
Command design:
- Most commands are a single character.
- Commands are case insensitive.
- Each command is on a seperate line.
- Commands are executed one at a time.
- Many commands are followed by numbers.
- Numbers are integers.
- One or more spaces are required between a command and a number.
- Spaces before or after commands and numbers are ignored.
- No spaces are allowed in commands or numbers.
- Unknow or badly formatted commands stop execution of any further commands.
- Commands are only executed when the run/go button is pressed.
- Commands may not be modified while executing.
- There are extended commands that are two characters long.
- Comments have a # as the first non-blank character and are ignored.
The command parser is very primitive. Once the parser finds a complete command (command + number) the command is executed. Extra "stuff" after the complete command is ignored and not flagged as an error.
Extended Commands
Little Turtle has extended commands for older students. See Extended Commands Documentation for more information.
Limited Commands
Little Turtle has a limited command mode for younger students. See Limited Commands Documentation for more information.
Canvas Elements
Multiple canvas elements are used, layered one on top of the other. I use the canvasStack1v05.js library from www.arc.id.au. For more information on canvas layers go to www.arc.id.au/CanvasLayers.htm.
Layers allow changing part of the display without desturbing other parts. For example, there is a layer for the grid. It can be displayed and removed without effecting what is being displayed in the other layers.
Layers also determine what will be displayed on top of other element. For example, the turtle sprite will always be displayed on top of all other layers.
| Layer | Use/Description |
|---|---|
| Layer3 | top most layer used for the turtle sprite |
| Layer2 | used for the lines drawn by the turtle |
| Layer1 | used for the grid |
| Layer0 | bottom most layer used for the background image or color |
Microsoft IE
Little Turtle does not work with the Microsoft IE browser. Someday I may rewrite the Javascript to work with it. For now use Firefox, Chrome, ...
Mazes
Mazes are images draw on the background canvas layer. There are five mazes. A sixth blank maze is used for the "no maze" condition.
When Little Turtle starts there is no background maze displayed. To select a maze, click on a maze button.
You can create your own maze by a modifying an existing maze image. (Do not change the image size.) Maze images are found in the Little Turtle directory, and are named maze?.png.
Note: The maze is a background image. Little Turtle does not prevent "drawing outside the lines".
Canvas and Maze Size
The canvas size is 401x401 pixels. Maze images are the same size as the canvas. This means that maze images do not need to be resized to fit the canvas. Kept this in mind when creating a new maze.
Canvas and Sprite Size
The height and width of the canvas and sprite are odd integer values. This means that the center of each is an actual pixel (integer value).
If the height or width of the canvas or sprite is changed, it should be a odd integer value.
Note: The sprite's drawing coordinates (0,0) are in the upper left corner of the sprite image. Not the center of the sprite.
Move Command Step Size
The move command moves in steps. A step is 20 pixels on the canvas. For example, the command M 3 will move the sprite 3 steps or 60 pixels.
You can change the step size by editing the file turtle.js and modifying the variable moveStepSize.
To Pixel or Not to Pixel
When calculating coordinate, the coordinates are converted to integer values. In theory error can accumulate due to the conversion but I don't think it is a problem.
MP3 vs OGG
OGG files are used. Most of the free sounds I found on the web are MP3. I had to convert them to OGG.
Note: OGG is required because of problems with Windows XP and the browsers.
Sounds
A sound is used to indicate there has been a problem when executing a command. Usually it is a badly formatted command. They are also used in the keyboard practice program.
To use your own sounds, replace the files
- cmd_error_sound.ogg
- turtle_keyboard_practice1.ogg
- turtle_keyboard_practice2.ogg
Note: Several optional sound files are available in the Little Turtle directory.
Buttons
I use both an image buttons and a text buttons. For example, I use two button for help. One is an image of a question mark and the other is the text "Help".
Turtle Sprite
| Size: | 25x31 px |
| Image: | turtle.png |
- A larger sprite (turtle_big.png) available if you want to use it.
Support Programs
Two support program were developed along with Little Turtle.
One (Little Turtle Keyboard Practice) is designed to teach student the location of keys on the keyboard. The second (Little Turtle Edit Practice) is designed to teach students how to edit text. They will need both skills to use Little Turtle.
Hopefully, with these skills, they can concentrate on creating command sequences rather that the mechanics of keyboard and editing.
Hidden Testing Interface
While developing Little Turtle I built a lot of test code. The interface to (some of) the testing code is it in a "hidden" area on the web page. To display the testing interface, move the cursor to the left side of the page header. When the cursor turns into a hand click on the invisible button. The testing interface will be displayed at the bottom of the page.
Things to Do
Things I would like to do someday.
- Read config file
- Canvas size
- Cmd error - sounds on/off flag
- Cmd error - alert on/off flag
- Use bearings on/off flag
- Use X,Y coordinates on/off flag
- Cmd error - blink command textarea on and off (red?)
- Recode Javascript
- Independent namespace
- Use a framework (Kenitic.js?)
- Better code structure, use objects, etc
- Save drawing to a file (png file?)
- Animate drawing of lines so the turtle can be seen moving
Known Issues