In my last post, I talked about being a JET Program ALT, teaching English in Japan, and how and why I hit upon using Twine to make games for my students. The TL;DR version of what I said before is that they don't have enough fun, supplementary reading material and Twine solves some of the challenges I had been facing in trying to write stories for them on paper. In this post, I'm going to talk a bit about how I've gone about starting to implement my plan.
Before I get too far into this, I'd like to give a shoutout to the people on the Twine forums. They answer questions with great speed, but there's also a great deal of knowledge built up and being freely shared on the forums. A few searches and browsing through the currently active threads kept me from having to ask many questions at all.
Designing Twine Passages
Twine is organized as a series of linked passages. A passage is like a page of text in a choose your own adventure book, except that instead of having all the pages bound together in a set order, Twine can load up any passage at whim with the help of hyperlinks.
My goal is to write easy-to-read, enjoyable English text games for my students to play. In the pursuit of that goal, one thing I wanted to be able to do from the outset was make words the students are unfamiliar with into hyperlinks which, when clicked, would reload the passage with a glossary translation of the word inserted at the top. In order to make translation links clearly separate from links that would lead to new parts of the story, I opted to make story continuation links be the last few lines in every passage and be full sentences answering a direct question such as "What do you do?"
Implementing translation turned out to be a bit trickier than I anticipated, though it still wasn't that difficult. I encountered two problems, the first of which was a blesssing in disguise and the second of which was just based on a lack of understanding of how Twine's wiki underlayer interacts with the DOM.
I later realized that although I can't type in Japanese in Twine, I can copy Japanese from another program to Twine without any problems. That didn't change my mind about building the translation engine, though.
The second problem I encountered was trouble with actually inserting the glossary text into a passage. I created an HTML paragraph tag with the id "translationDisplayField" into my test passage, but couldn't get the text to insert into it properly. This was an instance in which the Twine forum goers came to my rescue. It turns out that Twine being built on a wiki framework complicates the interactions between functions and the DOM.
About the Translation Engine
It works for my purposes, but it's still a work in progress. Right now, I have one text file with English words/phrases each on their own lines and another text file with their corresponding meanings in Japanese on corresponding lines. I've buit some functions and macros that could be dropped into any Twine game for use, but I would like to make it easier/less clunky to use as well as more generalized so that multiple languages could be included in a game.
This works for my purposes, but I am hoping there's a way to make it easier to use and require less copy-pasting of display field code. Until I get that to a happier state, I won't bother generalizing the code for other languages. I have planned for doing so, however, and it should be easy enough to implement.
Another thing I want to do eventually is have the initialization code sort the glossary after loading it in so that I can employ a binary search instead of going through everything manually. Right now I'm not working with large enough word lists for that to be critical, though, so I'm focusing more on designing the first game the engine will be used for.
The story's current draft is available here, but is not yet complete. There are a couple of early endings in place and I know where I want to take it, but I'vr just not finished it yet.
Besides writing the story itself (which is time comsuming because I'm aiming it at first-year students and regularly have to check the textbook to make sure I'm sticking to grammatical structures they've learned), I'm still working on how exactly I want to present the material. I mentioned earlier that I had decided on having links to translations in the passage text itself with story-affecting choices as full-sentence answers to some kind of question; after showing the game draft to some other ALTs and listening to their feedback, however, I'm thinking that maybe I should move translation hyperlinks out of the text, perhaps to the bottom of the passage, to encourage the students to try to figure out meaning from context.
I also did a Twine game for Ludum Dare this past weekend (shameless plug), and in so doing learned more about CSS in Twine. I haven't messed with the look of the student game much yet because getting it completed was my main priority, but now that I know more, I'm thinking that if I pulled the translations/definitions down to the bottom, it would be easy to make those links all a different color, which would help distinguish them from the choice hyperlinks. For the occasional shocker word, such as "naked" as employed in the game so far, I could throw it into the main passage anyway, if I so choose.
School Computer Security
I tried to show my progress on the game to the main English teacher at my junior high school, but it failed to load properly. A quick look at the developer console confirmed my guess that scripts are being blocked on the school computers. I can register my web site as a trusted site with less stringent security, but only if I set up secured hosting. That's a thing I've kinda been meaning to do for a while anyway, so I will.
I mention it here because it was a hiccup in my plans, and one that could affect the ability of other ALTs to use this and other games I make in the future with their own students.
Progress is being made! It's very satisfying.