Synchronous dashboard with audio and breakouts

I teach again in just a week and have set a goal for myself to make an app that I can use in my synchronous meetings. As of this weekend, I think it’s working (see github repo here)! You can read a lot of my background philosophy here, here, and here. The basic gist is that video is a bandwidth and screen space hog and so I think there might be better tools to put front and center for students to interact with.

My new synchronous dashboard app is a major upgrade from the old one. Here’s a screenshot:

Screen shot of the instructor view

You can see a walk through of the app in this Loom video. The major features are:

  1. Jitsi technology for audio (jitsi can do video too but I’m purposely not using it)
  2. Breakouts
  3. Flexible whiteboards
  4. Raise hand queues
  5. Group, breakout, and individual chats
  6. Polling
  7. Understanding checks

I’ll try to hit the highlights of each of those below.

Jitsi

Jitsi is an open-sourced competitor for Zoom and Google Meets. It has basically all the same tools those have, but it also has an api I can use to make my own interface, so that’s what I’ve done.

For all rooms I connect the right students with audio only. I only give them a mute button.

Jitsi also provides a data channel that lets all the participants pass data back and forth. That’s what I’m leveraging to send all the information about the other interactive elements (chat, understanding checks, etc). I used to do that using Pusher but this is cleaner.

Jitsi lets you use their public server, but they don’t really guarantee good connections. Instead I’ve installed it on a new digital ocean droplet and my quick testing suggests that the $5/month it’ll cost me provides enough bandwidth for my class (~25 students meeting 3 times a week for an hour).

Breakouts

I’ve had a growing wish list for breakouts. Here’s the features I’ve been able to build in:

  1. Pretty easy to assign students to new breakouts
  2. Automatically logs them out of the main room and logs them into the breakout room. They don’t have to press anything.
  3. Chat and whiteboard dedicated to each breakout
  4. When they’re in a breakout they can still see the main room chat and whiteboard, though if those are updated by the instructor during the breakout they won’t see the changes. This is especially useful for when students can’t remember what they’re supposed to be doing.
  5. The instructor is “in” every breakout, though they start with no sound (in or out) to cut down on the cacophony. They can interact with chat and whiteboard right away and can rejoin with sound if they (or the students) want.
  6. When students are back in the main room they can still go see the chat and whiteboard of the breakout. The instructor can also share all breakout room boards to everyone if they want.

Things that are still on the wish list:

  1. Easy way to save who has been assigned to breakout groups in the past to easily replicate
  2. Easier way to have the instructor talk to the students without having to rejoin

Whiteboards

I spent a lot of time last year learning how to manipulate html canvas elements, including figuring out how to capture where a pen has gone so that I could send those coordinates to everyone. The problem is that the work I did just scratched the surface of what I wanted. I realized that lots of smart people have tackled online whiteboards and maybe I could just dump a useful one in an iframe on my page. Well, yep, that’s exactly what I did.

Mine is a google school, meaning that user@mycoolschool.edu is really a gmail account. That means I can leverage the google infrastructure for user authentication (built in already) and for generating and sharing various documents. That includes the very handy Google Drawings! Yes google also owns and suggests using jamboard for online collaboration, but you can’t (yet?) embed those in iframes. But Google Drawings are nearly as useful, including the ability to put in hyperlinks, and doesn’t mind at all being in an iframe.

Let’s say we’re all in the main room and I want to share a screenshot of the code we’re developing. Here’s what happens:

  1. I (as the instructor of the course) hit the “whiteboard” button.
  2. A request is sent to the google server asking it to make a copy of my blank drawing template, save it in the google drawings folder of the class (which is shared with everyone in the class), and return the url of it.
  3. The url is sent to every participant with a message saying their local javascript should launch an iframe and fill it with that url.
  4. Now everyone is staring at the whiteboard on the page (they don’t have to go anywhere else!) and they can interact with it.

Because it’s saved in a folder they have access to (with a handy name indicating what class, room, and date it was used in/on) they can always go back, even outside of class time, to look at it.

If the instructor repeats the process listed above, the iframe currently displayed is set to “style.display=none” and another is generated with the new url as the source. The students can flip back and forth among any of the whiteboards that are launched this way. If the instructor wants to make sure everyone is looking at the same one they can force that. If a student joins late, this process works for them seamlessly as well (in other words they see any that the instructor either hits “see mine” or “new whiteboard” after they’ve joined).

Whiteboards that are used in breakout rooms can be sent to everyone in the main room by the instructor as well.

Raise hand queues

