Category Archives: Interactivity

Geolocation Storytelling

Posted on by
Reply

Introduction

Every place hides its own, rich story. Have you visited an unfamiliar town or area and wondered about its history,  geography, and points of interest? Have you ever wanted to connect to a place on a level deeper than a quick drive-by?

A new form of storytelling–geolocation storytelling — combines technology and traditional storytelling to make that happen.  With the help of an app, the place where you’ve entered or visited on a map suddenly comes alive with narrative and imagery.  You may hear about the past or be guided to an unusual rock formation or the vantage point of a famous painter.   Geolocation stories can work on-site, guiding you from point to point or they can help you discover a place from the comfort of your home.  Geolocation stories can be both informative and entertaining.  They can involve the visitor in discovering why a place got put on the map, or solving a challenge, or even solving a murder mystery.  In short, geolocation stories can be about anything that piques the visitor’s interest about a place.

The Inspiration

Places inspire people to learn more about them.

A group of history buffs, known as Lensflare Stillwater, were inspired by the many untold stories of Stillwater, a Minnesota river town.  Stillwater was a lumber town with connections to Minnesota and Wisconsin pine lands by river and connections to Saint Paul by stage road and later by rail. 

Stillwater inspired a number of geolocation stories. The first stories were guided  tours of Stillwater’s historical downtown.   A later story helped cyclists learn about the rich history from the vantage point of a bicycle trail.  Even later, another story recovered the lost memory of Stillwater’s streetcars.   

Thousands of miles from Stillwater, a geolocation project told the story of Vincent Van Gogh’s year in Arles, France, and what went horribly wrong for him.   Its authors first visited Arles to learn more about Van Gogh but were disappointed in the local tour guides, which didn’t sufficiently tell the story. 

If your town or place has points of interest, a rich history, or geographical features, you will want to consider creating a geolocation story to help others see the place from a new point of view.  Visitors can walk to the specific places of interest and hear audio, see imagery, read text, scroll through time lines and learn more about this special place.

How it works

Typically the visitor launches a geolocation story (a web-based application) from a web address on a smartphone. The first page of the story provides instructions and a starting point. When the visitor reaches that point, she crosses an invisible geofence. Geofence is a just a metaphor. Actually, the visitor’s location is calculated from the signals of three or more satellites . Most modern smartphones are equipped with the hardware to detect these signals. Global positioning satellites constantly emit signals. The GPS receiver in the visitor’s phone listens for these signals. Once the receiver calculates its location from these satellites, it provides that information to the application. The logic of the application is constantly checking to see if the location matches a place of interest. If yes, then content in the form of audio, text and imagery is called up and presented.

Best practices

If you already understand the power of the geolocation story and wish to get started, you’ll want to consider a few things.  These are not hard and fast guidelines.  As we gain more and more experience, we’ll learn about what works and what doesn’t.

  1. First, geolocation storytelling works best when the audience is on foot and out of doors.  Smartphones can’t receive satellite GPS signals from inside of buildings.  The technology works best outside with clear line-of-sight to the sky.
  2. Geolocation projects must be housed on a website that supports HTTPS.   Smartphones don’t reveal their locations to applications that run from websites that begin with http://.  The web address must be https://.   The ‘s’ means secure.  Information that is transported by HTTPS is encrypted in order to increase security of data transfer.  
  3. There is a limit to the distance that people will walk on a tour or the length of a tour in time.  Limit yourself to two miles completed within one hour.  Of course, this is a very loose rule of thumb.  Consider your audience when setting the limits.  Young adults will have no difficulty with 3 – 5 mile hikes.  Time and attention span, however, will remain a factor.  Senior citizens with mobility issues will find two miles too long.  The steepness of the terrain will be a factor. Use your discretion but keep it as short as possible.
  4. Some people’s interest may wane quickly.  A two mile tour should have at least a dozen points of interest.  Limit the distance and length of time between geolocation points.
  5. Present narrations in audio and text formats.  People like to hear a recorded narration but, without headphones, the narration could easily be drowned out by traffic or a rushing river. On the flipside, audio narration often works in situations (e.g. bright sun) where the screen is difficult to see. You’ll need to use your judgement.
  6. Consider the format of the tour.  Will you guide your audience from point to point or will you cluster points so that the audience will simply wander about and come upon many points of interest? 
  7. Audio should be cleanly recorded.  The audience should not hear background noise or a muffled narration.
  8. Text must be spelled correctly, grammatically correct and short. 
  9. Favor more points of interest and shorter narration/text than fewer points of interest and narration that drones on.
  10. Have fun creating this story. You’ll learn a lot!

