This wasn’t my idea. Another team were doing something with converting screenshots into HTML device simulators. Essentially HTML, image maps, some JavaScript and Excel spreadsheets.

Can we build something similar, on brand, a bit more modern and fluid, for system simulations for training? And oh, by the way, they need to be SCORM compliant too.

I spent a bit of time reading the SCORM specifications, looking at examples. Imminently doable. Do it then!

I’d already spent some time looking at NodeJS in my own time, its what some of us call fun 🙂

So off I went. Really though, this was a number of separate components. The first, was a Simulation Builder. Something that allowed (using NodeJS, HTML, JavaScript, etc), one of our designers to load in a set of screenshots, and annotate each one, information and action text, mark click boxes.

The second element was taking the completed JSON data produced from the Simulation Builder, along with the associated images, and packaging as SCORM.

Then uploading to the LMS. And the final piece was some more HTML and JavaScript to present the simulations to the users. The main rational behind this final piece, was that we decided to break each process into small simulation modules, that could be presented as a list of steps in a process. The benefits of this approach was that simulations could be reused. You only need a handful of customer verification simulations. You can then reuse them in all the processes. If customer verification changes, we just update that small number of simulations, then all process simulations get the updated version.