Interactive Game ELearning Library - IGELL

What is igell?

Igell is a javascript library to easiliy implement an elearning game.
Igell uses the remarkable collie javascript animation library (see http://jindo.dev.naver.com/collie/) to implement the animations.
Igell itself only provides the basic infrastructure of an elearning game like display versioninformation, title of the game, manage the score, load the images, an so on.

To realize a running game the igell-class must be inherited and the movement of the figures must be implemented. At the moment there a two implementations:
mcigell: A multiple choice game
boigell: A breakout game

How does a igell-game look like?

There are two samples you can watch:
mctest1.htm a multiple choice game with mathematical formulas
botest1.htm a breakout game with mathematical formulas

You can try them here:
botest1.htm
and
mctest1.htm

How can I create an own elearning game?

There are two options to create an elearning game:

  1. Use the igellEditor which allows you to interactively create a game without any javascript-programming or sourcecode editing.
  2. Alternatively you can also dive into sourcecode and create the game by using the corresponding javascript statements.

Option 1: Create an elearning game with the igellEditor

Download the zip-file igell.zip from the download area and extract it. In the subfolder igell\igellEditor you find the igellEditor.exe file.
When you want to start the program under Windows 8, you first have to allow your system to start this exe-file. Therefore right click on igellEditor.exe -> properties and at the buttom of the window there is a warning that this file comes from another computer. Click the corresponding button to allow usage of this file on your computer.

When you start the program, you can create a new project by clicking Project -> New. Then create or select a new folder. The name of the folder corresponds to the project name.
The igellEditor then copies all necessary files to the project folder, including some empty pictures for the question and answers and some standard texts for title and description of the game.
You can change the pictures by double clicking or add some new answers (+) or remove (-) the selected answer. Double click opens the standard drawing program on your system. The you can change the image and save or export it as png-file with the same name. Clicking Refresh in the igellEditor shows the changed images.
To view the created game click Project -> Run. The project will then be automatically saved and the index.htm file for the game is created. The igellEditor opens the index.htm file in your systems standard browser. Depending on your browsers settings you have to activate active content (javascript) to view the game.

Option 2: Create an elearning game using javascript

Creating an own igell elearning game by using the corresponding javascript statements  is as simple as one, two, three:
After you downloaded and extracted the zip archive (see download section) go to the folder igell\Example:

One: Create a png-file with transparent backgroung which contains the question and save it as mygameq.png
(A template for such a question is available: mctest1q.png)
For the Creation of such png-files you can use GIMP or even android-apps like PicsArt.

Two: Create one ore more png-files with transparent backgroung which contain the correct answers to that question and save them as mygamer1.png, mygamer2.png, mygamer3.png, ...
and
create one ore more png-files with transparent backgroung which contain the wrong answers to that question and save them as mygamew1.png, mygamew2.png, mygamew3.png, ...

Three: Copy the html-file mctest1.htm (for a multiple choice game) or botest1.htm (for a breakout game) and name it for example mygame.htm and change the text mytest1 to mygame (see part of the html-file below):
...
var omcigell = new mcigell('Klicke richtig!', 'MultipleChoice-Testspiel Version 20.08.2013 von M. Neumann', 800, 550, 2000, 5000, 1, 'mygame' , '.png',1);
//----------------------------------------------------------Here you have to change mytest1 to mygame-----------------------------------|
//id of the div-containers for the game display area
omcigell.start_game("container");
...

Now you can change the text-hints in the html file as you like.
The meaning of the parameters are described below.

The library was tested with chrome browser (windows pc and android).
Hopefully it will work with other browsers too.
Nevertheless it works good on android tablets.

How does it work?

omcigell in the above html code is an object from the class mcigell which implement a multiple choice game.
The init-method of the class is provided with some parameters to influence the behaviour of the game.
The init-method initializes the game and loads all images, including the user provided question and answer files.
Therefore it searches the answer file beginning with number 1, 2 and so on until it fails to find a number. (Both for wrong and right answer files).
After that the game ist startet with the method start_game, provided as parameter the id of the div-tag which incorporates the display area of the game.

Meaning of the parameters to mcigell or boigell?

var omcigell = new mcigell('Title of the game',
'Version and autor information to be displayed',
width of the game area,
height of the game area,
delay in ms between adjacent answers,
time in ms an answer rests on the play area,
time in sec after start until the first answers appears,
'prefix of the answer-files' ,
'.suffix of answer files',
number of times an answer is repeated);

Last edited Oct 8, 2016 at 11:53 AM by mac888, version 6