Help to place HTML5 simulation files in Lectora Online

jbrooks6669
jbrooks6669 Community Member Posts: 13
I want to run an interactive simulation (created in Captivate and exported as HTML5) on a lesson page in Lectora Online. I saw that this can be done in Lectora Inspire using Insert > Web Window because you can pull in all files and folders. I don't see how to pull in the html5 folders and files into Lectora Online.

Is this possible in Lectora Online??

Comments

  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 528 eLearning ROCKSTAR Admin Team
    You can zip up the folder structure you want in your title (make an archive/zip file with something like 7-zip) and then attach it from the Insert tab -> Attachment -> Zip Folder

     

    http://trivantis.com/help/Lectora_Online/3.3/en/HelpHTMLs/index.html#6652.html
  • jbrooks6669
    jbrooks6669 Community Member Posts: 13
    Thank you, Joe. There is more to do than is covered in the instructions such as finding the URL to place in the Web Window properties box, but I was able to figure it out and make it work.
  • jbrooks6669
    jbrooks6669 Community Member Posts: 13
    @wheels (fingers crossed you see this)

    In the Web Window, I used a Lectora Online URL that consisted of the URL for the course, the zip file folder name, and the index.html file (renamed to index2.html).

    It works great, but I'm concerned about what happens when I publish the file to SCORM, upload the course to the LMS, and then archive the title in Lectora Online or save the pkg file elsewhere. That URL goes away.

    Is there a way to use a relative path to the index2.html file instead of a specific URL?
  • jbrooks6669
    jbrooks6669 Community Member Posts: 13
    @wheels (fingers crossed you see this)

    So I figured it out. It's challenging sometimes to make features like this (that work so well in the Lectora desktop version) work as well in Lectora Online.

    In the Web Web window, select Local Web-based Content from the Window Source field. Enter the folder name of the zip file you imported and the launch filename in the format of [folder name]/[filename].

    You can preview the page in a browser window. Yea!! :)

     
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 528 eLearning ROCKSTAR Admin Team
    Thanks @jbrooks6669 sorry I didn't get back to you. I'm glad you figured it out.  We need to build a browse feature for that!  I'll make sure we get it on the roadmap.
  • ldougary3836
    ldougary3836 Community Member Posts: 2
    Hi @jbrooks6669 and @wheels,

    I am also having issues adding Captivate simulations published to html5 in my Lectora Online title.  I have tried following your instructions but seem to be missing something to make this work. I'm hoping you can share more of your expertise since you managed to make it work!

    I have added a zip folder called Simulation (which contains the index.html file) to the title using Insert tab -> Attachment -> Folder (Zipped). I have added a Web window, selected Local Web-based Content and entered the file path Simulation/index.html. However when I preview the published page I get this error:

    "500 - Internal server error. There is a problem with the resource you are looking for, and it cannot be displayed."

    Can you please explain how you found the correct URL to the attached zip folder? Or maybe give an example of the path name in Lectora Online so I know what I'm aiming for in my own title?

    Appreciate if anyone in the community can assist me with this.
  • jbrooks6669
    jbrooks6669 Community Member Posts: 13
    @ldougary3836

    Hi Linda, I haven't done this in a while, so I'm a bit rusty, but I did document this for myself and will share that with you. Right away, however, I see that you used the filepath "Simulation/index.html". It's important that you rename the index file to something different so it doesn't conflict with the Lectora title index file. I change it to "index2.html".

    These are my steps for placing the HTML5 file. For my title, I placed the file on a popup page and launched it from my lesson page with a button (Display Page in Popup action).

    Best regards,

    Jan
    How to Embed HTML5 Files into Lectora Online
    Why?
    • HTML5 is preferred over Flash (mobile compatibility)
    When?
    • When you have an interactive activity or simulation that requires someone to do something, such as what you might export from Captivate (not a movie!)
    • Note: For passive animations or presentations where no user action is involved, use MP4 video.
    What (should I prepare)?
    • Lectora title and a new page for the video
    • Exported HTML5 files in a zipped file
      • Folder name =
        Ex: WS-SPLI-Disable-Enable_Sim
      • Renamed Index.html filename =
        Ex: index2.html
      • Simulation size or maximum screen size
        Ex: 1280 x 800
    How?
    1. Prep the page
      • Change the page size
      • Disinherit the background
      • Disinherit all objects from the parent
    2. Import the zipped files
      • Only HTML5 files (remove Flash files if you exported both)
      • Insert menu > Attachment (drop-down menu arrow) > select Folder (zipped)
    3. Add a Web Window
      • Insert menu > Web Window
      • From Window Source, select Local Web-based Content
      • In File Path field, enter [folder name]/[file name]
        Ex: WS-SPLI-Disable-Enable_Sim/index2.html
    1. Export SCORM file
    2. Test with Page Preview (in a browser)
  • ldougary3836
    ldougary3836 Community Member Posts: 2
    @jbrooks6669

    Hi Jan, Your instructions are brilliant - thanks for sharing!

    I've got it working now. As you say, changing the index.html name to index2.html is critical, this was where I was going wrong. Also publishing to test since it does not work in the page preview mode (shows the 500 – Internal server error) so I thought it was not working, but it does show the html simulation correctly when published.

    @wheels, Ian - thanks for your assistance by email too.
  • jbrooks6669
    jbrooks6669 Community Member Posts: 13
    So, did this functionality change for Lectora Online? I entered a support case late yesterday (171289), but if anyone is looking and knows how to deal with this, it would be great.

    I’m updating a title that had 2 Captivate html5 simulations in it. I’m trying to update the 2 and add 1 more.

    Resources for the file included two named folders under Folder (zipped).

    If I elect to replace folders when I upload a new zip file, the new folder gets unzipped under Folder (zipped) in Resources and all folders get replaced.

    The simulations are launching from pages in a separate Popups folder (user clicks a button to open the page in a new window). Each of the 3 simulation pages has a Web Window on it. The Window Source is Local Web-based Content and Relative Path goes to the subfolder and index file. (Each index file has a unique name.)

    On entry to the Web Window box, the OK button is gray. If I remove the folder name, it is still gray. If I replace the folder name with “Folder (zipped)” the OK turns black and I can save this. However, when I Publish the file to SCORM, Preview the title, and open that page, I get an HTTP Status 500 Error.

    On one attempt to update the zipped files, I selected the option to Merge folders. I tried changing the paths on the Web Window boxes, and as I expected, the simulations did not launch and I got the same 500 error.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!