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.

 

 

 

 

 

 

 

 

 

Advertisements

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/

 

Changing Theme and Layout

We recently received an email about an instructor who preferred the older look of ActivityMaker.  Since the release of LodeStar 7.2, ActivityMaker has been given much more functionality (See Widgets) and a minimal look and feel that suits the look and feel of D2L Brightspace  and other learning management systems.

But the default look and feel can be changed for some templates like ActivityMaker Mobile.  Instructors can change the Theme and they can change the Layout.

Follow these steps.

  1. In LodeStar 7.3, create a project in ActivityMaker Mobile.
  2. Save
  3. From the opened project, Select Tools > Themes.
  4. Change Theme.  In my example, I will select ‘Black’.
  5. Click on the Advanced button only if you want full control of the gradient on both the header and the footer (navigator).
  6. Click on the ‘Ok’ button.
  7. Click on “Preview” to see the change.
  8. Click on ‘Reload Page’. But not much is happening yet.  The layout needs to be changed as well.
  9. Close the Preview.
  10. Select Tools > Layouts.
  11. Select ‘Navigator-bottom’.  (Don’t select Default. We noticed a glitch.)
  12. If you want a tiled background, click on ‘Get Image’. Your image needs to be a small, repeatable tile.
  13. Click ‘Ok’
  14. Click on “Preview” and then ‘Reload Page”.
  15. You should now see a layout and theme that is similar to previous versions of ActivityMaker.
2018-08-22_1953

Before: ActivityMaker Mobile Project using Daylite Theme and Layout

2018-08-22_2007

After: ActivityMaker Mobile using Navigator-Bottom Layout and Black Theme

Word Problem Widget

Introduction

LodeStar Web Journal entries emphasize the importance of practice and immediate feedback.  The Word Problem widget helps you put that general tenet into practice. With the Word Problem Widget, you can construct a word problem with both sentences and variables.  You define a variable, such as {principle} and fill in details about how large a number can be randomly assigned to this variable. The variable is used in an expression (formula) that calculates the correct answer and matches it against the student’s submitted answer.

All of this is difficult to understand in the abstract.  We’ll make this concrete.

For example, you enter the following word problem:

John Smith opens a savings account with a {rate}% interest rate, compounded annually. How much will his account be worth in {time} years after he makes this one-time deposit of  ${pv}.

The variables in the above word problem are {rate}, {time} and {pv}.

Note that variables are surround by curly braces {}.  Variables cannot begin with numbers; they are case sensitive; and they must be one word.

In the widget, you define the range that can be used for each of these variables.  {rate} might be a decimal number ranging from .01 to .05. {time} might an integer (a whole number) from 1 to 10 years.  {pv} might be 1000 to 10000.

The expression is:

pv * (1 + rate)**time

Where,

*  is the multiplication operator

( ) controls order of precedence

** is the exponent operator
One student might see:

John Smith opens a savings account with a 0.01% interest rate, compounded annually. How much will his account be worth in 8 years after he makes this one-time deposit of  $1545.

The next student might see:

John Smith opens a savings account with a 0.05% interest rate, compounded annually. How much will his account be worth in 5 years after he makes this one-time deposit of  $1000.

 

We’ll cover how to do this step by step.

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket 2018-04-25_2105   from the HTML Editor Tool Bar.

1

STEP TWO

Select a widget type. For the purposes of this article, I’ll choose the Word Problem Widget.

2018-05-13_1814

Widget Menu

STEP THREE

Type in the word problem.

John Smith opens a savings account with a {rate}% interest rate, compounded annually. How much will his account be worth in {time} years after he makes this one-time deposit of  ${pv}.

 

The words John Smith will never change.  They are constants. {rate} will be replaced with a value in the range that you specify.

2018-05-13_1938.png

Word Problem Widget Dialog

Assign this word problem a number of points by filling in the Point Value at the top right.

STEP FOUR

Type in one of the variables that you used in the ‘Variable’ field.  Our first variable is ‘rate’. Give rate a min value of .01 and a max value of .05.  Rate is not an integer. Select ‘no’ for the Integer field. Rate needs a precision of two decimal places.

Click on the ‘+’ button to add more variables.

STEP FIVE

Type  the expression in the expression field.  There is only one expression per question.

Type in the following:

PV * (1 + rate)**time

 

That reads PV times 1 + rate raised to the power of time.

Here are the most common operators, which follow W3C standards for JavaScript operators:

 

( )     Expression grouping     (3 + 4)

!     Logical not     !(x==y)

**     Exponentiation     10 ** 2

 

