cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
boyland
Community Participant

Embed HTML file in assignment page

Jump to solution

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 canvas-embed1.pngexcept:
    • 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 iframeusing 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.

Labels (1)
Tags (3)
0 Kudos
1 Solution

Accepted Solutions
JamesSekcienski
Community Participant

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 

View solution in original post

0 Kudos
4 Replies
JamesSekcienski
Community Participant

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
Community Participant

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
Community Participant

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 

View solution in original post

0 Kudos
boyland
Community Participant

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