Explore the community Forums Lectora Online Lectora Online Questions & Answers Help to place HTML5 simulation files in Lectora Online Reply To: Help to place HTML5 simulation files in Lectora Online

#361653 Score: 0
Profile photo of Jan Brooks
Jan Brooks
Member
beginner
intermediate
friend finder
curious george
wise owl
contributor
2 pts
@jbrooks6669

@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)
  • This reply was modified 3 years, 2 months ago by Profile photo of Jan Brooks Jan Brooks. Reason: removed html heading code