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

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.

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

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 version="1.0" encoding="UTF-8"?>
<course>
    <setup>
        <lesson>PSAS350 - Chapter Three</lesson>
        <length />
        <instructor>Demo</instructor>
        <slideImgFormat>jpg</slideImgFormat>
        <accent />
    </setup>
	
    <!-- instructor or lesson information -->
    <profile>
        <![CDATA[<p>Oh, hello! Hey! Hi! This is a demo of the Storyboard Player (SBP). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut purus augue.</p>]]>
    </profile>
	
    <!-- topic list -->
    <topic src="image:slide01" title="Image only">
        <quiz />
        <note>
            <![CDATA[<h1>Demoing Storybook Plus. (Headline 1)</h1><p>Lorem <strong>ipsum</strong> dolor sit <em>amet</em>, consectetur <strong><em>adipiscing</em></strong> elit. Etiam nisi felis, gravida imperdiet eleifend nec, hendrerit non sapien. <a href="#">Vestibulum</a> quis tortor purus. Morbi sagittis placerat enim adipiscing tempor. Aenean vestibulum ornare elit, sed ultrices urna iaculis a.</p><h2>Headline 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi felis, gravida imperdiet eleifend nec, hendrerit non sapien. Vestibulum quis tortor purus. Morbi sagittis placerat enim adipiscing tempor. Aenean vestibulum ornare elit, sed ultrices urna iaculis a.</p><h3>Headline 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi felis, gravida imperdiet eleifend nec, hendrerit non sapien. Vestibulum quis tortor purus. Morbi sagittis placerat enim adipiscing tempor. Aenean vestibulum ornare elit, sed ultrices urna iaculis a.</p>]]>
        </note>
    </topic>
    
    <topic src="video:manOfSteel" title="video from the asset folder" break="y">
        <quiz />
        <note>
            <![CDATA[<p>This slide contain a video.</p>]]>
        </note>
    </topic>
    
    <topic src="quiz" title="QUIZ: Fill-in-the-blank">
        <quiz type="fib">
            <question>_____ enables the operating system to automatically detect newly installed hardware.</question>
            <choice />
            <answer>PnP|Plug and Play</answer>
            <wrongFeedback>What? Wrong! Please go over the presentation again.</wrongFeedback>
            <correctFeedback>Ding! Ding! Ding! You're correct! Good job!</correctFeedback>
        </quiz>
        <note />
    </topic>
    
    <topic src="swf:animations" title="Flash animation">
        <quiz />
        <note>
            <![CDATA[<p>This slide contains a Flash animation.</p>]]>
        </note>
    </topic>
    
    <topic src="quiz" title="QUIZ: Short answer">
        <quiz type="sa">
            <question>Describe Garfield.</question>
            <choice />
            <answer>You are on the right path if you mention the words "cat" and "cute" in your answer.</answer>
            <wrongFeedback />
            <correctFeedback />
        </quiz>
        <note />
    </topic>
    
    <topic src="image-audio:slide04" title="Image and audio">
        <quiz />
        <note>
            <![CDATA[<p>This slide contains an image and a audio.</p>]]>
        </note>
    </topic>
    
    <topic src="quiz" title="QUIZ: True or False">
        <quiz type="t/f">
            <question>It is wise to stay home on snow day.</question>
            <choice />
            <answer>true</answer>
            <wrongFeedback>You must love snow and shoveling.</wrongFeedback>
            <correctFeedback>Right, your safety comes first.</correctFeedback>
        </quiz>
        <note />
    </topic>
    
    <topic src="swf:interactive" title="Interactive Flash piece">
        <quiz />
        <note>
            <![CDATA[<p>This slide contains a Flash interactive object.</p>]]>
        </note>
    </topic>
    
    <topic src="youtube:UaWN7gObv-c" title="Embedded YouTube Video">
        <quiz />
        <note>
            <![CDATA[<p>This slide contains an embedded YouTube video. <a href="https://www.youtube.com/embed/UaWN7gObv-c?autoplay=1&rel=0" target="_blank">YouTube video</a></p>]]>
        </note>
    </topic>
    
    <topic src="image:slide10" title="Image only with link">
        <quiz />
        <note>
            <![CDATA[<p>Another definition from <a href="http://en.wiktionary.org/wiki/discrete_variable" target="_blank">http://en.wiktionary.org/wiki/discrete_variable</a></p>]]>
        </note>
    </topic>
    
    <topic src="quiz" title="QUIZ: Multiple choice">
        <quiz type="mc">
            <question>What enables the operating system to automatically detect newly installed hardware?</question>
            <choice>ReadyBoost|PnP|Hyper-V|AutoConnect</choice>
            <answer>PnP</answer>
            <wrongFeedback>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.</wrongFeedback>
            <correctFeedback>Right on! PnP or plug-and-play is awesome.</correctFeedback>
        </quiz>
        <note />
    </topic>
    
    <topic src="image:slide08" title="A really really really long long long title which cannot fit into one line">
        <quiz />
        <note>
            <![CDATA[<p>This slide have a very long title.</p>]]>
        </note>
    </topic>
    
    <topic src="quiz" title="QUIZ: True or False">
        <quiz type="t/f">
            <question>Dinosaurs make good pets.</question>
            <choice />
            <answer>false</answer>
            <wrongFeedback>Dinosaurs are gigantic. They no longer exist, but if you like bones...</wrongFeedback>
            <correctFeedback>Yep. You do not want them as pets. Imagine what you need to do to clean up after them. Yuck!</correctFeedback>
        </quiz>
        <note />
    </topic>
	
</course>

XML Nodes Breakdown

XML Declaration

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

<?XML version="1.0" encoding="UTF-8"?>

Opening Course Node

All nodes should be nested inside the course node.

<course>

Setup Node

<setup>
    <lesson>PSAS350 - Chapter Three</lesson>
    <length />
    <instructor>Demo</instructor>
    <slideImgFormat>jpg</slideImgFormat>
    <accent />
</setup>

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.

Profile Node

<profile>
    <![CDATA[<p>Oh, hello! Hey! Hi! This is a demo of the Storyboard Plus Player (SBPP). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut purus augue.</p>]]>
</profile>

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 src="video:manOfSteel" title="video from the asset folder" break="y">
    <quiz />
    <note>
        <![CDATA[<p>This slide contain a video.</p>]]>
    </note>
</topic>

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[ ... ]]>.

Image Only

<topic src="image:slide01" title="Image only">
    <quiz />
    <note>
        <![CDATA[<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi felis, gravida imperdiet eleifend nec, hendrerit non sapien. Vestibulum quis tortor purus. Morbi sagittis placerat enim adipiscing tempor. Aenean vestibulum ornare elit, sed ultrices urna iaculis a.</p>]]>
    </note>
</topic>

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

<topic src="image-audio:slide04" title="Image and audio">
    <quiz />
    <note>
        <![CDATA[<p>This slide contains an image and a audio.</p>]]>
    </note>
</topic>

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

<topic src="video:manOfSteel" title="Video">
    <quiz />
    <note>
        <![CDATA[<p>This slide contain a video.</p>]]>
    </note>
</topic>

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.

Video from Third-Party Websites

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

<topic src="youtube:UaWN7gObv-c" title="Embedded YouTube Video">
    <quiz />
    <note>
    	<![CDATA[<p>This slide contains an embedded YouTube video. <a href="https://www.youtube.com/embed/UaWN7gObv-c?autoplay=1&rel=0" target="_blank">YouTube video</a></p>]]>
    </note>
</topic>

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

<topic src="swf:interactive" title="Interactive Flash piece">
    <quiz />
    <note>
        <![CDATA[<p>This slide contains a Flash interactive object.</p>]]>
    </note>
</topic>

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

<topic src="quiz" title="QUIZ: True or False">
    <quiz type="t/f">
        <question>It is wise to stay home on snow day.</question>
        <choice />
        <answer>true</answer>
        <wrongFeedback>You must love snow and shoveling.</wrongFeedback>
        <correctFeedback>Right, your safety comes first.</correctFeedback>
    </quiz>
    <note />
</topic>

Fill-in-the-Blank

<topic src="quiz" title="QUIZ: Fill-in-the-blank">
    <quiz type="fib">
        <question>_____ enables the operating system to automatically detect newly installed hardware.</question>
        <choice />
        <answer>PnP|Plug and Play</answer>
        <wrongFeedback>What? Wrong! Please go over the presentation again.</wrongFeedback>
        <correctFeedback>Ding! Ding! Ding! You're correct! Good job!</correctFeedback>
    </quiz>
    <note />
</topic>

Image in a Question

<topic src="quiz" title="This question has an image.">
    <quiz type="t/f">
        <question img="foo.jpg">This question has an image.</question>
        <choice />
        <answer>true</answer>
        <wrongFeedback />
        <correctFeedback />
    </quiz>
    <note />
</topic>

Audio in a Question

<topic src="quiz" title="This question has an audio.">
    <quiz type="t/f">
        <question audio="foo">This question has an audio.</question>
        <choice />
        <answer>true</answer>
        <wrongFeedback />
        <correctFeedback />
    </quiz>
    <note />
</topic>

Image and Audio in a Question

<topic src="quiz" title="This question has an image and an audio.">
    <quiz type="t/f">
        <question img="foo.jpg" audio="foo">This question has an image and an audio.</question>
        <choice />
        <answer>true</answer>
        <wrongFeedback />
        <correctFeedback />
    </quiz>
    <note />
</topic>

Short Answer

<topic src="quiz" title="QUIZ: Short answer">
    <quiz type="sa">
        <question>Describe Garfield.</question>
        <choice />
        <answer>You are on the right path if you mention the words "cat" and "cute" in your answer.</answer>
        <wrongFeedback />
        <correctFeedback />
    </quiz>
    <note />
</topic>

Multiple Choice

<topic src="quiz" title="QUIZ: Multiple choice">
    <quiz type="mc">
        <question>What enables the operating system to automatically detect newly installed hardware?</question>
        <choice>ReadyBoost|PnP|Hyper-V|AutoConnect</choice>
        <answer>PnP</answer>
        <wrongFeedback>ReadyBoost is technology that instantly add RAM to your PC.|PnP stands for plug-and-play.|Hyper-V is a server technology for virtualization.|AutoConnect is made up.</wrongFeedback>
        <correctFeedback>Right on! PnP or plug-and-play is awesome.</correctFeedback>
    </quiz>
    <note />
</topic>

Multiple-Choice with Multiple-Answers

<topic src="quiz" title="Multiple answers">
    <quiz type="mc">
        <question>What are the colors of the American flag?</question>
        <choice>Red|Green|Blue|White|Yellow|Gold</choice>
        <answer>Red|Blue|White</answer>
        <wrongFeedback>Uh-oh!</wrongFeedback>
        <correctFeedback><![CDATA["The colors,” Thomson said at the time, “are those used in the flag of the United States of America. White signifies purity and innocence. Red, hardiness & valour, and Blue… signifies vigilance, perseverance & justice.”]]></correctFeedback>
    </quiz>
    <note />
</topic>

Multiple-Choice with Images as Answer Choices

<topic src="quiz" title="Image Answer Choices">
    <quiz type="mc">
        <question><![CDATA[Which pokémon is Ethan's favorite?<small>Ethan is a pokémon fan ... sort of.</small>]]></question>
        <choice useImg="true">pikachu.gif|mewtwo.gif|mew.gif|rattata.gif|krabby.gif|rayquaza.gif</choice>
        <answer>mewtwo.gif</answer>
        <wrongFeedback><![CDATA[Ethan's is going to blast you!]]></wrongFeedback>
        <correctFeedback><![CDATA[Ethan thinks you are stalking him...]]></correctFeedback>
    </quiz>
    <note />
</topic>

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.

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 September 22, 2022 at 12:39:57 pm CDT. Last modified on September 22, 2022 at 12:49:33 pm CDT.