Organizing Media Files with Tabs and Tables

[stevensons]

At the request of stefaniesanders​, I am creating this resource for those who, like me, use a lot of media files in their courses and would like to be able to organize them in a way that is less visually overwhelming.

Background

When I taught my Humanities courses in Blackboard, I had a one-page list of text-based links that collected all the audio files used in the course and linked to them in one place, using a table that also listed the respective Lesson and book chapter the file was related to. Clicking would automatically bring up a Quicktime window.

In Canvas, I discovered that if I want to make my audio files playable from inside Canvas, I had two major options:

1. Convert all my audio files to YouTube (or SoundCloud, etc.), house them on YouTube, and insert those links into the master list. (A long, involved process I was not ready to embark upon.)

2. Upload the audio files into Canvas and use native Canvas audio links.

I decided on option 2--and then encountered a series of problems:

Problem 1. When you insert an audio file using the Content Selector, you get a rectangular audio playback icon by default, which you cannot remove without causing other issues (see Problem 2 below):

Problem 2. If you go into the HTML and delete the image, and create a text only link, when you click it you only have the option to download the file onto the local machine--the playback isn't embedded in the page.

Problem 3: Clicking on the above audio playback icon brings up an embedded media player that is not the same size and shape as the audio icon itself--and when you click it, the page automatically resizes around it. Also, you can't return to the original playback icon.

So, I had this huge number (38 in one class; 99 in another) of short audio clips. Putting them all on one page would make it ridiculously long, even if I put them into a table. And then the page would constantly be reformatting itself whenever any of the audio playback icons was clicked, which isn't a blocker but is aesthetically displeasing. I wanted a way to organize the files by Lesson, and I also wanted the page to look reasonably consistent even as students clicked on multiple audio clips on the same page.

Solution