*     Multiplication     10 * 5

/     Division     10 / 5

%     Modulo division     10 % 5

 

+     Addition     10 + 5

–      Subtraction     10 – 5

 

STEP SIX

Once you have added as many variables as you need, click on the ‘Ok’ button.

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

2018-05-13_1942

Author’s view of the Word Problem Widget

This is not what the student will see. You must click on the ‘Preview’ button at the top left to see the widget converted into a word problem.

2018-05-13_1944

Student view of a Word Problem.

 

You can add as many widgets to a page as you wish.

Conclusion

This Widget allows you to present a word problem with values substituted for variable names.  Once the student submits the answer to the problem, the Widget evaluates the answer with the help of the expression that you designed.

Each time the student refreshes the browser page, s/he will be presented with a different problem.  Problems will also vary between students.

The Word Problem widget enables you to support student practice with math problems and provide immediate feedback.  Early activities can be simpler to solve. Later items can be more challenging.

 

Math Equations

Introduction

Creating math equations for use in eLearning is tricky.  In the past, instructors used editors that helped them construct equations only to export them as images.   In the past, there were no standards that browsers could follow to display math equations properly.  Browsers, however, could reliably display images.  Therefore equation editors produced images.

LaTeX

Some savvy mathematics and science instructors used a markup language called LaTeX (pronounced Latek).  LaTeX was based on the TeX typesetting language.  LaTeX supports the typesetting and display of mathematics.  LaTeX equations are constructed with a simple but specialized language.

Here is an example of the quadratic equation:

\frac{-b\pm\sqrt{b^2-4ac}}{2a}

Which produces the following, when supported by some helper code:

2018-05-10_2117

Quadratic equation

LaTeX looks complicated, but it is not.  \frac{numerator}{denominator} produces a fraction with a fraction bar.

The numerator has the term -b followed by a plus and minus symbol denoted by \pm.

\sqrt{} produces a square root.  The ^ produces an exponent.  And so forth.

Unfortunately, LaTeX is not accessible.  Most screen readers can’t read a LaTeX equation.  Therefore visually impaired students won’t ‘perceive’ the equation.

LaTeX should not be discounted, however.  It can still play a very important role in support of the preferred markup language: MathML.

MathML

MathML is powerful and accessible.  Equations marked up in MathML can be displayed in most modern browsers.

LodeStar supports MathML.

The trick is in finding the right math editor to construct MathML.  There are several math editor options.    The one we like to configure in LodeStar is http://hostmath.com/  but there is one important caveat.  The editor is surrounded by ads.  One can easily inadvertently click on an ad while editing an equation.

Hostmath in LodeStar  loads quickly.  If you know LaTeX, you can quickly construct an equation or can use the math palette on the left.  Once an equation is constructed, pick the MathML version.

This produces

2018-05-10_2117

Quadratic equation

 

MathML is xml markup.  That means that it is highly structured so that it can be parsed (interpreted) and presented.  You must include the <math> tag and the </math> end tag.  They are  book ends.  Instructors must copy and paste the book ends along with all of the code in between.

You paste  the MathML code into LodeStar with the help of the <> tool in the LodeStar  HTML editor.

2018-05-10_2136

All embed code can be inserted with the help of the <> tool.

Important Note: MathMl will not render perfectly in the LodeStar HTML Editor.  You must preview the equation in the Firefox browser.  When you preview within LodeStar, a copy of the project address gets saved to the clipboard.  Paste this address into the FireFox browser address field.  You only need Firefox when you are authoring.  Your students won’t need Firefox.  Your students will see a perfectly rendered equation.

 

MyScript

For those who don’t know LaTeX or don’t have the patience to work the palette of symbols,  MyScript will be a godsend. MyScript will not load in LodeStar but can be used separately and it will produce MathML code that you can paste into LodeStar:

http://webdemo.myscript.com/views/math.html#

 

You simply hand write your equation and then click on MathML on the right to produce the code.  Paste the code in LodeStar using:

2018-05-10_2136

2018-04-26_2042

The reason why MathMl is so important is that it works without a plug-in in all modern browsers.

 

Configuring LodeStar with a Math Editor

STEP ONE

Select Tools > Math Editor Option.  Paste in http://hostmath.com/ or your favorite editor.

STEP TWO

To quickly access the editor, select Help > Online Math Editor.  The editor will appear in a separate tab.  You can then construct your equation and display the MathML code.

STEP THREE

Copy the MathML code to the clipboard and then embed it on the Text Page by selecting the <> embed tool and pasting in all of the code.

