Embed HTML file in assignment page

[boyland]

I have an HTML file that I've uploaded to Canvas.  I would like to embed this HTML page in an assignment page.  Ideally I'd like to turn off the "download" option as well.

• I can add the file directly to a module, which gets something close to what I want except:
  • It's not an assignment.  I want to have the embedding in an assignment page (Otherwise I need to had two entries in the Module: one for the assignment and one for the content of the assignment, which seems confusing to students).
  • It includes a download link that I would rather not be present.
• I've tried using an "iframe" on the assignment page, with the "src" URL pointing to the file within Canvasusing iframe
  • But this has even more extraneous stuff
  • Including a download link again

To repeat: this webpage is NOT hosted elsewhere: I uploaded it to Canvas files.  I'd just like a way to embed it inline into an assignment page.

[JamesSekcienski · Accepted solution]

Hello @boyland,

That makes sense for why you can't directly enter the code in the RCE.  If you have access to account admin, you could probably write some custom JavaScript or CSS that would remove/hide the extra download link, but that doesn't seem the most practical.  

I know you said you currently have the file hosted on Canvas, but have you considered free hosting on other websites like GitHub Pages, Replit, or Glitch?  This may work better for embedding the web page without the extra parts and would make it easier to make changes to the file if necessary.  Here are instructions for embedding with Replit: https://docs.replit.com/repls/embed 

[JamesSekcienski]

Is there a reason, you aren't just copying the code from the body of the HTML file into the HTML editor for the assignment?  Are you using JavaScript and/or internal CSS in your HTML file?

[boyland]

Yes indeed. The HTML has thousands of lines of JavaScript (it was generated by "Twine").  Pasting the entire 150K of HTML (including CSS and JavaScript) into the HTML editor yielded a page that (1) interfered with the surrounding Canvas page and (2) didn't work anyway.

So I'm looking for a way to embed a frame with the HTML in it.  An iframe would be nice, but it seems Canvas don't want to directly expose the file, and instead wants to surround it with headers.  I was wondering if there were some incantations that removed these things.

[JamesSekcienski · Accepted solution]

Hello @boyland,

That makes sense for why you can't directly enter the code in the RCE.  If you have access to account admin, you could probably write some custom JavaScript or CSS that would remove/hide the extra download link, but that doesn't seem the most practical.  

I know you said you currently have the file hosted on Canvas, but have you considered free hosting on other websites like GitHub Pages, Replit, or Glitch?  This may work better for embedding the web page without the extra parts and would make it easier to make changes to the file if necessary.  Here are instructions for embedding with Replit: https://docs.replit.com/repls/embed 

[boyland]

Yes, it seems that Canvas doesn't provide a way to host files directly.  Thanks, I'll pursue non-Canvas options.

[sgilbert · Accepted solution]

Hello.

I frequently do this without any download link or title.

1. Upload the files to Canvas (I just zip them up locally, so they are in their own folder when uploaded)
2. In Files, find the file you want to display (usually index.html) and right-click to get it's link.
   
3. Create an iframe and use the address as the src, after removing everything following the question mark (?) including the question mark. The URL should end with /download.
    
4. Now your page will appear with all of the CSS and JavaScript, with no extra file name or download.