Tabs: I found out that it is possible to create a tabbed interface in Canvas using small bits of Javascript (doable by those who don't write Javascript themselves, i.e. me). In that way, I could create ONE page called Musical Tracks (or two, for the class with 99 tracks) and create a tab for each Lesson, thus cutting down the number of icons on the screen at any given time. I found the instructions for this in a resource called Using jQuery without custom Javascript.

Tables: I found some information on the page Tables and Videos that was useful. On each tab, I created a table two columns wide to hold the audio files for that Lesson. I defined a preset height and width for each cell that would accommodate both the initial audio icon and the playback bar. The result looks like this:

Code (sample, with 3 tabs):

<div class="enhanceable_content tabs">

    <ul>

        <li><a href="#fragment-1"><span>Lesson 1</span></a></li>

        <li><a href="#fragment-2"><span>Lesson 2</span></a></li>

        <li><a href="#fragment-3"><span>Lesson 3</span></a></li>

    </ul>

<div id="fragment-1">

<p> </p>

<table cellpadding="5">

<tbody>

<tr>

<td width="75px;"><strong>Lesson 1</strong></td>

<td style="height: 150px;" width="410px">Homer - "Excerpt from <em>The Odyssey</em>"<br /><a id="media_comment_m-2tUBjGXXCtCa2Jhg8VyBxDGvhxK5g32e" class=" instructure_audio_link instructure_file_link" title="01Track01.mp3" href="https://community.canvaslms.com/courses/4187/files/110101/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

</div>

<div id="fragment-2">

<p> </p>

<table cellpadding="5">

<tbody>

<tr>

<td width="75px;"><strong>Lesson 2</strong></td>

<td style="height: 150px;" width="410px">Euripides &ndash; "Excerpt from 1st chorus of <em>Orestes</em>"<br /><a id="media_comment_m-2ua9eZ36rGdnY1FGAMBfTTzmCtHpsKVQ" class=" instructure_audio_link instructure_file_link" title="02Track02.mp3" href="https://community.canvaslms.com/courses/4187/files/110070/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Ancient Greek Music &ndash; "Excerpt from <em>Second Delphic Hymn</em>"<br /><a id="media_comment_m-2tXMuCoRmKRTDzT83cRW2SoRWM8y7e1b" class=" instructure_audio_link instructure_file_link" title="03Track03.mp3" href="https://community.canvaslms.com/courses/4187/files/110098/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

<tr>

<td width="75px;"></td>

<td style="height: 150px;" width="410px">Ancient Greek Music &ndash; "Excerpt from <em>Hymn to the Muse</em>"<br /><a id="media_comment_m-2tZKRTEBn9Vv7CmaPW6FBrCm487HBCy9" class=" instructure_audio_link instructure_file_link" title="04Track04.mp3" href="https://community.canvaslms.com/courses/4187/files/110092/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Ancient Greek Music &ndash; "Excerpt from <em>Hymn to Nemesis</em>"<br /><a id="media_comment_m-2u1LbJ6xPtWD1UqHAimh7bNxMPoudeXH" class=" instructure_audio_link instructure_file_link" title="05Track05.mp3" href="https://community.canvaslms.com/courses/4187/files/110088/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

</tbody>

</table>

</div>

<div id="fragment-3">

<p> </p>

<table cellpadding="5">

<tbody>

<tr>

<td width="75px;"><strong>Lesson 3</strong></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Victimae Paschale Laudes"<br /><a id="media_comment_m-2u9D8FPDxVvQTUUCiBXXsX12mNHQkTnb" class=" instructure_audio_link instructure_file_link" title="06Track06.mp3" href="https://community.canvaslms.com/courses/4187/files/110071/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Libera Me, Domine"<br /><a id="media_comment_m-2u5NzAt4nrEV32dBNFveEBzsnuVZ2r4p" class=" instructure_audio_link instructure_file_link" title="07Track07.mp3" href="https://community.canvaslms.com/courses/4187/files/110081/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

<tr>

<td width="75px;"></td>

<td style="height: 150px;" width="410px">Gregorian Chant - "Magnificat"<br /><a id="media_comment_m-2u6S8EVnTnkZJD29L4HDeiG8LgFcXHh3" class=" instructure_audio_link instructure_file_link" title="08Track08.mp3" href="https://community.canvaslms.com/courses/4187/files/110079/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Kyrie Eleison"<br /><a id="media_comment_m-2u7kgQG8gjXCCaMusTZCt1erqNGwLRiE" class=" instructure_audio_link instructure_file_link" title="09Track09.mp3" href="https://community.canvaslms.com/courses/4187/files/110078/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

<tr>

<td width="75px;"></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Puer Natus in Bethlehem"<br /><a id="media_comment_m-2tVJvqWQds2VCtLMbs7iP2GVVa5eBWpG" class=" instructure_audio_link instructure_file_link" title="10Track10.mp3" href="https://community.canvaslms.com/courses/4187/files/110073/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Veni Sancte Spiritus"<br /><a id="media_comment_m-2tXeVe24GNQidYWK8G1CEXy2WUR5fFy3" class=" instructure_audio_link instructure_file_link" title="11Track11.mp3" href="https://community.canvaslms.com/courses/4187/files/110096/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

<tr>

<td width="75px;"></td>

<td style="height: 150px;" width="410px">Gregorian Chant &ndash; "Rex Caeli Domine" - <em>Organum<br /><a id="media_comment_m-2u3Luko8S3cqamjXuCXV8jW9spX1vFH8" class=" instructure_audio_link instructure_file_link" title="12Track12.mp3" href="https://community.canvaslms.com/courses/4187/files/110090/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></em></td>

<td style="height: 150px;" width="410px">Hildegard von Bingen &ndash; "O vis aeternitatis"<br /><a id="media_comment_m-2tZhy8XWb4oy2kmhFknM5ugSckdo6a6A" class=" instructure_audio_link instructure_file_link" title="25Track25.mp3" href="https://community.canvaslms.com/courses/4187/files/110093/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

<tr>

<td width="75px;"></td>

<td style="height: 150px;" width="410px">Hildegard von Bingen &ndash; "Nunc aperuit nobis"<br /><a id="media_comment_m-2tYN2uYawK9HWJ7zMd3E7qFZSgagjQUs" class=" instructure_audio_link instructure_file_link" title="26Track26.mp3" href="https://community.canvaslms.com/courses/4187/files/110094/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

<td style="height: 150px;" width="410px">Hildegard von Bingen &ndash; "O ignis spiritus paraclitis"<br /><a id="media_comment_m-2tWK4cezCggCbcN1EjhKgqsMqXbKREh1" class=" instructure_audio_link instructure_file_link" title="27Track27.mp3" href="https://community.canvaslms.com/courses/4187/files/110097/download?wrap=1" data-api-endpoint="[file path]" data-api-returntype="File"></a></td>

</tr>

</tbody>

</table>

Each TAB includes a separate TABLE within it; each cell has one audio link and stays the same size even when the contents resize. This has turned out to be a good workaround for me so far, in terms of not overwhelming my students with a huge long page of information (which I do enough already) and presenting them with a consistent layout. I hope it's helpful to others, too!

[scain]

Great layout idea of combining tables with tabs! It looks super slick for the desktop side of things. Though, as much as I dig the tabs, having seen how much they get torn apart in the mobile environment I think I'm going to be considering multiple pages. A similar effect could be implemented using a "navigation bar" mentality and buttons at the top of each of those pages.

[nuwjg869]

I have been attempting to build tabs on the Syllabus page. I successfully built tabs on a content page, and copy/pasted the code into the Syllabus page, but to no success. Does anyone know if Tabs can be built on the Syllabus page?

[scain]

Hmm...I was almost sure I had seen that done before, but now I'm trying it and seeing the same thing you are: tabs don't seem to work on the Syllabus page. I just used the sample code from the canvas style guide to test it.

Update: I was able to make the table show up on the syllabus page. The code provided in the style guide example did not create a table in any page. Instead, I had to change the top line to <div id="styleguide-tabs-demo-regular" class="enhanceable_content tabs"> (note the different class value). Please let me know if this works for you as well.

[stevensons]

Yes--that's why I added a notice on the page to let students know the layout won't be fully functional in a mobile environment. I encourage them to use a computer rather than a device to take the class...but that isn't always what happens!

[Stef_retired]

If you're interested in this topic, be sure to RSVP to the CanvasLIVE event Cracking the Code: HTML for Humans! which is coming up this Monday, November 7, 2016. If you're able to attend, RSVP "Yes"--and if you're interested but your schedule doesn’t allow you to attend in real time, RSVP "No" or "Maybe" to receive any post-event updates.

[nuwjg869]

I'm double booked at this time. Do you know if a recording of the session will be available?

[Stef_retired]

nuwjg869, here's the link to the recording:

This video is currently being processed. Please try again in a few minutes.

   When you RSVP (even if it's a "no" or a "maybe") to the event and post your comments there, you will automatically receive notifications of updates, including a notification that the recording has been posted.

[cholling]

I didn't realize the meaning of marking No or Maybe to Live events -- thanks for this tip stefaniesanders‌ !