A web dashboard for tracking and analysing xAPI (Tin Can) statements generated by Hihaho interactive videos. Statements are stored in SCORM Cloud's LRS and surfaced through charts, tables, heatmaps, and Salesforce lead forwarding. This is all the progress that I (Dustin Phan) have done over 6 weeks in my internship at SPline Global in Tokyo.
- Dependencies & Setup
- UI Overview
- [Syncing] (#syncing)
SCORM Cloud acts as the LRS (Learning Record Store) — it receives and stores all xAPI statements sent by Hihaho.
- Create a SCORM Cloud account.
- Navigate to the Apps / API tab.
- Click Add Application and give it a name.
- Find the new application in the list and click Details.
- Copy the App ID and Secret Key — you will need these for Hihaho and the Lambda.
- Under the xAPI LRS tab, go to the LRS Endpoints sub-tab and copy the endpoint URL.
Each video (or folder of videos) needs to be pointed at the SCORM Cloud LRS endpoint.
- Open the video settings of the video you want to enable xAPI on.
- Navigate to the LMS | LXP section.
- Enable xAPI sharing.
- Fill in the fields using your SCORM Cloud details:
- Endpoint → LRS endpoint URL from SCORM Cloud
- Username → App ID
- Password → Secret Key
- Save your changes.
Tip — Folder-level config: Instead of configuring each video individually, open the folder settings and complete steps 2–4 there. Then, in each video's settings, ensure "Use Folder Settings" is set to Yes and the correct folder is selected.
- Under Account Settings, go to API Settings and create an API account. Copy the generated API token — it is used by the Lambda to fetch your video list.
The frontend is a static site (HTML + vanilla JS modules) deployed to S3/CloudFront.
- Open
app.jsand update theMY_FOLDERconstant at the top of the file to match the exact name of your Hihaho folder:const MY_FOLDER = "Your Folder Name Here";
The backend runs as a single AWS Lambda function that proxies requests to SCORM Cloud, Hihaho, and Salesforce.
- Create a new Lambda function (runtime: Node.js; other settings are flexible).
- Paste the backend code into the Lambda editor and click Deploy.
- Go to the Configuration tab and set the timeout to 30 seconds (the default 3 s is too short for chained API calls).
- Attach an IAM role with the necessary permissions and expose the function via API Gateway — the generated API Gateway URL is your
LAMBDA_URLinapp.js.
The frontend files are served from an S3 bucket. Sync your local repo (or GitHub Actions pipeline) to the bucket:
aws s3 sync ./ s3://your-bucket-nameCloudFront sits in front of S3 to provide HTTPS and caching.
- Create a CloudFront distribution and set the origin to your S3 bucket URL.
- Copy the CloudFront distribution ID — you will need it to invalidate the cache after deployments:
aws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths "/*" - The CloudFront HTTPS URL is also required as the OAuth callback URL for Google and Salesforce.
Google login allows users to bypass the Hihaho email prompt when the video player loads.
- Go to the Google Cloud Console and create an OAuth 2.0 Client ID (Web application type).
- Add your CloudFront URL as an Authorised redirect URI.
- Copy the Client ID and Client Secret into the Lambda environment variables (or directly into the backend code where
GOOGLE_CLIENT_IDandGOOGLE_CLIENT_SECRETare referenced). - Add the Gmail addresses that should be permitted to log in to the
ALLOWED_EMAILSwhitelist in the Lambda.
Salesforce is used to forward high-completion viewers as leads via the REST API.
- Create or log in to your Salesforce account.
- Go to Setup and confirm your profile has Administrator privileges. If not, ensure your role has API permissions enabled.
- Navigate to Setup → Apps → External Client Apps and create a new app.
- Under the app's settings, enable OAuth and configure it:
- Callback URL → your CloudFront HTTPS URL (Salesforce requires a secure origin)
- OAuth Scopes → enable Manage user data via APIs and Perform requests at any time
- Under Flow Management, enable Client Credentials Flow.
- Under the Policies tab, in the OAuth Flows and External Client App Enhancements section, also enable Client Credential Flow.
- Copy the Salesforce domain name (e.g.
https://yourorg.my.salesforce.com) and substitute it into the Lambda wherever the Salesforce instance URL is referenced.
Pulls all videos from the Hihaho API that are published, embedded, and belong to the configured folder name. Click any video in the sidebar list to load it in the player. xAPI statements (attempted, paused, completed, etc.) are sent automatically as you interact with the video.
Displays xAPI statements retrieved from SCORM Cloud. Use the search bar filters (user, verb, video, date range, limit) to narrow results. Each statement is expandable to show the full JSON payload. A Download CSV button exports the current result set.
Shows the filtered statements as a simple table: Actor · Verb · Video · Timestamp.
| Chart | Description |
|---|---|
| Activity Over Time | Line graph of total statement volume per day |
| Activity Per User | Bar chart of total interactions per user |
| At-Risk Students | Horizontal bar chart of each user's completion rate, colour-coded by risk level (🔴 High / 🟡 Medium / 🟢 Low). A detailed table beneath shows attempted, completed, failed, terminated counts, and risk classification. A Send to Salesforce button forwards high-completion viewers (≥ 70%) as leads. |
| Engagement Level Per User | Stacked bar chart breaking down each user's activity by verb type (initialized, played, paused, seeked, interacted, answered, terminated, completed, passed, failed) |
| Chart | Description |
|---|---|
| Completion Rate per Video | Horizontal bar chart showing the percentage of users who completed each video (green ≥ 70%, orange ≥ 40%, red < 40%). A Strict mode toggle counts only passed statements rather than completed + passed. |
| Video Interaction Heatmap | Stacked bar chart per video showing where in the timeline users paused, seeked, played/resumed, or interacted. Checkboxes toggle each verb layer; a bucket-size selector controls the time resolution (10 / 30 / 60 seconds). |
Clicking Retrieve all Leads calls the Salesforce REST API and returns all existing leads associated with your Salesforce account.
A dropdown in the tab bar lets you switch between connected LRS endpoints:
- SCORM Cloud — production endpoint
- SQL LRS (local) — local LRS for development
- SCORM Cloud (Test) — isolated test endpoint, used automatically when isTest is toggled on
To add or remove an LRS option, edit the <div class="multi-select tab-lrs-selector"> block in index.html and add a corresponding config entry in the Lambda's LRS_CONFIGS object. Also make sure that a corresponding LRS is included inside the LRS_CONFIGS array.
Switches the active LRS to the test SCORM Cloud endpoint and loads test videos defined in the Lambda rather than real Hihaho videos. Use this to run the Flood Database tool (which generates synthetic statements for all student personas) without polluting your production data.
Authenticates via Google OAuth2 (PKCE flow). Once signed in, the player appends your email to the Hihaho embed URL so the video player recognises you automatically — no manual email prompt required. The button label changes to Logout (your@email.com) while a session is active.
For convenience, use AWS IAM to sync Visual Studio Code with the s3 bucket, and run these commands to sync edits made to the files:
- aws s3 sync ./ s3://{s3_BUCKET_NAME}
- aws cloudfront create-invalidation --distribution-id {DISTRIBUTION_ID} --paths "/*"
By default all files in the current path directory will be synced to the s3 Bucket / Cloudfront. If files not meant to be uploaded are accidentally uploaded, go to the s3 bucket and manually delete it.