cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jeffrey_weimer
Community Contributor

How do I upload my custom HTML, CSS, and JavaScript pages?

Jump to solution

I have Webpages that I custom-designed with HTML, CSS, and JavaScript. The CSS defines the styles and the JavaScript runs functions such as generating sets of random numbers or calculating values from input. In our previous CMS (Angel), I could upload an entire folder of content and have a Webpage displayed as though it was being served directly (just wrapped in a header and footer).

How do I accomplish the same thing in Canvas? How do I upload a folder that is "self-contained" with HTML, CSS, and JavaScript to have the pages it represents served as though the content is "stand-alone"?

--

JJW

2 Solutions
jeffrey_weimer
Community Contributor

I found a way through brute force trial and error.

* Upload the entire folder contents in to the files section inside its own folder. Example files : assignment.

* Create an assignment in Canvas.

* In the description of the assignment, put a phrase such as "The assignment statement is here".

* Link the "here" word to the index.html page in the files : assignment folder.

* When you want the page to appear in a separate window or tab, switch to HTML edit mode and add the target="new" statement in the <a href=...> start tag before the word "here".

Voila. It opens the page in a new window framed in a scrollable pane.

--

JJW

View solution in original post

I am also not a fan of iframes, however sometimes they can be a necessary evil.

View solution in original post

7 Replies
canvas_admin
Community Champion

 @jeffrey_weimer ​,  to my knowledge, this is only available in the new User Interface and the only upload options are for 1 CSS and 1 JS file.  Here's the guide on using the them editor in the new interface:  How do I use the Theme Editor as an admin?

I can't find it now, but I remember  @kenneth_larsen ​ being part of a conversation on referencing other JS/CSS files.  He may be able to provide you more information than I can.

 @canvas_admin ​, thanks for bringing this post to my attention. The CSS and JS files that can be added in the new user interface are for your entire institution as opposed to a single page like I think Jeffrey is going for. The solution he came up with is a good one.

Ah, my bad.  I'm so used to thinking on account and global levels that I didn't even realize he was talking about individual pages.  Although I am glad for my mistake, because this is useful information for me to know and I can see some testing in my near future. Smiley Happy

jeffrey_weimer
Community Contributor

I found a way through brute force trial and error.

* Upload the entire folder contents in to the files section inside its own folder. Example files : assignment.

* Create an assignment in Canvas.

* In the description of the assignment, put a phrase such as "The assignment statement is here".

* Link the "here" word to the index.html page in the files : assignment folder.

* When you want the page to appear in a separate window or tab, switch to HTML edit mode and add the target="new" statement in the <a href=...> start tag before the word "here".

Voila. It opens the page in a new window framed in a scrollable pane.

--

JJW

 @jeffrey_weimer ​, glad to hear that you found a solution. Uploading the folder to files is really the only way to use CSS or JavaScript in a page (unless you are an admin with rights to the global JavaScript and CSS files). Another alternative would be to iframe the page into the assignment (if you don't want them to go to a separate page). Switch to HTML edit mode and add something like:

<iframe src="/courses/12345/files/987654321/download" width="100%" height="100%"></iframe>

If you are not sure of the url, you can create a link to the page and pull the href attribute for the src. You will want to make sure and remove the "?wrap=1" or you will see Canvas within Canvas.

If you stick with the link route, I would recommend making your whole "The assignment statement is here" as the text for the link. Any students taking your course (no or in the future) using a screen reader would only hear the word "here" when trying to navigate the page which can be very confusing.

Thanks for the tip about framing. I see the use of the implementation, though I'm not fond of frames myself. In the old days of straight-up HTML coding, they just confused me too much to bother. With all browsers now having tabs, I prefer to use a target="new" rather than a frame in any case.

I'll certainly keep the consideration in mind about making a full sentence the link. I was unaware of the implementations of such things as screen readers.

--

JJW

I am also not a fan of iframes, however sometimes they can be a necessary evil.