Tutorial: Hello world

Written by Rex on 03/02/2014 10:33:51

In this tutorial we start with a simple InCourse to show the text ‘hello world’. I’ll first tell highlight the general idea of working in InCourse and then I’ll show how to create a simple button which when clicked shows the text ‘hello world’.

The concept

The concept of the editor is an event-action based system. Every element produces events and every element has a set of possible actions to do. What remains for you as the creator is to bind or wire them. In InCourse your wire and event to an action. As shown on the diagram below, images have an event “on click”. This event is triggered when someone clicks on the image. The event “on click” is connected to another image. The wire connects in this case to the action “hide”. This literally means: when we click on the image “Click me” we hide the linked image at the right.

The relation between events and actions.

Every element behaves the same. They register an event and trigger an action of a linked connection. The only thing you require to do is to wire your elements together.

Hello world!

Let’s start the “hello world”. First you need to create a course. Go the course list and press the + button underneath the course list. We’ll give the course the title “Hello world” and leave the name blank. When you’re done press save.

Step 1: Create the course

The next screen contains general information for users. Below the general information there is a tab called Canvasses. Click it when it’s not active and select the first canvas by pressing on the “Edit” button.

Step 2: Select the canvas to edit

Good! We’re in the editor now. In the middle of your screen you’ll see a grey canvas. This is where you paint and wire your elements. The left side of the screen shows you textual information about elements placed on the canvas. When you create a course or canvas it’s always created with one element, the view element. When a view is active everything inside the brackets is shown.

Step 3: The viewport and camera

Let’s create a button. Press the media button at the top right to create an image. When you click it, it will be added to the canvas. Click on the element in the canvas and drag it to the left part of the view. Once done we can change the appearance by clicking on the dotted button next to the label “Image” at the lower left side of the screen under the header “Element settings”. You’ll get a search menu where you can enter the text “star” and you’ll be shown a star image you can select by clicking it.

The star image will work as our button and the next thing we do is creating the ‘hello world’ text. To do this we click on the cloud at the top left of the screen. This will create a new element on the canvas. Move it to the right part of the view.

Underneath the header Element Settings we can alter the text its text next to the label “text”. Enter “Hello world”. Now uncheck the checkbox next to the label visible to hide it.

The last step is to wire our star image to the text. Select our image in the canvas and go to the “Element settings” section. To create a connection start by clicking on the “Create connection” button underneath the Element Settings header and click on the text element on the canvas. Now select the newly created line and arrow on the canvas and set its event to “onClick” and its action to “show”.

We’re done! To test your “hello world” click on the back arrow on the top left and click on “play/test”.

If you have any question feel free to visit our forums or contact us.