cancel
Showing results for 
Search instead for 
Did you mean: 

Organizing Media Files with Tabs and Tables

stevensons
Learner II
11 8 3,171

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):

MusicalTrackScreenshot-AudioIcon.JPG

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.

MusicalTrackScreenshot-PlaybackBar.JPG

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:

MusicalTracksScreenshot.JPG

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!

8 Comments
scain
Surveyor

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
Surveyor

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
Surveyor

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. Smiley Happy

stevensons
Learner II

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!

Stefanie
Community Team
Community Team

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
Surveyor

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

Stefanie
Community Team
Community Team

nuwjg869, here's the link to the recording:

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)
   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
Adventurer III

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