Script for OER Commons Authoring Tool Demo

Owned by Justin Obara
Last updated: Apr 16, 2012 by Anastasia CheethamVersion comment
4 min read

Basic Overview Of Demo

  • Use Firefox
  • Visit an OER-in-progress that has some text and headings.
  • Demonstration UIO, Table of Contents.
  • Add a couple of images
  • Add a video

Gotchas: Dos and Don'ts

  • Use Firefox
  • Make your browser window as tall as you can manage.
  • Don't try to use the authoring tool using keyboard only (you will tab right into the second "step," causing a horizontal sliding of the page)
  • In UI Options, don't use the "add table of contents" option in the "Layout and Navigation" tab.
  • In the Table of Contents on the left side, don't use the "Add Subheading" links (the experience is not optimal). Stick to "Add Heading": Click the link (an underlined line will appear in the document) and then just start typing the heading.
  • Do not upload a video from your computer. Instead, use the link provided below to a webm video.
  • Do not try to use the video player scrub bar - it's not working right now (but you can use the transcript to navigate around the video by clicking on a phrase of text).

Preparations

You will be uploading the following image from your computer into the OER, so download it to a convenient location in advance:

Image: http://beyondpenguins.ehe.osu.edu/files/2011/06/web_fjord.jpg

Logistics

Visit http://vp.staging.oercommons.org/authoring/edit/64

Log in using credentials provided.

Show off Learner Options

At any time, click the "Learner Options" button in the upper right hand corner of the window, to bring down the panel of controls.
Adjust the settings, show off the effects.

Show off the Table of Contents (ToC)

The Table of Contents encourages the creation of structured content. This makes it easy for learners to navigate content, searchability, future creations of e-pubs, etc.

Edit headings in either the ToC or the body: note how the counterpart updates automatically.

Hover over an entry in the Table of Contents in the left sidebar, to get a drag affordance. (NB: Note that the affordances are currently not showing up for headings, only subheadings.) Drag headings to reorder the content. Note that dragging left and right promotes and demotes heading levels.

Access for All Metadata

Point out the "AfA Adaptions" section below the table of contents:

  • It has general information about the page, and it can tell that there are no images or videos yet.
  • Hover over any of the icons for details about what they are saying about this OER.
    FYI, in the tooltips, the phrase "Cannot determine..." means that there is no metadata about the particular type of adaptation.

Add An Image With Alt Text

In the section entitled "Glaciers"

  1. position the cursor at the end of a paragraph and press enter to get a new line
  2. click the Media button in the toolbar (second from right, looks like camera + microphone, etc)
  3. Drag the image from your hard-drive onto the "drag & drop" square on the left side of the dialog.
    Click the small green arrow in the bottom right of the dialog
  4. Add a description, such as "A fjord in Norway."; click the small green arrow in the bottom right of the dialog

Point out that AfA metadata about the image has automatically been added to the document. The icon is green indicating that alt text is present. The hover tooltip text will reflect this.

Add An Image Without Alt Text

In the section entitled "Glaciers":

  1. position the cursor at the end of a paragraph where you want an image and press enter to get a new line
  2. click the Media button in the toolbar (second from right, looks like camera + microphone, etc)
  3. in the text field of the dialog, paste the following link:
    http://beyondpenguins.ehe.osu.edu/files/2011/06/web_u_shaped_valley.jpg
    Click the small green arrow in the bottom right of the dialog
  4. DO NOT type a description; click the small green arrow in the bottom right of the dialog

Point out that AfA metadata about the image has again automatically been added to the document. The icon is now orange, since some of the images don't have alt text.

Add A Video

At the very bottom of the document, create an empty new-line, then:

  1. position the cursor at the end of the text paragraph and press enter to get a new line
  2. click the Media button in the toolbar (second from right, looks like camera + microphone, etc)
  3. in the text field of the dialog, paste the following link:
    http://build.fluidproject.org/videodemo/videoPlayer/demos/videos/PolarMammalAdaptations/PolarMammalAdaptations.webm
    Click the small green arrow in the bottom right of the dialog
  4. Verify that the proposed caption text is correct, and click the small green arrow in the bottom right of the dialog
    • Note that there is no prompt for caption text at the moment, you will just see an empty text box. Fill it in and click the green arrow.

Point out that AfA metadata about the video has automatically been added to the document, and the sidebar is now reflecting that.

The video has both English and French captions, both of which can be shown in the Transcripts pane. The transcript highlights the current text as the video plays. The transcript can be used to navigate directly to a spot in the video by clicking on the text.

Show off the UI Options Media Panel

  1. Pull down the "Learner Options" tab at the top of the window.
  2. Click on the "Audio + Video" tab a the top
  3. Show how selecting any of the checkboxes automatically update the video you just embedded.

Show off Amara (Universal Subtitles) integration

  1. Hover on the edit subtitles box above the video player
  2. Note that:
    • the drop-down is populated with data from Amara
    • clicking on the 'add subtitles' link will take you to their page where you can use their tool to create subtitles
    • if anyone else adds or fixes subtitles, they will be available when the learner is watching the video

Show Off Preview Mode

Click the "Preview" button under the OER title in the upper left corner.