Internet Connection Detection Plug in

Hi,

The internet connection in my company is very shaky and drops out a lot when completing their e-learning.  This results in a lot of frustrated users having to redo e-learning due to the results not tracking on our LMS.  

I came across this post that I think is the answer to my issue:

https://community.articulate.com/discussions/articulate-storyline/internet-connection-detection-plugin

However, I haven't a clue how to make it happen as there are several links, references to presenter, javascript and changes from SL1 to SL2 etc.  

Does anyone have an idiots guide to setting this up on my course please?

Thank you

15 Replies
Sally Matson

Thanks Ashley.  I did try this previously but it didn't pop up in the course.  A warning message flashed behind the course so the learners didn't necessarily see it and it still let them continue in the course.  It didn't warn them they need to exit and reconnect either so the learners still got to the end and their progress didn't track.  I am hoping the plug in will be a more obvious warning for the learner. 

Christoph Krieger

Hi Sally

I could finish it a bit earlier as it was pretty straightforward.

How to implement:

  • Download the attached zip file
  • Extract the zipfile
  • Open Master view in Storyline
  • Insert a web object

  • Chose as source of the web object the extracted folder

 

And youre done!

 

Style and text can be edited by changing these files:

  • offline-language-english.css 
  • offline-theme-slide.css

 

I hope this solution works for you as well.

 Working demo can be found here: connectioncheck

Works with Flash and HTML5

Sally Matson

Hi Cristoph.

Thanks again for the help.  I have been trying it out today and testing it and have found the following:

1. It works perfectly in Google Chrome

2. It doesn't work in Internet Explorer.  Have you any ideas how to make it work in alternative browsers?

3. I have been able to edit the text in notepad and wordpad so all good.

4. I can't work out how to amend the theming.  I can only open the CSS file using notepad or wordpad so all I see is code.  I have no experience with these files so should I be using a different program to view the file and change the theme/colours etc?

5. Lastly, I can't work out how to make the web object invisible on the slides.  In Chrome it appears as a grey bar.

I appreciate any help you are able to give.

Thanks.

Sally Matson

It is IE8 that I am using.  I will give it another go as I was testing something else at the same time so that may be the reason.

I thought that it would be a coding thing.  That's fine.  The appearance stands out enough so will work well for us.

I have attached a screen shot of how it looks when I test it online.  I have also attached just a couple of slides from the .story file.

Thank you

Christoph Krieger

That is a bit weird.

It works with html5 but with flash it is grey.
The behaviour of SL2 seems to be different than SL1.

However. As a workaround you could add the following code to the connectioncheck.html

 

<style> body {background-color: white;}</style>

Put this directly after:

Offline.on('up', function() {
});
Offline.on('down', function() {
});

I have tested it again with IE and it works for me.

Sally Matson

Hi Cristoph,

I have finally had the chance to revisit this today.  I followed the above link and it is working perfectly for me in Chrome and Firefox.  We are using IE 8 and it doesn't seem to work there but I am going to speak with our IT department about improving our internet browsers for our stores as we are having multiple issues with IE.

One last question - is there any way that I can get the message to appear in the centre of the screen? 

Thanks again for your time on this.  

Sally

Christoph Krieger

Of course it is possible.
You have to edit the offline-theme-slide.css
Just change the value in line 15 (top) to e.g. top:30% or whatever.

 

Also set 

var g_strWMode

which is located in the story.html file to opaque or transparent to prevent problems with IE9 - 11 and flash output.