Customising the IDE

(If you haven't already done so, watch the video Selecting the language and paradigm in Start Here.)

Select the programming language

When the public Elan IDE is accessed - via https://codewithelan.org - it will be set up for programming in Python.

This may be changed via the languages button - and the dialog that it opens - to any of:

Python
C#
Java
Reference Language

VB.NET is currently offered as an option only within the Quad View – for viewing only. We hope to make VB.NET an option for entering and editing code in a future release.

It is possible to create a link that will open Elan with the preferred language option already selected:

Python – https://codewithelan.org?#lang=python
C# – https://codewithelan.org?#lang=cs
Java – https://codewithelan.org?#lang=java

Quad view

The dialog returned by the languages button also offers a check-box for Quad View. If selected, this replaces the main code editor with four 'quadrants', which will typically be used to show the same code in four different languages at the same time. Please note that:

In Quad View, the top-left quadrant is the active editor. The other three quadrants offer a passive view of the translated code
The language that was selected in the regular (single-pane) view will, by default be the language selected for the active editor. The other three panes will each have a different default language. The language for each of the quadrants may be selected individually from the drop down list - and you may even show the same language in more than one pane, though there would be little point.
For any given program, the total number of instructions is identical in each language, and when an instruction is highlighted in the active editor, the corresponding instruction (with same instruction number) will be highlighted in the other three panes.
When a field (within an instruction) is being entered or edited in the active editor, the fields in the three passive editors will be automatically updated - having been translated if necessary - but only when that field contains valid code in the active editor.
In the current release VB.NET may be shown only as a passive view, not in the active quadrant.

The programming paradigm

The button to the left of Languages shows the selected programming paradigm, one of three options:

procedural (the default option)
object-oriented
functional

The selected paradigm determines:

the list of demo programs will change to show only programs written to the specified paradigm - except where more than one version of the same program is listed in order to allow comparison.
the documents (e.g. Object-oriented programming with Elan) available in the help tab
The instructions offered in the new code prompts when entering/editing code

Changing the paradigm resets editor to a new file, so you will be warned that existing code might need to be saved.

Copy Url for this code

The action File > Copy Url for this code will generate a Url - copied into the system clipboard - that can be used as a shortcut into the configuration that has been selected via menu actions:

The programming language (as used in the single editor, or active editor in Quad View)
The programming paradigm
The CVD colour scheme if selected

Also, if the editor contains code (other than the default code for new file) and that code is less than 20 instructions, then the code will be compressed and included as a parameter in the Url. This makes is possible to share simple programs with other users without the need for saving and loading a code file.

To focus on...	Keyboard shortcut	Mouse gesture	Notes
code editor	Ctrl+e	Click on background within editor	See also Browse code
display	Ctrl+d	Click on the 'display' tab	To clear the display pane, use the clear button shown within it
info	Ctrl+i	Click on the 'info' tab	To clear the Info pane, use the clear button shown within it
help	Ctrl+h	Click on the 'help' tab	to open a list of links to documents
worksheet	Ctrl+k	Click on the 'worksheet' tab	(Ctrl+w is interpreted by the browser as 'leave web site')
a button	Ctrl+b	Click on the button	Ctrl+b puts focus on the first active button Use Tab or Shift+Tab to navigate to another active button

Entering and editing instructions

(If you haven't already done so, watch the videos Navigating around code and Entering new codein Start Here.) The read the following for additional commands.

Context menu

When you have selected an instruction by clicking on its keyword (turning its background blue), some immediate actions are available from its context menu which is opened either by clicking the right mouse button on the keyword, or by keying Ctrl+m. The commonest context menu shows these options, any one of which may then be clicked on to do the action:

The context menu shows only those actions which are relevant to that instruction in its context.

The following is a list all possible menu items with key equivalents where applicable:

do	undo	keyboard	Notes
ghost	unghost	see Ghosting
cut for internal use		Ctrl+x	option to paste within the editor. If pasted outside Elan, code will be in Reference Language
copy for internal use		Ctrl+c	as above
copy for export			copies as source code for the current language e.g. to paste into a document.
delete		Ctrl+Delete or Ctrl+Backspace
insert new code below		Enter	inserts a new code prompt
insert new code above		Shift+Enter	inserts a new code prompt
move up		Ctrl+↑	moves selected instruction(s)
move down		Ctrl+↓	>moves selected instruction(s)
set breakpoint	clear breakpoint		see debugging
clear all breakpoints			offered only on an instruction that already has a breakpoint
make private	make public	Ctrl+p (toggle)	applies to member instructions (object-oriented or functional paradigms)

Select and edit a field

To...	Keyboard shortcut	Mouse gesture	Notes
select any field within an instruction		click anywhere on the text, or placeholder, for that field.	Text cursor will be placed at the end of the field
select the first field in a selected instruction	Tab
select the next field in the same instruction	Tab		will cycle through the fields and back to the whole instruction.
select the previous field in the same instruction	Shift+Tab		will cycle through the fields and back to the whole instruction.
select specific text within a field	Shift+← or →	click and drag across the desired characters
select all text within a field	Ctrl+a
position text-cursor at the start of a selected field	Home	click anywhere within the selected field
position text-cursor at the end of a selected field	End	click anywhere within the selected field
go from the last field to the next instruction	Enter

Insert a new instruction...

If there is already a new code prompt where you want to insert an instruction then:

select the 'new code' prompt (as you would select an instruction)
type the first letter of the desired instruction, and more if several valid instructions begins the same way, until an instruction template is inserted, with the focus placed on its first field.

Otherwise, select an instruction adjacent to where you want to add the new one and either:

key Enter to insert a 'new code' prompt below it, or
key Shift+Enter to insert a 'new code' prompt above it.

Delete ...

To delete	Keyboard shortcut	Notes
one or more (adjacent) existing instructions	select the instructions then Ctrl+Delete, Ctrl+Backspace or Ctrl+x	deleting a compound instruction will delete all its contained instructions
a just-created instruction	Backspace	this works only if no fields have been entered or 'child' instructions added
a 'new code' prompt that is not needed	delete the same way as an instruction
all 'new code' prompts	Click on the Trim button or Alt+t	removes all 'new code' prompts except in places where further instructions are required (for example so as not to leave an empty loop)

Undo or redo a recent change

The editor retains previous versions of your code in its stack, but only when it has been parsed as valid. The code is saved internally, and also to file if auto-save is selected.

Action	Using the keyboard	Using the mouse
Undo previous changes	Ctrl+z	click on undo button
Redo previous undos	Ctrl+y	click on redo button

Move instructions up or down within the same block

Select the instructions, then key Ctrl+↓ or Ctrl+↑.
Movement is limited to up or down within the current code block.
To move instructions to a different code block use cut & paste.
(It is not currently possible to move instructions using the mouse alone).

Cut and paste

To move one or more successive instructions to a new location within the program:
- Select the instructions to be cut, then key Ctrl+x.
- Create, or select, a new code prompt where you want to paste in the cut instructions.
- Key Ctrl+v to paste. Note that the pasted instructions must be compatible with their new context, i.e. all of the instructions could have been created there in the first place. If they are incompatible, no paste will take place and you will see a pop-up advisory message. To restore the cut instructions to their original context, use undo.
To copy or move text between two fields in the program, or between program fields and external text, use the usual select highlight text (Ctrl+a for all of a field) and Ctrl+c to copy or Ctrl+x to cut, and then Ctrl+v to paste it in.

Ghosting

Instead of being able to 'comment out' code that you wish to retain but not execute, Elan provides a method for 'ghosting' sections of code with much the same effect, while leaving the ghosted code fully formatted.

Select the single instruction (which may be a compound one, e.g. a while loop, an entire procedure or a test) to be ghosted.
Ctrl+m or right-click on the instruction keyword, and choose ghost from the context menu.
The instruction will be displayed in pale colours.
The ghosted code will then be ignored by the compiler and, for ghosted tests, by the test runner. This means, for example, that you can create two different implementations of the same function and compare them, as long as one of them is ghosted.
You can ghost code that does not compile, but you should not ghost code that does not parse: the ghosting will work, but you will not then be able to get the program as a whole to parse, and will have to unghost it again to fix it.
To restore a ghosted instruction, Ctrl+m or right-click on it and choose unghost.
Ghosted code can be copied, moved or deleted but, to edit ghosted code, you must unghost it first.
A program containing ghosted code can be saved.
Code containing ghosted instructions can be ghosted at a higher level, and remains ghosted when the higher level is unghosted.

Intention	Menu action	Notes
load a demo program	demo then select desired program
load a program file	file > load	if the editor contains unsaved code, you will be warned
append a file to the current code in the editor	file > append	external code is always appended to the end of the current code, but may then be moved
auto save a program file	file > auto save	any subsequent edits will be saved to the file (whenever the code parses)
cancel auto-saving	file > cancel auto save	this action appears only after setting up auto save
save a program manually	file > manual save	saves the code to file but does not automatically save subsequent changes
create a standalone Html page incorporating your program	file > save as standalone	the saved .html file contains the compiled program, and will run automatically when opened

To...	Keyboard shortcut	Mouse gesture	Notes
run a program	Ctrl+r	Click on 'run' button	disabled if there are any parse or compile issues.
stop a program that is running	Ctrl+s	Click on 'stop' button	Enabled only when the program is running

Debugging programs

Run in debug mode, pause, and step

To...	Keyboard shortcut	Mouse gesture	Notes
debug a program, or resume debugging a paused program	Ctrl+g	Click on 'debug' button	disabled if there are any parse or compile issues.
pause a program that is running	Ctrl+u	Click on 'pause' button	enabled only when program is being debugged
step to the next instruction in a paused program	Ctrl+p	Click on 'step' button	enabled only then program is paused

Using breakpoints

Before clicking on debug you can set breakpoints at one or more instructions where you want execution to pause. A red flash symbol appears at every instruction that has a breakpoint defined..

When run using debug the program will automatically pause at every breakpoint, and the in-scope named values will be listed in the Info pane.

To...	Keyboard shortcut	Mouse gesture
set a breakpoint on a selected instruction	Ctrl+m on a selected instruction keyword then select set breakpoint	right-click for context menu, then select set breakpoint
clear existing breakpoints	Ctrl+m on a selected instruction keyword, then select clear breakpoint or clear all breakpoints	right-click for context menu, then select clear breakpoint or clear all breakpoints

Browsing values when paused at a breakpoint

Whenever the program is paused, all named values (variables, parameters and constant values) that are currently in scope have their values automatically listed in the Info pane. This list may be browsed as follows:

To...	Keyboard shortcut	Mouse gesture
navigate to a specific line in the list when paused	Tab, Shift+Tab	Click on the line
expand/collapse a specific name within the list	Enter	Click on the + or - at the start of the line

Accessibility

Change text size

To change the text size, hold down the Ctrl key and use the mouse scroll wheel, or change the magnification via the browser's zoom menu.

Platform compatibility

Browser

Apple macOS specific