Creating a Countdown Date in Storyline 2

Nov 02, 2018

I need to create a countdown date feature in my current course. I know there are web sites that you can go to and create them online but I need this to be in my course on a SL2 page. I suspect it's javascript / embed code or similar.

The sort of thing I am looking for is (just for a rough idea: Days until Xmas:  68 days 5 hours 2 minutes 58 seconds (and it is counting down live as you view it) and the look and feel I am wanting is graphical (so maybe a nice graduated blue box) rather than just plain old text. Anybody done anything like that before?

11 Replies
Brian Waters

Thanks @matthew - I tried to embed the following code into a new page, but it comes back with an error when I try the Insert Video from website method of embedding an embed code. The error is: A video cannot be inserted from this embed code.

The code is:

<div data-type="countdown" data-id="807925" class="tickcounter" style="width:1280;position:relative;padding-bottom:25%"><a href="//" title="Making Tax Digital">Making Tax Digital</a><a href="//" title="Countdown">Countdown</a></div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); = id; js.src = "//"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>

as you can see it is a date countdown for Making Tax Digital, not a video as such. There is no URL for this. Only an embed code or share on facebook. (pah!) the output should look like the attachment....

anyone have any suggestions?

Brian Waters

Hi - I have created a notepad (index.html) containing the embed code in between <html> and </html> - thats it nothing else on the notepad. Then saved that to my storyline structure (in a new folder which I created myself called countdowndate. When I published the storyline the publish moved the notpad to a new location in content_story / webobjects. all a bit messed up. when I publish, the embeded content doesnt show up - says it was moved or missing. Initially I was publishing to a OneDrive location, but I have now doen it again to a local location on the PC but I am still getting the same result, embed showing up.

Brian Waters

UGH! It works! What I didnt do was review it on a server I was just reviewing it immediately after publish. doh! Now that I have uploaded it to tempshare I can see that the embed loads into the page on storyline course. Couple of issues I need to resolve. 1) it is landing too far up on the page and covering my header, so I need to move the widget counter thing down the page. Can I just do that with some paragraph spacing in the index.html? and 2) it has an incorrect border colour on the blue box, but I know how to fix that at source in the embed code generator.

Brian Waters

Right all - thanks for the understanding and support. The job is done. I now have my shiny new embeded countdown date feature running in my course. The important thing to remember here is that with an embed of this nature you'll never be able to preview it locally after publish, you have to upload / publish your course first before you can see it working. Once I had realised this I was ok. I also had to self learn how to write and edit my index.html for the embed code and how to insert spacing to move the widget further down the page, and then add some further text on the page in Storyline. Really pleased with the outcome, and thanks for the support on here. Much appreciated @Michael Hinze and @Matthew Bibby. Cannot demo due to IP, sorry.

This discussion is closed. You can start a new discussion or contact Articulate Support.