Layouts, Themes and Palettes

Introduction

In LodeStar 7.3 build 25 (published 09-16-19) and later, authors can control the layout and look of their activities.  Currently, layouts, themes and palettes can be chosen for an opened project by selecting Tools > Layouts, Tools > Themes, and Tools > Palettes respectively.

When authors create a new activity with the ActivityMaker Mobile template, the default look and feel is Daylite:

daylite

In this example, the author is creating an interactive story that places the reader in the shoes of a Japanese American who is threatened with internment.  Featured in the screenshot above is the Daylite layout, the Daylite theme, and the Daylite Palette.

The Daylite layout features the navigation buttons, the page numbers and other controls above the activity.  The default table of contents (menu) type is Menu Style 3, which is controlled by a project setting found under Tools > Project Settings.

Let’s transform this default look and feel to ‘Midnight’.

Our objective is to transform the layout above to the following:

midnight.png

Notice a few changes.  The menu now runs alongside the activity (if the screen width allows it).  The background color is black.  The navigation is at the bottom. The other controls are still at the top.

To effect this change, I did the following:

  1. Select Tools > Layout.  Select Midnight.
  2. Select Tools > Theme.  Select Midnight.
  3. Select Tools > Palette.  Select Midnight.

The Midnight layout places the navigation at the bottom.  The bottom edge of the navigation area is rounded.  The top edge of the viewer area is rounded.

Let’s make this change, one step at a time.  First the layout.  Let’s select Midnight.

JustMidnightLayout.png

In the screenshot above we can see that the navigation is now at the bottom.   The theme is still Daylite.  The theme controls the menu color.  If the menu background is light, the text color automatically becomes dark, and visa versa.

Next we will select the Midnight theme.

midnightthemedialog

Notice, the Menu/Resource Button color.  It is set by default to #282828.  That is hexidecimal code for a very dark color.  We can see the color in the color chip to the left.  It is almost black — not fully black.  Black would be #000000.  White is #FFFFFF.  But you don’t need to know the code.  Just observe the color chip.

Next we will select the Midnight palette, which has no effect on the title page pictured in the screenshot.

Select Tools > Palettes and then select Midnight.

 

palette

Hover over the color palette to the right.  The tool tip describes what components the colors affect.  For example, the top color affects panel backgrounds; the lower left affects text fields.

Let’s say that we wanted an orange navigation area instead as pictured below.

midnightwithOrange

To accomplish this, we keep the Midnight Layout, Theme and Palette.  We change some parameters in the theme.

Select  Tools > Themes.  Click on the Advanced button.

advanced

The screenshot above shows the ‘Advanced’ dialog in the Theme Manager.  Click on the little stop gradient indicators (home plates) below the color bar and then pick a color.

Finally, the menu type and the visibility of the accessibility icon, the transcript icon, etc. are controlled by, as mentioned, Tools > Project Settings.

 

 

Advertisements

New Method of Uploading LodeStar Activities to D2L Brightspace

Introduction:

D2L supports a new method of uploading SCORM activities into its system.  LodeStar activities are SCORM objects.

We think the new method potentially presents a huge improvement over the legacy method because it supports reuse of activities across courses, improves the update experience, and gives the instructor much more control over the grade calculation than in the past. But caveat emptor.  We haven’t had much direct experience with this new method. We would welcome your feedback at

supportteam@LodeStarLearning.com

For the legacy method, please view this article.  For the new method, read on.

New Method: Add LodeStar Activity to the Content tool

Inside of LodeStar 7.x do the following:

  1. Open your project, if not already opened. You will find your most recently used project under ‘File’.
  2. Select the Export button. Pay attention to where your zip file will be saved.
  3. Keep the default ‘SCORM 1.3 (Recommended)’ selected.
  4. Fill in the Module, Topic and Author Fields.
  5. Click on ‘Create Export’ button.

Inside of D2L BrightSpace 10.8 or later, do the following:

New Firefox Release Impacts LodeStar Authors

In early 2019, Lodestar released a new previewer. With the new previewer, authors could see precisely what their students were seeing in a browser when the activity was served up by a learning management system (LMS).

