Storyline vs. H5P: Recreating an open education tutorial

I am a solo instructional designer at my library. I love instructional design and elearning development, but I don’t have as much time for it as I would like! I love using Storyline to build tutorials and courses, but it’s become too burdensome to maintain existing courses while also creating new ones.

I am involved in the open education movement on my campus, so I have also been thinking about ways to build learning experiences that are partially or completely open so that my colleagues can edit them or take control entirely.

H5P is slowly catching on – it’s an open-source tutorial development platform. You can build out tutorials at H5P.org and embed them elsewhere as iframes, or you can install an H5P plugin for Moodle or WordPress and build them on your own turf.

This week I worked on updating existing YouTube videos related to open education, and I wanted to update my existing Storyline course that contains the videos (it’s like a Netflix-style video gallery). I wondered – would it be possible to recreate this format using H5P? I would love to be able to share this course and know that anyone with a computer/internet would be able to make a copy and make it their own!

Yep, it was possible!

storyline versus h5p

I used H5P’s Course Presentation format to develop it. H5P doesn’t allow you to duplicate elements like Storyline does, but if you build out a master slide, and build out the background graphics separately, you can clone the master slide and just swap out the background.

The original Storyline file had cute graphics for each video, whereas in H5P I either embedded the video or selected the “Display as button” option so that the tutorial shows the videos as icons, and when the user clicks, the tutorial lightboxes the videos.

You can use the “Display as button” option for Text, Images, and Videos. I didn’t use any of the other interactive options, like quizzes or games, and I deactivated the player bar because I have on-screen navigation. Storyline lets you choose the slide size, whereas H5P has a fixed 2:1 ratio.

Check it out! I love that the look and feel is very similar between these two versions!

 

Built with Storyline

(By the way, the Storyline version is a couple years old, so some of the videos are dead or out-of-date!)

 

Built with H5P

Click Download above to get the H5P file, or visit the H5P site to get a copy.

Publishing and Viewing Courses

posted in: Explainer | 0

If you’re new to elearning development, or using Storyline or Captivate for the first time, you may have struggled to learn the software only to experience new issues when trying to view your first published course. Viewing your courses locally (i.e. viewing local files in your browser) is more challenging than ever as browsers continue to crack down on Flash.

So let’s talk about what’s going on when you open your published course only to find a blank screen!

blog post title: publishing and viewing courses

Flash (SWF) vs. HTML5

Adobe Captivate and Articulate Storyline publish in both SWF and HTML5. So, what is Flash/SWF? And what is HTML5?

Long story short – before HTML5, there was no easy way to put video or animation or interactivity into a webpage with using add-on software that users had to install themselves, like Flash.

Here’s an old video that talks about what Flash does: What is Flash? (YouTube). Flash used to be the only way to deliver animated and interactive content. Now, Flash is considered outdated, and a security risk by major browsers (like Chrome and Firefox) such that Flash content is often blocked. This is a problem if you publish Captivate courses in SWF, which is the Flash file format.

However! HTML programming caught up so that we don’t really need Flash anymore – we have HTML5! Here’s a good, short overview from 2011: What is HTML5? (YouTube).

Now that it’s 2017, HTML5 has matured, and it basically does everything that we used Flash for. And, HTML5 is not a security risk. Furthermore, you may have heard that Flash is dead and/or dying, but it finally got a death date: 2020! See: Flash & the Future of Interactive Content.

This is important stuff for you to know as an elearning developer! You don’t have to know code (though it helps), but you do have to know how to publish your courses so that your learners will be able to access them.

You need to know this stuff so that you can publish your learning object and your learners can access it! If your learner can’t view your learning object, it’s likely that Flash is blocked in their browser.

Here’s a really great how-to guide from Articulate on viewing courses locally: Local Playback of Published Content.

Delivering Your Course

Adobe Captivate will publish your course as Flash (SWF), as HTML5, and as a PDF (which is just Flash in a PDF). Or, it will also publish your course as an app for Windows or Mac. All of these have pros and cons. Storyline will publish in Flash and HTML5, but not as a PDF.

HTML5 is a mature technology, but that doesn’t mean that Storyline or Captivate always do a great job publishing in HTML5. It might be glitchy. But, Flash often causes problems as well due to browsers trying to block it. It’s neat to publish your learning object developed in Captivate as an app – but this can be a security risk as well, and you’d have to publish for both Windows and Mac.

If you’re not using an LMS, you’ve got to host your course on the web so that you can distribute a link to your learners. If you are not knowledgeable about web hosting, this has a bit of a learning curve. Here’s a good video explaining web hosting: What is web hosting? (YouTube).

