Preliminaries

• Set the browser to Full Screen view, to give this worksheet, and your code, as much space as possible.

1. Loading and running a program

• From the Demo menu (top-left of screen) select Bubbles.
• Some programs will stop automatically at a certain point when they are run, this one doesn't. So when you run it by clicking the white, triangular Run button, you will need to stop it by clicking the white, square Stop button next to it. So now go ahead and run the program for a few seconds only, then stop, and click the Worksheet tab to return to here.
• Notice that the code editor window (left of screen) now has a tint over it - so click somewhere on white space within the code editor pane to give it the focus (white background). Remember that if the code editor has a tinted background it doesn't have focus and won't respond to your inputs.
• If your mouse has a scroll-wheel then – with the focus on the code editor – hold down the Ctrl key and scroll the mouse wheel, both ways. What is the effect?

2. Reading code

• The code is made up of instructions
• Each instruction is numbered on the right hand side. These 'instruction' numbers are not part of the code itself - they play no part in what the code does – the editor adds the numbers to the code to make it easy for us to draw attention to a specific instruction.
• An instruction always starts with a 'keyword' which is coloured like this and is always lower-case. Within some instructions you will see some additional keywords. However, it is the initial keyword that defines the nature of the instruction. Thus we might refer to a 'call instruction' or 'a let instruction, or simply 'a call' or 'a let'.
• Find at least five different keywords that define instructions within this program – not including end (we'll explain that one shortly) – and enter them here:
• A line that begins with a # ('hash symbol') is called a 'comment'. A comment is not an instruction – hence it does not have an instruction number – and plays no part in what the code does. Comments provide additional information about the code for the human reader's benefit. At the top of file you will see a comment that tells you which version of Elan you are using. This version comment is always present at the top of an Elan code file – it cannot be edited, deleted, or moved.

3. Selecting instructions

• In order to edit, move, or delete, an instruction (we'll do all three of those, shortly) you first need to 'select' (highlight) it. There are several different ways to do this.
• Locate instruction number 11 on the right-hand side and click on the number. This will highlight the whole of that instruction – including the instruction number.
• Now select instruction number 14, but this time, instead of clicking on the number, click on the initial keyword in that instruction (call). You can select an instruction either way – it makes no difference.
• Press the cursor-down key (↓) which will select the next instruction (or comment). And then cursor-up to return to the one above.
• This time press Shift-↓. What difference does holding down the Shift make?
• Try pressing cursor-up and down (with no Shift) a few times. How far can you move the highlight this way?
• Now press the cursor-left key and you will see that this shifts the highlight to instruction number 10 – an if instruction – and that the highlight has a more complex shape. if is an example of a 'compound' instruction: it contains other instructions, all of which are indented by two characters just to make the structure clearer. All compound instructions start with a keyword and end with end followed by that initial keyword. (This is why a line beginning end is not an instruction in its own right – and doesn't have its own instruction number.) Compound instructions can even contain other compound instructions which is sometimes called 'nesting'. How many different compound instructions can you identify in this code, and what they? (Enter only the initial keyword of each kind.)
• Now press cursor-right to move back to the first instruction within the outer (compound) instruction. Then press cursor-left and -right a few times to explore the limits of how far you can move the highlight in these directions.

4. Deleting or moving instructions

• Select instruction number 11. Then delete this instruction by pressing Ctrl-Delete – or Ctrl-d if your keyboard doesn't have a Delete key. (The requirement for Ctrl is to reduce the risk of accidental deletion.) Notice that all the instructions following the one deleted have been renumbered.
• In this case, despite the deleted instruction, the program will still run. Run it and briefly describe the difference it has made to the behaviour of the program?
• Restore the deleted instruction by pressing Ctrl-z – alternatively, you may use the Undo button.
• Select instruction number 11 again, and then press Ctrl-↓. Describe what this has done?
• Restore the original code, either by applying the opposite action (Ctrl-↑), or you may again just undo the action.

5. Editing instructions

So far the changes we have made involved moving or deleting a whole instruction. When you start to write programs from scratch (in the next worksheet) you will find that you sometimes need this ability. However, more commonly you will need to edit code within an instruction, so we'll do that now.

• In this program, each bubble is updated – in position and size – multiple times per second, but as you can read from the comment above instruction 11 – with each update there is a 5% chance of it bursting, which is simulated by reducing its radius to 0 (instruction 11), and its position back to the bottom of the screen (instruction 12). Let's experiment with reducing that probability.
• The 5% chance is represented by the value 0.05 in instruction 10. There are two ways to get the focus onto this value: either click directly on that value, or select instruction 11, and then press Tab. Either way, you will end up with part of the instruction being highlighted like this: condition?
• This highlighted area is a 'field'. Fields are the editable parts of an instruction. Most instructions define one, two, or three fields (main is an exception, having no fields). The rest of the instruction is made up of keywords and, less commonly, punctuation symbols. These fixed parts cannot be edited because they define the essential and invariant nature of the instruction – so they may only be removed from the code by deleting the whole instruction as you have previously done. By contrast, in most programming languages you can edit every character in the code, but this very commonly leads to errors ('syntax errors') that may be hard to diagnose.
• Whenever a field has focus, it has: a coloured background, a thin black outline, and a flashing line to indicate the cursor position, which defaults to the right-hand end.
• Press Backspace once to delete the 5, and then type 1 (thereby reducing the chance to 1%) and then press Enter. The updated field returns to its unselected form, and – because this was the last, or in this case the only, field) for the instruction – the focus has now moved on to the next instruction or comment. Run the program again. What difference do you notice?
• Select that same field again, and this time Backspace four times to delete the whole value (0.01). Now the field's background colour will have changed, and also the 'Parse' status in the 'status panel' (top-right corner of the screen) will have changed – both indicating that a field is incomplete. Also a 'prompt' (white text) indicates that a 'value or expression' is expected. Try typing in .01 (without a leading 0 ). The field background – and the parse status – turn red, indicating that this is an invalid entry (because Elan requires that fractional numbers must always begin with a digit). So correct the entry back to 0.01 – you can use the cursor-keys to move the cursor, you don't have to delete all the characters.
• A useful rule of thumb is that if you are entering code into the right-hand end of a field and it turns red, use Backspace to remove characters until it turns green or amber and try to work out why the first character that made it turn red was wrong. Identifying the cause of some errors takes time to learn, but at least with this editor you do get the error message as soon as you type one wrong character.
• Now select instruction number 17 and press Tab to select the first field which specifies a pause and then Tab again to select the second field, which holds the value 50 (which specifies the pause length – 50 milliseconds at present). Edit this value to 250
• From the field, press Tab multiple happens. What happens?
• Run the program to test that bubbles rise and expand more slowly. Leave the change in place as that will help us in our next step.

6. Inserting new instructions

We are now going to insert a new instruction to make an audible noise when a bubble bursts.

• Select instruction number 17, and then hit Enter. This will insert a prompt line, where new code can be entered, below the current instruction and the focus will have moved there. The prompt shows the initial keyword for each kind of instruction that may legitimately be inserted at this location. You select the instruction by starting to type it. in most cases just the first letter is needed; in a few cases more characters are needed to distinguish between instructions that start the same way.
• Type c to insert a call instruction, noting that the fixed code has been added, the focus has shifted to the first field, and there is already a pop-up menu of options. What we want is the procedure named tone, but as that would be a long way down the list, just type a t and now you will see tone in the list of matching options – at the top, in this case. Cursor-down to select tone and press Enter to insert it in the field. You should always use the pop-up options where you can
  not only because it saves typing, but because it reduces errors.
• Press Enter which causes the second field to appear – between the brackets. This field indicates what is expected (in white text) – three values representing:
  • The duration of the tone, in milliseconds.
  • The frequency of the tone, in Hz.
  • The volume of the tone
  separated by commas. Type this: 10, 500, 0.1 and hit Enter. Assuming you haven't made an error in the typing, the status panel (after a second or two) will show that all is good. So run the program.
• If you don't hear anything, check the sound settings on your computer. And, if you are working in a classroom, please turn the volume as low as possible while still audible. Once you can hear something, describe what you hear?
• We got a result. The very short duration means that it sounds more like a 'click' than a tone, but that's OK. However, the clicks shouldn't be sounding with every update – they should be occurring irregularly, whenever a bubble bursts. We've put the instruction in the wrong place! It needs to be just under instruction number 12, which simulates the burst. However, we can't just move the instruction upwards as we did before, because it needs be moved inside another compound instruction. So instead we will cut and paste it.
• Select the new instruction (number 18) then press Ctrl-x to cut it – into the (invisible) clipboard. Now select instruction number 13 and hit Shift-Enter to create a new code prompt above that instruction. (Yes, in this case you could have selected instruction 12 and pressed Enter to insert the code below that – but you won't always have both options so it is useful to remember both). But remember that you may only ever paste instructions onto a new code prompt, in focus. Then press Ctrl-v to paste. Assuming that any instruction(s) you are trying paste are valid for the target location (as it will be in this case) the cut code will reappear – and instructions renumbered accordingly. (We said 'instruction(s)' because it is possible to select multiple consecutive instructions – as we did earlier – and move, delete, or copy and paste, them in one go.)
• Run the program and hopefully the clicks will now be irregular. If it is not clear that they do correspond with burst bubbles, slow down the program execution again by increasing the length of the pause in the (now) instruction number 18.
• Lastly you may already have noticed that underneath instruction 18 you have been left with another prompt for new code (it just shows as new code when it does not have focus). When entering or editing a longer program it is not uncommon to end up with several of these surplus-to-requirements. They can selected and deleted individually, but the Trim button above the editor will remove all that can be removed – and this leaves your code looking neater. (Any that it leaves indicate places where further instructions are expected – because the code would make no sense without them).

Congratulations! You have finished the worksheet, and you now know enough about navigating and editing code to start writing your first program – with the help of another Worksheet. Meantime, click Help > Home > IDE Reference > Code editor – for a handy summary of all the above operations, and a few more that you can also try out here.

This worksheet is copyright © Richard Pawson 2025, and protected by the Creative Commons license: Attribution-NonCommercial-NoDerivatives 4.0 International. If you copy and modify this worksheet you may not distribute your modified version (outside your own teaching institution) without the author's permission. Please email the author to report errors or suggest improvements.