Get your Geolocations

Even if you’re starting with Word to capture your text, find the locations. You can use Google Maps.  This is a very accurate way of finding locations.  For example, if I wanted the location of the intersection of Myrtle and Water Streets in Stillwater, I would do the following:

  1. Go https://www.google.com/maps
  2. Search for Myrtle Street, Stillwater.
  3. Move the map to the location of interest.
  4. Click on the intersection.
  5. Either write down the location coordinates or click on them.  The coordinates will now appear in the address field at the top and can be copied and pasted into your Word document or directly onto a LodeStar page (see below).
Google Maps reveals latitude and longitude

About the Location Coordinates

In the example above the coordinates were 45.056745,-92.805510.  The first coordinate (45.056745) is the latitude.  The second coordinate is (-92.805510) is longitude.  Always use a coordinate with six digits of precision (six digits to the right of the decimal point).  The six digits will ensure an accuracy within a few inches but never rely on that.  Never create a geolocation story that relies on an accuracy of a few inches.  In our geolocation stories we trigger something (e.g. show content) when the user is within 25 to 50 feet of a location.  We call that crossing the geofence.   The minus sign is important.  In latitude, the minus sign denotes the southern hemisphere (south of the equator).  In longitude, the minus sign denotes west of the prime meridian (Greenwich) and east of the antemeridian (roughly where the international date line resides).

If you want to grab your location while physically on the spot, use your smartphone’s Google Maps app. 

  1. Click on the arrow to show your current location.
  2. Scroll down until you find the marker and the location.  See screenshot below.
  3. Copy and paste the coordinate into your notes so that you can transfer the coordinate to LodeStar.
Getting a location from Google Maps while on site

Preparing a Geolocation Story in Word

Your role might be to prepare the content. When you’ve completed the preparation, you can hand off the content in the form of a Word file. In Word, each location should be on a separate page. At the top of each page, key in the title and the latitude and longitude coordinates of the location. Add your text, graphics, image and narration. If your version of Word doesn’t support audio narration, use a free tool like Audacity to generate an MP3 audio file.

Authoring a Geolocation Story with LodeStar

To create a geolocation tour in LodeStar, do the following:

Launch LodeStar and select the ARMaker template.  (AR stands for augmented reality.)

LodeStar’s ARMaker template

  1. Title your project.  The project will now reside on your hard drive in a folder with the same title.  It will be found in the LodeStar/Projects/[your title]  directory.
  2. Add your title to the first page.
  3. Add a page by clicking on the + button at the bottom of the app.
  • Ensure that the new page is a Text Page Type.  Examine the screenshot below.  The page should have a place to enter a latitude and longitude.
  • Add your content.  You can insert a widget (e.g. Image Layout Widget), text, audio, and more.
  • Add a page to add more content.
  • Then Preview in Browser (find button at the top).
  • When you are ready to publish,  Export as a SCORM 1.3 package and import to a Learning Management System or simply copy the LodeStar/Projects/[your title]  directory to a web server.
LodeStar authoring tool with ARMaker template. Click on image to view.

Below is what this page looks like in Preview.  Notice the audio control at top left and the Show Map at the top left.   Notice the navigation buttons top right.  Notice the how the image slider appears, created by the PWG Image Slider Widget.

Previewing a Geolocation story

If your audience clicks on the ‘Show Map’ button, a Google Map appears with all of the locations marked with red markers.  Again, each location represents a separate page in LodeStar. 

Each location (marked by red marker) matches a LodeStar page

