Since June I have been pretty deep in H5P support for a BCcampus project (yes. the kitchen). But I had a deep run with H5P on a project earlier in the year, likely pushing the limits of what the Branching Scenario content type can do.

I likely will write a lot below about the behind the scenes and making of (since no one really watches DVD extras, I still love the metaphor). I will try ASAP to follow my own law and get to the damn demo.

But first of all I have to toss a very appreciate thanks to Rajiv Jhangiani who offered me a small gig for Kwantlen Polytechnic University back in January to do this project.

I’d seen this on Rajiv’s blog or twitter, but what I did was taking a brilliant concept that came from KPU’s Arley Cruthers and a project she have her business communication students do to research the issue of student textbook decision making and create a multimedia representation of their work.

This was presented by Arley and her students at the 2019 Cascadia Open Education Summit in Vancouver (remember when people went to conferences in person? how quaint). The description in the Google Slide deck of Arley’s brilliant project already has excitement built in:

This semester, 50 first-year business communication students engaged in an experiential learning project where they researched textbook barriers. Initially, we thought that textbook price would be the biggest factor, but we quickly learned that the story is a lot more complicated. After the project was over, students were challenged to take what we learned and remix it in a new way for a new audience. The game you’re about to play, which was created by the students, is one such remix. Our research identified a gap between how teachers (including myself) think that students use textbooks and the decisions that students are actually making. This game addresses this gap. The characters and their budgets come directly from our research and represent the real situations facing students at KPU.

https://docs.google.com/presentation/d/13TKyqCzGgLmcq7-Csi7eSc6IsZUTfO7-fkxMujEz1zg/edit?usp=sharing

And more is built into the materials shared at the conference http://bit.ly/CascadiaOpen

The students crafted a complex table game where players take the persona of one of five student characters, and have to make decisions on how to allocate their budgets, deal with different formats of textbooks, plus manage unexpected events. They have four courses to get textbooks for, and the game provides them random options for how they can get the books (buy, skip the extra problem sets, get torrented version, use an open textbook option).

It’s brilliant because there is a lot of things you cannot anticipate, and more than that, it succeeds at given one a taste of what students deal with now, not the antique memories I have of college bookstores 30+ years ago.

Okay, the challenge Rajiv offered was to create a version of the game that could be played online, using H5P’s Branching Scenario and published in Pressbooks.

I will very soon provide the entry to a playable version of the Student Textbook Game. Take note that the 3 months (+ random time since) I did work on the game was enough to produce only one student’s experience, so it’s maybe 20% done.

Each character has a backstory, a savings balance, a living situation (income, living arrangement), goals they need to achieve (a certain amount in savings for next semester, a certain GPA). For the only character I’ve made (so far):

In addition to starting with a savings balance, players also begin with 50 “study points” and “50 health points” which get spent down through game interactions, and are also “spent” when its time to allocate those points to study time in mid-terms and finals.

And it’s likely way to complex and cumbersome to even use. I will leave that to you. It all starts in Pressbooks at https://kpu.pressbooks.pub/gamelab/

I might not see any readers again. For those who did not click, here is a GIF with a series of screens through the experience.

An animated GIF of ~15 screens of the Textbook Game

I was hindsight wise to set this up where the parts of the simulation are separated. I used links and separate pages in Pressbooks to provide information; an H5P Presentation handles the introduction and the character bios. The selection of a character is done by just clicking the images in a pressbooks page (and currently only Preet is available).

The game experience for just one character is done in a single giant, sprawling H5P Branching Scenario. To make a screenshot, I had to go to the 10% view in H5P and then still zoom out my screen about 4 click to fit in all the branches.

The structure for one character’s experience in the Student Textbook Game.

And if you think that is complex, there is the Documentation Tool embedded below the Branching Scenario that is meant to replace the score sheets used in the game as designed by the students (see example).

The “Tracker App” used to keep track of budgets, goals, textbook decisions.