STEP FOUR

Again, please understand that it will not render well on the LodeStar page.  It will render well to students.  To confirm this, click on Preview.   Preview will save the address of the project on the clipboard.  Paste this into a Firefox browser address field.  Again, your students won’t need Firefox.  This browser is only needed to preview projects locally before they are uploaded to a learning management system.

Conclusion:

Here is what the Quadratic formula looks like in MathML in LodeStar:

2018-05-10_2150

 

The equation is mangled.  However, here is what it looks like in Firefox.  This is what the students will see in any modern browser, once the project has been exported to a learning management system:

2018-05-10_2151.png

 

 

Drag and Drop Widget

Introduction

The Drag and Drop widget can be inserted nearly anywhere on the ActivityMaker Mobile Text Page.

The Drag and Drop Widget allows you to create both categories and items to be categorized.  LodeStar converts each item into a drag-able tile and converts each unique category into a drop target area.  If two items share the same category, only one target area will be created.  All items are initially placed in the un-categorized area.   Students  drag items to their matching categories. They can drag items with their mouse or finger or they can use the keyboard.

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket   2018-04-25_2105  from the HTML Editor Tool Bar.

2018-04-26_2042

STEP TWO

Select a widget type. For the purposes of this article, I’ll choose the Drag and Drop Widget.

2018-05-06_1947.png

Screenshot of the LodeStar Widget Menu

STEP THREE

Type in an item.  Type in the category to which the item belongs.  For example the item ‘Mollusk’ may match the category ‘Animal’.  (Categories are case-sensitive.  Entries in the category field of ‘animal’ and ‘Animal’ will create two category target areas for the student.)

Type in feedback that provides information to the student about why the item belongs in the category.  All of this information will also be view-able from the transcript.

2018-05-06_1957

Drag and Drop Widget Dialog

STEP FOUR

Click on the ‘+’ button to add more items and categories. Check the ‘Randomize’ checkbox to randomize the display order of the items.

STEP FIVE

 Add more items.  Be mindful, however, that too long of a list makes the activity clumsy for students with small screen dimensions.

STEP SIX

Once you have added as items and categories as you need, click on the ‘Ok’ button.

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

2018-05-06_1954

Author view of the Drag and Drop Widget

 

This is not what the student will see. You must click on the ‘Preview’ button at the top left to see the widget converted into drag and drop areas.

2018-05-06_1932.png

Student view of the Drag and Drop Activity

You can add as many widgets to a page as you wish.

Conclusion

The Drag and Drop widget enables you to support student concept learning.  Early activities can be simpler to solve with black and white distinctions between items.  Later items can be more challenging with murky gray areas that make it difficult to categorize items.

 

Image Slider Widget

Introduction

The Image Slider widget can be inserted nearly anywhere on the ActivityMaker Mobile Text Page.

The  Image Slider allows you to insert a series of images on a page that are view-able through a carousel-like viewer. That means that your students can click on arrows to view the images or, on a mobile device, swipe to advance or turn back the images.  A simple option allows you to include thumbnail images and a slide transition.

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket  2018-04-25_2105   from the HTML Editor Tool Bar.

2018-04-26_2042

HTML Editor featuring the Widget Tool.

STEP TWO

Select a widget type. For the purposes of this article, I’ll choose the Image Slider Widget.

2018-05-03_2032

Widget Menu featuring Image Slider

STEP THREE

Click on the image field.  A file requester will appear.  Browse to the image of your choice and double-click on the image to add it to the image slider.  LodeStar will make a copy of the original and place it inside your project.

2018-05-03_2016

Image Field

STEP FOUR

Add a caption below the image.  Click on the ‘+’ button to add more images.

2018-05-03_2019

Add/Delete Images

STEP FIVE

 Add as many images as you wish, and then check the ‘Display List” box if you want thumbnails of the image to appear either alongside (if there is enough screen space) or below.  Check ‘Slide Transition’ if you want a transition effect (i.e. a slide) to accompany the display of images.

STEP SIX

Once you have added as many images with captions as you wish, click on the ‘Ok’ button. (Be mindful that too many images of large sizes may result in slow download times.)

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

2018-05-04_0904

Image Slider viewed by author

 

This is not what the student will see. You must click on the Preview button at the top left to see the widget converted into an image carousel.

2018-05-04_0908.png

Image Slider viewed by student

You can add as many widgets to a page as you wish.

Conclusion

The Image Slider widget enables you to combine imagery with text and other widgets. The Image Slider gives students a convenient way to view images without scrolling endlessly.