If you are interested, here is some info on how to publish your course to a web server:

How to Design for a Standalone Kiosk

posted in: "How To" Guides, My Work | 0

I design a lot of learning experiences, but usually they’re accessed directly by users with the web address, or via our LMS.

But what if you were asked to design a learning experience that would live on a computer kiosk, waiting for passersby to engage?

Design a Learning Experience for a Standalone Kiosk

I wrote recently about my experience re-designing my Open Access Jeopardy game for standalone use on a giant touchscreen TV. I had actually created two versions: one to be included on an email to all faculty at our institution that they could play on their own, and another for use on the touchscreen TV.

There is one big challenge with designing an effective learning experience for a kiosk: how do you set it to refresh periodically, if someone abandons what they were working on?

I was thinking of museum or information kiosks: they’re fun to play with, but users don’t reset it for the next person, because you know it will reset automatically. I had NO IDEA how to accomplish this myself, but I know it has to be done because the Open Access Jeopardy game has THIRTY questions and I really doubt learners are really going to make it through all of them.

But I didn’t know how to develop an auto-reset because Articulate Storyline doesn’t have a “time-out” feature that will trigger a reset, and it doesn’t have the ability to jump to a given point on a timeline.

My initial solution to this challenge was to program in several reset points on the base layer. When triggered, a layer appears that counts down to a reset, which can be cancelled.

But, of course, there is a better way!

[Jump ahead to How-To]

As long as the kiosk has an internet connection, the Storyline course can be hosted on a server and pulled up in a web browser.

And somehow, I didn’t think of this at first, but there is actually a plugin for Chrome called Kiosk that does exactly what I was looking for: automatically resets the web page at given intervals. Additionally, it locks down the browser with a username and password to control the experience and keep users from navigating elsewhere.

Brilliant!

However, I gave myself an additional challenge with this project: I wanted to collect statistics on how many people actually stop by and play the game.

Normally, I embed my Storyline courses into LibGuides as iframes, or I load them as SCORM packages into our LMS.

I didn’t want the LibGuide experience for this one because I wanted a really clean look that kept the focus on the game.

I didn’t want to load it into our LMS because I didn’t have a good place to put it, plus an LMS login would timeout periodically.

I have some experience using Google Analytics, so I decided to give that a shot! (Google Analytics is free, by the way, and you can generate up to 100 separate instances [you need one instance for each website you want to track]).

BUT – if your tutorial is automatically resetting periodically, how do you distinguish between visits to the web page as a result of resets, and actual players stopping by to interact with the course?

You create two separate Storyline experiences, of course! And assign each their own Google Analytics instance.

I ended up designing a separate Splash page from the game itself. The Splash page is a grayed out image that invites passersby to play:

When users click on the Let’s Play! button, the browser opens up the webpage that contains the actual Game:

The Splash page lives at /OAjeopardy2-kiosk/story.html, while the actual Game lives at /OAJeopardy2-Kiosk-Game/story.html.

When an abandoned Game automatically resets, or Kiosk refreshes after no activity, the original Splash page loads again. Thus, the Game would ONLY load when someone actually wanted to play.

I created two Google Analytics instances for these: one for the Splash page, one for the Game. You just have to embed the code into the <head> section of each of the .html files for each Storyline course: in story.html, in story_flash.html, and in story_html5.html.

I had to do some flowcharting and make some careful notes to make sure I didn’t screw anything up.

I thought this would work great! It would be a seamless experience for the user, and I would collect Google Analytics on how many times the Splash page refreshed as well as on how many times the Game page would be visited by actual players.

However, of course there was another problem I didn’t think of (story of my life!).

This approach unfortunately leads to lots of new tabs in the browser, IF the browser even allows pop-ups. If you use Kiosk with Chrome, the new tab will actually open as a smaller window and it’s very strange.

See all the tabs?

UGH. Why can’t things just work the way I dream they will?

Of course there are extensions for Chrome to try to fix this problem: I tried out a couple, including an extension called TheOne and another called OneWindow.

Alas, Open Access Jeopardy defeated both of them.

I discovered the solution: use javascript to open the URL for the Game and Splash pages instead of the standard Jump to URL.

Here’s the code, thanks to this StackOverflow page:

