Skip navigation
All Places > Instructional Designers > Blog > 2015 > April
2015

Instructional Designers

April 2015 Previous month Next month

OneDrive is Microsoft's answer to Google Drive and is tightly integrated in Office 2013. This makes it super easy to save files in Word and PowerPoint directly to your OneDrive account. From OneDrive you can embed documents into Canvas. I like this option better than Google Drive because it is much easier to update the documents directly in Word and PowerPoint. Once the file is updated in OneDrive the embedded the files in Canvas pages are updated.

What You Will Need

You will need a free personal Microsoft account for OneDrive and Office 2013. If your institution is a subscriber to Office 365, you can also use your institutional account. It is best to use Office 2013, but this can also be done in Office 2010 or Office for Macs. The integration is just not as tight as it is in Office 2013.

Connecting Your Microsoft Account with Office 2013

First you must login to your Microsoft account in Office so it is easy to save documents to OneDrive. In any Office 2013 program click the File tab to display the Backstage. On the left navigation click Account. In the middle pane click Login to login to your Microsoft account. Once logged in your avatar will display in the upper right corner of the Office programs. Once you have connected your Microsoft account in first Office program, you will not have to repeat this step in all the other Office programs. Now you will be able to open and save documents in OneDrive directly in the all the Office programs.

Steps to Save and Embed Documents in Canvas

Create a document and go to File > Save As. Select the OneDrive option. Note: If your institution is an Office365 subscriber, you may need to use the Add a Place option. Check with your IT people to see what is required.

save-to-onedrive.png

Next go to OneDrive in the web browser and login. Locate the file and check the box next to the document. Click Embed.

embed1.png

A pop-up window will appear. click Generate HTML. A preview will display with box of the code. Copy the code and click Done.

embed.png

In Canvas create a page or edit a page. On the rich content editor toolbar click HTML editor and paste the code in the location you want. The width and height values can be changed to make the preview window larger if desired. Click Save when done.

paste-code-rce.png

Students will see the preview window and there are options in lower right for printing and downloading.

preview-documents.png

When you need to update the document just open it in the Office MS program it was created in and make the desired changes. Save to the OneDrive. If you don't change name of the file name, the embedded document will be updated on the Canvas page. You can tell when documents are synced with OneDrive in the Office programs by the green circle icon over the Save icon.

sync.png

If you create a document in Google Drive, you can click on File > Publish to the Web > Publish to generate a link or embed code. The embed code can be used anywhere in Canvas where the Rich Content Editor is available to you (switching views to the HTML Editor). Whatever changes you make in your Google Docs will automatically update in your Canvas course(s).

 

I've created a sample Google Doc. This is how the embed code for this document appears in Google Drive.

Google-publish-embed-code.png

Notice that the embed code Google generates for the document does not incorporate width and height parameters. If you use this code "as is," the Canvas Rich Text Editor will automatically assign width and height parameters to the code, and your code will now look like this:

Google-publish-embed-code-in-Canvas-HTML-editor.png

--but for almost every practical purpose, those parameters are too small. This is what this HTML generates on the finished Canvas page.

Google-publish-embed-code-pre-edit.png

So after harvesting the code from Google, and before completing the edits to your Canvas page, you can add width and height parameters in the HTML view of the Rich Content Editor. I changed the width parameter to "100%" and the height parameter to "600" to create a page that looks like this:

Google-published-view-post-edit.png

Some users find that the easiest way to embed a Google Doc is to ignore the embed link from Google entirely. All a user needs to do is to obtain the share link (accessed by clicking in the upper right hand corner of the Google Doc view) to add an External URL to a Module. Paste the share link in and you'll have an editable Google Doc as long as the permissions you've set on the doc allow for it.

 

If you want to embed the link in a page or an assignment, use the following code in the HTML Editor:

 

<iframe src="SHARE LINK URL GOES HERE" width="100%" height="600"></iframe>

 

Use cases:

 

  • Course content: A few years ago I was working with a department chair to co-design two courses that would be taught in over a hundred online, hybrid/blended, and face-to-face sections. He wanted to ensure that the course content across all of those sections was tightly controlled. We decided to use Google Docs to create the content that would be delivered in Canvas. Only the department chair has privileges for the content in Google Drive. We created courses that embedded dozens of Google Docs in Canvas Pages, Assignments, and Modules. The department chair assumes ongoing responsibility for notifying his faculty members if and when he makes changes to the master content.
  • Create an editable spreadsheet with the setting, "anyone with link" can edit, then add the share link of the Google sheet to a module as a URL item. This brings up the Google sheet inside of Canvas, in a frame as part of the module progression. If the same spreadsheet is embedded into a Canvas Page or Assignment using the HTML Editor view of the Rich Content Editor, even if the sheet is shared so that "anyone with link" can edit, students will only be able to view--not edit--the data. The Canvas Guide walks through the steps here: How do I create a hyperlink or embed a file from Google Drive into the Rich Content Editor?
  • Create your syllabus as a Google Doc, paste its published HTML code into the Edit Syllabus Description HTML Editor view of the Rich Content Editor, and then if you ever make adjustments to that syllabus in Google Docs (changing dates, adding or subtracting readings, adjusting your grading scale) these changes will automatically update within Canvas.
  • Post a collaborative document in Canvas--for example, a class-built glossary on a shared Google Doc. Paste its code into a content page and as students update the Doc, the page will update.
  • Use Google Forms to generate a survey. I recently created a simple, two-question form that polled my course participants on their office hour preferences. The first question in the form had them select their names from a drop-down I populated in the form; the second question gave them a list of time slots from which to choose. You can send the form to your students as a link, or incorporate it into a module as a URL, or harvest the embed code and embed it in a page--whichever presentation modality works best with your course delivery.
  • Suggest your own use cases!

 

