Using Javascript to Change Button Text

[MattHanes]

We are new to Canvas and our teachers are beginning to use it to take online submissions via Assignments. One issue that numerous teachers have emailed me about is that the students are confused by the "Submit Assignment" button. Specifically, they don't understand that they have to click that button first before the URL or File Upload submission box will appear. They are afraid that clicking that button will submit their assignment before they have attached anything.

So we want to try a little pilot in which we change the name of that button from "Submit Assignment" to "Begin Assignment Submission" to see if that will alleviate some of the concerns.

I assume that this can be done via the Javascript override file, but I don't know how to do that. Here is the "Inspect Document" information for that button:

<a href="#" class="btn btn-primary submit_assignment_link " style="margin-top: 5px">Submit Assignment</a>

What can I add to the javascript file that will change the name of that button? Thanks!

[Stef_retired]

 @MattHanes ​, I don't know the answer to your question (as I know less than nothing about Javascript), but I would be very interested to know the results of your little pilot. This is a recurring pain point for students, particularly in the case of a text entry assignment; they don't understand why they aren't immediately presented with a text entry box, and they're afraid to click on it for fear that will submit an assignment with nothing in it.

I saw a few recent feature ideas about this: and  

So please update us once you've figured out the javascript and conducted the pilot!

[ianjohnston]

Are you using the new UI or the old one?

If you are on the new UI there is an area to upload custom JS in the Theme Editor How do I use the Theme Editor as an admin? | Canvas Admin Guide | Canvas Guides .

If you are on the old UI you must host the JS file on the web and then point canvas to its location in account settings How do I brand my Canvas instance? .

[MattHanes]

Thanks, but I'm looking for some actual code to put in the Javascript file to do this.

[ianjohnston]

Ah ok I misread the last line of your question

[MattHanes · Accepted solution]

I figured it out. Thanks everybody! For anyone looking at this later, here is the code:

$(document).ready(function(){
    $('a.btn.btn-primary.submit_assignment_link').text('Begin Assignment Submission');
});

[james12]

Hi Matt,

Do you have similar JS for updating a button on Canvas Catalog?

I would like the button to say '$1,250.00 REGISTER' instead of '$1,250 ENROL' without breaking the button functionality.

Here is our URL for reference: https://shortcourses.health.unsw.edu.au/courses/project-management-within-healthcare

I've tried the below JS at it replaces successfully but it also breaks the buttons functionality. It strips the button css and also stops it from being clicked 🙂

$("#enroll-hero").text($("#enroll-hero").text().replace("Enroll", "Register"));

Many thanks in advance,

James

[MattHanes]

I would love to hear everyone's idea on what the button should say instead of submit assignment!

[Stef_retired]

I like your idea: Begin Assignment Submission or maybe Click here to initiate your assignment submission process (< too wordy?).

[MattHanes]

We changed it to "Start Submission" for now. I've got another class coming up tomorrow that we'll demo that with. I'm not even going to say anything about how to submit the assignment. I'm just going to tell them where it is and see if anyone asks about it like they usually do.

[cindyfranklin]

How about Start Assignment

[MattHanes]

"Start Submission" worked very well. No one in the class asked what they needed to click on to submit their URLs. I think we'll leave it at Start Submission for now.

[Stef_retired]

 @MattHanes ​, I'm delighted to hear that Start Submission verbiage is working--the simpler, the better! I'm going to take this opportunity to ask anyone who comes across this discussion to go over to the Feature Ideas area and comment. The feature idea will open for voting on October 7:

[james_acevedo]

Thank you Matthew. We had a similar desire to change the wording in Syllabus where the button says ‘Edit Syllabus Description.’ Faculty call and say they’d like to post the whole syllabus - not just a description!  Using your code , we altered the button to ‘Click Here to Post or Edit Syllabus’.

This button also includes an icon. Here's the code for all:

$(document).ready(function(){
     $('a.edit_syllabus_link.btn.button-sidebar-wide').html('<i class="icon-edit"></i> Click to Post or Edit Syllabus');
});

[Stef_retired]

james.acevedo, what a great use of  @MattHanes ​'s script! I assume you've already seen and have bookmarked this feature idea that will soon be open for voting, but just in case anyone else comes across this conversation, here's the link (and the author suggests not only changing the location of the button but also its text):