Changing Canvas terminology with Javascript?

[tdouglas]

Hi there!

I am one of two Canvas administrators at a high school in Sydney, Australia. We have been implementing Canvas this year which has generated lots of interesting discussions.

One of those discussions has lead to a request for certain 'terminology' of Canvas to be changed to match the language that we use at our school. For example, all mentions of the word 'Assignments' need to be changed to 'Tasks', 'Syllabus' to 'Course Outline', and so on.

My question is about the best way to do this. My current thought was to make use of Canvas's included build of jQuery to target all possible mentions of the aforementioned terminology and change them accordingly.

Can anyone think of an easier/better/more efficient way to achieve this?

[kona]

I can't speak to the tech side of this, but one thing to consider (If you haven't already) is if you change the wording of the different Canvas terminology you'll render the extremely useful Canvas Help Guides useless. Instructors & students won't be able to easily use them because much of the terminology will be different. This also means you'll have to manually create training materials for students and instructors. Which trust me can be very time consuming and which is why we rely on the constantly update and ready to use Canvas Help Guides! What we did to help instructors & students was create a glossary of the words or terms they were use to (both institutional wise and previous LMS wise) and the Canvas term for that feature. That seemed to really help with the transition.

[hollands]

At my former institution we had a very similar debate. Faculty were coming from Blackboard which was treated like the Wild West in terms of what people did with organizing their course menu. Frankly it was one of the reasons we switched (mostly it drove students crazy).

Ultimately we decided to leave it as it. Partly because we wanted to make sure students had a similar experience across all courses, but also because our account rep in our testing found spots where things being overwritten would still be findable or would break other items along the way (I'm definitely not a programer by any stretch of the imagination so this was likely to me being a code noob). We also found as Canvas updated things would switch and we'd end up back where we started more often than not so we ended just leaving it as it is.

Again I'm sure it was more of our lack of programming chops to really get something well but I felt like it was such an uphill battle, the benefit didn't outweigh the effort.

Also, that profile pic is awesome! I just snagged a Super Famicom off Ebay and those controllers are beautiful.

[matthiasfromm]

We have a very similar problem with the naming conventions within Canvas, which collide with the naming conventions that our institution uses. In the institution a course is what students participate in to obtain their degree (e.g. B.Sc.) by participating and successfully passing a number of modules. Hence what Canvas registers as a course is in our institution a module that then contains several topics and lessons.

Now we're confronted with a similar question as Tim: how can we change the course/module names in Canvas and adapt them so that they fit our purpose.

Renaming the relevant texts directly in the code, or by using JS/jQ seems to a functional workaround, but also a fairly unfavorable option due to several reasons:

• maybe you don't want to rename everywhere, and identifying those exceptions is rather time-consuming and error-prone,
• renaming initially only works for a single language setting and thus needs to be adapted for each and every other language that is potentially in use,
• it is error-prone to changes that come with every Canvas update (especially if changes are directly done in the code by renaming text) - this causes effort with every update.

However, it is also quite unlikely that the institution will change their own naming convention. On the other hand I think it is quite an unfavorable option to work with a glossary as Kona suggested, especially if we're talking about institution with several hundreds, if not thousands of members (students+staff).

I have not had a detailed look into the code basis, but there does not seem to be something like a Enum-Table that defines the terminology used that could be adapted.

It seems to me that this problem should be one that quite many institutions (universities, colleges, etc.) might encounter. And it would be really helpful if somebody knows a good way to approach this!

Cheers!

[bbelew]

It would be a good feature to be able to customize wording for an institution.  The guides issue could be resolved by integrating the guides directly into canvas, that way it would follow your wording.

I don't think it would be very easy to use jQuery to change all instances of a word.  Each use of "Assignments" for example is different.   In the left navigation there is a class attribute named assignments, but for the breadcrumbs and what not there is not.  So instead you would likely just have to use jQuery to search the entire page for the word, and replace it.   Curious how that would work if a student or teacher were to use the word assignment in any text submissions though - since jquery would change the wording on render.

[SethBattis]

Seems like the trick to doing a global rename of an aspect of Canvas would be to use JQuery to do your find-and-replace (as others have said) except inside the #content <div>, so that teachers could use any words they wanted without fear of bizarre replacements.

[jordan]

Great observations and personal feedback from everyone, here!

There are many considerations to take into account when doing custom overrides , especially those mentioned by Deactivated user​ and  @kona ​

If you want a more integrated solution or feature as  @bbelew  suggests, to allow you to make these changes via the UI, please head over to add a feature idea here Canvas Feature Ideas​

[tdouglas]

Thanks for the varied replies to my post, it's been quite helpful. At time of writing, the desire to make language changes is still there so I'm going to have to continue pursuing solutions.

I did find this recently which might be able to work for us:

Installing a custom translation for Instructure's Canvas - Some thoughts

I have emailed our CSM to see if there's a way we could provide our own translation YAML and have it included in our managed Canvas instance.

[julian]

Here is a late reply in the "better late than never" camp.

I use this regularly on my Australian sites. It is relatively simple to set up and does not have a significant impact on load. Best of all is I can load selective JS by sub account to make changes at that level.

This link (Renaming elements of the left nav menu - JSFiddle  )​ shows a live sample where I have shown how I have used JS to selectively rename the word "modules" to "Topics" in the left course nav.

What are you seeing on this page?

1. Top left Box is the orginal code rendered by canvas

2. Top right is me just bringing in some basic stylesheets. You can ignore.

3. Bottom left is my JS

4. Bottom right is the output after the JS is applied.

Hope it is useful

JR

[Jul_Cro]

This is so great! I was able to change Syllabus to Course Schedule on the navigation menu. However, I am now attempting to learn enough Javascript to also replace the Breadcrumbs navigation on the syllabus page to Course Schedule as well, and even the "Syllabus" page to "course schedule" page. I may be asking for too much, but I know I can do it, I just do not have the level of Javascript knowledge to make it happen. 

Anyone do this? Any thoughts?

[James]

 @Jul_Cro  

The breadcrumb is uniquely identified using an id="breadcrumbs". You can make sure that you're on the syllabus page by looking for the syllabus class on the body element. The actual content is inside a list element with a span that has a class of ellipsible.

Putting that all together, here are two ways to change the text in the breadcrumb for the syllabus page.

This will replace Syllabus with Course Schedule anywhere in the breadcrumb.

if (document.body.classList.contains('syllabus')) {
  document.querySelectorAll('#breadcrumbs li span.ellipsible').forEach(e => {
    if (e.textContent === 'Syllabus') {
      e.textContent = 'Course Schedule';
    }
  });
}‍‍‍‍‍‍‍

This relies on the Syllabus being the last item in the breadcrumb.

if (document.body.classList.contains('syllabus')) {
  const e = document.querySelector('#breadcrumbs li:last-child span.ellipsible');
  if (e.textContent === 'Syllabus') {
    e.textContent = 'Course Schedule';
  }
}‍‍‍‍‍‍

I could remove the check for "Syllabus", but someone might be using a different language and I didn't want to change it for them since "course schedule" might not make any sense.

[Jul_Cro]

Thanks James Jones! So now, I have all the changes made except for on the home screen within the Choose Course Home Page pop out. I cannot figure out how to access that to change it. Get element by id doesn't work, and I am thinking that it may have something to do with that pop out also being Javascript or something? Any suggestions?  

[MikeShurance]

Where do you add this JS in Canvas?

[Pete5484]

Update to Julian's code due to changes in the contains: selector.

window.onload = function() {
    var links = document.querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
        if (links[i].textContent === 'Syllabus') {
            links[i].textContent = 'Course outline';
        }
        if (links[i].textContent === 'Outcomes') {
            links[i].textContent = 'Learning Outcomes';
        }
        if (links[i].textContent === 'Modules') {
            links[i].textContent = 'Topics';
        }
    }
};

