README.md

SCORM Game Template

This is a simple game template that connects to a SCORM server. It is aimed at developing games consisting of a number of rounds, each using a common layout but using different data. It's really easy to adapt.

Structure

Events

The diagram below indicated the flow of the game screens.

┏━━━━━━━━━━━┓    ┏━━━━━━━━━━━━┓    ┏━━━━━━┓    ┏━━━━━━━━━━┓    ┏━━━━━━━━━┓
┃ STARTGAME ┃--->┃ STARTROUND ┃--->┃ GAME ┃--->┃ ENDROUND ┃--->┃ ENDGAME ┃
┗━━━━━━━━━━━┛    ┗━━━━━━━━━━━━┛    ┗━━━━━━┛    ┗━━━━━━━━━━┛    ┗━━━━━━━━━┛
                      ^                            ┇
                      ╰────────────────────────────╯

There are four functions provided for you to add your game functionality:

1. launch() – runs once on page load (before the STARTGAME screen is displayed).
2. startRound(roundName) – runs at the start of each round (before the STARTROUND screen is displayed). The name of the round is passed as a parameter.
3. endRound(roundName) – runs at the end of the round just before the ENDROUND screen is displayed. The name of the round is passed as a parameter.
4. endGame(scores) – runs once, just before the ENDGAME screen is displayed. The scores parameter contains an array of the scores for each round.

Understanding the HTML

Each screen of the game is defined as a main element and all but one are set to hidden. The showSection() function takes the id of the section to display, shows this and hides the rest. If there is a button to take the user to the next screen this will have a class of next.

Each main element can contain multiple section elements to manage the layout and visibility. There are a couple of pre-defined ones:

1. tooltip displays information that appears and then remains visible and is triggered using the showTooltip() function that takes two parameters, the title and message.
2. notification displays a simple message for a defined length of time in seconds and them disappears. It is called using the showNotification() function and takes two parameters, the message string and an optional duration in seconds (defaults to 3 seconds).

Features

The data.json file defines the rounds of the game. Edit the rounds array. The name property defines the URL hash string that will load the round. The rest of the objects define information to be displayed in each round. You can add as many properties as you wish. To insert the values into the html, assign a class that matches the appropriate object key, for example to display the title value in a top-level heading, add the following:

<h1 class="title></h1>

Hidden Elements

Certain elements such as tooltips and notifications should be hidden at the start of every round. To achieve this give them the hide class.

Functions

The common.js script is imported into the project and provides the following functions:

Utility Functions

1. loadData(filename) – loads the script with the name matching the parameter. It looks for JSON-formatted files in the data/ directory only and the filename should not include the .json file extension. It returns a JavaScript object.
2. showSection(name) – hides all the main elements except the one with an id attribute matching the parameter.
3. addScore(score) – appends the score specified in the parameter to an array of scores that will be passed to the endGame() function.
4. showNotification(message, delay = 3) – displays the test string in the message parameter for 3 seconds (can be changed by supplying a second numerical parameter).

SCORM Functions

The following SCORM functions are already implemented in the scripts, they are listed below for reference:

1. startGame() – this is called at the start of the game. It changes the completion status from not attempted to incomplete and sets the max score based on either one provided by the LMS or 100 by default. It also captures the current date and time to allow the game to calculate how long a user spend in the game.
2. updateScore(score) – saves the score supplied as the parameter to the SCORM server if it is numerical and in a valid range.
3. finishGame(score) – called right at the end of the game. It saves the score passed as a parameter and then updates the status, to pass/fail if a mastery score is provided in the LMS but if not to completed. Finally it calculates how long the user was in the game. The status and session time data is pushed back to the LMS.