Storybook+ v2 – Technical Docs / Specifications

version 2.8.0

The components of the player, the file structure, the XML file, the setups, and the bug reporting tools will be explained in detail in this documentation.

Interface

Storybook Plus Interface

  1. Lesson title – the title of the lesson.
  2. Instructor’s name & info button – click the instructor’s name or the info button to see the instructor’s profile and any additional information.
  3. Table of Contents – this area lists all the topics in the lesson.
  4. Content area – video player, audio player, interactive object, quiz, and image will be placed in this area.
  5. Section break bar – indicates the beginning of a new section.
  6. Notes area – this area will contain notes about the current slide. If no notes are available, the program logo will be displayed instead.
  7. Previous button – go to previous slide.
  8. Next button – go to next slide.
  9. Slide indicator – displays the current slide number out of total number of slides.
  10. Expand button – click to expand slide.
  11. File download buttons – click to download the MP3 file, transcript file, or supplement file if available.

Storybook Plus Interface Expanded

  1. Notes toggle button – click to slide up or down notes area. This button only shows up if the are notes with the current slide.
  2. Table of Contents toggle button – click to slide table of contents in and out.
  3. Contract button – click to contract slide.

File Structure

Storybook Plus File Structure

The SOURCES folder, which contains all of the back-end scripts, is centralized. Thus no need to worry about where it should go in the root directory. An HTML file or the index.html file is required since it will be embedded in D2L via an iFrame. This index.html file should be in the directory’s root level. Also in the directory root level, a folder named assets is required. In the assets folder, one folder, four optional folders, an XML file, which is named topic.xml, a splash screen image, and a photo of the instructor are required. One of the folder inside the assets folder must be named slides. The slides folder contains all the slide images. The other four folders must be named video, audio, img, and swf. These four folders are optional, but they will be needed when the lesson requires them. For example, if the lesson contains audio, an audio folder must be created to hold those audio files.

Breakdown:

  • The HTML file at the directory root level must be named index.html. This file should not be modified.
  • slides folder contains all of the slide images. This folder is required.
  • audio folder contains all of the audio filesand their caption file in WebVTT (.vtt) format. This folder is needed when audio is needed. Otherwise, it is optional.
  • video folder contains all of the video files and their caption file in WebVTT (.vtt) format. This folder is needed when video is needed. Otherwise, it is optional.
  • img folder contains all of the images used in self-assessment topics. This folder is needed when images are needed. Otherwise, it is optional.
  • swf folder contains all of the interactive object files (most likely Flash). This folder is needed when interactive objects are needed. Otherwise, it is optional.
  • The photo of the instructor must be named pic.jpg.
  • The splash screen must be named splash.jpg.
  • All files except the HTML file should be inside the assets folder.

The file structure follows the UWEX multimedia team’s standards and naming conventions. The file and folder names should always be in lowercase letters with no spaces.

Download the Starter Kit.


XML File

The following is how the XML file should be set up.

XML Nodes Breakdown

XML Declaration

This should be the first line of code and is required. No changes should be made to it.

Opening Course Node

All nodes should be nested inside the course node.

Setup Node

setup node has the following nested nodes: lesson, length, instructor, slideImgFormat, and accent. All of them are required.

  • lesson – holds the lesson title.
  • length – holds the approximated length or duration of the presentation. If the length is not provided, leave the node as <length />.
  • instructor – holds the instructor’s name.
  • slideImgFormat – holds the format of the slide image file format. The default image file format is png. If that is the case, this node can be left as <slideImgFormat />.
  • accent – holds the hex value of the splash screen play button color. The default value is #006dcc.

note node is deprecated in version 2.7.0. The player no longer need it to determine the availability of notes. If the current slide does not have notes, the program logo will be displayed instead.

The nodes with no value specified may be written as, for example, <slideImgFormat />

Profile Node

profile node should be nested inside the course node right after the setup, but not inside the setup node. The profile contains the instructor’s profile or lesson information. The profile or the information must be wrapped inside the <![CDATA[ ... ]]>.
Topic Nodes

Topic nodes can be six types:

  1. image only
  2. image and audio
  3. video
  4. video from a third-party, such as YouTube, Vimeo, and Kaltura
  5. Flash interactive (SWF) objects
  6. quiz / self-assessment

