The "JavaScript, HTML & CSS" Template – Learnify

This template requires knowledge of, and some experience using, JavaScript, HTML and/or CSS.

The template has two primary uses: To build interactive programming examples and to develop your own custom templates.

Create interactive programming examples

You can choose which code editors are shown in the Player by clicking on the eye-icon above each editor within Author. By doing this you can limit the type of changes that are available to your participants depending on which editors you decide to make available. Do you only want them to make changes to the structure? Show them the HTML editor. Do you want them to exercise their sense of taste regarding colours and looks? Give them access to the CSS editor. Do you want to focus on problemsolving and experiment with functionality? Show the JavaScript editor. Combine and exclude editors to adjust the complexity depending on your needs.

Every editor can be enlarged by clicking the magnification button above each editor.

When an editor is available in the Player, the participants are able to edit and experiment with the code that is being simulated. All changes they make will be visible within the simulation area.

Note: No changes made within the Player will be saved to the template. You can, without worry, create a starting point in Author and then let your participants experiment freely without any risk of changes being permanent or loss of data.

Create a custom template

When you want to create a custom template you merely need to ensure all editors are hidden, only showing the simulation area. Then you program the appearance and functionality the same way you would normally do with each respective language and editor. Noted below are some template specific APIs, for example marking the exercise as completed and programmatically changing colours, that are good know:

API
- API.reportDone() - Report exercise as complete
- API.css.base - Base colour
- API.css.highlight -Highlight colours
- API.css.rollover - Colour for mouse hovering
- API.css.buttons - Button colours

Note: The HTML editor does not need a <html>, <head> or <body> tag as those are handled separately.

In the "Settings" tab you can choose whether to automatically simulate any changes made to the code in any of the editors or if the participants need to manually press the "Run" button to simulate it.

There is also an option to change themes for the editors, between "Day" and "Night" mode, for those who prefer to work with a bright or dark background, respectively.

0 Kommentarer