cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
TaylanDogan
Community Member

UI/UX Customisations

Jump to solution

Hello there,

I am a multimedia designer with a Canvas administrator account at a college and have been creating and uploading course content for our college along with a team of lecturers and designers. Recently, a number of fundamental modifications have been asked from me that seemed quite hard to achieve, if not impossible, without source code manipulation. I have already been utilising simple custom CSS and JS snippets for removing or altering buttons or small sections that have unique class names in Canvas. I was wondering if the following modifications can be done with the tools provided in Canvas including custom CSS and JS or they are possible only with the help of the low-level approaches such as tailored source code or writing extensions. Below are some of them:

  • Remove the initial pages of quizzes that show the title, the ‘answer the following questions’ message, time limit and due date, attempt number, and ‘begin’ button.
  • Remove confirm submission pop up window and results window (New Quizzes - essay question).
  • Fix the special characters with macron (in Māori language) such as ‘ā, ē, ī, ō, ū’ that look bold and slightly different in the quiz titles in some browsers.
  • (The assignments will be submitted online with file uploads) – remove ‘Canvas files’ option and only keep the file uploading box.
  • Remove ‘try again’ option/button in Assignments.
  • Change some of the elements in the top row: Remove attempts dropbox, change ’submitted’ to ‘successfully submitted’, etc.
  • Change the button from 'submit quiz' to 'submit survey' and show a custom 'successfully submitted' screen.

I am totally open to using any external tools you would suggest in order to have the flexibility required to achieve the desired results. Any other advice is much appreciated. Please ask for further information or screenshots if needed.

Also, could you please advise how I can contact our customer success manager in case you think I would rather communicate with them regarding these customisations?

Thank you very much.

Taylan

Labels (1)
0 Kudos
1 Solution
chriscas
Community Champion

Hi @TaylanDogan,

