Development

GBL has a large selection of HMTL5 Interactive activities and games which can be re-skinned and populated at cost-effective prices.  Please find a demonstration of a selection of templates from our library.

HTML5 Activities

Flashcards

(Click on the image to open activity)

This is a flashcards activity.
A list of categories is shown in the left panel and items (i.e. flashcards thumbnails) related to that category are shown in the centre.
By default the first category is selected.
The user can choose any category by clicking on it.
On selecting a category, flashcards thumbnails related to that category gets displayed in the centre.
The user can select/click on any flashcard thumbnail to open it in its enlarged view.
The enlarged view contains an audio button, a flip button, and a close button.
On clicking the audio button an audio file related to the card is played.
On clicking the flip button or the card itself, the other side of the card gets visible.
On clicking the close button the user is taken back to the main screen.

Drag and Drop

Layout Type 1

(Click on the image to open activity)

This is a simple drag and drop activity.
In this drag elements can be dropped on drop elements.
If any drag item is not dropped on drop element or dropped on already dropped element then it will revert back to its position.
When user drops all elements then they can check answer by clicking on Submit button.
If all answers are correct then it will play a correct answer animation.
If any or all answers are incorrect then it will play an incorrect answer animation.
User can see correct answer by clicking Show Answer button.

Layout Type 2

(Click on the image to open activity)

This is a simple drag and drop activity.
In this drag elements can be dropped on drop elements.
If any drag item is not dropped on drop element or dropped on already dropped element then it will revert back to its position.
When user drops all elements then they can check answer by clicking on Submit button.
If all answers are correct then it will play a correct answer animation.
If any or all answers are incorrect then it will play an incorrect answer animation.
User can see correct answer by clicking Show Answer button.

Multiple Choice Question

Layout Type 1

(Click on the image to open activity)

This is a multiple-choice activity.
There can be multiple numbers of questions in one activity.
In this user needs to select one option per question.
After selecting options in all questions user click on Submit button to check answer.
If all answers are correct then it will play a correct answer animation.
If any or all answers are incorrect then it will play an incorrect answer animation.
User can see correct answer by clicking Show Answer button.

Layout Type 2

(Click on the image to open activity)

This is a multiple-choice activity.
There can be multiple numbers of questions in one activity.
The user has to click on the audio buttons against each serial number to hear the question audio.
The user needs to select one option per question.
After selecting options in all questions user click on Submit button to check answer.
If all answers are correct then it will play a correct answer animation.
If any or all answers are incorrect then it will play an incorrect answer animation.
User can see correct answer by clicking Show Answer button.

Combo

Layout Type 1

(Click on the image to open activity)

This is a combo box (drop-down) multiple-choice activity.
There can be multiple numbers of questions in one activity.
In this user needs to select one option per question.
After selecting options in all questions user click on Submit button to check answer.
If all answers are correct then it will play a correct answer animation.
If any or all answers are incorrect then it will play an incorrect answer animation.
User can see correct answer by clicking Show Answer button.

Classification

Layout Type 1

(Click on the image to open activity)

This is a drag and drop categorisation activity.
In this drag elements can be dropped only on the correct drop containers.
If any drag item is dropped on the incorrect drop container it will revert back to its position and an incorrect audio plays.
If a drag element is placed on its correct drop container a correct audio plays.
A drop container accepts all the correct drag elements and rejects all the incorrect drag elements.

Layout Type 2

(Click on the image to open activity)

This is a drag and drop categorisation activity.
In this drag elements can be dropped only on the correct drop containers.
If any drag item is dropped on the incorrect drop container it will revert back to its position and an incorrect audio plays.
If a drag element is placed on its correct drop container a correct audio plays.
A drop container accepts all the correct drag elements and rejects all the incorrect drag elements.

Karaoke

Layout Type 1

(Click on the image to open activity)

This is a karaoke activity.
The user listens to a song with lyrics getting highlighted line by line in synch with the audio.
After that the user has to sing along the karaoke version of that song, while he being shown the lyrics highlighted in red.

Listen and Find Random

Layout Type 1

(Click on the image to open activity)

