The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December.
Read our blog post for more info about this change.
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.
Can someone point to instructions on how to handle what I need.
1 Solution
Here is a snapshot to show the content in the folder.
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.
Hello Jeffrey.
I do what you are asking for frequently. If the web page works locally, it should work from Canvas Files with no changes (including the css and js files). If you want it embedded, then use an iframe, but otherwise a regular link works OK. Here's how I do it.
First, I upload the folders with images, html and css. You don't see the css in this picture because I use the same css for all of the pages, so I use a relative URL ../cs170.css. If I click on the link for index.html, it shows me my page, along with all of the css. If that doesn't work, then linking to it will not work.
Second I right-click the index.html in Files and save the URL.
Third, I create an external link and paste the saved URL, removing the query string (the ? and anything following that).
Community help
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.