Canvas: Creating audio playback in quizzes (w/o audio controls)

Post written by Andrea Narciso, summer intern for the Office of Digital Learning

This summer, I worked  as an intern at the Office of Digital Learning. As such, I’ve helped people in the Middlebury community use technology to support their teaching and educational experiences. One of my projects was to help a Middlebury C.V. Starr School Abroad with their Language Assessment, which is used to assess the progress of students studying abroad. It is currently a paper-based test, which means that students studying all over the country have to travel to the flagship site to take the test. My job was to help this School Abroad find the best online platform to host their exam.

A key part of the paper-based assessment is an audio dictation. When students take the test at the School Abroad site, the test administrator recites a text and then asks students to answer comprehension questions about the text. The problem with administering the exam online is that we needed to restrict users from controlling the audio playback. We needed the students to listen to the audio recording without being able to pause, and then to answer questions.  None of the platforms we were considering for the online assessment, including Canvas, WordPress, and Moodle, permitted restriction of audio controls — all automatically add controls to uploaded audio files. Allowing students to pause and rewind the audio would destroy the integrity and validity of the assessment. I needed to discover which online platform would allow me to change the availability of audio controls and ensure that the online version of the test would be valid. 

Screen Shot 2016-08-22 at 11.18.06 AM

Image 1. Canvas audio file with playback with controls

I decided to start with Canvas because it has built-in authentication that links students to their Middlebury accounts and has a great user interface that makes it easy to create assessments online. Additionally, Canvas had the option to use an HTML editor to post content and quiz questions; I hoped this might help me bypass the automatic attachment of audio controls. After experimenting with the attributes of the audio file on the HTML editor and digging through the Canvas community help pages, I found that Canvas limited the HTML attributes that you could use. Thus, changing the audio attributes to ‘controls=“none”’ (which should work on any regular HTML file) would not work on Canvas.

After some frustration, I decided my next step was to try use an iFrame to embed my own HTML file in the quiz. This would allow me to have full creative control and access to all of the attributes HTML has to offer. Using HTML and JavaScript, I created a ‘play’ button that,when clicked, would play the audio and then disappear. This did exactly what the School Abroad wanted and was easy to implement– the hard part was integrating this code into Canvas.

Code for HTML file

Image 2. Code for HTML file

The next problem was that the iFrame was configured to embed websites already online with a “www.” and a “.com”. However, the HTML file I created was hosted locally (i.e., on my computer) and not on a website with a URL that I could use for the iFrame. After looking for ways to host my file online and scouring through the Canvas Community help pages, I found gold at the end of the rainbow. This blog post (iFrames are your iFriend) explained the use of iFrames and the first comment demonstrated how to embed your own HTML file stored in your Canvas files.

Template HTML Code on Canvas

Image 3. Template HTML Code on Canvas

Canvas audio playback without controls

Image 4. Canvas audio file playback without controls

After uploading my HTML and audio files onto Canvas and creating the iFrame with the HTML editor, I had finally put an audio file on Canvas without audio controls! I spent the next couple days transferring the assessment content onto Canvas. Canvas is extremely user-friendly, which made this part of my job easy. I started learning how to create a quiz with Canvas Guides and used the Canvas community help pages when I had any questions. Every time, I found either someone else who had the same problem, an explanation on how to solve it or a vote asking the Canvas developers to create a solution.

Canvas is useful because it allows faculty to create assessments online. It makes course material accessible and consistent across time. Canvas makes it easy for faculty to collect data on students’ progress and help improve their academic programs. Keep in mind, however, that Canvas may still lack certain functionality you need and that you may need to explore creative solutions (some might call them “hacks!”) to accomplish what you want to do.


Featured image by Ricardo Camacho, CC-BY-2.0

Amy Collier

One Response to “Canvas: Creating audio playback in quizzes (w/o audio controls)

  • This is brilliant and thank you for sharing!

    [ok… tbh iframes make me uneasy but I can probably get over that eventually and I’ve learnt a new way to hack canvas to make it do something interesting. thank you ]

Leave a Reply Text

Your email address will not be published.