I had no idea this would end up with so many pieces. But the idea was to create a place for game players to record their progress, steps, decisions, and the H5P Documentation tool does have a feature where it can be exported (as a Word doc) and shared with… well a game master.

It’s… well ridiculously complex. I ended up creating a structure like tax forms, so in the game, it can prompt a player to carry forward and update their savings:

(E1) Update your savings balance. Start with the last value entered (A1) and add to it your net monthly income (A4) (reflecting your income minus living expenses). This is what you can spend!

So in a “proper” game, all of this would be done by the game, where a display would indicate all a players statuses. But that’s not how it is outside the game. I justify this complexity to the how experience for college students being complex, and they have to be responsible for tracking their budgets.

It could be maybe simplified by going back to using a printable score sheet. But I wanted to see how this played out.

I had a lot of material to work with. The game was fully documented and scripted out for the flow. I had a PDF for all of the game “cards” (the options for a course textbook purchase at the bookstore and during the game are done by drawing a random card from a deck). This is easy to do as an in person game, the player picks a card. Later, I show the contrivance needed to do this in H5P.

The game character images were also provided, and as I found were generated at the free Avatar Maker site, did not seem to be copyrighted. And Rajiv was kind enough to visit the bookstore to provide some scene photos (ah, again, this was all in the quaint pre-Covid era).

One of the limits I found in the Branching Scenario was primitive image tools. You can add text content as a branch node or an image, but you cannot mix text and images (well actually you can as I found later, if you use the Course Presentation type as a single slide).

