HTML/JS/CSS in Storyline 360

Hi everyone,

I have been reading all sorts of posts about HTML/JS/CSS attachments to Storyline 360 however, I'm not sure I understand the correct methods.

Ultimately, I am trying to add a calculator to the course to allow the trainees to execute some math problems.  The calculators that have been built in Storyline, just don't cut it (decimal points to the thousandths are needed).  So I looked on code sites that have HTML/CSS/JS code that can be used and these calculators look amazing.

So what do I need to do with this code from the sites?  I know I would need to use a web-object and point to a directory residing on my computer and then it would get published in the course, BUT I don't know what to do with the HTML/CSS/JS code.  Do I copy the code into it's own file and folder and then place it into the story.html? Do I zip the files? What do I do?

Thanks so much for your help and expertise.

8 Replies
Scott Wiley

You should be able to get very far by copying JS code and pasting into a "Execute JavaScript" trigger.

If you need to import external JS that is wrapped up in your course package, that is possible too, but requires some more advanced techniques.

It's hard to help out more without specifics, or seeing a sample file you are able to share.

W Gill

Hi Scott,

Thanks for the reply.  

What I'd like to do is be ale to insert a calculator from https://codepen.io/search/pens?q=calculator&cursor=ZD0xJm89MCZwPTI= into a SL360 file.

I'm not sure what I need to place in the file structure of the storyline file or how to edit the index.html file.   These examples come with HTML/CSS/and JS code.  What do I need to do with all of this?

Thanks for your help!

Scott Wiley

If you can find a downloadable package that includes the html file and assorted css/js files, you can insert it into SL as a web object. I forget the process by may need renaming the html file to "index.html" or something like that. Once published, SL will grab copies of all the additional files and include them in your zip package to be uploaded to LMS.

Alternatively, unless you need some advanced functions, I put together a simple calculator based, visually at least, on one of the examples you linked to.

See the triggers applied to each button.

Scott Wiley

Hi Jesse,

Yeah, I noticed some glitches with it after the upload also. I've done an updated version in the modern player that fixed many of them, but still doesn't prevent someone from entering more than one decimal point. I'm sure there are other glitches with it as well.

I guess the point is that it is possible to create something like this right within SL, if you want to go to the effort of troubleshooting, or you have a bullet proof example to borrow from (applying JS to SL triggers/variables, etc.).

Jesse Sutton

Hey Scott - I actually have another question, my apologies! I've been customizing what you posted, and most everything appears to be working effectively. However, I'm not able multiply by a decimal (such as 100 x .1). I looked at the code for the decimal but cannot see where to adjust. Do you have any thoughts?

Thanks in advance for any assistance you can provide.