Each topic type has the same structure but different attribute values. The topic attributes are src, title, and break. In addition, each topic node has the following nested nodes: quiz and note.

  • src attribute holds the type of the topic (i.e., image, image and audio, video, etc.) and the file name without the file extension.
  • title attribute holds the title of the current topic. This title will be used in the table of contents of the SB+ player.
  • break attribute holds the value of y or yes. If specified, it indicates this topic is the beginning of a new section, and an section break will be displayed right above this topic in the table of contents.
  • quiz node is for quiz purposes. If this topic is not a quiz question, this node must be empty and left as-is. Further explanation of this quiz node will be given in a later section of this documentation.
  • note node is for additional note purposes about the current topic. Any supplemental information about the current topic can be documented here with the use of HTML. The values in this node must be wrapped inside a <![CDATA[ ... ]]>.

Quiz / self-assessment topic should not have notes and will not displayed if it does.

Image Only

The XML code above specifies an image-only topic. To specify an image-only topic:

  1. The src attribute value is set as image:slide01.
    • image: indicates that this is an image. image must be followed by a :.
    • slide01, in this case, is the file name of the image without the file extension.
  2. The title attribute value is whatever the title of the topic is. In this case, it is Image only.
  3. The quiz node should be empty and left as-is (i.e., <quiz />).
  4. The note node holds any supplemental information.

Image and Audio

The XML code above specifies an image and audio topic. To specify an image and audio topic:

  1. The src attribute value is set as image-audio:slide04.
    • image-audio: indicates that this topic contains an image and audio. image-audio must be followed by a :.
    • slide04, in the example, is the file name of the image and the audio without the file extensions. The name of the image and the audio file must match.
  2. The title attribute value is whatever the title of the topic is. In this case, it is Image and audio.
  3. The quiz node should be empty and left as-is (i.e., <quiz />).
  4. The note node holds any supplemental information.

Video

The XML code above specifies a video topic. To specify a video topic:

  1. The src attribute value is set as video:manOfSteel.
    • video: indicates that this topic contains a video. video must be followed by a :.
    • manOfSteel, in this case, is the file name of the video without the file extensions.
  2. The title attribute value is whatever the title of the topic is. In this case, it is Video (from media web server).
  3. The quiz node should be empty and left as-is (i.e., <quiz />).
  4. The note node holds any supplemental information.

Do not forget to put the video file inside the video folder, which is inside the assets folder.

Video from Third-Party Websites

Supported third-party websites are YouTube, Vimeo, and Kaltura.

The XML code above specifies an embedded video topic from the YouTube website. To specify an embedded YouTube video topic:

  1. The src attribute value is set as youtube:UaWN7gObv-c.
    • youtube: indicates that this topic contains a video embedded from YouTube. youtube must be followed by a :.
    • UaWN7gObv-c, in this case, is the unique video ID that YouTube gave to every video hosted that it hosts.
  2. The title attribute value is whatever the title of the topic is. In this case, it is Embedded YouTube Video.
  3. The quiz node should be empty and left as-is (i.e., <quiz />).
  4. The note node holds any supplemental information.

As with YouTube, to embed a video from Vimeo or Kaltura. replace the youtube: with vimeo: or kaltura: respectively. Vimeo and Kaltura provide each video with an unique video ID as well.

Flash Interactive Objects

The XML code above specifies an embedded Flash interactive or animation object. To specify a Flash interactive or animation object topic:

  1. The src attribute value is set as swf:interactive.
    • swf: indicates that this topic contains a Flash object. swf must be followed by a :.
    • interactive, in this case, is the file name of the Flash object without the file extension.
  2. The title attribute value is whatever the title of the topic is. In this case, it is Interactive Flash piece.
  3. The quiz node should be empty and left as-is (i.e., <quiz />).
  4. The note node holds any supplemental information.

Quiz / Self-Assessment

There are five types of questions:

  1. t/f — true or false
  2. fib — fill-in-the-blank
  3. sa — short answer
  4. mc — multiple choice or multiple-choice with multiple-answers

A quiz topic uses the nested quiz node with one attribute and five inner nodes. The attribute of the quiz node is type, which indicates the type of the question (i.e., true or false, short answers, multiple choice, etc.).

