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:

```html
<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.