Controlling the User Experience

If you allow users both to show map and navigate to content by clicking on a marker, then you need not adjust project settings.    If you want to restrict users’ access to the map and/or their ability to access pages of content from the map, select Tools > Project Settings.  Change the settings according to your needs.  (The important settings are marked with arrows.)

Project settings in LodeStar allow control of application

Publishing your project

As a SCORM object

If you use a Learning Management System (LMS) and want to control access to your geolocation story, then, with your project opened in LodeStar, click on Export and export to SCORM 1.3.    Go to your LMS and import the story as a SCORM object.

As a website

If you have access to a web server, copy the project folder to the web server and use the index.htm file in your URL.  Once again, location services will only work on web servers that support https://

If you don’t have access to a web server, then read the following article that explains how you can use GitHub as a web server.

Seven Steps That Will Change How You Share eLearning

As an Open Education Resource (OER)

Publish the geolocation story as a web site, then register the URL (address) of that site with OER Commons, Merlot, or whatever OER repository you prefer.

 

Additional Details

To learn more detail, visit:

Geolocation Storytelling: Van Gogh In Arles | LodeStar Web Journal (wordpress.com)

To see an example of a finished product as OER, visit:

https://www.oercommons.org/courses/vincent-van-gogh-s-arles/view

Or view the app at:

‎Van Gogh In Arles on the App Store (apple.com)

Conclusion

Geolocation stories are a great way to help visitors uncover the hidden wonders of place. Google Maps and the LodeStar Authoring tool are indispensable ways of authoring stories and publishing them either to Learning Management Systems or to the web.

Making your projects interactive and interesting with a little bit of code

Posted on by
1

Introduction:

Instructional designers, instructors and trainers who want their eLearning to go beyond presentation might consider acquiring a new skill:  basic coding.  Learning a little code will help you track learners, adapt to their performance, change the direction of the activity, visualize learner’s performance and so much more.  You don’t need to become a computer scientist or even a computer programmer.  You need to learn a few skills that are on the same level of complexity as the Excel spreadsheet formula language.  You need to learn about variables, functions, and conditional statements.  This project will help you learn those skills.

The objective of this lesson is to create a working traffic light. When the learner clicks a button the traffic light will change. This project makes use of variables, functions, and conditional logic.  You will be able to apply these basic principles to your own projects.  We chose traffic lights because you will easily recognize when you have got it right.  We also introduce the power of SVG graphics in this tutorial.  You will learn more about them. 

Before we begin, a note about the step-by-step instructions:  First, I use the words ‘code’ and ‘script’ interchangeably.  Secondly, when we get to writing code, I’ll display the line of code and provide a detailed explanation of what it does. That is as important as the line of code.

So, let’s get started. If you would rather watch me create this project first and then attempt it, go to this link:

LodeStar 9 — Elements Of Interactivity – YouTube

 Download the most recent version of LodeStar

The instructions in this DIY tutorial work on LodeStar 9 build 7b or greater. This build was released on April 10th, 2021.

You can download the latest release from https://lodestarlearning.com/.

Select the ActivityMaker template:

ActivityMaker is a great place to start.  It has everything we need.    

  1. Select the ActivityMaker template.  (The first template).
  2. Click on ‘Create Project’ and title your project.  Call it Traffic Light Demo.

Create the first two pages

  1. Once the project opens, click on the HTML Editor and create a title page.  Give the page a page ID of ‘Intro’.  Page Id’s are important when we use branching logic.  Each page has a unique identifier that the program code understands.  The Page ID also gives the page a human-friendly name.
  2. Click on the + button at the bottom to add a new page to the project.
  3. Page forward to page two.  Notice that page two is the same page type as page one.  That works for this project.  Give page two the Page ID of “Traffic lights”.

 

Bitmap Graphics and Vector Graphics

