HTML/JS/CSS in Storyline 360

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.

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!

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.

Hey Scott- I downloaded the storyline file provided. Thank you! I noticed, however, that only 1-9 can be used in the calculator. Any way to input numbers larger than 9?

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.).

Hi Scott,

Thanks for the updated Storyline file! And yes, I completely understand. Thank you for sharing and responding so quickly.

Jesse

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.

This is so awesome! I noticed I can't multiply by a decimals when the decimal comes after the function, like 26 x .02. This is the best SL calculator I've been able to find but without the decimals working, I can't use it. :( I'm a newb at Java script so any help with this would be much appreciated!