I’ve talked a lot about this before. I just directly lifted the code from my old version. It goes beyond a normal hand-raise queue (that might, for example, show the names in chronological order) by having two queues: one for follow ups to the current topic and another for new topics. Everyone can see who is in either queue and they can transfer their hands to and from either queue.

To save bandwidth and complexity I no longer store this information on the server for analysis later. I can always add that back in if it seems like it would be useful.

Note this functionality only works in the “main” room.

Chat

I really dislike how Zoom and Google Meet privilege video over the chat window. My app makes sure that chat is always front and center.

Students can also initiate 1-on-1 chats with anyone else in the same room as them (recall that the instructor is always in all the rooms). I really think this is important as often people would rather get a quick clarification of something from a friend/colleague/classmate than ask the whole class. I’ve seen some folks talking about the loss they and their students feel when they realize that they don’t have this tool, at least not easily.

I’ve made sure to make all chats visible so the users don’t have to click a pulldown to see their various chats. This should dramatically reduce the number of times someone sends a text to the wrong person.

When there are breakouts going on, the instructor can send messages to individual breakout rooms or to all of them at once.

Polling

I really like using quick polling, whether that’s for Think-Pair-Share/Peer Instruction polls or just to check something quick, like “should we do an open-book test?”

I’ve built in a very simple polling system for the moment. The 4 (for now but easily changeable) choices are checkboxes always on the screen for the student. If I ask a question I’ll just say something like “(1) is for ice cream, (2) is for donuts, and (3) is for broccoli.” The results show up on the fly for the instructor who can then just tell the class the result.

Eventually passing the results to everyone is doable, but I’m not in a rush, as the way I’ve always done peer instruction is exactly as I’ve built it.

Understanding checks

In my old synchronous dashboard I was proud of the various buttons I put up. Things like yes, no, confused, laughing, cat’s-on-my-computer were, I thought, a fun way to foster interaction. However, after using them for teaching and for meetings with colleagues, I noticed that people very rarely used them at times other than when I asked for a quick poll. So I figured the polling above would be a better solution.

However, there’s something I do in teaching face-to-face all the time that I wanted to replicate here if I could. Quite often I’ll say to students that I want to get feedback from them on a particular scale, like “confidence you can get the Twitter api to work.” Instead of seeking a binary answer, I tell them to use their hand height to indicate their confidence. Putting your hand on (or even below!) your desk indicates a great lack of confidence, while raising it high above your head shows great confidence. I’ve really liked those moments, though sometimes I think people are nervous everyone is looking at them.

So for online I thought I’d use an input type=”range” or slider to accomplish this. I call it an analog slider but it’s really only got 100 steps in it (0-100). Students can set it when I ask such a question and I (as the instructor) immediately see the class average.

I plan to use this a lot in class by asking for “understanding checks” or possibly “confidence checks.” I’m really excited about it!

Your thoughts?

Well, what do you think? I’d love to get some feedback, especially in this last week before class starts.

Here are some starters for you:

  • I’m in a class with you next week and you said I should come read this post before class starts. Ok, done. Do I get points now?
  • Where do I go to drop your class?
  • I’m going to be in this class and this sound really cool. What I’m most excited about is …
  • This really sucks. The worst part is …
  • … and I think you should update your online store so that people are warned about the danger of these particular cucumbers…. oops, I thought I was typing in the comment section of a different tab
  • How can cucumbers be dangerous?
  • Let me tell you my cucumber story …
  • Between jamboard and google drawings I think the most interesting differences are …
  • This is blatantly stealing from ….
  • I love video. How are you planning to do attendance checks if you can’t see their smiling faces?
  • I hate video, thanks! However there’s one thing I think I’d miss …
  • I think you should add ….
  • I think you should change ….

About Andy Rundquist

Professor of physics at Hamline University in St. Paul, MN
This entry was posted in Google Apps Script, syllabus creation, teaching, technology. Bookmark the permalink.

2 Responses to Synchronous dashboard with audio and breakouts

  1. bretbenesh says:

    I think that this is amazing. I mostly agree with you about the video, although I actually like having video in the breakout rooms.

    Still, I think this is awesome. It is a nice middle ground between Zoom (with video) and what artofproblemsolving.com does (no video and no audio; this is an online school, and does not offer their platform for others to use).

    • Andy Rundquist says:

      Thanks, Bret! I agree video in breakouts could be nice, but the bandwidth savings is still a strong argument for me, even if screen space isn’t as crucial. So does artofproblemsolving just encourage live chat?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s