IDE controls & keyboard shortcuts

# Platform compatibility

## Browser

Elan must be accessed through a Chrome-compatible browser: Chrome, Chromium and Edge.

Always use the browser in 'full screen mode' – it makes more space available and reduces the risk of accidentally refreshing the browser and losing work.

## Apple macOS specific

It is recommended that you use Chrome even on Apple machines. (Safari works for most things but some compatibility issues have been reported.)

Where a keyboard shortcut is shown with the Ctrl control key, users of Apple's macOS should use the ⌘ Command key instead.

# 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

See also copy Url for this code

## 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.

# 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.

# Loading,saving, and running programs

## Load, Save, and Append

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

## Running and Stopping programs

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

If your program is doing intensive processing between interactions with you through the IDE, then clicking on the 'stop' button may not have an immediate effect. This is an unavoidable side effect within the browser, but you will be returned to editing after a short period. Avoid repeatedly clicking 'stop' as that might cause the browser tab to be closed.

See also Debugging programs

# 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.

## Colour scheme for CVD

There are two ways in which to change the colour scheme for users with CVD:

- Button file has menu option preferences which offers an alternative colour scheme via a small dialogue. Whether or not you tick the CVD option, clicking confirm automatically tries to reload the web page, so you will receive a warning (which you can cancel) if you have unsaved code. You can also just press Escape to remove the dialogue.
- The URL provided to a pupil may include a CVD scheme, as described above in Launch the IDE.

##