Advanced CSS and JavaScript/jQuery in Canvas

Hi, Friends.

I come to Canvas as a webdev with a lot of WordPress experience. I'm piecing together a design library for my organization and want to include foundational components as well as a few fun things. Much of what I'm doing is going to be stored in Figma with the CSS being pulled into Canvas.

Thing is, while I've worked with Canvas, I don't really know the limitations of what Canvas supports in terms of these technologies. I understand that I can upload JavaScript and CSS, and that there is some jQuery support, but I'm sure where the boundaries are. Where can I go to find out more about this?

My next steps will include creating a sandbox course to try things out in, but I'm hoping for a more rapid learning curve.

Huge thanks in advance.

Find more posts tagged with

Canvas

Admin

Instructional Designer

Accepted answers

All comments

kirsten_naughto

There are a lot of fun things you can do in Canvas especially if you have the ability to work with external CSS and JS files. Keep in mind that while jQuery works on the web, the mobile app does not support anything done in jQuery and requires its own separate code files. For a good student experience, that needs to be considered, however it sounds like you have the experience to build things the students will visually enjoy while they are learning.

The best way I've found to learn is to identify several things of high value that can be easily re-usable, create them, and then let the instructional designers and course authors use them (and try to break them). The sandbox course is something I spend many hours in as well as our test instance of Canvas. Once something has been tested, we make sure it's scalable and then put it into mainstream production. You'll hear pretty quickly if something is broken. There is a learning curve, but the best and most fun way is to just get in and try it.

The best resources are here in the community so do some searching on jquery and whatever else you are considering. Odds are someone has posted something. I always find the best information and links to additional here.

michael5

You can do a lot if you have administrative access. In my experience, the most common issues you run into are (1) scoping, (2) cross-origin iframes and (3) disabling features.

1. Scoping: When editing, adding or removing elements here and there, you'll quickly find that a change to any CSS or HTML class or id can have wide, unpredictable consequences for the rest of the Canvas instance. These can range from trivial to severe so I'd recommend good test procedures. You will probably be surprised. Take time to familiarize yourself with how Canvas works by studying each element in the DOM and on different pages/levels of the system.

2. Cross-origin frames: A thing I struggled with a lot was actually upgrading the content of regular content pages, assignments and quizzes to be more fun and stimulating. The Rich Content Editor (that you use to write text for pages, assignments and quizzes) allows you to view and write HTML, but what you can do here is severely limited. So you'll probably end up trying to use iframes for content pretty soon but if you try to do anything with the iframes short of showing them, you'll get a cross-origin error. So just a heads-up: do not go down the iframe rabbit hole for advanced content. Instead, add classes to elements directly in the Rich Content Editor and add behavior later/externally by uploading CSS/JS. Give your teachers code snippets to copy paste if they're not comfortable adding classes to their own content.

3. Disabling features: A thing that might end up frustrating a lot is the inability to disable features entirely. Don't get me wrong, you can do a lot on the admin side but most of the time, you'll end up hiding features rather than disabling them. This is pretty common practice in my experience.

Also, read the API and use it as much as you can. You can do so many hacky solutions using JS/CSS uploads but you really will get much better performance and reliability if you have at least some familiarity with how to work the API. If you don't know where something is in the API, my recommendation is - surprise - ChatGPT. Ask it how to do something specifically with the Canvas API, it really is very, very good at pointing you to the correct end-point for whatever you're trying to achieve.

Happy coding. 🙂

Unanswered Questions

GraphQL - Is there a way to check if a course was cross listed, combined or merged?
Hello, I am trying to query a course ID to check if it was cross listed. Do you know what is the data field to get this information or what query or API endpoint to use? I tried to use nonxlist_course_id, but received error 'doesn't exist on type course'.
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
add `desc` or `asc` to a few api calls that are already sorted by date\time\index such as `due_at`
A case for this argument: I live in thee K-12 realm which means we have way too many assignments... which means that at times a simple last 10 assignments of a course question(last 10 date wise) will take us 300 assignments to answer Solution for this example in particular: I would love to make this modified version of an…
Integrate a React App (Not Canvas) to be Canvas LMS SSO.
Hey Community: I want to ask first if Canvas LMS as a Identity provider is only supported with SAML? What other protocols are supported? My use case is that I have a React App hosted on cloud provider (AWS) and SpringBoot as a backend (Service provider). I want to integrate Canvas SSO as a Identity provider (IdP). I…
Donot have valid data to test certain APIs
Hi , I’m working on validating the API test cases for CANVAS Api and need suitable test data to verify the 200 OK status code responses. I am using free for teachers version account. PFA Ecel sheet about the end points I am checking for.