The improved previewer eliminated the need to launch a local project manually from, for example,  Firefox.  But some authors got accustomed to previewing projects in Firefox. Firefox, Edge and Internet Explorer were the only browsers that supported a local project accessing local data stored on the hard drive. Of the three, we always recommended Firefox.  Of course, once the project was uploaded to an LMS, students could use any browser to view the project – just as they can now.

With the latest release of Firefox 68.0, developers discontinued Firefox’s ability to access local data.  Given this change, authors must now use the Lodestar built-in previewer. Firefox no longer supports local access to data.

The good news is that authors will find the built-in previewer convenient and an improvement over the past. Lodestar serves up the project to the default browser. Lodestar behaves like a web server, enabling the browser to access the data. The entire experience is a more streamlined experience for the author.

preview

LodeStar behaves like a web server that serves up projects to the browser for preview.

To ensure a trouble-free experience, authors should be aware of what browser is their default browser.  A quick search on the web will provide step by step instructions for the operating system on how to set a specific browser to be the default.  Authors can choose any modern and up-to-date browser.  They should then launch their default browser from the desktop.  If it launches, that means that LodeStar can launch the browser when previewing a project.  If it fails to launch, authors should try re-installing the browser application.

Matching

Matching is an activity that requires students to associate things.   Students may be asked to associate a word with its definition, or a picture with its label.

LodeStar supports ‘matching’ with its Drag and Drop widget (text only) and with the Organizer page type.  This article focuses on Organizer.

Organizer can be simple or complex.  We’ll keep our example simple.

Let’s say our goal is to require students to drag instructional design terms next to their matching definitions.

  1. In the ‘ActivityMaker Mobile’ template, add a new page.  2019-05-04_2003
  2. Change page type to ‘Organizer’ by clicking on the arrow in the Pages Panel.  2019-05-04_2006
  3. Type instructions in the ‘Instructions’ field.  Be concise.  For our example, I will type ‘Drag the terms on the right next to their definitions.’
  4. If you have long definitions, type in a row height of 50 or more.  (Only available in LodeStar 7.3 Build 22 or above.)
  5. Type in a value for the number of points that you are assigning to this activity.
  6. Next to ‘Text’, type the definition.  For our example, I will type ‘An Instructional Design Model’.  Don’t worry if your full definition doesn’t fit in the box.
  7. The definition will be in row 1 and column 1.  To fix the definition in this spot, I will type in ‘1’ for row,  ‘1’ for position, ‘y’ for Pinned., and 200 for Optional Width.  This will fix the definition in the first column, first row.  To prevent something from being draggable, type in ‘y’ for pinned.So far the definition has been configured as pictured below.
2019-05-04_2015

A screenshot showing a definition being ‘pinned’ in row 1, column 1. Pinned means not draggable.

  1. Click the  2019-05-04_2014 on the left to add a new item.  This will create a new data page.
  2. This time, the item will be draggable.  Type in the name of the item in the Text field.  For our example, I will type ‘ADDIE’
  3. Type in ‘1’ for row and ‘2’ for position.  This, in effect, will judge the term correct if the student places the term in the first row and in the second column.  ‘Position’ in this context means column.  In other contexts, it might simply mean order.

Our term has been configured as pictured below.

2019-05-04_2021

A screenshot showing a term that will be randomly placed on the screen and made draggable.

  1. Repeat the above steps several times to add items — but do not add too many items.   The screenshot below shows what the activity looks like with three definitions and three randomly placed items.  I increased the optional width of the column to 300.
2019-05-04_2033

A screenshot of the activity as it appears to students.

Each time the project is refreshed, the terms on the right will appear in a new random position.

Please note:   The Organizer Page can be used in an even simpler manner.  Suppose you wanted to randomly order the names of United States Presidents.   To accomplish this, type in the names of presidents on the data pages.  Create a new data page (not regular page) for each president.  The first president will be assigned position 1; the second president will be assigned position 2, and so forth.  Do not fill in row or anything else.  In this context, ‘position’ is order.

Exporting a Project to D2L BrightSpace 10.8 +

Inside of LodeStar 7.x do the following:

  1. Open your project, if not already opened. You will find your most recently used project under ‘File’.
  2. Select the Export button. Pay attention to where your zip file will be saved.
  3. Keep the default ‘SCORM 1.3 (Recommended)’ selected.
  4. Fill in the Module, Topic and Author Fields.
  5. Click on ‘Create Export’ button.

 

