I developed this piece to showcase both user interaction in Storyline as well as using xAPI to create a leaderboard. IT captures the user's avatar, name, and final score and rank them based on their performance.
Articulate Storyline
Adobe Illustrator
Veracity LRS
Graphic Design
Javascript
HTML
The core functionality of this course really builds on the core principles of the DnD xAPI module: collect the user name, avatar, and user interactions to create a dynamic experience. This on top of remembering the choices of multiple users, also produces a leaderboard to create a community experience. Let's go over how all this works:
Similar to a function used in my DnD xAPI module, the checkUserName() function checks the entered user name to ensure the LRS will accept it. As these names will also populate a leaderboard, it also works to remove other special characters.
This is accomplished by creating a RegExp object containing the restricted characters and then using the test() method to compare it against the entered user name. If any of the listed characters are present, a value of True is passed to Storyline requesting the user adjust their name. Other wise, a False is passed and the module continues.
This sendStatement() function is called after the final question in the module is answered. This begins by connecting the Javascript file to the variables within Storyline. Several variables are then pulled and passed into the xAPI statement.
After passing through the userName variable, the replaceAll() method is used to ensure the name passed to the "mbox" field has white spaces removed. As white space was excluded from the previous function to allow for users to enter a first and last name, this balances user experience as well as requirements for the LRS.
Statement passed:
sendStatement("passed", "http://adlnet.gov/expapi/verbs/passed", "quiz", "http://example.com/xapi-sample-quiz", "userAvatar")
The populateLeaderboard() function is called last and it creates the leaderboard experience in storyline. It sends a query to the LRS for statements that meet the parameters set. Once obtained, sort() is used to arrange the statements in descending order based on the user's final score. After organized, the score is multiplied by 100 to better replicate a game-like leaderboard.
After the modifications are finished, the user name, score, and selected avatar of the top 5 statements are pushed to the module.