We will be using bitmaps and vectors. Let’s learn about them. Bitmap or raster images are created with a collection of bits or pixels. They are spreadsheets of color values and they can’t be scaled up without loss.  Vector graphics are shapes with properties like fill color, stroke width and placement that are modified by mathematical formulas. They can be scaled up without loss of clarity.  It is very difficult programmatically to address a part of a bitmap image (a tree for example) and change its properties.  On the other hand, some types of vector graphics are composed of elements that can be targeted in much the same way as an HTML element (a part of a web page). We’ll see what that means in the traffic light demo.

 

Create the SVG

SVG is an acronym for Scalable Vector Graphic. It is a type of vector graphic that is supported by most modern browsers.  SVG includes the language to define shapes such as paths and outlines consisting of straight lines and curves, bitmap images, and text. Computer commands use this information to draw the objects to the screen at any scale.  An SVG path element looks sharp whether displayed on a smartphone or a Jumbotron.  SVG Elements (parts of the drawing) can be grouped, and styled.. SVG drawings can be interactive and be changed dynamically with, you guessed it, computer code.  A green circle, for example, can be turned yellow by a piece code known as a function or command.  We’ll learn all about them.  Our first task is to bring in a bitmap graphic of a traffic light and combine that with our SVG.  A bitmap graphic is a jpeg or a png file.  A regular image.  You can find hundreds of traffic lights on the web. Here is what we are looking for:  traffic light png – Google Search  Try to find one that is open licensed.  Save that to your local drive.

After you have found your image, do the following:

  1. Click on the SVG button on the HTML Editor.  That brings us to the SVG editor.
  2. Select the image tool (see screenshot) and click anywhere on the canvas to place the image.
  3. Select the traffic lights that you downloaded.

 

Combine Vector Graphics with the Bitmap

After we imported our traffic light bitmap, we’ll draw circles to cover up the lamps.

  1. Select the ellipse (circle) tool and draw a perfect circle by holding down the shift key and dragging.    Color the circle gray by using the palette at the bottom of the screen.
  •  Clone or rubberstamp the selected circle to cover up the yellow and red lamps.

 

 

Make a note of the ID of each circle

SVG elements such as rectangles, circles, and paths have an automatically generated unique id.  It is like a serial number or a social security number.  We can use this id to target the svg element and change its properties.  Here is how to view the ID.  For now just take note of where it is.

  1. Select one of the circles. 
  2. Look for the id on the toolbar of the SVG editor.
  3. Note that each of the ids of the circles is similar with, perhaps, only one digit difference.

Create the push button to operate the lights

  1. Create two more circles as pictured below.  Use the fill tool (the bucket) to give the inner circle a gradient.
  2. Select both circles and use the G key to group them into one object.
  3. Click on the ‘Fit to Content’ button to size the canvas to the objects.  Be sure no object is left at the edge.  You may need to move your objects in a little so that they are not cut off.

Add a branch option

Now comes the interesting part.  We will add a branch option to the button we just created (the grouped circles).

  1. Right click on the button and select ‘Select Branch Options’.  These are the branch options that get executed when the object is first selected.  Optionally, the ‘De-select branch options’ get executed when the object is deselected (i.e. clicked on a second time).
  • From the Branch Options dialog, select Execute Commands.  Then select the ‘Edit’ button to enter the script editor.
  • In the script editor, click forcefully on the first line to activate the editor.

Enter your script (code)

What happens when a student or trainee clicks on the button is decided by what you type into the script editor.

In plain language, here is what we are attempting to do:

  • Get long term value of current light  (it is stored between clicks)
  • If current light is not a number, assign 0 to it
  • If current light is less than 3, add 1, else set it to 1
  • Save the value of current light into long term memory
  • Turn all lamps gray
  • Switch to a different path based on value of current light

In other words we want the traffic light to progress from green to yellow to red to green after every click.  To store the last light that was illuminated, we need to define a place in the computer’s memory.  Now let’s get to the code.

  1. Type in each of the following lines and then read an explanation of what it accomplishes.

var currentLight = getValue(“currentLight”);

Expanation:  “currentLight” is a slot in the computer’s memory.  We store the value of the lit traffic light there.  1 = green; 2 = yellow; 3 = red;

getValue is a function.  The purpose of this function is to retrieve the value that is stored in memory.