Inside of D2L BrightSpace 10.8 or later, do the following:

  1. Go to your course.
  2. Select ‘Course Administration’
  3. Select ‘Import/Export/Copy Components’
  4. In response to the question ‘What would like to do?, select the ‘Import Components’ radio button. Select the ‘from a course package’ radio button.
  5. Click on the ‘Start’ button at the bottom of the screen.
  6. In the ‘Import Course Package’’ screen, click on ‘Upload’ button.
  7. Use the File Browser to find the zipped up learning object. (The file might be located in a shared folder or, in the case of LodeStar, it might be located in the LodeStar/Exports’ folder.)
  8. Once the file has uploaded, click on the ‘Import All Components’ button.
  9. Once the process has completed, click on the ‘View Content’ button to navigate to the Content Tool.   D2L will always append your new module and topic to the end of your list of modules.

 

Linking Project (Learning Object) to Gradebook

  1. In D2L, navigate to the module and topic that matches your learning object.
  2. Move the topic to the module of your choice if needed. Future uploads of the same learning object will automatically update the topic.
  3. Select the title to open the topic. At the bottom of the screen, you will see the heading ‘Assessment — Add a grade item…”
  4. Click on ‘Add a grade item…”
  5. In the pull down menu that displays ‘No Grade’, select the grade item that you wish to use to record the score reported by the learning object. D2L will automatically do the math to convert points earned in the learning object to points earned in the grade book.    Alternatively, click on the ‘+’ button to create a new grade book item.   In the ‘New Grade Item’ dialog, fill in Name, Select Category if needed, and fill in the Maximum Points.  Click the ‘Create’ button.
  6. Check ‘Push all existing scores to grades’, if so desired.
  7. Click ‘Save’.

 

 

 

 

 

Page Types

Introduction:

Let’s first understand where ‘page types’ fall in the range of options available to instructors/authors.

First, LodeStar offers a number of templates.  The most popular template, ActivityMaker Mobile, contains a range of page types.  The ‘Text’ page type also supports a range of widgets.

So we have the concepts of templates, page types, and widgets.

This article is primarily focused on page types that are available in ActivityMaker Mobile, the Swiss Army Knife template.

 

Text

The default first page in the ActivityMaker template is the ‘Text’ page.  Text pages can hold styled text, images, embed codes, audio and widgets.

Text Pages feature the HTML editor, which supports basic formatting and a variety of tools.  The sprocket tool enables instructors to insert Widgets, which are interactive activities.

The link tool links to not only external web addresses but to internal LodeStar pages.  Authors are encouraged to fill in the ‘Page ID’ field to make linking to those pages easier.

 

Crossword

The Crossword page supports simple crosswords.  Authors add their own words and hints and then click on ‘Compile’.  The page compiles the crossword and display the hints when students click on the numbered squares.  Authors should keep crosswords limited to approximately ten words.

 

Flashcards

The Flashcard page supports an image and short answer.  It also supports Reg Ex (Regular expressions) for more complicated answer judging.  When students successfully answer a flashcard, the page gets removed from the ‘flow’.  Authors typically create a series of flashcards and use a starting ‘Gate’ page and an ending ‘Gate’ page to loop through the pages until a threshold is met (i.e 100% or 80%).  See Introduction to Gates.

 

Form

The Form page enables authors to create interactive forms.  This is a more complicated page type.  Check the ‘FAQ’ for a detailed article on how to create interactive forms and how to link form fields to long answer pages.

 

Gate

The Gate page controls program flow.  The Gate page can require students to score above a threshold in order to continue.  A passing score branches the student to the next section; a failing score branches the student to either a remedial section or resets the activities so that students must try again.  A series of gates can function as ‘if-then’ statements that are common in programming languages.  Gates can also reset activities.  Once students complete a multiple choice, for example, the activity is locked.  Gates can unlock activities.

 

Interactive Image

The Interactive Image supports click touch areas, drag and drop and hover-overs.  The Interactive Image page presents authors with a scale-able interactive image.  A grid overlay helps authors to identify either hot spots or drag and drop targets by entering their coordinates in a form.   The invisible hot spots scale with the image so that they are responsive to the screen size of the device.

 

