App Inventor Flash Cards App | Flashcards App MIT App Inventor
Hello friends,
Welcome to Obsidian Soft!
Today, I will teach you how to make a simple and easy flashcard app in MIT App Inventor.
What are flashcards?
A flashcard is a memory aid for learning some facts or definitions. By the way, you can check out my free multiplication flash cards app on the Google Play Store where you can hear the question and speak the answer!
Flashcards are excellent for learning multiplication tables, country capitals, word definitions, etc. One side of the card has the question or the word and the other side has the answer or the definition.
However, using paper-based flashcards is now old school as behind every sheet of paper is a precious tree so why not use digital cards?
So, this app will do just that.
Let’s begin…
Open up MIT App Inventor and start a new project. Make sure that the toolkit is expert and call it FlashCardsApp.
Screen 1 will be our menu screen.
In its properties, make align horizontal and align vertical both center.
From the user interface drag and drop a button component onto the viewer.
Rename to makeBtn.
Make the background color yellow, the font bold, and the font size 25.
Make the width: 50 percent and change text to “Make”.
Select this button and duplicate by pressing Ctrl + C and Ctrl + V on the keyboard for Windows OR Command + C and Command + V on the keyboard for MacOS.
Rename to startBtn and change the text in the properties to Start.
Click on “Add Screen” button. Give a name such as MakeScreen. The designer view of the new screen will open up. We will design it later but first, again click on “Add Screen” and give it a name such as “FlashCardsScreen”. This will be our screen for showing the flash cards. Return to screen 1 by choosing it in the dropdown next to the “Add Screen” button and go to the blocks section.
Straightforward code for the menu screen i.e. screen1.
We just open up relevant screens on button presses.
Get the makeBtn click event.
From the control section, get the "open another screen" block and choose MakeScreen.
Get the startBtn click event.
From the control section, get the "open another screen" block and choose FlashCardsScreen.
Now, go back to designer view and choose MakeScreen in the screens dropdown next to the “Add Screen” button.
So, let’s work on the UX design of the screen for adding flash cards to our app. The design is pretty similar to our create quiz app that we made quite a while ago.
For screen’s properties, make align horizontal center.
Drag and drop a horizontal arrangement from the Layout palette onto the viewer. Make align horizontal and align vertical both center. Make height 15 % and width fill parent.
Drag and drop a label from the User interface inside this horizontal arrangement. Make font bold, font size 20, width 30%, and change text to “Word: ”. Drag and drop a textBox from the User interface on the right of this label. Rename to wordTxt. Make font bold, font size 20, width 50%, and change hint to “Enter word”.
Right-click on the horizontal arrangement and duplicate it by pressing Ctrl + C and Ctrl + V on the keyboard for Windows OR Command + C and Command + V on the keyboard for MacOS.
Change the text for the label in the second arrangement to “Definition:”
Rename the textBox wordTxt2 to defTxt and change the hint to “Enter definition”.
Select the second horizontal arrangement and duplicate it.
Delete the label and textbox inside it.
Drag and drop a button from the user interface inside this third arrangement. Rename to saveBtn. Make the background color yellow, font bold, font size 20, and change the text in its properties to “Save”.
Select the button and duplicate it. Rename to clearBtn. Change text to “Clear All”.
Select the button and duplicate it. Rename to menuBtn. Change text to “Menu”.
From the user interface, drag and drop a ListView below the third horizontal arrangement.
From the Storage, drag and drop a TinyDB onto the viewer. This is a non-visible component.
Our UX design is done so let’s work on the blocks section.
Make a global variable flashCards and assign it the empty list block from the lists section.
When the menuBtn is clicked, we will take the user back to the menu screen which is Screen1.
When saveBtn is clicked, we will do three things:
Add an item to the flashCardsList which is actually a list with two things: wordTxt.Text and defTxt.Text.
Store this flashCards list in TinyDB against the tag “flashCards”. You can use some other word but remember the spelling as we will be using this tag quite often.
Update the listview by setting its elements to the flashCards list.
When the clearBtn is clicked, we will clear the tinyDB for our particular tag i.e. flashCards, empty the flashcards list, and set listview. elements to the now empty flashCards list so that the listview also becomes empty.
Also, we need to load the flashcards if the app is restarted so do this work in the screen’s initialize event:
getValue from TinyDB for the relevant tag and set this to the flashCards list
Set this flashCards list to the listview’s elements.
Last but not least, we can delete a particular item in the list view by tapping on it. The code for this needs to be in the ListView’s AfterPicking event.
In the after picking event, we will use the selection index of the picked item to remove it from the flashCards list.
We will also remove it from the ListView using the same index.
And we will store the updated flashCards list back in the TinyDB. Make sure that the tag is the same.
This MakeScreen is done.
Now, go to the designer view and choose FlashCardsScreen.
In the screen’s properties, make align horizontal and align vertical both center.
Drag and drop a button from the user interface onto the viewer.
Rename to flashCardBtn. Make font bold, font size 25, height 50% and width fill parent. Change the text to “Make cards first”
Drag and drop a horizontal arrangement below this button.
Make align horizontal and align vertical both center.
Make height 15% and width fill parent.
Drag and drop a button inside this horizontal arrangement. Rename to prevBtn. Make the background color yellow, the font bold, and the font size 20. Change the text to “Prev”.
Select the button and duplicate it. Rename it to restartBtn and change the text to “Restart”.
Select the button and duplicate it. Rename it to menuBtn and change the text to “Menu”.
Select the button and duplicate it. Rename it to nextBtn and change the text to “Next”.
Drag and drop a TinyDB component from the Storage palette.
UX design of FlashCardsScreen is done so go to the blocks section and add the following global variables:
When the screen is initialized, we have to load the cards against the flashCards tag from the TinyDB and then we have to show the first card’s word to the user in the flashCardBtn. Make sure that your tag is exactly the same as the one used for storing the flashcards list in the TinyDB in the MakeScreen code.
As you can see, we are also checking if the list is not empty before trying to get the word from the first item in the list. This is to avoid errors if no cards are in TinyDB.
When the flashCardBtn is clicked, depending on which side is showing, we will turn the card and update the cardTopShowing variable accordingly. Before selecting any item in the list, we will again check if the list is not empty. Our flashCardNum contains the position where we are on the list. It will be incremented when we do next and decremented if we go back by pressing prevBtn.
So, in the nextBtn code, we will first check if we haven’t shown all the cards and then, increment flashCardNum and show the word against that flashCardNum and update cardTopShowing to true.
In prevBtn code, we will check if we are not on the first card and if not, we will decrement flashCardNum and show the word against it.
If the restartBtn is clicked, we would want the cards to restart from the beginning and as an added feature, we would like them to shuffle for better memorization.
Again, this is optional and you can skip the shuffling part if you don’t want it in your app.
First, let’s make a procedure that returns a result.
Click on the cog wheel to add an input to it by dragging it
inside the procedure and rename the input “x” to “list”.
Rename the procedure to shuffle and add the following code to it.
The make new sorted list block is in the lists section.
The random fraction and comparison block is inside the math section.
Now, add the restartBtn click event and call the shuffle procedure on the flashCards list if it is not empty. Reset flashCardNum to 1 and show the card against this to the user inside the flashCardBtn.text.
Last but not least, if the menuBtn is clicked, open another screen i.e. Screen 1.
I hope you liked this tutorial. Happy Coding!
You can download the aia file for this project for a very small price:
https://buymeacoffee.com/obsidiansoft/e/279894
If you like my tutorials, consider supporting me by buying me a cup of coffee by pressing the button below:
Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.
Comments
Post a Comment