i'll say your first 4 bullet points seem very challenging...  For some of the reasons @Chris_Hofer noted, I would recommend against trying to modify the quiz starting process.  I do notice the font appears to be slightly bolder with some of those examples you provided.  I'm pretty sure the Lato font Canvas uses is created and distributed by someone else (and very widely used online and in local apps), but it does seem like something that should be addressed (though I'm not sure how you would even go about asking for a change).  For the 4th item, "Canvas files" is essentially a personal uploaded file collection for each Canvas user.  While it's probably not super necessary, we haven't really seen it cause too much confusion, and it can be beneficial if a student needs to submit the same things for more than one assignment/discussion, as they could find their first upload there.

For the 5th bullet, assignment attempts are set per assignment by the teacher.  If the assignment is set up for only one attempt, I believe you won't see a try again button.  This would also take care of a couple of the items in your 7th bullet point too.

For the last bullet, i'm not sure if you're referring to Classic Quizzes or New Quizzes.  The survey function of classic quizzes is currently not being replicated in New Quizzes, though I know it's under consideration for the future.  I would definitely expect something set up as a survey to say "submit survey," but if it's set up as a quiz in classic quizzes or anywhere in new quizzes, I don't think it makes sense to change that terminology at this point.

All of that being said, you can do quite a bit of customization with css and javascript.  It's going to really come to how much time you want to spend, how skilled of a js/css person you have on your team, and also how much time you have to spend testing your customizations to make sure they still function correctly after every Canvas update.  I have some customization examples on github, but they are in general a bit simpler than most of the things you're trying to achieve here.  You could take a look to get at least a general idea of what might be involved.  One important note is that most customizations only affect the web version of Canvas, and not the ios/android apps.  I have no experience in doing any app customizations, so I don't know what's possible there.  Something to think about as you decide what direction to go with some of these ideas.

-Chris

View solution in original post

6 Replies
Chris_Hofer
Community Coach
Community Coach

Hi @TaylanDogan ...

I don't have a solution for you on how to modify any underlying code to accomplish what you and your colleagues are looking for.  However, if you figure out how to change these things, you'll want to keep in mind that parts of the Canvas written Guides provided here in the Community website would no longer match.  So, for example, students have the "New Attempt" (I think this is what you may have meant by "try again"?) button in an assignment as described here:

How do I submit an online assignment? - Instructure Community (canvaslms.com)

If you change this wording in your own Canvas courses, students may be looking for the new wording that you've replaced in the Canvas Guides, but they won't see it because the official wording is "New Attempt".

All this is to say that it might be a little confusing for folks if you remove some things but yet the official Canvas Guides say those things exist...if that makes sense.  So, just wanted to provide my $0.02 on this aspect.  Hope it helps a bit.

Hi @Chris_Hofer,

Thank you for your reply and raising the valid point regarding the possible mismatch between these modifications and the Canvas Guides. I have just passed this information on to my manager. Although he thinks it wouldn't be a major issue, he will have a meeting with the rest of the board members to get their opinion.

I guess they would still prefer a flow as close as what they have in their minds for most of the students even though a small number of them would get confused by the terminology or the modified UI after checking the Guides.

I cannot see the button as "New Attempt" in Assignments that is set to allow more than one attempt though – it still says "Try Again" on the bottom bar as in the image I attached. It turns out as a disabled/greyed out "Submit Assignment" button when only single attempt is allowed as @chriscas advised.

chriscas
Community Champion

Hi @TaylanDogan,

i'll say your first 4 bullet points seem very challenging...  For some of the reasons @Chris_Hofer noted, I would recommend against trying to modify the quiz starting process.  I do notice the font appears to be slightly bolder with some of those examples you provided.  I'm pretty sure the Lato font Canvas uses is created and distributed by someone else (and very widely used online and in local apps), but it does seem like something that should be addressed (though I'm not sure how you would even go about asking for a change).  For the 4th item, "Canvas files" is essentially a personal uploaded file collection for each Canvas user.  While it's probably not super necessary, we haven't really seen it cause too much confusion, and it can be beneficial if a student needs to submit the same things for more than one assignment/discussion, as they could find their first upload there.

For the 5th bullet, assignment attempts are set per assignment by the teacher.  If the assignment is set up for only one attempt, I believe you won't see a try again button.  This would also take care of a couple of the items in your 7th bullet point too.

For the last bullet, i'm not sure if you're referring to Classic Quizzes or New Quizzes.  The survey function of classic quizzes is currently not being replicated in New Quizzes, though I know it's under consideration for the future.  I would definitely expect something set up as a survey to say "submit survey," but if it's set up as a quiz in classic quizzes or anywhere in new quizzes, I don't think it makes sense to change that terminology at this point.

All of that being said, you can do quite a bit of customization with css and javascript.  It's going to really come to how much time you want to spend, how skilled of a js/css person you have on your team, and also how much time you have to spend testing your customizations to make sure they still function correctly after every Canvas update.  I have some customization examples on github, but they are in general a bit simpler than most of the things you're trying to achieve here.  You could take a look to get at least a general idea of what might be involved.  One important note is that most customizations only affect the web version of Canvas, and not the ios/android apps.  I have no experience in doing any app customizations, so I don't know what's possible there.  Something to think about as you decide what direction to go with some of these ideas.

-Chris

Hi @chriscas,

Thank you for your reply and all the explanations. I shared your suggestions with my manager and we will discuss further, soon.


@chriscas wrote:

For the 5th bullet, assignment attempts are set per assignment by the teacher.  If the assignment is set up for only one attempt, I believe you won't see a try again button.  This would also take care of a couple of the items in your 7th bullet point too.


I have noticed I had already tried to set the attempts to only one and the 'Try Again' button was gone. I was also wondering (but forgot to ask) if there is any way to change what it says in case multiple attempts are required and they want me to change it to anything other than 'Try Again'.

 


@chriscas wrote:

For the last bullet, i'm not sure if you're referring to Classic Quizzes or New Quizzes.  The survey function of classic quizzes is currently not being replicated in New Quizzes, though I know it's under consideration for the future.  I would definitely expect something set up as a survey to say "submit survey," but if it's set up as a quiz in classic quizzes or anywhere in new quizzes, I don't think it makes sense to change that terminology at this point.


Sorry, I was referring to Classic Quizzes since "Unmarked Survey" option is not available in New Quizzes settings as you noted. I have created a test survey as an unmarked survey just now but I still have the 'Quiz Instructions' title and the 'Submit Quiz' button as well as "Quiz results are protected..." message. Please see the screenshots attached. I guess those changes need some workaround with CSS/JS.


@chriscas wrote:

Hi @TaylanDogan,

All of that being said, you can do quite a bit of customization with css and javascript.  It's going to really come to how much time you want to spend, how skilled of a js/css person you have on your team, and also how much time you have to spend testing your customizations to make sure they still function correctly after every Canvas update.  I have some customization examples on github, but they are in general a bit simpler than most of the things you're trying to achieve here.  You could take a look to get at least a general idea of what might be involved.  One important note is that most customizations only affect the web version of Canvas, and not the ios/android apps.  I have no experience in doing any app customizations, so I don't know what's possible there.  Something to think about as you decide what direction to go with some of these ideas.


Thanks a lot for those examples – they would definitely help. We unfortunately don't have a dedicated front-end developer in the team, so I might be asked to push my limits further and further. As a designer with limited coding experience, I am having hard time changing the content of the buttons, messages and blocks that use shared classes. Would you suggest any other way to modify them?

I am glad you pointed the fact that iOS/Android apps might not mostly be modified even with the help of custom CSS/JS. I will let the managers know about it as well.

Is there any other resources you would suggest for customisations similar to yours?

Do you think contacting with a Canvas CSM helps any further? If yes, how can I start a conversation with them?

Cheers!

Hi @TaylanDogan,

Interesting about the surveys in Classic Quizzes.  I guess my institution doesn't use surveys enough for me to ever have noticed things are still labeled a quiz.  On one hand it makes sense because it's the "quizzes" area, but on the other, surveys have some definite differences.  Nonetheless, since development of Classic Quizzes is pretty much limited to bug fixes as far as I understand it, there's probably not much hope getting Instructure to adjust that.

As you may have seen in some of my code, hiding things via javascript (or css) is pretty easy if the item you want to hide has an ID.  unfortunately, more and more things in Canvas are dynamically generated and don't have an ID, so that makes things more difficult.  In those cases, I usually look to see if theres a nearby element in the HTML with an id to start from and then use parent, sibling or other similar modifiers to get back to the element I want.  When doing this, you definitely need to keep an eye on Canvas changes, as any change in the way the page is constructed can throw off the code to select a particular element.  I'm not really an expert at this stuff either, but through google searches I've been able to cobble together those things on my github.

I don't want to say this with certainty, but in my experience a CSM probably won't be super helpful in these situations.  If you have funding available, you may get Instructure to do some things for you as a custom project though.  I'm not sure of even a ballpark price though since we've never gone down that road.

-Chris

Hi @chriscas,

Thank you for your explanations. Those are really great tips about the manipulation of the divs – hope they work in my cases.

As you said before, the customisations will need lots of development time, trial and error, and ongoing maintenance. I am going to report to my managers and include all the necessary information so they would consider again and decide whether it is worth taking the further steps.

Chris and @Chris_Hofer – I appreciate all your support and guidance. All the best and hope to stay in touch.

Cheers,

Taylan