Interview

The Interview Page presents the student with the image of the interviewer, a question and three choices.  The author can design the interview question to include the best answer, an acceptable answer and a wrong answer.   The relative merit of each answer is dependent on the meter value that matches each answer.  The answer choices can also provide students with specific feedback and, optionally, branch students to the next step in the interview or interaction.

 

Journal

The Journal Page collects all of the student’s long answer responses in the lesson and organizes them by heading on one page.  Instructors can request that students copy the entire Journal Page and submit it to an assignment folder, drop box or discussion thread.

 

Long Answer

The Long Answer Page prompts students for an open-ended response.  Instructors can scaffold a step-by-step analysis, for example,  by providing students with questions that they can respond to with long answers.  The Journal Page will collect all of the student’s long answer responses and display them on one page.   In some learning management systems, the responses will also appear in the SCORM report.  Please check with your LMS administrator for how to access your learning management system SCORM report.

 

Multiple Choice Question

The Multiple Choice Question Page displays a multiple choice or a multiple select question with up to seven distractors (options).  For a True/False question, instructors should use the first two answer fields and leave the remaining blank.  Students will see only the number of options that the instructor filled in.

The multiple choice answers can also be matched to feedback and to branch options. For example, a student answer can cause the program flow to jump to a remedial section.

By default, this page displays a multiple select question in which more than one answer can be chosen.  Authors can force a multiple choice question by selecting the appropriate check box.  Multiple select questions display check boxes; multiple choice questions display radio buttons.

In contrast, a Multiple Choice Widget on a text page can display one or more questions on a page.  See Multiple Choice Widget for more information.  Both Multiple Choice Widgets and Multiple Choice Questions are advantageous based on the objectives and the user experience that is being designed.  For example, multiple choice question pages focus the student on one question at a time with options for feedback and branching.

 

Organizer

The Organizer Page displays tiles that the student must order or organize.  The simplest use of Organizer is to order tiles by position.  For example, a question may ask students to order the following presidents:  Washington,  Reagan,  Carter,  and Roosevelt.  Washington would be assigned position 1.  Roosevelt, position 2.  Carter, position 3.  Reagan, position 4.  Students would be presented with a random order.  They would then drag the tiles left to right or top to bottom or a combination thereof to show their answer.

 

Report

The Report Page reports to the learning management system at the precise moment the page is displayed.  If the lesson contained many questions with assigned points, the Report Page would gather up the student scores and divide them by the total number of possible points.

The Report Page is functional once the lesson is exported and imported into the learning management system.  See Export.

Authors can use the page to add a message to the student.  The student score is automatically appended to the message.

 

Short Answer

The Short Answer page supports short answer questions.  Authors can require a precise match or allow for variations.  Short Answer supports regular expressions.  For example, the following expression  wash.*  will accept any answer that begins with ‘wash’.

 

Video

The Video Page supports embedding YouTube Videos and uploading short videos to the lesson.  Authors can copy a YouTube URL (found on the address bar) and paste it in the first field.   Lessons that include YouTube videos must be previewed in Firefox.  The full functionality of pause and play (as well as start and end times) will not work until the lesson is uploaded to the learning management system or placed on a server.

 

Wall

The Wall page walls off content and is usually placed toward the end of the lesson.  Some text pages, for example, might function as resources.  If they are not to be presented in the regular flow of the lesson but summoned as a resource, then the pages can be placed after a wall.   Authors can convert text pages to resource pages by checking off the ‘Resources’ checkbox.

 

Conclusion

Page Types combined with Widgets that display on Text Pages and branch options provide authors with innumerable options to engage students.  Each page in ActivityMaker Mobile also includes a help icon that will jog your memory on how the page is used.

 

 

 

 

 

 

 

 

 

Creating Interactive Fiction with Branches

Introduction:

Interactive Fiction has a variety of meanings.  This step-by-step article is focused on interactive fiction that features pages with branches. (This guide doesn’t cover interactive fiction with language parsers that understand a lexicon and can parse commands.)

To learn more about interactive fiction, please read our web journal article on interactive story telling:

https://lodestarlearn.wordpress.com/2018/09/25/a-case-study-prerequisite-interactive-storytelling/

Requirements:

