How to use HTML5 in a course

How to use HTML5 in a course

by Leon Erasmus -
Number of replies: 15

I am currently using Flash (.swf) files to illustrate how to complete a task. I want to try my hand at HTML5 since I need to make the course available to  iPad users and Apple does not support Flash.

I created the HTML5 output and it resulted in an HTML5.html file as well as a 'Data' folder containing a 'fonts', an 'images' and a 'sounds' subfolder, as well as a player.js file.

How do I upload and use this in a Moodle (Moodle 2.2.2 (Build: 20120312) course? Any ideas would be welcome.

Many thanks,
Leon

Average of ratings: -
In reply to Leon Erasmus

Re: How to use HTML5 in a course

by Mark Drechsler -

Hi Leon,

I've not tried with HTML5 files, but if I was doing this with a Flash-based publication (i.e. an index.html file or similar calling a range of other files, including the FLV or similar file) then I'd do it as follows:

  1. Zip up all files in the package into a file - lets call it upload.zip
  2. Turn editing on in the Moodle course.
  3. Add a 'File' from the Resources menu in the target topic.
  4. Give the resource a name, description etc.
  5. Use the 'add files' feature to upload the upload.zip file to Moodle.
  6. Right click on the file and select 'unzip' - this should now show the unpacked files.
  7. Right click on the 'main' file (in your case HTML5.html) and select 'set main file' - this will make Moodle load this file, which in turn calls the other files.
  8. Save and display.

Hope it works smile

Mark.

Average of ratings: Useful (3)
In reply to Mark Drechsler

Re: How to use HTML5 in a course

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

As reported by Mark, in MDL-33678 "Unzip doesn't work in 2.3". Please vote for bug report MDL-33678.

Joseph

Average of ratings: Useful (1)
In reply to Joseph Rézeau

Re: How to use HTML5 in a course

by Mark Drechsler -

Looks like this has been resolved by Marina now Joseph. There was already a ticket in as well - I just couldn't find it!

Mark.

Average of ratings: -
In reply to Mark Drechsler

Re: How to use HTML5 in a course

by Leon Erasmus -

Hallo Mark,

What can I say except for "Wow"!
Your procedure worked brilliantly the first time. Thank you very much for your trouble.

Kind regards
Leon (South Africa wide eyes)

Average of ratings: -
In reply to Leon Erasmus

Re: How to use HTML5 in a course

by Mark Drechsler -

You're welcome,

Thanks to Andrew Chambers for posting the request on Twitter as well tho - was the only reason I saw it.

D.

Average of ratings: -
In reply to Mark Drechsler

Re: How to use HTML5 in a course

by Márcio Camilo -

Hello, 

Following the these instructions, how could I make each .html page to be traceable as a resource?

I mean, suppose I have 1.html, 2.html and 3.html. And suppose I have a link inside 1.html that points to 2.html file. And a link inside 2.html file tha points to 3.html file. 

Making 1.html the main file, if I navigate (using the links) to 2.html and 3.html, the student log would show me only the 1.html visited or also 2.html and 3.html visited?


  


Average of ratings: -
In reply to Mark Drechsler

Re: How to use HTML5 in a course

by Luiza Mendes -

Hi, Mark. 

I've been using some Adobe Captivate files in SWF and now I'd like to try using HTML5 files, in order to access Moodle on iPads... I tried your process, and it did work. However, when I access the file, it opens blank, I have to click play in order to access the content. It did not happen with the SWF file, which would open right away. ready to do the steps. 

I don't want to draw attention to the player bar because people could easily skip the steps and it's not what I want in this course. Especially because it would be something else to teach the user, to click on the play button (we're talking about a user that is not very patient and intuitive). 

Do you know if there's a way of not having to click play? Showing the content right away?


Thank you!

Average of ratings: -
In reply to Luiza Mendes

Re: How to use HTML5 in a course

by Melanie Scott -
Picture of Particularly helpful Moodlers

If you don't want people skipping ahead in your Captivate module, you could turn the skip ahead features off on the playback skin, assuming you have next buttons or auto forward in the module at the appropriate places.

Average of ratings: -
In reply to Melanie Scott

Re: How to use HTML5 in a course

by Luiza Mendes -

Thanks, Melanie. I did not know I could do that. I hid all buttons, but since it doesn't play automatically, I can't see the content... Do you know if there's a way to not have to click play? Accessing the file and already being able to see the content? 

When I access the file on windows, it shows right away... In moodle, it just keep happening like this... 

Thanks!

Average of ratings: -
In reply to Luiza Mendes

Re: How to use HTML5 in a course

by Melanie Scott -
Picture of Particularly helpful Moodlers

It has been a dog's age since I did anything like this in Captivate...mostly, I use it for software tutorials which auto forward automatically (? Maybe it just likes me?  That would be a first.).

But I'll give it a go.  I think it auto forwards only if you don't have buttons/actions set to forward.  I opened one of my old modules and slides w/o continue buttons move to the next screen when the time for the slide is elapsed.

If you click time line at the bottom of captivate, it will show you how long the slide will play. You set a slide for 30 seconds and the you can layer stuff to show in progression as the time elapses.  When it hits 30, it moves to the next page.  You might also check your project preferences...you can modify default slide duration...but I think navigation button set a pause after the display condition, requiring a click rather than autoforward.

Average of ratings: -
In reply to Melanie Scott

Re: How to use HTML5 in a course

by Luiza Mendes -

I use it mostly the demonstration mode, and then I export the file as MP4... 

But I have two files in the training mode, the user has to do the steps in order to continue and move forward... And then on Moodle I'm experiencing this problem with the HTML5, because the screen is blank, it doesn't show the first slide that I have on Captivate.. The user would have to click play to know what to do... 

I guess there's nothing I can do.. Can't find anything like my problem anywhere or any kind of solution... sad

Average of ratings: -
In reply to Luiza Mendes

Re: How to use HTML5 in a course

by Melanie Scott -
Picture of Particularly helpful Moodlers

Have you tried not exporting it as an MP4 and publishing it as a scorm instead?  It seems like you said something about publishing it to html5, but the export sounds...odd.   Maybe SCORM would work better?  That's how I publish mine.  And, that sounds like Captivate! My problem (older, much older, version) back before I stopped using it for anything but software tutorials, was that it refused to show the last page.  You know, the one that gave them credit. 

On your first page, is there something in the settings for your text that is preventing showing?  Maybe a layering issue or a show on click or something?

Average of ratings: -
In reply to Luiza Mendes

Re: How to use HTML5 in a course

by Melanie Scott -
Picture of Particularly helpful Moodlers

Also, just a thought...if you are publishing to SCORM, are you publishing to 1.2 or 2004?  I think Moodle is only completely compliant with 1.2 (Dan would know better).

Average of ratings: -
In reply to Melanie Scott

Re: How to use HTML5 in a course

by Luiza Mendes -

Melanie, I thank you so much for your time and tips... Apparently the trouble I was experiencing and describing to you was because of the browser. I was using Google Chrome, and then I tried Firefox and the problem was gone! Not a problem on captivate or moodle, but on the browser... 

Thank you! 

Average of ratings: -