May
10

Browser Detection Widget

Created by Mark Garcia on Apr 19, 2017

Wednesday, May 10, 2017 at https://www.youtube.com/watch?v=WUK1IbjpJ4s

Starts at 10:30 AM ยท Ends at 11:00 AM, MDT (America/Denver)

  • ysmalls
  • Pam Schachern
  • Mark Garcia
  • baxl@missouri.edu
  • Terri Helfand
  • Jonathan Ham

 

 

 

Description

One of the most common issues we have encountered with students who are using Canvas for the first time is knowing which Internet browsers are compatible with it. Numerous emails have been sent to our support desk by students who attempted to submit assignments, only to have their attempts end in failure. Analysis of these incidents revealed that many students were using deprecated or incompatible versions of browsers. 

Because many of our students don't always know what an Internet browser is, or which one they are using, I created a javascript based widget that can be implemented into Canvas. Once the custom cascading style sheet (CSS) and javascript (JS) have been integrated into your instance, a container will appear on the course dashboard when a student or faculty member logs into Canvas. This container will show the user the name, version and icon of their current browser, and will also provide links to help gain more knowledge about their operating system, browser, as well as Canvas compatibility with those systems and browsers. Additionally, I have included a "close" button that will allow the user to dismiss the container, should it be blocking pertinent or important information on the dashboard.

Objectives

Participants who attend the session will learn...

  • How to implement the CSS and JS files, or the code therein in existing files in their Canvas instance.
  • How to verify that the code has worked successfully.
  • What the widget looks like.

 

Additional Resources

  • This Quick Demo arose in response to interest in my original blog post Browser Detection and Information Container.
  • A demonstration of this widget can be found in a Fiddle that I created on JSFiddle. (JSFiddle)
  • A repository containing full documentation along with the relevant files can be found on my BitBucket account. Feel free to fork or clone this as needed. (BitBucket)

https://www.youtube.com/watch?v=WUK1IbjpJ4s