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?
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.
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....
I'm using Stoyline 360, so I uploaded the published example to Articulate Review, but I could have uploaded it to any webserver. The webobject links to a local html page, rather than a hosted URL. That local page becomes part of the published content package.
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,...no embed showing up.
I don't think this code will run locally. You do have to upload the published content to some server, or an alternative like a storage bucket on AWS or Google Cloud.
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.
Re 1). I guess you could just change the height and position of the webobject so that it is positioned below your header. And yes, you can also insert spacing into the html page.
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.
11 Replies
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="//www.tickcounter.com/countdown/807925/making-tax-digital" title="Making Tax Digital">Making Tax Digital</a><a href="//www.tickcounter.com/" 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); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; 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?
You could paste the code into a simple html page and then link a Storyline webobject to that page. Here is a quick example.
Right - thanks so much - That's exactly what I would want..... but how have you hosted that page so I can get a URL? I havent done much self hosting.
I'm using Stoyline 360, so I uploaded the published example to Articulate Review, but I could have uploaded it to any webserver. The webobject links to a local html page, rather than a hosted URL. That local page becomes part of the published content package.
ahhh I see.... let me look into that. Thank you
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,...no embed showing up.
I don't think this code will run locally. You do have to upload the published content to some server, or an alternative like a storage bucket on AWS or Google Cloud.
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.
Re 1). I guess you could just change the height and position of the webobject so that it is positioned below your header. And yes, you can also insert spacing into the html page.
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.
Great to hear that you have it working now. Good luck with your project!
This discussion is closed. You can start a new discussion or contact Articulate Support.