Category: JavaScript

02 Nov 2016

Find Kick Buttowski- Shuffle Game in SL2

Hello everyone, here’s an example of gamification in e-Learning. The main aim of this game is to improve user’s concentration skills along with providing him information about skateboarding.

Here cute and notorious Kick Buttowski jumps into one of the 3 available boxes randomly and the boxes start shuffling on click of “Start the Game” button. 

The user needs to focus and keep track of the box in which Kick Buttowski is and click it to get him out,

but beware..if the user chooses the wrong box, there is a punishment, yes you guessed it right, the user will have to answer a random question about skateboarding, fetched from a question bank.

The game play is divided into 3 main slides based on the shuffle speed (Normal, Moderate and Insane).

1) Normal – In normal speed mode, the users will have 3 chances to find the correct box and for each correct find they will be awarded 20 points. Just in case a user fails to find the correct box in which Kick Buttowski is, he will be redirected to a random question about skateboarding.

  • On correctly identifying the box in which Kick is: POINTS AWARDED 20
  • On correctly answering the question: POINTS AWARDED 10
  • On incorrect answer : NO POINTS AWARDED.
 
 

2) Moderate – In moderate speed mode, again the users will have 3 chances to find the correct boxes and for each correct find they will be awarded 20 points. In this case the shuffle speed is higher than the normal speed mode and a separate question bank that contains questions of slightly higher difficulty level is used.

  • On correctly identifying the box in which Kick is: POINTS AWARDED 20
  • On correctly answering the question: POINTS AWARDED 10
  • On incorrect answer : NO POINTS AWARDED.

3) Insane– In Insane mode, the users will have 4 chances to find the correct boxes and for each correct find they will be awarded 20 points. Here the users will have to give it their all as the shuffle speed is twice the moderate speed and the question bank contains really difficult questions.

  • On correctly identifying the box in which Kick is: POINTS AWARDED 20
  • On correctly answering the question: POINTS AWARDED 10
  • On incorrect answer : NO POINTS AWARDED.

The maximum score that a user can attain is 200. On completing all levels, the following slide will be displayed:

—————————————–Whats under the hood?——————————————-

  • Used a web object that allows me to shuffle the boxes seamlessly and created variables in JavaScript to bridge the gap between SL2 and JS. 
  • As shown below, I have created 3 Different slides for different speed levels (Normal/ Moderate/ Insane)

  • The blank slides that you see below are used for redirecting to the appropriate speed level.
  • I have created 3 different question banks, 1 for each speed level. All of them have 9 Questions each.
  • Question bank 1 has easy questions for normal speed level.
  • Question bank 2 has slightly difficult questions for moderate speed level.
  • Question bank 3 has very difficult questions for Insane speed level.
  • Every time a wrong box is clicked, a random value is fetched (any value from 1 to 5) and according to that random value corresponding slide with question comes up.

Here’s the demo link: https://goo.gl/iDMrDF

This Example is Inspired by “Find Candies” shuffle game,created by Avinash Sharma.



12 Aug 2016

eLearning Board Game in Storyline 2


This time created an eLearning board game in storyline 2. In this game you will learn about sea food and ocean.


We have added multiple questions in this board game to give learning. The goal of this game to make learning fun.

We have also added a leader board in this game to show top 10 high score player.

Referred the following sites to create this example.

Hope you will enjoy this game… 🙂







11 May 2016

Weather App in Storyline2

Here’s a sample weather app created in StoryLine2 using JavaScript.
You can check live weather forecast for 3 locations, that are:
  • Delhi, India
  • Paris, France
  • California, USA
Use the menu icon on the top right to switch locations and see the weather report for 4 days.
Click “Today” to see the detailed weather forecast.
Here’s the output : https://db.tt/1umye6PI 
To improve it further, We would like to make the JavaScript interact with the SL2 text boxes, so that the user can enter their own city/region and get the forecast accordingly..stay tuned!!  😛
19 Oct 2015

Rainy Day Background Created Using JavaScript

 

  Playing with Articulate Again!!  :o)

  Adding an animated background to your course can enhance the look and feel 
  of your interface.

  Below is a sample that contains rainy background, this aint a video that loops 
  infinitely, I have used JavaScript for this effect.

  NOTE: Here I have used the dummy values for the temperature. I would like 
  to convert these dummy values into real ones, so please suggest how to do so.

  Any suggestions will be greatly appreciated.

  Flash Output: https://db.tt/8kQApf1m

  HTML5 Output: https://db.tt/SUQUORhh

14 Sep 2015

Locate yourself on Google Map..!!

We know Captivate 9 has come with some unique features. one of them is “Geo Locator”. Our developers being the masters of their field tried this new feature in Articulate Storyline 2 by Java Script and HTML 5.

Try this to find your location.
Note: In the Address bar you will see a shield icon, click on it and then select load unsafe scripts. (The chrome page will reload with all the scripts enabled.) .Use your mobile devices for exact location.

DEMO LINK: http://db.tt/4DoWiFdj