Reflections on creating an Ionic App to help learn the Dai Script
Tags: uncategorized
Published: 2020-01-07 13:39:14

---
title: Reflections on creating an Ionic App to help learn the Dai Script
published: true
date: 2019-03-21 09:32:13 UTC
tags: 
canonical_url: 
---

For SIL I created a customized version of [TeachMeWords](https://phil4literacy.github.io/TeachMeWords/) to learn the Dai characters (Dai is a minority people’s group in China).

First I’ll briefly introduce how the app looks like. On the first screen, the user chooses one of 7 lessons. After one clicks on a lesson, one can choose to either learn the words or practice them:

![](http://www.programming-decoded.com/wp-content/uploads/2019/03/DaiApp01.png)

In the learn mode, one can click on the character or the corresponding example word to hear how it is pronounced. Each lesson contains just 6 characters.

![](http://www.programming-decoded.com/wp-content/uploads/2019/03/DaiApp02.png)

In the practice mode, one hears either the character or the example word and gets presented with 4 answer options (2 different characters plus their corresponding example words). It moves to the next question once one gets the answer correct. After all characters and example words have been queried, it will repeat the wrongly answered questions until one answers all correctly on the first go.

![](http://www.programming-decoded.com/wp-content/uploads/2019/03/DaiApp03.png)

Although this is a fairly simple app, it took a few prototypes to get it the way the Dai teachers wanted to have it. The problem was probably due to the fact that they initially simply didn’t know exactly what they wanted. Understanding and communicating the requirements was made more difficult by corresponding remotely with them through a third person (another foreigner). In the end it probably would have been worth flying there to meet them and discuss things in person.

One thing I’m quite happy about is how the responsive design works. Both in the learn and practice mode the user doesn’t have to scroll in order to view all the content. If one rotates to landscape mode, it will display the buttons next to each other rather than below each other. I used the css float property for this, but I could probably have achieved the same with css grid.

One interesting issue that I had was that on some phones it would display the lessons in the wrong order, but on my phone it didn’t even though I was using an older Android version. I had to debug this issue with the Android emulator where I managed to replicate the issue (I tried an older Android version). I ended up changing the sort function.

When loading the app, the data is imported from a json file and stored inside the local storage.

The app is quite simple, but I was still hoping to do some automatic testing. Sadly, I didn’t get this working. Hopefully one day the setup for automatic testing will be built into Ionic.

Although Ionic and Cordova make things quite easy for a developer, it can be frustrating when upgrading to a new version of Ionic for instance. I actually wanted to use a simple plugin for displaying the app version, but it wouldn’t work with the Ionic version I’m using and updating the dependencies caused other issues. In my experience, updating to a new version of Ionic can cause things to break, so for the moment I refrained from doing so.

But on the whole, I was quite pleased that except for a minor issue that I was able to fix, the app worked well on all the phones we’ve tested so far.

Now I’m just waiting to find out if this app will get used and help people who want to learn to read the Dai script.