Using Twine to teach English as a Foreign Language: Implementing the Plan

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

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.

That first problem was an inability to type in Japanese in Twine. I don't know if that is specific to the Mac version or not, but after a moment of panic I realized that it was probably for the best, anyway. Rather than translating every word individually, I would have to create a translation engine in JavaScript. In loading the Japanese text in from a file, I would create a central glossary which could be edited with far greater ease in case of a mistake and could be reused across multiple games.

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.

In its current state, the author must use an initialization macro which takes no parameters and assumes they are using exactly the file names I have for dictionary building. The initialization macro creates an object that contains the target and source text lists as arrays, a flag for whether or not to display translation text, what text should be displayed, and a function to look up a word's translation and insert it into the display field at the top of the passage. To actually use the translation engine, the author must create a hyperlink for each instance to be translated, making use of the linking syntax's ability to run JavaScript at the same time to perform translation. For any passage that they want to allow translation in, there is a chunk of code that must be inserted into the passage somewhere -- in my case, I'm putting it at the top, though that's not required.

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 Game!

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.

Conclusion

Progress is being made! It's very satisfying.