So a mistake, or a regret, was in part one, where the player finds out their option for a given course’s textbook, I ended up making as an image in Photoshop with the scene as background, the character, and the resulting information (for accessibility, the text is entered in H5P as alternative content. It looks fine…

Sample option for a textbook in a given course.

But as I learned, the player has to manually type that info into the Tracker tool, one cannot copy/paste from the screen since it’s all a photo of an image. I could have done them as Course Presentation tool as a one slide item, where text could be put atop an image, and text, if needed, could be copied. Then again, we do not use a mouse and copy/paste from the display in a bookstore.

I added to each textbook option provided to a player something not in the original version. It actually came to me from the photos Rajiv shared, the notion of an item number or “SKU” so the player records that as a record number too (for checking if needed).

So I have now to explain maybe the biggest challenge, and I think, the elegant end around to the game… drawing random cards. There is no means in the Branching Scenario tool to send someone to a random branch.

In the original game, each player draws a card that indicates their options for textbooks in each of their four classes. There are seven different cards, and they are distributed anywhere from 6 to 12 times, for a total of 54 possible cards.

This is a job for a spreadsheet.

What can be set up to provide a branch to 54 different results? I did not test the limits to how many different branches could be done from one item, but what kind of question makes sense to even do that? “Pick a number from 1 to 54” does not feel like a bookstore experience.

To get to 54 possible results, about the best math could provide me was maybe have a series of 2 questions each with 27 choices OR 27 questions each with 2. Yuck. So then I played with the distribution frequency, tweaking the possible number of cards to get a number that could be done in fewer branches– and that was 60 total cards. I nudged the count per each, so I got percentages of 10%, 15%, 20%

The modified distribution achieved by adding 4 more cards to the deck..

And this got a close to original distribution of options down to 20 possible outcomes. This was doable via a question with four possible outcomes, and then each one followed by a question with five possible outcomes (or the other way around).

And because of a nifty limitation on the Branching Scenario, that you cannot retrace a step, means I could use the same exact question set in the second round.

These would be the branching needed to happen when a student in the game, is say, finding the textbook option for their English 1100 course. In the game the students devised, they would draw a card from the deck.

A first idea might make the 2 questions a player responds to be connected to the textbook.. but that tends to make it a bit more obvious to the player that the questions are related to the outcome.

This my idea was to introduce the questions as more ordinary interactions a student might experience on campus; and so it is not obvious in the game what the outcome of their choices lead to.

My approach then is to create a scene, like standing outside the bookstore. The first question a player has to respond to is:

While a approaching the campus bookstore, a student to your right says, “Excuse me, it’s my first day on campus, can you tell me the best place to get a cup of coffee?”

The five possible responses are:

  1. Suggest the Tim Hortons in the student center.
  2. Apologize for not knowing as you do not drink coffee.
  3. Urge them to go to Grass Roots Cafe, it’s the best.
  4. Suggest the vending machine on the second floor. “it’s not the best, but hey, at least there’s no lines.”
  5. Go for McDonalds!

So the responses have no bearing really on anything, they just create random paths. Under each of these branches, the next one is repeated:

Your first textbook you need is for ENG 1110. How will you find out what book you need?

And the choices here are:

  1. Open your phone and look for the email from your instructor.
  2. Find the shelf since you remember the English books are on the back wall.
  3. Check with the staff person at the help desk.
  4. Google it.

The whole point is we have now presented the player with 1 of 20 possible outcomes.

Maybe I am over describing it, but the spreadsheet I created made it easy to organize this. I have a sheet for each textbook decision tree. There is a first question, that has 5 different responses, and under each of the 5, there is a second question with 4 possible responses. I then distributed the ids for Card1, Card 2,… Card7 in the distribution the game called for.

This is what once decision tree looks like in the H5P Branching Scenario to get a random textbook option for one round of textbook selection.

And what it looks like in the game:

Game screen with image of student outside a bookstore. "Eager for classes to begin, the week before classes start, you go to campus to investigate your options for textbooks." There is a "Next "button in top right
The situation setup. Clicking “next”
"While approaching the campus bookstore, a student obviously new to campus, coughs and then shyly asks, 'Excuse me, it's my first day on campus, can you tell me the best place to get a cup of coffee?' How do you respond?" five options include Tim Hortons, brushing them off, suggesting a local cafe. suggest the vending machine, or suggest McDonalds
The first question, a possible random encounter from another student. Do you want to help them pick a place to get coffee? We try suggesting “Grass Roots Cafe” (an actual cafe at KPU, I do my homework!)

Any one of these choices leads to the same set of choices, but we are, as you can see in the image above of the H5P Branching Scenario, in a different part of the tree.

"Now you enter the bookstore and begin the textbook pursuit. Your first textbook you need is for ENG 1110. How will you find out what book you need?" Answers include looking on phone for email, browse the back shelves, ask for help from staff, or Google it
The second question, how do you find the book you need for ENG 1100? Again, the consequences of the answer are equal, you just get a different option for your textbook. Being a responsible student, I choose to look for the email from my instructor.

In the first two rounds, there is a prompt screen here so they know what they have to do when their textbook option is revealed.

Now we get the random card. This is the information we need to save for our records.

You got lucky and landed an Open Textbook, this one won’t cost you a cent.

This is the trickier part. This is information that needs to be saved in the Tracker App (the H5P Documentation Tool embedded below) with the options for ENG 1100. A player needs to write down all of this info, including the SKU number (that identifies to a reviewer which “card” they got). They should enter the results of this for each round of selection.

A player enters the details for this first textbook. Yes it means a bit of back and forth from the screen above to here, but this is more real than having things saved to a readout on your eyeglasses!

Because this is something a player could miss, we provide more guidance in the first two rounds. I made a simple two question branch so than actually return to the information screen if they need again to look at the options, or move on to the next.

Prompt "Now you know your options for ENG 1100. Make sure you recorded these details in your tracker app below.  Did you get this information entered?" Yes goes to next step, No loops back to see the options again
The game provides a crude way to go back a step.

This happens 3 more times, so a player ends up with various options for four textbooks. There is a place where they make their decisions, update their budgets to reflect the choices.

This construct again is used when the game introduces twice in the game random “events” that a player has to make difficult choices on, e.g.

“You go to office hours but your instructor says you need to have an appointment in advance and won’t see you. Lose 2 study hours because of the commute and 3 health points.”

“Your instructor teaches in a way you find engaging. You learn the material, which reduces the amount of time you have to study. Gain 2 health points and 3 study points.”

“Several important chapters are missing from your torrented textbook. Your friend takes photos of her textbook pages and sends them to you, but they’re hard to read. Add 5 hours of study time. (This doesn’t apply if you didn’t torrent textbooks).”

“Your landlords decide they can’t have 4 people sharing a 2 bedroom apartment. You were the last person to move in, so you have to leave. You can’t find anything under $1000 a month. To work under the table: Lose 40 study points but gain $500 a month To couch surf: Lose 40 health points due to stress.”

The distribution of the event cards ended up with 42 possible cards from the 20 available. I just went with this, and did question sets of 6 and 7 options. A second spreadsheet shows the questions and setup for the random events.

If you think this game is complicated and the explanation here ever more convoluted… hang on.

Grades for each course are done by a process of “spending” a player’s bank of study points, but the grade options also hinge on their textbook decisions (e.g. penalty for not purchasing the practice problems, penalties for using torrented versions). This is done at a mid-term point and again at the end of the game.

That’s probably enough explainin’, why not go playin’? Try again, the Preet character at https://kpu.pressbooks.pub/gamelab/

Here’s my takeaways:

  • The Branching Scenario, at times cumbersome, is a fantastic tool that would take much much longer to master in something like Twine (maybe).
  • It takes some banging around the pipes to learn how to use the different branch types, and flow.
  • The copy/paste tool saved quite a bit of time, but still, making changes to 42 outcomes was tedious.
  • The game was likely much easier to explain, facilitate, in person, and likely to play.
  • For anyone, hopefully, this simulation hints at the complexity of issues students face with textbooks that us on the other side of the teaching space, do not see.

Just for fun and #BecauseICan here is a look at the source HTML of the page containing the embedded HP5 Branching Scenario and Document Tool. This is what H5P looks like “under the hood”

I copied all of it’s jQuery, it’s long and weighs in at about 450k.

My hats off too go to Arley Cruthers for coming up with such a fantastic, really not disposable at all assignment, and to KPU students Gordon, Harsimran, Twinkle, and Jasmine for such fantastic research and development of the game itself. Again, learn more by going to the original presentation materials Arley and the students provided at the 2019 Open Cascadia conference.

Rajiv is Ready
Rajiv is Ready flickr photo by cogdogblog shared under a Creative Commons (BY) license

Thanks to, Rajiv, for handing me an opportunity to dive deep into H5P here. I wish we could have fully developed the 4 other characters.


Featured Image:

2015/365/340 I Am The Network
2015/365/340 I Am The Network flickr photo by cogdogblog shared into the public domain using Creative Commons Public Domain Dedication (CC0)

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. This was interesting to play through, if cumbersome switching back and forth. As you said, students would really be keeping track of more than this, but I wished there was a way to do the math automatically like in a simulation.

    I played through it before reading the rest of your post. As a player, I felt confused by the choices that helped make the random card choices. I thought maybe I had done something wrong that I had answered a choice without an immediate consequence. I also thought maybe my choice to go out for pizza would come back later. Just from a usability perspective, that was frustrating. I understand it now though, and that’s a super cool way to make the complexity more manageable without having an obvious random number selection.

    I did have a few spots where the tracker was too wide for the frame, so it was cut off on the right side. That meant some text was hidden, as well as the next button. Let me know if you want screenshots of the issues. Both the mid semester and late semester event had the problem.

    This was a very cool scenario to see though. Thanks for sharing your work so I could see how you built this!

    1. Thanks for much Christy for giving it a run through. I found a lot of constraining limits of H5P, especially on how some things are displayed (often with the text, where I could not overwrite CSS, like in the text boxes, it always puts 0 margin after paragraphs). And the only “tracking” the scenario app could provide is some kind of score counting for quizzes.

      So it was an exercise into trying to do what was possible.

      I will look into the wider rendering displays of the tracker, it might be an issue of the pages with images.

      Again, greatly appreciated.

  2. OMG this was interesting. We have been working on conditional branching in our CALI lessons for years and actually did implement a version of conditional branching in our A2J Author software that helps people fill out court forms.

    All your experiences were very familiar – figuring out how to make the tool do what you wanted the user to experience. It’s a big problem with our authors – training the trainer and all that. They often come to a tool like this thinking it’s easy to keep track of all the branches or easy to add more branches and do not realize how quickly things can get combinatorial.

    We’re looking at H5P right now and hope to constrain the author’s work space so they don’t get too deep into the weeds. Your insights on randomity are especially helpful.

    1. Thanks John, I can certainly see many applications for the work you do at CALI and please share what you discover with H5P. Maybe one of the things I respect most is that it’s a form of content not tied to just one platform.

      Hope you are well! I always am indebted for the time you brought me out to Denver.

  3. It is crazy how big and complex things get with these and how quickly that happens.

    I’m working on something similar with a narrative poverty simulation for a nursing course that deals with community health. It’s attempting to replace a f2f experience. Tricky to navigate a chunk of things tied to race, gender, finances . . .

    I am still messing around with the live demo phase where we’re working through what variables are changing and how to track them through multiple “plays” so I’m hitting similar considerations and it’s helpful to see how you’re thinking about it. I don’t think we’re going to grade it but coming back multiple times without a user account will be a hassle.

    I think we’re going to play it out entirely in a custom WordPress theme. I’m hoping it’ll lay the bones for a generic framework for creating the choose your own adventure pattern. I don’t think it’ll ever be widely used but I always wanted to build one . . . more to prove a point than anything else.

  4. Alan,
    Now I see what you’ve been up to with branching, this is fantastic. I skipped to playing it before reading the post. I have to admit I thought it would be easy at first until I got to the fourth book. I like how it kind of lured me as a player to think that the decisions didn’t make that much of a difference until then. I ended up dropping the four classes (I didn’t read the “goal” of the player too closely) and was taken aback when it said I failed.
    As a player I tried to answer the coffee questions and cell phone ringing as I might in real life. As an ID I was so curious about how they were included/what their function was.
    Thank-you so much for the detailed breakdown of your experience with the tool and showing off the final product. This is exactly the kind of thing that is helpful for future H5P branching builders.

    1. Thanks for playing it through JR — there’s likely more we could write up front to set the stage for the experience.

      I wonder if the game player experience perhaps gets in the way- the expectation that every branch option has a consequence. Does that mean every interaction we have (in the old days of being out in public) really have an implication for what we do (Butterfly effect aside)? There are plenty of choices we make day to day that don’t have impact.

      The questions were honestly an Alan Levine concoction, tried to imagine things this character might come up with, I just needed to interject 2 incidents to get to a random result. Maybe having them back to back is not the best….

  5. I know H5P is used for “gamifying” some study tools. But Branching Scenario is definitely the HyperCard-like toolkit for things that not variations on flash cards. Sounds like a bit of heavy lifting to get it up to a “game-engine” in a sense. Getting all the media together for all the screens, assembling it with all the navigations. Shades of Macromedia Director, Authorware, ToolBook, PLATO, Supercard, HyperCard and all the programmable environements that had some amount of “interactivity” built-in. Kudos for plunging down into this. You got a real artifact out of it. Something better than a demo, more than a minimum viable product. ;^)

    1. Thanks Eric. it’s hardly a game engine, but I did want to see how far one could take it. The defaults on the tool “Start Course” for the opening button, and scoring as a sum of quiz interactions feel pretty limiting to me.

Leave a Reply

Your email address will not be published. Required fields are marked *