window.open(“https://www.youraddress.com”,”_self”)

I deleted the trigger that jumped to the URL, and instead created a new Execute Javascript trigger where I entered the above javascript (replacing it with my splash/game URLs respectively).

IT WORKS!!! Now, no new tabs are created: everything opens in the same tab in Chrome.

I did plug in the Google Analytics code to both the Splash and the Game html files, and 24-48 hours later, I got data! (Seems to take a day or two for data to collect).

Yeah, OK, so I had a whole 5 people play the game itself. But since I have a separate Google Analytics code plugged into the Splash page, I saw that it refreshed 9 times, so at least my Game statistics are legit!

I mentioned earlier that I created two versions of this game: one to be emailed out to faculty as well that doesn’t auto-reset.

I plugged Google Analytics into that, too!

LOOK AT THESE STATS.

OK, so in the great scheme of things we still didn’t get many visitors, but I learned that faculty were most likely to click on the link to the game when they got the email (sent out on October 23rd, obviously).

You know what else is really interesting?

The fact that 61% of users were kicked to the Flash version of the game, and 39% of them used the HTML5 version.

This is really valuable information about how my users are interacting with this game, and it makes me SO GLAD I was able to upgrade to Storyline 3 because the HTML5 output is so much more stable and does what it’s supposed to.

Using Google Analytics, I can also see what browser and device my users are on.

Great stuff!

Want to do this yourself? Here’s how:

Here’s what you need:

  • Storyline project for your Splash page
  • Storyline project for your Game/Experience
  • Web server
  • Google Analytics instance for your Game/Experience, and also for your Splash if you want

Here’s how to do it:

  1. Develop your Splash project and your Game/Experience project. As an example, here’s my Splash page for Jeopardy, and here’s my actual game. (Want the source files? Have at it).
  2. Decide where your project will live on your web server – write down the URLs for both your Splash page and your Game page. These should live in separate folders.
    For instance – my Splash page is at OAJeopardy2-Kiosk/story.html, and my Game is at OAJeopardy2-Kiosk-Game/story.html.
  3. For your Splash page, create a trigger to Execute Javascript when your user clicks the button to play the game. Use this Javascript code, which will force the URL to open in the same tab/window rather than a new one:
    window.open(“https://www.youraddress.com”,”_self”)
    The URL is where your game will live. DON’T just use Jump to URL because this will open a pop-up window and that’s messy and doesn’t work with the Kiosk extension (and some browsers won’t allow pop-ups at all!).
  4. For your Game, build in some sort of reset screen or action, and again, create an Execute Javascript trigger with the same javascript code, EXCEPT this time the URL will be where your Splash page will live.
    I have my game set up with a dramatic fading Reset screen that automatically executes the javascript at the end of its timeline.
  5. Publish your projects and copy them onto your server. Make sure they’re accessible at the URLs that you already planned out in Step 2.
  6. Set up your Google Analytics instances (aka properties). Here’s some help on how to set up your Google Analytics properties.
    I set up a property for my Splash page, and one for my Game, just so I could confirm the stats were different and everything was working properly!
  7. Insert the proper Google Analytics code into the <HEAD> of story.html, story_flash.html, and story_html5.html for the Game. (Right-click on these files and select Open in Notepad or Text Editor or similar so you can see the code. You can CTRL-F to find the head). Make sure you save! You’ll have to wait 24-48 hours for stats to start appearing in Google Analytics.
  8. Install the extension Kiosk for Chrome on the device that you plan to use as a Kiosk.
  9. Before you’re ready to unveil your new project to the world, launch the Kiosk app, and enter the URL for the Splash page as the Content URL. Be sure to whitelist your domain – you want to ensure that Kiosk will allow the new URL to open! Tweak the rest of the settings however you’d like.
  10. Test, test, test!
  11. OK, now unveil your project to the world! Enjoy watching user interactions and collecting stats from the comfort of your computer by using Google Analytics.

For bonus credit, figure out how to use xAPI instead of Google Analytics!

Enjoy!

Badges and Microlearning: The Perfect Match

Delighted to present at DevLearn 2017 with Dr. Cynthia Gautreau and Dr. Barbara Glaeser, two of my colleages from Cal State Fullerton’s Instructional Design graduate program.

Slides

Kahoot Game

Play the Kahoot! we opened our presentation with.

 

Spark Tutorial Demo

Learn more about the Spark Tutorials.

All New Jeopardy for Open Access Week

Open Access Week is almost here! To celebrate, another librarian asked me to update our existing Open Access Jeopardy game with additional questions and another round. (Note: I’m not responsible for the questions [some of them are crazy], only for developing the game).

I originally developed OA Jeopardy from an amazing Jeopardy template created by E-Learning Heroes member John Harker. I have a habit of making many of my Storyline raw files available under Creative Commons licenses for others to reuse, so my delightful colleagues at Arizona State made it their own! (The power of Twitter!)

For this new version, players must win the game to enter a drawing for Cal State Fullerton swag. This was a design challenge: there are 30 questions altogether related to Open Access and our forthcoming institutional repository. The average person is not going to be able to answer most of them. So how do you determine the necessary points to “win”?

Furthermore, the requesting librarian mentioned that they might load this game onto a touchscreen TV, which would be left in a public space for passersby to play. But if it’s unattended, some people will play only a few questions, and then give up! How do I program the game to automatically reset for the next player? (I was thinking of museum or visitor kiosks and how they reset automatically for the best user experience).

Solutions: I decided that players would have to achieve half of all possible points on the first round to move onto the second round. The score resets at the beginning of round two, which is Double Jeopardy, and players are given a new target, which is again, half of all possible points on round two!

Figuring out the auto-reset problem in Storyline was tricky, because Storyline doesn’t have a feature that allows you to set triggers to jump to given points on a timeline. I wanted to give players a warning that the game was going to time out, not just have it reset on them, so I designed a slide with a ten-second countdown which warned users of an impending reset, and placed triggers on the base slide at a few minutes apart that would jump to the reset slide.

Each question is on a separate layer and the layers pause the timeline of the base slide so that as long as the player is actively playing, they should have oodles of time before a reset slide would appear.

The reset slide jumps to a full reset of the game and ends up on a splash screen that invites users to play and refreshes itself every 60 seconds to draw attention and also keep the images from burning into the TV screen (though, is that even still a thing?).

Anyways. While I’m still not responsible for the questions, I’m pleased with the solutions I came up with to these design challenges. I ended up making two versions: one that you can email to faculty/whoever to play on their own time that won’t reset automatically, and another that has the built-in auto-resets that we can plop onto a touchscreen TV and leave out for people to play.

Try them out yourself, and download the raw files if you like!

Happy Open Access Week!

Play Now and Download

Open Access Jeopardy 2 – Private Computer Version

Open Access Jeopardy 2 – Kiosk Version

You can still download the original one-round version over on my portfolio.

DevLearn DemoFest: APA Citation Tutorial

posted in: Conference, eLearning, Projects | 0

I’m not only presenting on badges and microlearning at DevLearn, I get to show off one of my favorite projects! I’ll be spending two hours at DevLearn’s DemoFest showing off my APA Citation Tutorial, which is a non-linear scenario-based learning experience.

We all know learning to cite your sources using a given style, like APA, is not fun. But the only way to learn it is to do it. Learning APA style is really about learning to apply the style’s rules to given information, but the citation tutorials I’ve seen so far are incomplete and mostly just require students to identify parts of a citation, or drag and drop given parts into proper order.

In this tutorial, students are given a more true-to-life scenario: they’ve finished writing their paper, and now they have to cite the three sources they used! They are provided with browseable virtual versions of the sources as well as an APA style guide. It’s up to them to complete the citations, and they have the option to play games along the way to help them figure it all out!

The goal is to get students to start practicing creating their own citations by having to look up the style information and put it into action, just like in real life. This tutorial doesn’t try to force them to memorize information, just to figure out how to apply it.

I’ve already written a bit about this tutorial in a past blog post. But here, I’ve put together a demo version so that allows you to quickly explore an abbreviated version of this tutorial!

View tutorial full-screen

Also check out these standalones:

Recommended Online Learning & EduTech Conferences

I’m very excited to attend and present at DevLearn next week in Las Vegas, but there are lots of very good online learning/edtech conferences to attend across the country!

I got these recommendations from my own experience and the WCET Discussions listserv (my POW is a member of WCET, which is an education nonprofit).

DevLearn

WhatDevLearn (of course!) is put on by The eLearning Guild. It’s pricey (I’m starting to suspect this is common for edtech conferences) but there is a discount for nonprofit/academic.

What is The eLearning Guild? “A member-driven organization [that] produces conferences, online events, online and blended training courses, eBooks, white papers, research reports, and Learning Solutions Magazine—all devoted to the idea that the people who know the most about making eLearning successful are the people who produce eLearning every day in corporate, government, and academic settings.” (From About page). As far as I can tell, it is NOT a nonprofit.

Why: DevLearn is more corporate than education – it brings together hundreds (thousands?) of instructional designers, program directors, etc. These are my people, and I love this conference! I’ve been twice now. It’s a great conference to talk about specific technologies and latest trends in educational technology.

When and Where: October 25-27, 2017 (Every year in fall in Las Vegas!)

EDUCAUSE Annual Conference

What: EDUCAUSE Annual Conference

What is EDUCAUSE? “EDUCAUSE® is a higher education technology association and the largest community of IT leaders and professionals committed to advancing higher education.” (From About page).

Why: This conference has a focus on higher education IT, which includes edutech. They have a HUGE expo with hundreds of technology providers. There are programs for those in leadership positions, and several conference “program tracks” for attendees to follow.

When and Where: October 31-November 3, Philadelphia

OLC Innovate

What: OLC Innovate. OLC is the Online Learning Consortium, and they’re putting this conference on in conjunction with MERLOT, which is the Cal State system’s learning object referratory. Looks like a “big picture” conference that looks at educational innovation as a whole.

What is OLC? “The Online Learning Consortium is the leading professional organization devoted to advancing quality online learning providing professional development, instruction, best practice publications and guidance to educators, online learning professionals and organizations around the world.” (From their home page).

Why: Call for proposals is open until November 1, 2017! Okay, I realize that’s not really a why, but I’m a compulsive presenter since I’m tenure-track. Anyhoo, OLC puts on a lot of conferences, nationally and regionally, focused on higher education. You can check out 2017’s program for an idea of what proposals are accepted – looks like a really nice variety of “how-to,” and “how we did its.” This is one I’m seriously considering attending. “Topics may include: Teaching and Learning Innovation; Leadership and Change Management; the Education-Workforce Continuum; Processes, Problems, and Practices; Effective Tools, Toys and Technologies or Research Highlights and Innovations.” So, more big-picture stuff.

This conference focuses on educational innovation (vague, but interesting!) and seems to emphasize hands-on workshops for attendees.

When and Where: April 18-20, 2018, Nashville. (Which means I can’t go because California won’t fund travel to Tennessee due to discriminatory laws passed there! Wait, isn’t that hypocritical that MERLOT is jointly organizing? Anyways. Must’ve been planned way in advance).

OLC Accelerate

What: OLC Accelerate.

Why: This one focuses on eLearning! “Topics this year will likely include Gamification, Women in EdTech, OLC Quality Scorecard, Policy Development, Open Educational Resources, and much more.” (From About page).

When and Where: November 15-17, 2017, Orlando (EPCOT!)

(Here’s more info on OLC’s various conferences!)

ISTE

What: ISTE conference

What is ISTE? International Society for Technology in Education. “The International Society for Technology in Education (ISTE) is a membership association serving educators committed to leveraging technology to solve tough problems and advance learning. ISTE serves more than 100,000 education stakeholders throughout the world.” (From About ISTE).

Why:

“The ISTE Conference & Expo is recognized globally as the most comprehensive educational technology conference in the world. For more than three decades, educators and education leaders have gathered at the ISTE conference to engage in hands-on learning, exchange ideas and network with like-minded thinkers seeking to transform learning and teaching.

The annual event attracts over 16,000 [emphasis mine, holy cow that’s a lot of] attendees and industry representatives, including teachers, technology coordinators, administrators, library media specialists, teacher educators and policymakers. Attendees also enjoy world-class keynotes, hundreds of sessions in a variety of formats and a massive expo hall.” (From About ISTE).

I kind of want to attend this one, but it sounds a little too big for me!

When and Where: June 24-27, 2018, Chicago

Distance Learning & Teaching Conference

What: Distance Teaching & Learning conference. Small conference organized by UW-Madison’s Continuing Studies’ Distance Education Professional Development team. Higher-ed focused.

Why: “The conference program emphasizes evidence-based practice, educational innovation, practical application, and peer to peer networking and collaboration. The goal is to provide a transformative professional development experience at an affordable price.” (From About page). See more on Goals & Info page. Sounds like it will probably mostly draw attendees from the regional area, but Madison is a great city to visit (except it is very white, FYI) and if you are local-ish or don’t mind the travel, “affordable” and being able to learn from elearning professionals sounds like a great reason to attend!

When and Where: August 7-9, 2018, in Madison, WI.

 

Of course, there are many more! Check out this infographic from EdSurge that features dozens of interesting conferences.

Connecter, Adviser, Creator: The role of the instructional design librarian in campus OER initiatives

Notes and resources for my round table at the Open Education Conference 2017 on the role of the ID librarian in campus OER initiatives: Connector, Adviser, Creator.

Handout

Download handout from Dropbox

More Resources

Things I’ve Developed as an ID Librarian

Pollak Library Elearning YouTube

Pollak Library Elearning Repository

LibGuides

Blog Posts That Might Be Relevant

How to become an instructional design/elearning librarian

Instructional Design Librarian Starter Kit

Get started with elearning development

1 2 3 4 6