Community

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

How do I post a folder with HTML5 file content as a Web page?

Jump to solution

I have a folder that contains all content needed to create a self-standing Web page. The folder contains four files. The index.html is the main file. The two .js files are javascript for functions on the Web page. The remaining file is the style sheet.

Folder
- index.html
- assignment.css
- assignment.js
- functions.js

I had hoped that I could simply drop this folder content into the files for the course, point to the index.html file on an assignment page setup, and have the Webpage show in Canvas as it does when I access it locally on my drive.

Alas, this was not the case. The css and js are not recognized.

My searching leaves me a bit confused on how best to handle what I need. Ideally, the folder content should show as an entire page to itself, not in a frame boxed within the rest of the Canvas window. To work properly, the page should recognize the css and the js files.

Below left shows what I have designed and want to post. Below right shows what Canvas outputs.

canvas.png

Can someone point to instructions on how to handle what I need.

Labels (1)
0 Kudos
1 Solution
jeffrey_weimer
Community Contributor

I have solved this problem. I have posted the folder containing raw html + css + js files on a unix-based Webserver that is provided by our university. I simply point an external link to the folder/file of interest.

My further reading on the community suggests that Canvas will never offer users a way to store raw html with external css and js files within the Files link and serve the raw html simply by creating a link to it.

Consider this topic closed.

View solution in original post

0 Kudos
5 Replies
Chris_Hofer
Community Coach
Community Coach

Hello there, @jeffrey_weimer ...

Keeping in mind that I am not familiar with the context of the page you are asking about, but from the information you provided and the screenshots you have attached, it looks as though you are trying to post a page of text.  Are there reasons why you couldn't just copy/paste that page of text into a content page in your Canvas course and then use the Rich Content Editor tools to do the formatting (such as the Headings, colored text, tables, etc.)?  You could even make an anchor link at the bottom (your "Back to top") that would jump to the top of the page to eliminate the need to scroll back to the top.  Would you be able to provide some insights or additional details as to why you'd like to use this method over creating a content page in the course?  Looking forward to hearing back from you on this.  Take care...be well.

0 Kudos

Here is a snapshot to show the content in the folder.

assignmentfolder.png

Here is a snapshot to show the starting lines in the index.html file.

***

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8">
<title>Data Analysis: Averages and Uncertainties</title>
<script src="distribution.js" type="text/javascript"></script>
<script src="assignment.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="assignment.css">
</head>
 
<body>
 
<!-- Header Information -->
<section class="title">
<a name="top"><h1>Data Analysis Assignment</h1></a>
 
<h2>Averages and Uncertainties</h2>
</section>

 

***

This is raw html with external css and js files. Nothing here should choke a standard Webserver.

How do I serve this folder content in Canvas? The ideal case is that what is served appears as a page by itself (without the Canvas framework).

As to why I do not recreate this in Canvas ... simply put ... because it is far easier to code directly what I need.

0 Kudos
abrgomez
New Member

Hi @jeffrey_weimer 

I think your file should work as you intended, but I believe there's a recent ongoing bug/issue with the way Canvas handles files.

For years I have been using the solution shared by @awilliams in this postEmbed Code Not Working to add extra functionality into assignments, embedding html pages with scripts.

Today I noticed that my files are not working correctly anymore, even those that were working perfectly  fine when I uploaded them to Canvas about two weeks ago. The html no longer loads any files in the same folder: Pictures display as broken links, styles defined in a separate stylesheet file are not applied, and any javascript functionality that depends from a .js file in the same folder is gone.

I believe this may be related to the latest canvas update.

Styles and script code added directly in the same html file works correctly. That could be a work around in some cases, but it's not feasible if more extensive scripts, libraries and fonts are needed.

 

PS: attached is an example. To the left is how an html looks like in my local drive; It used to work exactly the same in Canvas, back when I uploaded it to my course folder about two weeks ago. To the right is the same file, but the way it looks like today in Canvas.

0 Kudos
jeffrey_weimer
Community Contributor
I had the html working earlier. Just the css and js were not recognized. Now, even the html will not work.
0 Kudos
jeffrey_weimer
Community Contributor

I have solved this problem. I have posted the folder containing raw html + css + js files on a unix-based Webserver that is provided by our university. I simply point an external link to the folder/file of interest.

My further reading on the community suggests that Canvas will never offer users a way to store raw html with external css and js files within the Files link and serve the raw html simply by creating a link to it.

Consider this topic closed.

0 Kudos