or

$(document).ready(function() {
    $('a').each(function() {
        var text = $(this).text();
        if (text === 'Modules') {
            $(this).text('Topics');
        }
        if (text === 'Syllabus') {
            $(this).text('Course outline');
        }
        if (text === 'Outcomes') {
            $(this).text('Learning outcomes');
        }
    });
});

[baldridj]

Hi, Rick,

Just a quick note:  at my college, we do not give grades; instead we use narrative evaluations and qualitative feedback.  This is, in fact, an important marketing point for our institution, and deep aspect of our pedagogical culture.  Adopting the Canvas language of "Grades," for us, is not only confusing, but antithetical to our educational model.  So . . . yes!  The extra layer is definitely something we want to add, even at the risk of having that one element of our Canvas system out of step with the help system and broader community.

  The difference in terminology isn't just a matter of convenience--it represents a commitment to a different kind of teaching and learning.

Sincerely yours,

John.

[irishb]

Thank you so much for your post,  @baldridj ​, and adding your voice to the discussion!

Bridget

[Chris_Hofer]

Hello tdouglas...

I wanted to check in with you because I noticed that there hasn't been any new activity in this discussion topic for quite a while.  It looks like you got several responses here.  Do you feel that one of them could be marked as "Correct"?  Are you still looking into renaming parts of Canvas at your school, or has this now been resolved?  Please go ahead and mark one of above replies as "Correct" if you feel that it does answer your question.  However, if you are still looking for some help and suggestions with this, please let us know by posting a message below.  For now, I am going to mark your question as "Assumed Answered", but that won't prevent you or others from posting additional questions/comments below.  I hope that's alright with you, Tim.  Looking forward to hearing back from you soon!

[PaulCantrell]

Seeing this thread has been running for 5+ years without official support, I’ll add my 2 cents:

I’m currently doing exploratory evaluation of Canvas. My institution currently uses Moodle…which mostly deserves a “bleah,” but it does have the salient advantage of not imposing its own terminology.

“Syllabus” is the word that drove me to this thread. The things that Canvas calls a “Syllabus” simply…is not, at least in my world. A syllabus includes learning goals, course philosophy, policies, words of encouragement about mental health — but does not include any sort of detailed, day-by-day schedule.

What Canvas calls a “Syllabus” should be “Course Timeline” or “Schedule” or something along those lines. Using the wrong word for this thing is going to be horrendously confusing for students.

While I’m a developer and quite capable of fiddling with jQuery to change the name, as some in this thread suggest, it is quite a red flag that the product requires such workarounds in the first place. A “one size fits all” approach to terminology that’s elicited half a decade of unheeded feature requests is not a great sign.

Update: “The Theme Editor is not available for Free-For-Teacher accounts.” Well, so much for that.

[MikeShurance]

Well said! It shouldn't take even a few days to program the ability for admins or even users to customize their Nav Menu names.