This is a Listen and Find Random activity.
The user clicks on the audio button to start the activity.
The user listens to an audio after which he has to select the correct picture from the given set of pictures.
On selecting the correct picture correct answer animation is played, items are placed randomly on screen, and the next audio gets played, this process continues till all the given pictures have been exhausted.
On selecting the incorrect picture an incorrect answer animation is played. This process continues till the user selects the correct picture.

Animated Story – Reordering – Play Movie

Layout Type 1

(Click on the image to open activity)

This is an animated story reordering activity.
The user is shown images from 6 different parts of the video.
The user has to drag those images into the empty drop spots.
On clicking the submit button the video is played again in order as rearranged by the user.

Pelmanism

Layout Type 1

(Click on the image to open activity)

This is a Pelmanism activity.
The user has to match the pairs.
The user needs to click on two different desks in order to open and match them.
If their content matches (i.e. correct) the desk remains open.
If their content doesn’t match (i.e. incorrect) they get closed.

Non-Flip Pelmanism

Layout Type 1

(Click on the image to open activity)

This is a Non-Flip Pelmanism activity.
The user has to match the pairs.
By default all the desks are open, revealing their content.
The user needs to click on two different desks in order to match them.
A desk gets highlighted when clicked upon.
If their content matches (i.e. correct) the desk remains highlighted.
If their content doesn’t match (i.e. incorrect) they get un-highlighted.

Colouring

Layout Type 1

(Click on the image to open activity)

This is a colouring activity.
The activity contains many non coloured animals.
The user needs to select a colour from the two colour pallets.
Then the user has to click the part of the animal which user wishes to fill/paint.

HTML5 Games

Car Racing

Layout Type 1

(Click on the image to open the game)

This is a car racing game.
The game starts (i.e. car starts moving) on clicking the Start button.
The user can change the lane by clicking on one of the three lanes.
After sometime a question appears at the top of the screen along with three options (inside billboards) above each lane.
The user has to choose the correct option by selecting the correct lane.
The user has a limited amount of time (i.e. the time at which the option appears and starts moving towards the car, and the time the options slides over the car and disappears) for selecting an option.
On selecting the correct option a correct audio is played.
On selecting an incorrect option an incorrect audio is played.
This sequence of appearing and disappearing the questions goes on until all the questions are exhausted, and then the final screen gets displayed along with the score.
If the score is less than 80% an incorrect feedback animation is played.
If the score is more than or equal to 80% a correct feedback animation is played.

Spaceship Grab

Layout Type 1

(Click on the image to open the game)

This is a spaceship grab game.
A question appears at the bottom of screen along with three options (inside bones).
The user has to choose the correct option by selecting the correct bone.
On selecting the correct option a correct animation (i.e. dog grabbing the selected bone) is played.
On selecting an incorrect option an incorrect animation is played.
After the feedback animation a new question along with its option is displayed.
This process continues until all the questions are exhausted.
If the score is less than 80% an incorrect feedback animation is played.
If the score is more than or equal to 80% a correct feedback animation is played.

Chicken Run

Layout Type 1

(Click on the image to open the game)

This is a chicken run game.
A question appears at the top of screen along with four options (each on top of a mouse hole).
The user has to get the mouse to the correct hole/option without being eaten by the cats by using the Move arrow buttons.
If on the way mouse gets eaten by the cat, a life is lost.
The user is given 3 lives in a games duration.
On reaching the correct option/hole a correct animation is played.
On reaching an incorrect option/hole an incorrect animation is played. 10 points are awarded for each correct attempt.
After the feedback animation a new question along with its option is displayed.
This process continues until all the questions are exhausted or all the lives have been expired.
If the score is less than 80% an incorrect feedback animation is played.
If the score is more than or equal to 80% a correct feedback animation is played.

Fishy Fun 6.1

Layout Type 1

(Click on the image to open the game)

This is a fishy fun game.
A question/image (with a hint at its bottom) appears at the centre of screen surrounded with five options.
The user has to click (i.e. take snapshot) of the correct option.
On selecting a correct option a correct animation is played.
On selecting an incorrect option an incorrect animation is played.
10 points are awarded for each correct attempt.
After the feedback animation a new question along with its option is displayed.
This process continues until all the questions are exhausted.
If the score is less than 80% an incorrect feedback animation is played.
If the score is more than or equal to 80% a correct feedback animation is played.
At any point of time a user can see what all options have been selected till now by clicking on GALLERY button.