D&D Character Creator

Overview

I developed this piece to act as a framework for a series of learning modules that uses xAPI to capture user choices and use them in later modules to simulate a cohesive learning experience. This was done by querying an LRS and populating the returned values within Storyline360. The final product is a Dungeons & Dragons themed two-part module that allows a basic Character Creation.

View Part 1

View Part 2

Tools

Articulate Storyline
Adobe Illustrator
Veracity LRS

Skills

Graphic Design
Javascript
HTML

You can check out the code used by visiting the repository here

View GitHub Repository

How it Works

The course operates by using three functions to log the user interaction to an LRS and calls those choices to update variables in Storyline to replicate those choices. Let's breakdown what those functions do and how they work.

The whiteSpace() function is used to validate the character name used. As the xAPI statement uses email formats for the Actor portion, white spaces cause the statement to error out and not be logged. This is handled simply by using the indexOf() method to detect a whitespace and pass a True/False value to Storyline, requesting the user reenter the name if True.

The sendStatement() function is what compiles and sends the xAPI statement to the LRS. It begins by establishing a connection between the JavaScript files and the variables stored within Storyline. From here, the Actor portion is filled by passing the character name stored in the userName variable to the name and "mbox" field.

The Verb, Object, and Response portions are filled via one of three sendStatement() functions being called. The specific function called is determined by what race the user had selected.

If human was selected:

sendStatement("selected", "http://id.tincanapi.com/verb/selected", "human", "https://www.dndbeyond.com/races/human", "userClass")

If dwarf was selected:

sendStatement("selected", "http://id.tincanapi.com/verb/selected", "dwarf", "https://www.dndbeyond.com/races/dwarf", "userClass")

If half-orc was selected:

sendStatement("selected", "http://id.tincanapi.com/verb/selected", "half-orc", "https://www.dndbeyond.com/races/half-orc", "userClass")

The final function, populateCharacterSheet(), begins by connecting the JavaScript and the Part 2 module. From this, a query is sent to the LRS to pull the statement that matches the user name that had been entered as well as a secondary variable that ensures only statements aligned with this module are pulled.

After being located, the queried statement has specific part of their array pulled and passed into Storyline.

Page updated

Google Sites

Report abuse