LodeStar 7.3 Build 10 or later.

 

An example

This step-by-step guide borrows a couple of pages from an Interactive Fiction based on the internment of Japanese-Americans during World War Two.

To see the entire project created with a different authoring tool, click on the following:

https://textadventures.co.uk/games/view/0zb070zmjuqe7_7-mg3aaw/inside-the-japanese-american-internment

The Japanese-American Internment interactive fiction is presented in the form of a game and was created by an author with the username of TFickle.  The game presents a narrative and then offers choices to the readers.  I’ll build an example project based on a few pages from “Inside the Japanese American Internment”.  I chose this example because of its educational value.  You can build whatever project you wish.

 

Getting Started

  1. Select the ActivityMaker Mobile template
  2. Name your project “Interactive Fiction” or a name of your choice.
  3. Once the project has loaded, type in a description of the first scene.
  4. Type in “Introduction” in the page ID field.
2018-10-22_1937

LodeStar Learning’s ActivityMaker Mobile Template


Set Project Settings

  1. With the “Interactive Fiction” project open, select Tools > Project Settings.
  2. Set the following:
    1. Display ADA** icon > False
    2. Display Print Icon > False
    3. Display Page Numbers > False
    4. Display Navigation Buttons > False
    5. Display Transcript Icon > False
    6. Display Notes Icon > True
    7. Display Page Level Accessibility Icon > false

 

** This project contains text and links that will be cleanly readable and navigable with a screen reader.

 

2018-10-22_1940

LodeStar Authoring Tool with Project Settings

Create Pages

  1. I’ll create four pages based on the Japanese American Internment game. You can create as many pages as you wish that represent the landing pages for the reader’s choices (i.e. the branches).  Think of this as a  “Choose-Your-Own-Adventure”.  In the traditional text, the choices direct the reader to turn to a page in the book.  Similarly, this interactive adventure will present hyperlinks to the reader – and then jump to those pages.  It is like creating a whole web site in a reading project.
  2. Name your pages. Type in a name in the Page ID:  Use only regular alpha numeric characters.  Do not use apostrophes, asterisks or special characters.  The links will break.

    I named my pages ‘Fred’, ‘Surgery’, and ‘No doctor’.  Of course, if I were trying to recreate the entire Japanese-American Internment game, I would add many pages.  These few pages will suffice to illustrate the branching.

Link to Pages

  1. In my example, the introduction page ends with ‘Play as Fred’. It appears that TFickle has not yet completed this Interactive Fiction and will add other characters at a later time.  I highlighted ‘Play as Fred” and chose the ‘Insert Link’ tool in the HTML Editor.  Please do the same for your project.
  2. In the ‘Insert Link’ dialog, select the Pages(UID) pulldown menu. I selected Fred.  You select the page that you wish readers to jump to upon clicking the link.  Do not select ‘Display as Overlay’ unless you wish to pop up information rather than jumping to a page.
2018-10-22_2037

Links can be made to both pages internal to the project and to pages on the internet.

 

View Branches

  1. To see a visual graph of all of your branches, select the ‘Branches’ titled pane, found on the left side of the authoring tool.
  2. Links from one page to another start on the left side of the icon and terminate in a large black dot. Links from questions and page branch options start from the space just to the right of the icon and terminate in a large black dot.
  3. Click on an icon to navigate to the corresponding page.
  4. Select an icon and then the > ‘Change Page Type of Selected Page’ button to change the page layout if you wish. For example, from Text to Wall.
  5. Save your work.
2018-10-22_2005

Branches Titled Pane that displays a visual graph of all project branches

Preview Project

  1. Select the Preview button to see your work. As of this writing, the hyperlinks are displayed in a different color and not decorated (underlined).
2018-10-22_2040.png

Project Preview

Export Project

  1. The Interactive Fiction project can be exported as a SCORM 1.2 or 1.3 learning object (and imported into Moodle, Blackboard, D2L Brightspace and other platforms) or to a simple zip for moving the project to a web site. All other options are supported as well.

Conclusion

Interactive Fiction is a great way to engage your readers.  Again, to learn more about Interactive Fiction, please see https://lodestarlearn.wordpress.com/2018/09/25/a-case-study-prerequisite-interactive-storytelling/