Internet Connection Detector

Sometimes it is necessary that the internet connection is alive and that the user needs to know if connection got lost.

So I have created a script which detects whether the internet connection is ok or not.

How to use:

  • Download the attached file:
  • Extract the folder anywhere you can find it again
  • Put the whole extracted folder into you finished Storyline project folder
  • Open the following files with a texteditor (depending on how you published the project e.g.: Flash + HTML5 + Scorm)
    •  story.html
    • story_html5.html
    • index_lms.html
    • index_lms_html5.html
  • Add the following code in these files at the very end (After the </html> tag):

<script src="connectioncheck/offline.js"></script>
<link rel="stylesheet" type="text/css" href="connectioncheck/offline-language-english.css">
<link rel="stylesheet" type="text/css" href="connectioncheck/offline-theme-slide.css">
Offline.on('up', function() { 
Offline.on('down', function() { 


Tested in latest Chrome and IE11 with flash and html5

Note: When project is published in fullscreen - IE11 shows the content in front of the warning (only in flash version). I guess it is just a litte thing to adjust this behaviour but I have not tried as I do not really care for my purpose.

Working example can be found here: connectioncheck



If you set the 

var g_strWMode

which is located in the story.html file to opaque or transparent then it also works with IE and Flash

4 Replies
Aaron Kapala

Hi Christoph,

This is great and something that would be perfect within out modules. It works fine if i launch the file after being published but it doesn't seem to display that the connection is lost when it has been launched from a Moodle LMS.

Do you know of a setting that could fix that?