cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted

Adding Custom JS and CSS to a single Canvas Course

Jump to solution

Is it possible to add specific JS and CSS files to a single course?

I have had some request to have some specific functions that will need to be created (ie: Progress Bars, Interactive Elements) and I have tried to embed the script but get a few issues especially with the sanitising that the HTML form seems to have.  

Would the easiest way to get around this to be including a large JS file at the theme and then have that include required JS? 

Alternatively is there a way to alter how the sanitation works for HTML content?  I know this is not ideal but it looking at it from all directions.

Cheers

Courtney

1 Solution

Accepted Solutions
Highlighted
Community Coach
Community Coach

Howdy courtney.osullivan@carey.com.au,

First up, I have shared your question with the Canvas Developers‌ group, as there are some elements I won't be able to completely answer.

At this time, it is not possible to add CSS or JS to an individual course directly. One workaround you can do is create an additional sub-account, add the CSS and JS at that level, and then it will apply only to courses in that sub-account. For one-off's this may be OK, but as you can imagine, is not scaleable for more than a handful of courses (having a 1-1 course to sub-account relationship is overkill).

Utilising the JS and CSS includes is one way people get around this, depending on the long-term goals, you can also develop custom LTI tools which then integrate into the WYSIWYG editor, without needing to insert custom CSS and JS. While this second option is my personal perspective from an enterprise supportability and sustainability perspective, it requires more resources to develop. Hence, I see a lot of school's start out with CSS and JS customisation.

Something you will want to be aware of with JS specifically is the three-weekly updates. I have heard from some schools they occasionally need to tweak JS after the updates as things stop working. Therefore, that is something to keep in mind from an ongoing maintenance perspective. If you design your JS include file well, and by design, I mean from the perspective of ensuring you include only a small set of tools for a larger group of courses (rather than including many custom tools that are only used in one or two courses each), then you can minimise that impact.

However, that is only my 2C and there are a wealth of others in Canvas Developers that (I hope) will jump in and give their thoughts also!

Hope that helps!

Stuart

View solution in original post

4 Replies
Highlighted
Community Coach
Community Coach

Howdy courtney.osullivan@carey.com.au,

First up, I have shared your question with the Canvas Developers‌ group, as there are some elements I won't be able to completely answer.

At this time, it is not possible to add CSS or JS to an individual course directly. One workaround you can do is create an additional sub-account, add the CSS and JS at that level, and then it will apply only to courses in that sub-account. For one-off's this may be OK, but as you can imagine, is not scaleable for more than a handful of courses (having a 1-1 course to sub-account relationship is overkill).

Utilising the JS and CSS includes is one way people get around this, depending on the long-term goals, you can also develop custom LTI tools which then integrate into the WYSIWYG editor, without needing to insert custom CSS and JS. While this second option is my personal perspective from an enterprise supportability and sustainability perspective, it requires more resources to develop. Hence, I see a lot of school's start out with CSS and JS customisation.

Something you will want to be aware of with JS specifically is the three-weekly updates. I have heard from some schools they occasionally need to tweak JS after the updates as things stop working. Therefore, that is something to keep in mind from an ongoing maintenance perspective. If you design your JS include file well, and by design, I mean from the perspective of ensuring you include only a small set of tools for a larger group of courses (rather than including many custom tools that are only used in one or two courses each), then you can minimise that impact.

However, that is only my 2C and there are a wealth of others in Canvas Developers that (I hope) will jump in and give their thoughts also!

Hope that helps!

Stuart

View solution in original post

Highlighted

Hi Stuart,

Thank you for the extremely informative reply.

I think the subschools option might work for my purposes for now while I review the LTI idea. I had been reading about them but its still a very new concept to me.

Highlighted

Another approach to this would be to put a dynamic loader in your theme's global javascript with some logic like this:

if (courseId == 55){

  dyamicallyLoadJS("interactiveElements.js");

}

Of course, that would be brittle (depend on the courseId, so if you copied the course it wouldn't work in the copy until you updated your global.js).

Another perhaps less brittle option would be to make the dynamic loader be page specific and only load your script when it sees a certain something in your page. E.g.

if ($('#my_special_id_scoped_so_it_wont_conflict').length){

  dyamicallyLoadJS("interactiveElements.js");

}

Then in your page, you would create an element with that id. Eg.

<div id="my_special_id_scoped_so_it_wont_conflict">

You could put the id on a div or any other element.

</div>

Of course, all of this would depend on you having access/permission to put the dynamic loader in the theme's global javascript.

Highlighted

No worries at all Courtney, also check out joel.duffin@gmail.com's idea as that is another good idea depending on access too!