Using Relative References in HTML src/href

[Mr_Wood]

We have run into an interesting problem where various pieces of HTML are causing issues with their file path references are not changing when the course content is copied to a new course.

It appears that the reference (in this case an audio file) in the new course still refers back to the old course's file. When we put the audio file in, in the background the url is in the form of "https://school.instructure.com/files/2342313/" The files when copied to a new course don't match that number, and we cannot give students permissions to the original course, nor can we go through and change every reference to reference the new courses' files; the only two options we've figured out so far that make the new course work for our users.

Is it possible to create relative links that are referencing the file structure within a course? That way putting all the audio files in a folder named the same makes all the HTML references work correctly.

Running into the issue of not being able to automatically detect what course the files are in to properly create a relative reference that would work for every course; and even inputting the correct course it doesn't appear to accept similar URLs to what is given when you browse to a file within the course directly.

Edit: Further information

https://qed08.instructure.com/files/4432626/download  this as a URL works as a source for the audio element. The number after the files is referencing a course specific file, but doesn't automatically update.

According to what I can find on HTML referencing, since the Audio element sits in https://qed08.instructure.com/courses/91877/assignments/95497  then putting in a reference to ../files/folder/Quiz%20Recordings/Lesson%201/Audio.mp3 should direct the audio tag to go back up one level to https://qed08.instructure.com/courses/91877/  then add the remainder of the path to make it into https://qed08.instructure.com/courses/91877/files/folder/Quiz%20Recordings/Lesson%201/Audio.mp3 which is where the file is placed but it doesn't recognise this style of pathing.

[sharon_kitching]

We occasionally run into this, especially when people are handcoding their HTML/links. It can be broken for a surprisingly long time before anyone notices. 

[Mr_Wood]

Did you have a solution?

[dbrace]

Hi @Mr_Wood,

Someone else with more intimate knowledge of the Canvas HTML editing and course copy/import processes will probably be able to speak with more authority but, at least in my experience, manually created links/embeds to Canvas content do not automatically update when the copy/import process is used.

I believe this is because of how the copy/import "engine" checks the HTML code for links/embeds to Canvas content and automatically updates them while copying/importing.

If you would like to propose some sort of enhancement to current Canvas functionality, you would need to submit this as an idea in the Community.  Before submitting that idea, I would recommend that you read through the  Turning Your Feedback into Better Prioritization a... - Instructure Community - 637959  post.

After that, you can read through the following for assistance with the idea submission process:

Here are the Guides that you can look through:

• What is the feature development process for Instructure products? - Instructure Community - 469504
• How do Ideas work in the Instructure Community? - Instructure Community - 2980
• What are the guidelines for submitting a new idea? - Instructure Community - 535609
• How do I create a new idea in the Instructure Community? - Instructure Community - 2986

-Doug

[Mr_Wood]

My whole question has arisen because there is no way to create an audio tag using the automatic processes and theoretically the relative links I proposed should mimic the same functionality of the updating process without changing the HTML code.

However despite having the address correctly constructed according to the URL it is non-functional

[chriscas]

Hi @Mr_Wood,

Can you explain what the "audio tag" you're trying to create is?  That's not a term I've heard before, so I don't want to make any assumptions.

In general, I agree with what @dbrace said earlier though.  While manually created links may work in a single course, they generally do not get updated when copying content from one course to another.  I also have experienced similar things to you with relative links, Canvas just "like" them for whatever reason (probably some kind of back-end architecture type thing, but I'm just guessing a bit).

You should be able to insert media (audio/video) through native Canvas functionality, unless your school/institution disabled that in favor of a 3rd party multimedia system like Kaltura, Panopto, Mediasite, Canvas Studio, etc...

If you can explain a bit further exactly what you'd like to do, and perhaps show some screenshots of what you see in your editor, someone here may be able to offer more guidance.  This may also be a question to take to your school/institution Canvas team (unless that's you, in which case I apologize for the suggestion).

-Chris

[Mr_Wood]

The purpose was we have a bunch of sound files that read quiz questions and answer options to our students. I also envisioned a few other uses if the relative links could be made to work

Inserting sound through Canvas' interface produces an iFrame

https://www.w3schools.com/tags/tag_iframe.asp

While the more browser compatible, and low internet speed accommodating HTML is to use the audio tag

https://www.w3schools.com/tags/tag_audio.asp

The iFrame generated is slower to load as it's a mini-tab within the tab, and the more you have the more likely it is to cause issues with low-end computers or slow internet which a lot of our institution's students have; so we swapped to the Audio tag since it solves that, and also provides a more aesthetic design with very little effort. I'm also investigating how to make the iFrame aesthetic in the similar manner to the audio tag since from what you and a few people have said should theoretically update course to course

I unfortunately am the QLearn team. The ever elusive I in team.

[chriscas]

Hi @Mr_Wood,

Thanks for the additional detail.  What you described is what I was assuming you were trying, but definitely good to have that confirmation!

I do agree that iframes can get somewhat messy, but the upside is that if you use the build--in Canvas functionality, your links/files should import properly from course to course.  It's definitely a tradeoff, and ultimately I suppose you have to determine what's best.  I'll also comment that inserting media through Canvas should also generate closed captions, which are good for accessibility, I don't think the audio tag will end up doing that without more manual work (but I could be wrong).  Just thought I'd mention this as another potential benefit to somewhat counter your point about the iframes being less than ideal.

-Chris

[Mr_Wood]

There is that, if we were inserting a video, or audio in isolation you do have a point with the captions and I'll have to keep that in mind

There are also a few of other use cases where getting the HTML standard relative links to work would be superior than the integrated functions since it would provide a greater amount of HTML design with adaptive links. There is a lot of code that is available for Canvas design, but if most of them aren't adjusted since it wasn't inserted with the Rich Text Editor it's a bit pointless. So while a work around to the specific thing that prompted this question is ok, I would still like to know about making relative HTML links work in Canvas as originally asked

[dbrace]

HI @Mr_Wood,

Thanks for the additional detail that you shared and some of your thoughts process.

One option to consider as a possibility is to host the audio files on a web site outside of Canvas. This would give you more flexibility and control, even if it would mean storing them somewhere else.

-Doug

[Mr_Wood]

A follow-up; To get the aesthetics of the <audio> tag using the rich text editor as a base:

Use the rich text editor to insert media, choose the audio file and it will insert an iframe with a link to your course file. This has the advantage of updating as stated above

Then go into the code an replace the iframe style with style="width: 300px; height: 50px; border: 1px solid #ccc; border-radius: 25px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1); display: block;"

Specifically the necessary parts are the width, height, border-radius and display to make it aesthetically the same as the audio tag.

It still has the issue of having a tab within a tab situation and substantial use of iframes will cause accessibility issues; but putting this here in case it appears for a search for somebody else's issue