The five nested nodes are:

  • question, which holds the question.
    • To use an image in the question, specify the img attribute with the image file name and extension.
    • To use an audio in the question, specify the audio attribute with the audio file name.
    • To use both image and audio in the question, specify both img and audio attributes.
    • To add additional small texts under the question wrapped the whole question in <![CDATA[...]]> and use the <small> HTML element to wrap the additional texts.
  • choice, which holds the multiple-choice answer selections. This node is used only by multiple-choice questions. If the question is not multiple choice, it can be left as <choice />.
    • To define multiple-choice answer selections, use the pipe ( | ) character to separate the choices. For example, red|green|blue.
    • To use images as answer selections, specify the useImg attribute with the value of true. The texts should be the image file name and extension and separated with the use of the pipe ( | ) character.
  • answer, which holds the correct answer to the question.
    • If the question has multiple correct answers, use the pipe ( | ) character to separate the answers. For example, apple|fruit.
    • If the question is a multiple-choice question with multiple-answers, use the pipe ( | ) character to separate the answers. For example, apple|fruit.
  • wrongFeedback, which holds the unique feedback for the wrong answer.
    • For multiple-choice question, use the pipe ( | ) character to separate each unique feedback for each wrong selection. For example, ReadyBoost is technology that instantly adds RAM to your PC.|PnP stands for plug-and-play.|Hyper-V is a server technology for virtualization.|AutoConnect is made up.
  • correctFeedback, which holds the unique feedback for the right answer.

The pipe ( | ) character is reserved. Do not use this character, unless it is used as a delimiter inside the choice, answer, and wrongFeedback nodes.

The XML codes below specify all examples of the question types. To specify a question topic:

  1. The src attribute value is set as quiz, which indicates that this topic is a question.
  2. The title attribute value is whatever the title of the topic is. In this case, it is QUIZ: True or False.
  3. The quiz node should NOT be empty and must have the type attribute and the following nested question, choice, answer, wrongFeedback, and correctFeedback nodes.
    • question node has the optional img and audio attributes for specifying the use of image and or audio.
    • choice node is only use for multiple-choice questions (with or without multiple-answers). It also has the optional useImg attribute for specifying images as answer choices.
  4. The note node should not holds any supplemental information. Notes will not be displayed.

True or False

Fill-in-the-Blank

Image in a Question

Audio in a Question

Image and Audio in a Question

Short Answer

For a short answer question, leave the wrongFeedback and correctFeedback nodes as <wrongFeedback /> and <correctFeedback /> respectively. There is no right or wrong answer for a short answer question, use the answer node for providing feedback or the answer.

Multiple Choice

Multiple-Choice with Multiple-Answers

Multiple-Choice with Images as Answer Choices

Image as answer choices is only supported for multiple-choice question with or without multiple-answers.

The number of wrong feedbacks must match the number of choices and must be in the same order as the choices specified in the choice node.

You do not have to specify the wrong feedback for the correct selection in the wrongFeedback node. For example, ReadyBoost is technology that instantly adds RAM to your PC.|PnP stands for plug-and-play.|Hyper-V is a server technology for virtualization.|AutoConnect is made up. can be written as ReadyBoost is technology that instantly adds RAM to your PC.||Hyper-V is a server technology for virtualization.|AutoConnect is made up. Notice the use of the two | | characters. These two | | will create an empty string instead.

<![CDATA[...]]> can be used to wrap around contents in any XML nodes that need HTML and special characters.


Set Up (or How to Use) Introduction

Gather all assets and contents – assets such as the PowerPoint slide images, audio, video, the XML file, the splash screen image, the instructor’s photo, etc.

  • The slide images files must be named “slide##“, where ## is the trailing two-digit number.
  • The slide image dimensions should be 900 × 506 pixels.
  • The audio file format must be mp3. The file name and its caption file name must be named the same as the slide image that accompanies it.
  • The video file format must be mp4. The file name and its caption file name must be named the same.
  • The splash screen image dimensions must be 900 × 624 pixels, named “splash”, and be in JPG format.
  • The XML file must be set up the way documented above and named “topic“.
  • The instructor’s photo must be in the dimensions of 200 × 300 pixels, named “pic“, and be in JPG format.
  • The width of images used in self-assessment question cannot be more than 610 pixels.
  • Follow the file structure as documented to correctly set up the files and directories.

Download the starter (HTML & XML) kit.

Do not attempt to modify the index.html file unless it is absolutely necessary.


Bug Reporting

If any bugs are found in this Storybook Plus application, please report them at the oel-mediateam/sbplus Github repository under the “Issues” tab. When reporting a bug, please write the report as detailed and specifically as possible. Note the steps to reproduce the bug and include screen captures if possible.

Published on December 18, 2014 at 11:05:19 am CST. Last modified on May 04, 2018 at 1:41:13 pm CST.