Better Group Discussion Navigation

[James]

I've written a user script that provides better navigation when working with group discussions. This document and script are primarily intended for instructors, TAs, or other people who can see multiple groups for group discussions. I haven't tested it for people who can only see one group.

For the really impatient, the installation instructions and a video are at the bottom. But you may want to know what you're fixing before you install the script, so I encourage you to read through the rest (you can skip the technical parts if you like).

A problem

I recently gave a group discussion in my statistics course and wanted to see what students were saying.

It takes me 3 clicks to get to a group's discussion.

1. From the course, click on Discussions
2. Click on the particular discussion (discussion 4 for me) and get a blue box that shows how many discussions are in each group discussion.
3. Click on one of the groups

Here's that nice blue information box. Normally it has some unread messages, but I have already read everything for this discussion.

Okay, 3 clicks for the first group. Now let's say I want to move on to the second group. This time I have to click on Switch Groups and pick another group.

Unfortunately for what I want to do, that takes me to the activity stream for the course, not the discussion.

I can click on Show More next to the discussion and then click on the desired discussion

or I can click on Discussions and then find the desired discussion and click on it.

One problem I encountered, besides the large number of required clicks, was that I lost track of which groups actually had new messages and which didn't. That information was contained in the nice blue box from the course page, but not from within the groups. You have to go back to the course discussion page to get that again.

To get back to the course's discussion page with the blue information box, you can either

1. Click on the group name in the breadcrumbs, then click on the course name, then click on Discussions, then click on your discussion (4 clicks), or
2. Click on Courses, click on your course, click on Discussions, then click on your discussion (4 clicks)

Some of you might be aware of another way. In Chrome, there is a character (looks like a box for me) after my name and the "From" text. This doesn't show up if you are using Firefox.

I'm not  completely sure what the From is supposed to be, but if you look at the code with the browser's Developer Tools, you get something like this (this is from Firefox)

The hyperlink there is to the course that holds the discussions. Then there's the character that shall not be shown (in Firefox). If you edit the HTML, it actually turns out to be a bullet of some kind, which is why I'm not sure what it is.

It's also not up to Canvas' standards for links. There's no title, no aria tags, or any of the other stuff that makes them accessible. I even went looking on the Canvas Instructor's Guide Not authorized to view the specified document 2769  and they have the "From" there without anything after and no comment about what it is supposed to mean. That means that it might disappear or get fixed at any point because it's not like Canvas to leave things like this.

All of this means that if you can see something, like the Chrome users, then you have a 1-click way of getting back to the course rather than the 2-click solutions provided above.

A solution

As I'm getting tired of clicking this much, I think that there has to be a better way. Finding the non-displayable character and the link to the course gave me an idea. I normally try not to change Canvas' behavior too much, but in this case, it's broken and it's broken in the documentation, so it could be a while before it's fixed. 

Getting to the course discussion

I decided to change that non-displayable bullet point to the word "Course". This made it visible and big enough that people could click on it.

Part of the problem was the repetitive clicks. Getting me to the course still meant that I had to click on Discussions and then find the discussion and click on it. So I went looking for a way that I could find the course discussion ID. 

It turned out that it was inside the ENV variable as part of the DISCUSSION property. If this is a group discussion that is part of a course, then there is a SEQUENCE property to the ENV.DISCUSSION. If it is a discussion created by the group, then SEQUENCE does not exist.

That ENV.DISCUSSION.SEQUENCE variable contains something like this:

{ ASSET_TYPE: "Discussion", ASSET_ID: 12708791, COURSE_ID: 2054971 }‍‍‍‍

The ASSET_ID is the discussion number of the discussion in the course, and the course ID is given there as well.

With this information, it was possible to create a direct link to the root discussion at the course level. The URL would be something like

/courses/2054971/discussion_topics/12708791

So, I decided to link the word "Discussion" next to the link for the "Course". Clicking on "Course" will take you to the course home page. Clicking on "Discussion" will take you to the discussion page associated with this group discussion.

We can do better. Wouldn't it be nice if it used the name of the course instead of the word "Course" and the name of the discussion instead of the word "Discussion"? That information can be looked up using the API. I called the Get a single course endpoint of the Courses API and Get a single topic from the Discussion Topics API. I used jQuery's AJAX functionality to look up this information.

Now we have this and the problem of getting back to the course discussion page with the blue information box is solved.

Going directly to a group discussion

The other annoyance I had was that switching groups didn't take you directly to the discussion.

Group discussions are challenging to work with from the API perspective. There are a couple of layers of calls that need made to get all of the information so that you know what the groups are, then getting the discussions for each group and seeing which one matches the discussion we're currently using. 

Luckily, none of that is necessary.

When you're on the course discussion page and looking at the blue information box, there are links to each of the group discussions that do not use the group discussion ID. They look like this:

/groups/417644/discussion_topics?root_discussion_topic_id=12708791 

The root_discussion_topic_id query parameter is the ID of the course discussion, not the group discussion. It's the same for every group and we found it by looking at the ENV.DISCUSSION.SEQUENCE environment variable.

The next part is how to obtain the group IDs. Canvas already provided that to us in the pull-down Switch Groups select list.

The existing links look like:

/groups/417644

So all I had to do was find the links and add the rest of the link to it. This actually turned out to be one of the easiest (by the time I got there) portions of the code.

At this point, pulling down the Switch Groups select list and picking a group will take me directly to the current discussion for that group.

Installation

Some of you have diligently read through all of that, some of you just want to know how to install it and use it.

1. Install and enable a user-script manager, which is a browser add-on: Greasemonkey for Firefox or Tampermonkey for Chrome/Safari. If you use one of my other Canvancements, you may already have this installed.
2. Install the Group Discussion Links user script.
3. Visit a group discussion page and enjoy the new behavior.

The standard disclaimers apply. I have tested this with my course using Firefox and Chrome. There may be something special about your discussion that makes it not work, so if you run into a problem and you're willing to help me debug it, let me know.

Custom URLs

The script automatically runs on any page that matches https://*.instructure.com/groups/*/discussion_topics/*

This might include sub-pages of the discussion topics, so there are some additional checks within the code to make sure that it only runs on discussion pages within groups that are part of a course discussion.

If your site is hosted by Instructure using <school>.instructure.com, then it should work fine. If you have a custom URL, like canvas.university.edu, then you will need to modify the script to get it to work.

The specific steps to do this vary depending on your browser add-on. In Greasemonkey, click on the Greasemonkey pull-down, choose Manage User Scripts, find the Group Discussion Links script, right click and choose Edit. In Tampermonkey, click on the Tampermonkey Icon, choose Dashboard, and then click on Group Discussion Links.

In either case, you need to change // @include statement on line 5 to match your instance. In the case of canvas.university.edu, you should change it to https://canvas.university.edu/groups/*/discussion_topics/*. 

Customization

There are two configuration variables that can be set within the source code to alter the functionality of the script. These are contained within a variable towards the top called config

var config = {
  'show_names' : true,
  'switch_to_discussion' : true
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

• show_names will replace the "Course > Discussion" words with the name of the course and the name of the discussion when it is set to true. If you set it to false, it will leave the words Course and Discussion. It saves making those two API calls to fetch the information, but they are pretty small so most people may want to see the names. Another reason for setting it false is to save space.
• switch_to_discussion will take the person directly to the discussion when they switch groups when it is set to true. Setting it to false will mimic the existing Canvas behavior that takes you to the group's activity stream.

Video

Here's a quick video I made demonstrating the problem and the solution.