Outsmarting the LMS: Creating Drag and Drop Folders

Update! Since posting this several months ago, Google has disabled embedding a Google Site. It's nice to know my Technology Ninja skills are being noticed (which is the exact opposite of what a ninja actually wants to do). I will leave this tutorial in case Google decides to start playing nice again.

Software developers must have a really distorted view of how professors use their time. Maybe they think we teach a few times per week and spend the rest of our time playing golf or drinking coffee while we complain about students. Maybe they think we enjoy spending hours each semester staring at progress bars while our files upload. Who knows. What I do know is that over the last 10+ years in higher education, I have developed a love/hate relationship with every LMS I have been forced to use. I love them because it is the best way to communicate with my students. When they want to know something, this is where they look first. I can post grades quickly, give feedback on their work, and create a safe place to share information.

I also hate the LMS because most of them are outdated, not very attractive (though that is not really such a big deal), and require redundant work from semester to semester. My goal the last few years has been to outsmart the LMS and find ways to work efficiently despite its limitations. I will spread these ideas out over several posts, which may take me several weeks to work through. The first topic I would like to address is creating drag-n-drop folders for documents and other media.

Step One: Creating Folders in Google Drive

The first step is to download and install the Google Drive desktop app. This is a pretty easy step, and the program runs unnoticeably on your computer. Once you have this installed, it will sync your Google Drive from the cloud to your computer. Anything you create from the computer (folders, files, etc.) will also be instantly synced to the cloud. I like to stay organized, so I created folders for each class, and then created folders within each class folder for the different things I would be sharing with students. This includes assigned readings, PPT files, assignment descriptions, etc. I already had some of my files ready for the new semester, so I copied them into the appropriate folders.

Step Two: Embed Folders into Google Sites

This is the step that might be a deal breaker for some people. As you may know, you can share a Google Drive folder with anyone with the link, which is a pretty handy feature when you want to share a bunch of stuff that might exceed the e-mail attachment limit. Unfortunately, Google has blocked the folder view in Drive from being embedded using the iframe tag in HTML. If you do this, you will be met with a blank box in the middle of your webpage. The only way to embed dynamic content from a Google Drive folder is to embed it in a Google Sites page. Sites has a widget for embedding an entire folder. So, for every folder you want to share with students, you will have to create a webpage for that folder. In order to keep myself organized, I structured the Google Site exactly like the folders in Google Drive. For example, I created a page for each class, then I made a page under that page for each folder I want to share. This took some time, but I should only have to do this once. I can always make more pages and folders, but the basic structure is there.

Step Three: Embed the Google Sites Pages

The final step is pretty straight forward. You do not need to know a lot of HTML to embed the Google Sites pages into your LMS. My institution uses Pearson LearningStudio, which allows me to directly edit the HTML. First, I created a tab, or Unit as they call it, for each folder. I then used the following code to embed the webpage on that tab:

<iframe src="http://www.somepage.com" width="100%" height="1000"></iframe>

You may need to adjust the settings of your Google Sites page so the embedded folder will stand out, but that is an easy fix. It should look something like this:

The beauty of this system is two-fold. First, any time I want to add or delete files from a folder, I just do it from the Google Drive folder on my computer and the changes are immediately synced anywhere the folder is embedded. I can also edit files and the changes are immediately synced. Second, this code is preserved anytime I copy a course to a new semester. So, I only have to do this once and all of my content follows.

What hacks have you come up with to make the LMS easier to deal with? I would love to hear your ideas.