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/

 

Publishing to Curriki

Curriki supports LodeStar projects.

Curriki is a terrific resource.  If you don’t have access to a learning management system and you are willing to share your resource with the educational community as well as your students, choose Curriki.

Curriki is an open education resource library. Curriki enables educators around the world to access and contribute free open educational resources.

At the conclusion of this post, you will find a short video that describes how to import a LodeStar project into Curriki.  But before you can import LodeStar, you must contact Curriki at http://www.curriki.org/about-curriki/contact-us/ and request to be a trusted user.

Once you are a trusted user, follow these steps.  The video is a little difficult to view, but these steps will help you.  Print them out.

In LodeStar

  1. Open a LodeStar project.
  2. Select Export.
  3. In the Export dialog, select the ‘Simple Zip’ option.
  4. Fill in the fields and click on the “Create Export’ button.
  5. Pay attention to where LodeStar saves your exported file!!

In Curriki

  1. Register as a Curriki user (free) and contact Curriki to become a trusted user (free).
  2. Log in to Curriki.
  3. Go to ‘My Dashboard’ if you are not already there.
  4. Click on ‘Contribute a Resource’.
  5. Fill in the ‘Title’ and ‘Abstract’ fields.
  6. In the Content area, click on the HTML Editor and select ‘Insert’ from the HTML editor toolbar.
  7. Select ‘Insert LodeStar Zip’.  This is the simple zip that you created earlier.  It is in your LodeStar/Exports folder.
  8. Follow the rest of the Curriki information collection process.
  9. Once you have completed all of the steps, you will be able to ‘Start’ the LodeStar activity.
  10. To find your project (resource), go to ‘My Dashboard’ and to ‘My library’.
  11. Click on the resource.  Click on the ‘Start’ button to launch.
  12. Share the resource website address with your students.  Test the address.

 

Screenshot of the Curriki HTML Editor with Insert LodeStar Zip.

2016-08-30_2019

 

Screenshot of the activity web page.  Notice the Website address near the top of the screen.  Notice the start button near the bottom of the screen.

2016-08-30_2100

Last Note:

Curriki supports Google Classroom.  If your school cannot afford a learning management system like Moodle, consider Google Classroom.  LodeStar objects added to the Curriki library can be easily shared with Google Classroom.

 

 

 

 

Linking to a PDF

There are two ways to link a PDF (or any other web friendly file) to a LodeStar ActivityMaker page.  The first way involves copying the PDF to the root directory of the project so that PDF always remains with the project.  The second way involves linking to a PDF located anywhere on the public internet.

Linking to a local PDF file

Open or start an ActivityMaker project.  Every project has its own directory under LodeStar > Projects.  Copy the PDF to the root of that directory.  In my example I have a project named Demo_PDF.  In the screenshot, you will see that I have copied the pdf to the Demo_PDF directory. My pdf file is called GuitarTab.pdf.  It is not obvious, but note that the pdf file sits inside my Demo_PDF project directory.

 

2016-06-15_2139

Next, I click on the link icon in the HTML Editor toolbar on the ‘Text’ page.

2016-06-15_2153

In the URL field, type in the name of the PDF file.  In my case, I typed GuitarTab.pdf.  Type in a text to display to your students, as pictured below:

2016-06-15_2142

Click Ok.  To preview your work, click on Preview.  This will copy the address of the project to the clipboard.  Preview will not show the popup with your PDF.  To see this in action, launch Firefox, and paste in the project URL from the clipboard.  (If you previewed, the project URL is on the clipboard.)  Once your project loads, you can click on your link and see it work.

Linking to a PDF on the Public Internet

Follow all of the steps above, but instead of a filename as a URL paste in the complete address of the PDF on the internet.

See below for how either scenario should appear:

 

2016-06-15_2143

 

Inserting a YouTube Video

  1. Launch LodeStar and choose a project based on the ActivityMaker template.
  2. Add a new page to your project.
  3. Select the page type ‘Video’  (not Video Scenario).
  4. Copy the URL (the address) from YouTube.  Notice the screen shot below.  Copy the address that is highlighted with blue.
  5. Paste the address into the first field (box) on the LodeStar Video Page.  Ignore everything else.
  6. Click Preview.  Your video wont show in the preview.  Now jump out to the Firefox browser.  Because you clicked on the LodeStar Preview button, the address of your project was saved to the clipboard.  Now paste it in the Firefox address field.  You should now see your project and be able to view your video, provided that YouTube hasn’t blocked it.

Please note:  You will need to manually pause your video, but once you publish your project to a learning management system, LodeStar will automatically pause the video when the student turns the page.

2016-03-25_1201.png