TL;DR (too long, didn’t read): Jump to the how-to.

Doug teaches Percussion, and as you may imagine, not having access to a practice space can create barriers to success in a Percussion course. Not everyone has a great place to play at home without potentially disturbing neighbors in the next apartment, or other family members. Doug needed to fix this by giving his students a safe place to practice.

Doug consulted the Percussive Arts Society COVID-19 Task Force’s guide Managing COVID-19 Protocols in Administering Percussion Performance Curriculum, which is pretty extensive in covering how to safely use performance spaces and percussion instruments and sanitize everything again. Then, Doug negotiated with his Department Chair, Dean, Campus Police, and GCC’s Vice President of Academic affairs for an exception to allow students who are trained in the protocol to use the Music Building’s practice rooms.

There were a couple of requirements for scheduling the practice rooms. Ideally, the schedule would be available in Canvas, and students could claim their practice room times by entering their name in the time slot(s) they need. But Campus Police also needed access to the schedule so they would know who is authorized to be on campus. Doug tried using the Scheduler feature of the Canvas Calendar, but trying to manage appointments for 3 practice rooms proved unwieldy and confusing in Canvas. And this solution would still have required Doug to notify Campus Police who would be on campus each day.

Doug decided to try a Google Sheet. It’s relatively easy to create a calendar layout, and students signing up for a time is as simple as typing their name in a cell. The Sheet can be shared with Campus Police, so they can check the names of students using practice rooms at any time, without Doug needing to notify them of changes. But when embedded into Canvas, the sheet wasn’t editable.

We tackled this together and found a workaround. I thought I’d share in case this technique would prove useful for other faculty. Also, I need a way to remember what we did that worked. After creating the sheet, these are the steps we followed:

Publish the sheet to get embed code

1. In Google Drive, open the Sheet you want to embed.
2. At the top, click File and then Publish to the web.
3. Choose a publishing option: Publish the entire spreadsheet or individual sheets. You can also choose a publishing format.
4. Click Publish.
5. Copy the embed code, which will look something like this:

6. Close the pop-up and paste the embed code into a text editor.

If you were to embed the Sheet within Canvas now, it would be viewable, but not editable by the students. The “publish” step creates a static version of the Sheet, which is not intended to be edited. The next step is to set the Sheet’s sharing permissions so that anyone who has the link can edit it, and edit the Sheet’s link in the embed code to be dynamic/editable again. So that’s why we’re pasting into a text editor instead of going straight to Canvas.

Set edit permissions and get the Share link

1. Go back to the spreadsheet in Google Sheets, and press the Share button
2. Make sure the permissions say Anyone with link is an Editor, and then copy the link
3. Click Done to close the popup.

“Hack” the embed code

We need to do two things to the embed code: change the source URL of the sheet so an editable version is displayed, and add width and height parameters so that the whole sheet is visible in Canvas without scrolling.

Most of the URL in the iframe embed code needs to be deleted, and replaced with the link copied from the Share settings popup. Basically, delete everything in the quotation marks after src=" starting with https:// but leave ?widget=true and anything after it. Here is what to highlight for deletion based on our current example:

Now you can paste in the Share link that you copied. Here is what the above example looks like with the replacement shown highlighted:

Now to add width and height. We’ll add a width of 100%, which will tell the sheet to be as wide as possible in the Canvas Page. And we’ll add a height of 800 pixels, which we determined by experimenting is tall enough to display the whole Sheet including tabs at the bottom without having to scroll. You add this information in the embed code right after the word “iframe” on the first line, like so:

<iframe style="width: 100%; height: 800px;" src=…

After this edit, you’re ready to drop the embed code into Canvas. You can place it in a Page or anywhere you have access to the Rich Content Editor.

Paste the edited embed code into Canvas

1. Create or open the page in Canvas and click the edit button

2. Select the Insert media tool 

3. Click the Embed tab [1] and paste the code in the text field [2].

4. Save the page.

The end result

Students will be able to type into the spreadsheet right from Canvas. Here is a screenshot of me doing that to test Doug’s new room scheduler from within a Canvas page:

Fiddling with the embed code was the hardest part. Once we figured that out, this is a pretty hassle-free way for Doug to allow percussion students to sign up for practice time in a music practice room, and for Campus Police to verify who is allowed to be in the Music Building. I’m really appreciative that we have faculty who work so hard to make sure our students have the resources they need to be successful!