An H5P Branching Scenario That Might Break the Boat

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.

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.

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).

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…

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%

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:

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.

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.

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.

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.

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.

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: