Skip navigation
All Places > Canvas Developers > Blog > Author: Mark Garcia

Canvas Developers

3 Posts authored by: Mark Garcia

The Challenge

Some of the students at our institution completely overlook the View Feedback link that appears when they are viewing a previously submitted assignment upload. Many simply click on the download link for the file, and are somewhat surprised when they don't see any comments/markup on the document. The issue stems partially from the inline placement of the two elements, as shown in the image below.

 

Many students think that the View Feedback link is an extension of or an additional comment to the Document Download link that precedes it.

 

Current Submission Page

 

Additionally, should the student actually click on the View Feedback link, he or she then renders the document in question, with its markup in a container that is a fraction of the browser window size. The student does have the option to close the course section menu to provide additional real estate, and the document view can be resized, but its a lot of additional steps that the student has to go through to get the document rendered in an orientation that is more suitable to him or her.

 

Solution

I wanted to provide the student with a cleaner User Interface and User Experience. As such, I wrote custom javascript and css, and developed a couple of icons to achieve the following:

  1. Differentiate between the Document Download button and the View Feedback button.
  2. Once the student has clicked the View Feedback button, there is a button in the window that appears that allows the student to take the document view container to fullscreen (minus the global nav bar) and back.

 

New Button Styles for download and feedback

 

This solution utilizes custom CSS and javascript/jQuery. It is also worth mentioning that I have focused solely on assignment submissions, and have not gotten the opportunity to test this solution across the entire LMS. Additionally, I did not have the opportunity to test this solution with TurnItIn, which generates a link between the document download button and the view feedback button. In the future, I will issue an update if I am able to see what kind of content is generated when the student turns an assignment in to TurnItIn.

 

Doc View Full Screen Mode

 

Demo

 

Repository

If you are interested in applying this to your environment, please feel free to fork or download from my Bitbucket repository, which can be found here.

The Challenge

While the Student View button is easily found under the Settings panel of the course navigation menu, many of the instructors at my institution still would prefer for it to be accessible on their home screen. Other Learning Management Systems offer a Student View button that is a bit more global, thereby allowing an instructor to quickly jump into the Student View from just about any location in LMS. Ian Heung had previously suggested the idea for this feature in his idea, Quick Toggle Student View, and its status has been updated to be on the Product Radar, but I am uncertain as to what the timeline for deployment may be.

 

Solution

I wanted to provide users with a solution for the interim period of time, while we wait for the release of this new feature. So I set out to create a javascript based option that would do the following:

  1. Determine if the user has an associated role as a Teacher for one or more courses.
  2. Render a "global" Student View button in the upper right corner the courses associated with this user.
  3. Hide the button when the user triggers the Student View.
  4. Prevent the button from rendering if the user is in a course where he or she is technically a Student.

 

Appended Global Student View Button Position

 

For this solution, I simply created a custom javascript file with script that is deployed whenever a course successfully loads. The script assesses and validates information associated with the user, and uses Instructure's stylesheets, along with some javascript and jQuery, to append and render the default student view button in a new location. This button is placed along the top header of a course in the upper right corner, and can be clicked at any time by the teacher to trigger the student view. 

 

Demo

 

Repository

If you are interested in applying this to your environment, please feel free to fork or download from my Bitbucket repository, which can be found here.

The Challenge

This initiative was brought about due to the fact that many of our students, and some of our instructors, have erroneously logged in to Canvas in an incompatible browser. While many receive the notification that Instructure has provided, some are still confused about what a browser is, or which one they should use.

 

Solution

I wanted the solution to provide the user with the following information:

  1. The name and version of the current browser that is being used
  2. Additional information related to that browser
  3. Canvas' list of compatible browsers
  4. Canvas' list of system requirements

 

For this solution, I created a fixed container that is appended to the <body> element use jQuery, and that is displayed on the user dashboard when a user first logs in to Canvas. This container provides the user with basic information related to the current browser in use, and the user can also gain additional information by clicking on links included in the container (addresses solutions points 2-4). Furthermore, to prevent the container from obscuring any containers behind it, I have included a close button that the user can click, which closes the container by sliding it out of view.

 

Demo

 

Repository

If you are interested in applying this to your environment, please feel free to fork or download from my Bitbucket repository, which can be found here. If you previously downloaded this package, please be sure to download the most updated version from the repo to ensure that the code will work as intended.

 

[UPDATE]: With the renewed interest in this repository, I wanted to give you a live demo of it in action. You can find a slightly modified version of it (with comments) on JSFiddle.

 

[UPDATE 2]: Instructure modified the html for their Dashboard page. Previously, in the <title> tag of the page, the text "User Dashboard" was present. Now the text has been updated to "Dashboard." I have modified the file in the repository to match this. I have also updated the JSFiddle to match.