Better Group Discussion Navigation

James
Community Champion
11
8469

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.

Discussion Information

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.

Switch 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

Recent Activity in Group

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

Discussions Page

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.

Discussion Details

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)

Developer Tools

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.

HTML Symbol

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.

Course Discussion Details

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.

Discussion Details

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.

Discussion Link

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.

11 Comments
kona
Community Champion

So I have to admit I was half asleep when you were talking about this last night, but now that I'm awake and checking this out, WOW! This one little breadcrumb trail will save me a ridiculous amount of time and frustration when doing group discussions! THANK YOU!!

Shar
Community Champion

It is a pretty brilliant and practical script! I'm not an instructor, but I still pop in group discussions to peek that students are understanding the discussion topic prompt and responding accordingly. And yeah I've had to train myself to use the browser back button history to return to that main page showing which groups had new topics and then click through again. As I was reading this (whole) document, I was nodding continually at all the clicks it takes (before installing the script) to get to where I wanted to go.

But so much easier for me with this script and I'm not even a power user. I love that I can switch group directly to the discussion and then return to the course discussion page and the big list. Smiley Happy

Cheers - Shar

James
Community Champion

The Back button???

I didn't even think to consider that  ishar-uw. Maybe because I engage in their discussions when warranted and I'm just used to moving forward after doing that. That's why I'm glad Canvas has teams of people working on things -- one person might make it out to be a hard, nay insurmountable, problem while someone else says "all you have to do is x."

 

That might also explain why when I looked through the Community to see if anyone else was as frustrated as I was I couldn't find any feature requests about it. I asked  @kona  a couple of times if I was missing something and if this was easier than I was making it? I wrote it because it was something that was going to make my life easier (as opposed to a lot of what I write that are for other people) and then worried I might be the only person who was frustrated with the group discussions.

Unfortunately, Canvas can't easily do what I did. For consistency purposes, switch groups needs to act the same no matter which part of the group site you're on. That's why making it user script is great -- the user can choose if they want it to work a different way.

Canvas could fix the From thing, though -- or they might end up removing it.

Shar
Community Champion

Wait a sec.. if they remove the From thing (that I never knew existed because I mostly design in Firefox) will that break that part of the script that reminds me what course and discussion topic I'm looking at?

And hehehehe yes, the back button. Smiley Wink I'm just peeking in for a quick view to see what kind of activity is happening in the group discussion like is it only 2 folks back and forth or is everyone engaged when that group discussion has a high number compared to other groups.

Cheers - Shar

James
Community Champion

ishar-uw, we'll just have to figure out some other place to put it if they get rid of the From line. It's just a matter of finding a different CSS selector and then adding it to the proper place.  It's poorly implemented right now, almost like they never finished it and then forgot about it because something else more important came along. The time to remove it is a lot less than the time to fix it, but fixing it would be more beneficial.

kona
Community Champion

Back doesn't work for me because I normally respond to each group's discussion and clicking the back button after posting doesn't seem to be a good thing to do. 😉

wheeles
Community Novice

I'm brand new, no where near a power user.  I found the "Switch Groups" function very inconsistent.  I have it documented but can't figure out how to post it in this forum - it has screenshots that don't paste below.

By reading this forum, the easiest solution I found was the one posted by Kona Jones over a year ago - right click the Discussion Group so it opens in a new tab.  I appreciate the solution that James proposed, I don't feel confident to install a script.

Thanks for forging the way for us newbies.

James
Community Champion

 @wheeles ,

I'm glad the right-click to open in a new tab works for you -- sometimes the simplest solutions are also the easiest. Another trick you can use if you have another hand near the keyboard is to down the Ctrl key while left-clicking a link to open it in a new tab.

If the switch groups function that Canvas supplies is not working consistently, then I would suggest filing a trouble ticket with Canvas about it. You can do that by clicking on the Help icon in Canvas and then choosing "Report a problem".

wheeles
Community Novice

Thanks for the suggestion. I filed a ticket with full documentation. Will continue to monitor your suggestions and the Community. They have been very helpful.

Susan Wheeler

(916) 222-9299

Adjunct Faculty

Business and Computer Science

American River College

schw0814
Community Participant

My instructors have been asking for this change in Canvas.  It seems more intuitive for them to select "Switch Groups" instead of going back and forth.  James just updated the discussion script and it works beautifully.  Thank you so much for your contributions James!

hesspe
Community Champion

@Katrina-Hess I hope I'm posting this in the right place, but if not please let me know.  I believe the concern I'm writing about has previously been submitted as a ticket, and my excellent CSM suggested I post about it here as a feature request for the Discussions redesign.  Current Discussions lets you create a Group Discussion and assign it to a Group Set even if no groups have been created in that group set.  This has been done multiple times at our site, most recently this week.   Obviously if no groups have been created, the discussion can't function as a group discussion, but an additional problem is that if it is a graded discussion, students' posts can't be viewed individually in SpeedGrader.  I am suggesting is that if someone selects "This is a Group Discussion" and then selects a Group Set in which no groups exist, that instead of allowing that,  a message is displayed saying that "Groups must created in [group set name] before it can be selected."   Thanks!