I'm including links to the Google Docs editors Help Center and the Publish a document, spreadsheet, presentation, or drawing section of that help center for ready reference.

 

[Note: Need help with HTML? Read Susan Nugent's awesome blog, Rich Content Editor HTML Cheatsheet]

 

Thanks to Chris Long, Inactive User, Matt Nagel, Aaron Bannasch, and Sean Raleigh, among others, for their generous contributions to the body of knowledge from which I derived the resources for this blog. The terms and links used in this document are believed to be accurate as of April 23, 2015; of course, because of the dynamic nature of Canvas, terms can and will change, and I am counting upon the sharp eyes of my fellow community members to point out any anomalies as they transpire. Thanks to everyone for your contributions that make this a better resource.

FlashFileIDNumber.jpgUPDATED ON 6/9/2015 DUE TO BETTER FILE BROWSING TURNED ON FOR ALL CANVAS USERS AS OF 6/6/2015.

 

In order to embed a Flash file (*.swf) in a Canvas course, you'll need to paste the following line of code into the WYSIWYG editor (the HTML side) of a Canvas course page and change some of the values based on the steps below.

 

<p><iframe src="/courses/[COURSEID]/files/[FILEID]/preview" width="###" height="###"></iframe></p>

 

  1. Upload the Flash (*.swf) file to the root folder of Files in your Canvas course.
  2. After the file has been uploaded, hover your mouse over the file name, and take note of file ID number in the URL (see example screen shot).
  3. In the iframe code, replace [COURSEID] with the Course ID from your own course.  (Example: http://SomeSchoolName.instructure.com/courses/12345)
  4. In the iframe code, replace [FILEID] with the number listed in the URL of the Flash (*.swf) file (from Step 2).  In this case, the economicsBanner2.swf file has the following value: [FILEID] = 516713.
  5. Change the width and height of your Flash movie to match the dimensions of your Flash file.

 

The resulting code would look similar to this:

 

<p><iframe src="/courses/12345/files/516713/preview" width="600" height="300"></iframe></p>

The course home page is a critical navigation waypoint for students. As course designers, we can choose from numerous style ideas to make the course home page inviting and intuitive for our students.

 

This is a stripped-down version of a course home page I'm currently using.

 

Buttons-for-home-page.png

I created this home page using a table, and I used the "btn btn-info btn-large" attribute for the buttons.

 

The functionality of this home page style is compatible with mobile devices, but the buttons themselves won't appear in the app. This is how the same home page looks in the Canvas App on an iPad.

 

Home-page-code-in-Canvas-iOS-app-resized.png

 

The image below shows examples of other button styles.

 

button-codes.png

The button code is inherently versatile. For example, using this code:

 

<p><a class="btn-large btn-block btn btn-danger btn" style="width: 100%;" title="Click here to view the Course Announcements" href="/courses/[insert-course-number]/announcements" target="_blank"><strong>Course Announcements</strong></a></p>

 

...I can create a clickable button across the top of my home page to direct students to announcements:
Button-for-course-announcements.png

At many schools, teachers are tasked with creating their courses and course home pages. I'm currently training a cohort of teachers, and more often than not, when they create their syllabus page, they simply insert a link to their own syllabus file at the top of the page. The result is neither pretty nor inviting--so I've been teaching them the method of having the syllabus file auto-open for inline preview.

 

How do you create your course home pages? Do you have a standard template that is used across all of the courses at your institution? Do instructional designers create the pages, or are your teachers given instructions on how to create their own, and what they must include on them?

 

[Note: Need help with HTML? Read Susan Nugent's awesome blog, Rich Content Editor HTML Cheatsheet]

It seems that my original post has disappeared with the launch of the much more awesome community site, so if it is somewhere already my apologies for the double post.

 

One of the things my team at Rowan University is getting into is Analytics, not necessarily to solve problems but to identify patterns to generate questions about improving course design. Devlin Daley once said when talking about Analytics "Good Analytics make good questions, not good answers," and that has always stuck with me. By looking at course analytics you can come up with all kinds of questions and possibilities to improve the design of the course.

 

At Rowan Online (I promise this isn't a plug), we're using both Canvas and Kaltura (media platform) to deliver content to students. Both provide Analytics and they're both proving to be very helpful when discussing course design to faculty. Often as a designer I find I have to sort of pitch my case to an instructor who has been doing things in a face to face environment for a long time. They don't necessarily know the online space is a different environment. By showing them some analytical patterns you can really easily help them with come evidence based course design.

 

Here is a short talk I did with my colleague at one of our open houses. This was a dry run for a conference presentation at Drexel University, so my apologies if we spoke too fast on some of the info points.

 

Rowan Online Open House - Session 1 - March 2015

 

The TL;DW version of this:

 

1. If your LMS has Analytics take a look!

2. Gather up your data

3. Start to look at patterns.

4. Generate some questions (Am I comfortable with {Insert Analytic} showing what is is showing? Can I improve the pattern by doing X? What are other courses showing

 

Some of the things we saw already

1. Students watch about 10 minutes of a lecture video on average (Might be an indicator to faculty that shorter lectures might be more effective).

2. At our institution Discussions is the most popular area to be in outside of Modules

3. Grades was all the way down at 8 (which I found very very shocking).

 

Anyway, just thought I'd pass it along. 

Filter Blog

By date: By tag: