Open-Source: Confidence Self-Check Dashboard (Dual HTML & Storyline Exporter)

Hi Everyone,

It is great to be posting back here after a while!

A lot of the custom widgets and micro-apps we see shared across the community are fantastic out of the box, but they often share a common flaw: they are completely hardcoded. If you want to change a question, tweak a score boundary, or alter a feedback message, you have to dig into line after line of tightly coupled JavaScript or manually update dozens of variables inside your authoring tool.

Following some great discussions here on the hub—and specifically responding to a note from community member SamanthaGonz271​ who mentioned wanting the ability to freely edit and tailor these frameworks, I wanted to take a completely different architectural approach.

I have built a modernised, fully state-driven Confidence Self-Check Baseline Tracker (v9.7). Instead of standard text blocks, this framework relies on a modern glassmorphism UI overlay and features a dynamic digital grid canvas.

You can preview the interactive widget running live on Review 360 here: 👉 https://360.articulate.com/review/content/d58cf155-636e-4f43-82c9-1832035cd504/review

🚀 What makes this version different?

I have engineered a built-in "Designer Mode" directly into the interface. This transforms the widget into an automated production pipeline for your VLE:

1. Dynamic Content Modification: Add or remove questions, upload custom image URLs, configure unique item weights, and adjust percentage performance bands without writing a single line of code.

    

2. Tabbed Dual-Exporter: Once customised, the engine generates clean production code instantly via a split panel. You can copy the code out as a Standalone web deployment file (HTML) or grab the Storyline JS Trigger payload.

🛠️ Upgraded Learning Features:

• Pre / Mid / Post Checkpoint Tracking: Learners can capture a baseline at the start of a module, log a mid-point check-in, and execute a final checkout.
• Visual Distance Travelled Map: The system references localStorage to compute exactly how far the learner has travelled between checkpoints, plotting their growth on an animated spectrum bar and a historic progress node map.
• Sandbox-Safe PDF Printing: To circumvent strict iframe browser restrictions that block pop-up windows inside modern learning management systems, I have engineered a clean window-write utility that smoothly bypasses pop-up blockers to print or save progress certificates safely.
• Dead-End Validation Errors: Learners can no longer accidentally submit partial sheets. The engine targets missing inputs and highlights exactly which questions need attention.

📦 How to use it in your own builds:

I have attached both the master Source HTML Engine and the Articulate Storyline template file to this post.

To customise it, simply run the HTML file locally, click into "Designer Mode" in the top-right corner, modify your curriculum parameters, and copy the clean output code right out of the generator panels. If you are placing it into Storyline, simply copy the code from the Storyline JS Trigger tab and paste it directly into an "Execute JavaScript" trigger on slide start.

Special credit to JoeDey for the original inspirational "Perpetual Notepad" concept that got the ball rolling on this community script style.

Let me know how you use it in your programs or if you have any feature ideas to push it further!

Cheers, Daniel Boyland Forged Frameworks