April 15, 2017
Uploading an e-learning module to your website
Comments
(13)
April 15, 2017
Uploading an e-learning module to your website
Newbie 5 posts
Followers: 9 people
(13)

In this article I show you how to upload an e-learning module to your website. I’m using my recently completed module on discus throwing as an example.

The process is not as complicated as it might seem:

 

Once you have completed your project, you need to package up all the necessary files via the publishing process in your e-learning authoring tool. In Adobe Captivate go to Publish and select Publish for Devices.

Screenshot 2017-04-15 14.21.45

In the dialogue box Publish for Devices ensure that the option Zip Files in not ticked, and you should also set eLearning output to Disabled. You might have these options selected if you’ve published the content for an LMS already. If eLearning output is not disabled the user might be discouraged by an error message that essentially warns them that the SCORM files can’t connect with a Learning Management System.

So your dialogue box should looks something like this:

Screenshot 2017-04-15 14.24.45  

Click on Publish and wait for Captivate to do its magic.

Screenshot 2017-04-15 14.27.29

You can select No when Captivate asks you whether you want to view the output:

Screenshot 2017-04-15 14.27.51

All the files you later need to upload to your web server are now saved in the nominated folder.

Next, you will upload these files via FTP (file transfer protocol) to a folder within your public_html folder on your web server. 

In my case, I first logged into my Bluehost account (the process would be similar with other hosting services) and I created a special subdomain called elearning. I will place all my e-learning modules under that subdomain. 

I can find the relevant subdomain folder within the public_html folder. Within that subdomain folder I created another folder descriptively named discusquiz into which I will place the necessary files Captivate generated for me previously.

Screenshot 2017-04-15 14.51.28

Being a Mac user I used the FTP software Cyberduck to manage the file transfer. Windows users might use an FTP client like Filezilla. If you need help setting up your FTP file transfer capability and you happen to be a Bluehost customer, refer to these instructions

Now simply select all files Captivate packaged up for you and drag and drop them to the target folder. So in this example all the files highlighted in blue (the files located on my Mac) are dragged and dropped in the discusquiz folder in the Cyberduck window.

Screenshot 2017-04-15 14.51.48

Now it’s time for Cyberduck to do its magic:

Screenshot 2017-04-15 14.52.41

Of course you also need a link for users to access and play your newly uploaded e-learning module. 

In Cyberduck, select the index.html file, click on Action and select Copy URL > HTTP URL

Screenshot 2017-04-15 14.55.58

You can now paste that link in your web browser address bar – but hang on, you’re not quite done yet.

Finally, get rid of the ftp and the public_html bits of the address. In my example the copied address http://ftp.jorgprobst.com/public_html/elearning/discusquiz/index.html

becomes this:

http://jorgprobst.com/elearning/discusquiz/index.html

And that’s it! Users can now use that link to access and play your e-learning module:

 Screenshot 2017-04-15 15.05.00

 

13 Comments
2019-02-06 22:05:27
2019-02-06 22:05:27

Thank you for the information.

Like
(2)
2019-02-05 23:39:26
2019-02-05 23:39:26

This is my first time to know that you can actually embed the module for webpage application. Thank you for the useful information!

Like
(2)
2018-06-29 02:15:56
2018-06-29 02:15:56

Thank you jPro! I have struggled with this in the past and will use your post in the future if I run into the same problem again. The steps are clear and easy to follow. Great Job!

Like
(3)
(1)
>
Shelly Gooden
's comment
2018-08-26 11:16:02
2018-08-26 11:16:02
>
Shelly Gooden
's comment

Thanks, I’m glad you found it useful. It took me a long time too to work this out.

Like
(1)
2018-06-01 03:23:27
2018-06-01 03:23:27

Very useful info

Like
(4)
2018-05-30 01:59:55
2018-05-30 01:59:55

Will the project stay on the page and be interactive or will it launch in a new tab? Thank you

Like
(3)
(2)
>
conzolom58623008
's comment
2018-08-25 01:37:19
2018-08-25 01:37:19
>
conzolom58623008
's comment

I haven’t used this particular method but t believe it will launch in a new tab.

Like
(1)
>
conzolom58623008
's comment
2018-08-26 11:22:21
2018-08-26 11:22:21
>
conzolom58623008
's comment

Sorry for the late reply. The project launches in the same browser window, but I’m sure you could set it up so it launches in a separate browser window. You can check out how it works on my page. http://learning.jorgprobst.com/samples/

Like
(1)
2017-10-05 03:59:04
2017-10-05 03:59:04

THANK YOU! This took me so long to figure out. Appreciate the help.

Like
(3)
(1)
>
JeffMattWalsh
's comment
2017-11-18 00:43:50
2017-11-18 00:43:50
>
JeffMattWalsh
's comment

Thanks for commenting. I know how you felt. It took me a long time to figure out too, so I thought it was worth sharing.

Like
(2)
2017-07-13 05:54:15
2017-07-13 05:54:15

Can the quiz be placed in a div in the html so that I could add a standard navigation bar to match the rest of my website? Would I just edit the html/css files?

Like
(1)
(1)
>
binxbinx
's comment
2017-07-15 06:46:12
2017-07-15 06:46:12
>
binxbinx
's comment

Sorry, I honestly can’t answer that question for you. Hope you find the answer elsewhere.

Like
(1)
2017-04-20 13:20:37
2017-04-20 13:20:37

Very useful. Thank you very much!

Like
(2)
Add Comment