Functions often have an input and an output.  In this case, the string of characters “currentLight” serve as the input.  The output is the actual value stored in memory.

We assign the output of getValue to a local variable called currentLight.  currentLight is a local variable and “currentLight” (with quotes) is the label of the memory slot that holds a value for longer term storage.

Local variables disappear once the block of code has been executed; the longer term storage labeled “currentLight” persists for the life of the activity.

Variable names are case sensitive, must be one word, and can’t start with a number or symbol.

The keyword ‘var’ tells the computer that currentLight is intended to be a variable.  The = sign is actually an assignment operator.  That means that the output of getValue is assigned to the variable.

Technically, a copy of the value is made and stored in the local variable.

Lastly, the semi-colon at the end of the line terminates the line.  It’s a computer geeky way of punctuating the line so that the computer can make sense of it.

var isNum = isNumber(currentLight);

Explanation:  The isNumber function takes the input of currentLight (i.e. the value that currentLight holds) and returns true if the value is a number and false if it is not.  The first time this code is run, isNumber will return false because currentLight is “undefined”.  We haven’t stored anything yet.  True or false gets assigned to a local variable called ‘isNum’.  Once again, var identifies isNum as a variable.

if(!isNum){

      currentLight = 0;

}

Explanation:  We’ve now seen the use of a function and the use of a variable.  Here is our first conditional statement or, in other words, the ‘if’ statement.    Let’s first look at a simpler if statement and then we’ll return to the trickier one.  Type the following:

if(currentLight < 3){

    currentLight = currentLight + 1;

}

else{

    currentLight = 1;

}

Explanation: The keyword ‘if’ is followed by parentheses.  If the expression inside the parentheses evaluates to true, then the first block is executed.  The first block is defined by the curly braces.  {   }.  If the expression inside the parentheses evaluates to false, then the else block is executed.  The else block is defined by the second set of curly braces.  So, if currentLight holds the value of ‘1’, then 1 is indeed less than 3.  Therefore the expression inside the parentheses evaluates to true.  The code in the first block gets executed, which means that currentLight is assigned the old value currentLight plus 1.  In other words, currentLight is assigned the value of 2.

With those rules in mind, let’s return to the first conditional if statement.  The first time this code executes, currentLight will be undefined. Is ‘undefined’ a number?  No it is not.  Therefore isNum is assigned the value of false.  The expression inside the first if parentheses is !isNum.  The ! symbol makes this a bit tricky.  It inverts the value of isNum.  If isNum is false it now evaluates to ‘true’.  The if statement evaluates to true when currentLight is undefined.  The outcome is that currentLight is initialized with the value of 0.  So the very first time we click, currentLight will equal 0 after the first if statement.  Now let’s move on to the second if statement.  Is 0 less than 3?  Yes.  Yes is synonymous to ‘true’.  Therefore currentLight will be assigned the old value of currentLight plus 1.  The old value of currentLight was 0.  0 + 1 is now 1.  After the second if statement, currentLight holds the value of 1.  So, to repeat, the very first time we click, currentLight ends up with the value of 1. 

setValue(“currentLight”, currentLight);

Explanation: setValue is a function that does the opposite of getValue.  setValue stores the value of currentLight in a memory slot labelled “currentLight”.  The slot in memory does not need to match the name of the variable.  The label, however, used in getValue must match the label used in setValue;

