Storytelling can be a powerful way to learn a new language. You easily pick up new words from context, get a natural feel for the rhythm and most importantly, it’s a lot of fun. For a couple of years now, I’ve been experimenting with taking this simple but powerful method my books are based on and adapting it into more interactive and shorter formats.
The first iteration of this idea was the Schlaflose Sarah story which is told in a chat-like format where learners can unfold the story one message at a time, get helpful translation and pronunciation along the way.
The overall response from learners was really positive. People just wanted more stories in this format. So a few weeks ago, I set out to create another story, but when I looked at the underlying code I felt it was time for a complete overhaul.
Read the whole story below or just dive right in:
This latest rendition comes as a progressive web app which is compatible with most systems and browsers (iOS users: look for the “Add to Home screen” button) and is also available on the Google Play Store for Android users.
From Twine To Vanilla JS
I originally created Schlaflose Sarah in Twine, which is a nifty tool for creating non-linear interactive stories, allowing for a lot of customization. But as the project grew in complexity (Tweego is a great compiler for longer projects), I ended up writing a lot of additional code to bend Twine into directions it was never really intended for, which made things generally functional but a bit janky in places.
Besides, I wanted to overhaul a number of core functions anyway, so I went back to the drawing-board and started writing my own “engine” in basic vanilla JavaScript, which seemed a bit daunting at first, but ultimately turned out to be a lot more stable and faster to boot.
After a few weeks of coding, I had a working prototype and started writing a new story within it. The cool thing when you’re both the “content”-writer and the programmer is that you can adapt the code to seamlessly fit the story’s needs and vice versa. This new story had multiple characters for example, so instead of being limited to only one person with one voice, as in my previous project, I simply built a new logic around it.
Dynamic Quizzes
The original app had short text-comprehension quizzes that popped up during the story, along with a simple game-like loop of collecting coins to proceed to the next level.
For this new iteration I wanted to try something a little bit different. Instead of showing every reader the exact same questions, now you will be quizzed based on the actual words and phrases you interacted with, so every “playthrough” will be different.
Also, I’ve added user accounts, so you can collect new words, practice with flashcards and even export all your glorious “Wortschatz” (vocabulary, literally: “word treasure”) in CSV format for further use in apps like ANKI or anything else, really.
Voices & Translation
For the original app, I used the latest technology in TTS (text-to-speech) at the time which was Google Cloud TTS. It was much better than the standard robotic voice synthesis we’ve all come to associate with “speaking computers” over the years, but it still sounded somewhat lifeless.
So for this new iteration, I started shopping around again and tested every newfangled TTS-service I could find. Google Cloud TTS had gotten better, but still not great, Amazon Polly was workable but again somewhat dull. Outside of Big Tech, there were numerable other third-party services I tried. But support for German language was often spotty. So in the end I settled on using Elevenlabs for this project, which imho is one of the most life-like of all the TTS models currently out there.
Obviously it’s still not perfect and needs special supervision, especially when dealing with numbers, which it insists to always (!) pronounce in English, so I have to re-create these manually by typing out numbers into full words, e.g. “23” -> “dreiundzwanzig”. Also, I wish there were more fine-grained speed controls, but all in all, I think when looking at models like Elevenlabs it’s pretty clear we’ve come a long way from the robotic “computer speak” à la Fitter Happier.
Apps, Shmapps
The original app was created as a Twine project, then converted to iOS and Android app via Cordova. It was workable, but still very finicky.
Since this was a free app, I eventually grew tired of giving Apple $100 dollars every year for the “privilege” of listing my free app on their store, and I took it down.
As an alternative I simply made the whole thing available as a progressive web app, allowing people to either enjoy it in their browser or “add to home screen”.
This time around, I’m going the opposite route, starting with a web-first approach, i.e. everything is designed from the ground up as a progressive web app which then can can be easily re-packaged and shipped to Android, etc.
IOS remains an ongoing concern, but shipping to Android was easily done in a few hours and you can get the result here.
About The Stories
So far, I’ve released a complete new story which is a fun new twist on Little Red Riding Hood titled Rotkäppchen Reloaded. Also, I’ve ported Schlaflose Sarah over to the new “engine” so you can enjoy it with the new voices, quizzes etc.
Needless to say, both of these are a bit … weird, like many of my stories. It has always been my humble conviction that life is too short for generic language learning texts. Why not have a bit of fun instead? So yeah, don’t expect tons of dull AI-generated nonsense anytime soon. This is all 100% purely hand-crafted human nonsense!
When it comes to new stories, I already have a bunch of ideas, one almost finished (*checks list* – yes, pretty weird, as well). You can turn on notifications in the app or join my newsletter to get an update when the next one is ready.
Features & Bugs
Since I released this new app on my newsletter I’ve received many helpful suggestions for features, bug reports, etc. And the overall experience has matured quite a bit since then. There’s now an auto-playback feature for passively listening to messages, “savegame” logic, opt-in (!) push and email notifications, a little tutorial for new users, and a bunch of other little tweaks.
If you have any suggestions for new features, bug reports, etc. please feel free to leave a comment below.
–
