Introduction: MIT App Inventor: App for Children Who Need to Learn How to Read, Write and Speak.
I'm almost ending my high school career. For my last project for STEM I had to come up with a project whit some social value. So I decided to make an app for children who need to learn how to read, write and speak. I made this app with a rather simplistic, but nevertheless kind of difficult, software: MIT app inventor. I struggled a lot but I think I can be happy with the final result.
Supplies
For this project I didn't need a lot of supplies.
- Most importantly: access to a computer
- Mobile ANDROID phone with MIT AI2 companion app
Step 1: Learn How to Work With MIT App Inventor
The most important thing, you always have to start with, is learn the basics. I was lucky I had already worked with MIT in previous years, but you have to know the basics. MIT app inventor looks easy when starting, but you really have to know what all the blocks do. You should definitely know how to make a good lay-out for your app. I suggest you watch some beginner tutorials if you've not yet worked with MIT app inventor
Step 2: Thinking Out the Lay-out
When you control the basics of MIT you can start with designing your app. I will now explain the different components of the app:
1.First, the home screen: you start with 3 options, speak, write or read. I used icons to make it clear for the children to.
2. We'll start with the speak option. When you continue you get 2 options: exercise with parents or game. We'll start with the first one.
This screen (Spreken_Screen2) is designed to use together with an adult or at least someone who can read. The adult can choose a picture out of the phone's gallery. Then they have to fill in the thing showed at the picture validate it and it will be shown under the textbox. When the user presses clear, the exercise can start again.
Then the second option, the game. At this screen (Spreken_screen) the child gets the picture of a thing, in this case a cow. Then the child has to press the sound button and pronounce the word at the right way. When the user is done speaking, it has to press ok and the app will tell whether the word is right or wrong. When the child is ready, he/she presses next and the next picture will appear.
3. The next module is the writing option.
It's built the same way as the speaking game. The user gets a picture but know the child has to type the correct word and the app validate if or if not it's correct. The settings part of this screen I will explain in a second.
4. The last module is the reading option. It's designed the same way as the rest of the small games, but in this case the child gets a word and has to point out the right picture.
One difference I made in the writing component is that I gave the user the option to add more pictures. Now I use the same 4 pictures every time again. Now the user can enter a question, an answer and a picture. From then on this question will aways be in the row of questions.
Step 3: What Components I Used
Now I'll explain how I made my plan work.
For my writing game itself (without the settings) I used 3 different components. First of all, an image component, here the picture of the animal or thing is being showed. I also used a textbox component, here the user has to type in its answer. Lastly I used 3 buttons, one to validate the answer and one to get the a new picture/question. The last button is just a simple button to get back to the home screen.
For my reading module it's a little bit different. Here I used a label-component that shows the item that has to be found. Then I used 4 buttons with 4 different pictures in, these are the options available. When the child pointed out the right image a label will tell if it is correct or wrong. Here also are a Back and next button present.
The speaking game has one different component extra. It has a SpeechRecognizer. When the user presses the sound button, the device will call up the microphone and the user can say its answer.
In the speaking exercise I implemented a ImagePicker, this gives the user the chance to choose a picture from their own gallery.
Then for the settings module at the writing screen. Here I used to 2 textbox so the user can add an answer and question. There also is a ImagePicker present to choose a picture from.
Step 4: What Blocks I Used
For explaining what blocks I used, I will use the writing module as example. This because all the games are based upon these blocks. I will explain the blocks using the picture attached.
So at the top you can see the variables. For each component (question, answer and picture) I had to make a separate list and matching variable. Further I had to make variable that was keeping hold of the number of question. So my first question got number 1, my second number 2 and so on. The last thing at the top handles back button, so when it's pressed it will open another screen, namely the home screen.
So now the important stuff. When the Answer button is clicked the app will look if the word filled in in the textbox is the same as the answer in the list. When its the same, RIGHT will appear in the label otherwise WRONG will appear. Then the next component, when the Next button is clicked, the label where right or wrong appeared will change back to nothing, so as the textbox the answer was filled in. Then the app will count 1 number extra and show the next answer and picture.
Now I'll explain how to settings module works. It consist of again 3 almost exactly the same components. So when the add button is clicked, the app will look if the item is not already in the list. When it isn't the app will add the item to the list and store it in the tinyDB. When it is in the list it will call notifier saying: "Item already in list". The app will also look if an item is filled in. When it isn't it will also call a notifier. The answer and picture component are built the same way.
The rest of the screens are built almost exactly the same. They don't need extra explanation but I will add the blocks in the attachment.