changeColor(“ls1617676199534_2”, “#CCCCCC”);

changeColor(“ls1617676199534_3”, “#CCCCCC”);

changeColor(“ls1617676199534_4”, “#CCCCCC”);

Explanation:  changeColor is a function.  It takes two inputs and does something with them.  Another word for input is argument.  That’s a really geeky term.  Who’s arguing?  Nevertheless, inputs are called arguments.  The first argument or input is ID of the element whose color property we are changing.  By that I mean the circle.  You cannot use my values.  You need to follow an earlier step and use the IDs of your circles.  They will be different.  You can ‘Save and Close’ and return to this code after you copied the circle ID’s to a notepad. The second argument is the color value.  Now, here is another geeky thing.  It is common to express computer colors with hexadecimal values.  # means hexadecimal.  The first pair of CC is equivalent to the decimal value of 210.  The three pairs of CC create the color gray.  We could substitute “#CCCCCC” with the word “gray”.  It is a slightly different shade of gray.  I prefer #CCCCCC, but admit that “gray” is simpler.

Finally, type the following:

switch(currentLight){

    case 1:

changeColor(“ls1617676199534_2”, “#00FF00”); 

break;

    

    case 2:

        changeColor(“ls1617676199534_3”, “#FFFF00”);  

        break;

    case 3:

         changeColor(“ls1617676199534_4”, “#FF0000”); 

        break;

}

Explanation: The ‘switch’ statement is another type of conditional like the ‘if’ statement.  It’s like a train track switch.  Train #1 goes down the case 1: track.  Train #2 goes down the case 2: track, and so forth.  What is train 1?  That is what currentLight evaluates to.  If currentLight holds the value of 1, we go down the first track and execute changeColor(“ls1617676199534_2”, “#00FF00”), which means that we turn the first lamp green.  We could replace  “#00FF00” with “green”.  If currentLight holds the value of 2, then we change the second circle to yellow.  If currentLight holds 3, then we change the third circle to red.  Our code only permits 1, 2 or 3.  That is because our second if statement, resets currentLight to 1 when currentLight reaches 3.

The hexadecimal values represent three pairs.  The first pair is Red.  The second pair is Green.  The third pair is Blue.  FF0000 means full red and no green and no blue, which produces the red color.  #00FF00 means no red, full green, and no blue, which produces the green color.  FFFF00 means full red, and full green and no blue, which produces yellow.  In computer color, equal amounts of red and green light produce yellow light.

So here is the code in its entirety.  If you simply cut and paste, the code wouldn’t work because the SVG element IDs would be incorrect.

var currentLight = getValue(“currentLight”);

var isNum = isNumber(currentLight);

if(isNum){

   currentLight = currentLight;

}

      else{

            currentLight = 0;

}

if(currentLight < 3){

    currentLight++;

}else{

    currentLight = 1;

}

setValue(“currentLight”, currentLight)

changeColor(“”, “#CCCCCC”);

changeColor(“”, “#CCCCCC”);

changeColor(“”, “#CCCCCC”);

switch(currentLight){

    case 1:

        changeColor(“”, “#00FF00”); 

        break;

    case 2:

        changeColor(“”, “#FFFF00”);  

        break;

    case 3:

         changeColor(“”, “#FF0000”); 

        break;

}

Test your code

  1. Click on the ‘Test’ button.  The test won’t reveal logic errors but it will highlight basic issues like forgetting a semi-colon or misspelling the name of a function.   The real test comes when you preview the project in a browser.

Save and Preview

  1. Click on the ‘Save and Close’ button (to the right of ‘Test’) to save your script and exit the editor and return to the Branch Options dialog.
  2. Click on the ‘Save’ button to exit the Branch Options dialog.
  3. Click on the ‘Save to Page’ to save and exit the SVG Editor.
  4. Click “Preview in Browser” to see your project work.  Go to page two and click on the button to change the traffic light.  If this worked for you, leave a comment. If not, edit your traffic lights. Back in the LodeStar, click on the traffic light on the page, then when the image dialog opens, select ‘Edit’.

 

Conclusion

You did it.  You learned how to use a variable to store a value.  You learned the definition of a function and how to use one.  (You can find more LodeStar functions by clicking on the ‘Help’ button in the script editor. )  You also learned two types of conditional statements:  the “if” and the “switch”.  With the use of variables, functions, and conditional statements, the sky is the limit in terms of what you can do.  We’ll soon publish a more thorough article on LodeStar functions and what they can do.  In the meantime, the next best step is to create your own simple project.  Don’t rush into applying this to a ‘real’ project.  Play a little first.  Soon you will be able to achieve a higher degree of interactivity, store learner information, create branching conditions based on the information, and much much more.