AppInventor:Animal App
From Notes
Contents |
Overview
This application is a quiz that asks you to match animal pictures with animal sounds. This application was our very first App Inventor application and was created in the old version of App Inventor.
Development Time: 1 Day
If you would like to recreate this application but need assistance please visit our Tutorials page.
Components
- Check Boxes
- Images
- Buttons
- Labels
- Logic
- Media Player (Sound)
- Horizontal arrangement
Creating The Application
The Interface
1. To begin, we added 4 labels, 1 image, 3 check boxes, 5 buttons, a horizontal arrangement, and 3 sound files. The first label, located at the top of the screen, was the header that introduces the application. The second label, located beneath the header, is the question label stating "What sound does this animal make?" Below the question label is a plain image. Below the image are 3 buttons representing 3 different animal noises. Below the buttons is an instruction label stating "Now make you selection and submit your answer." Below the instruction label is 3 check boxes representing 3 different animal names (the animal names should match the animal sounds). Below the check boxes are a submit button and a next button arranged in a horizontal arrangement. Next, there is a final label, a response label located below the submit and next buttons. We left this label blank because it will later display whether the user's answer is correct or incorrect.
2. After arranging the screen we uploaded a picture of each of the 3 animals to our media section. The screen should look something like this:
The Blocks Editor
3. Next, we switched to the block editor to begin adding the necessary blocks. Once the block editor was open we began by initializing the screen and switching the plain image to a picture of an animal. In this case we used a picture of a horse.
(Please keep in mind that these photos include the radio buttons not the check boxes but it is the same concept. Ex: the NeighButton.Value refers to the radio button while NeighCheckBox.Value would refer to a check box.)
4. After initializing the screen we assigned the animal sound clips to each corresponding "Click To Hear" button. This is how we did it:
5. Next we worked on creating the Submit Button. We used several if/else statements to check whether the user's selected answer matched the animal picture that was being displayed on the screen for each of the pictures. If it did we told the Submit Button to display "Correct! You know your animals!" in the response label. If the answer was incorrect the we told the Submit Button to trigger the response label to say "Sorry. Try Again." This is what it looks like:
6. The final button that we created was the Next Button. When clicked, this button switches the animal picture to a new animal and clears the response label. In addition, once Next is clicked the header is no longer needed, therefore we used the next button to clear the Header Label. For our application we used a horse, cat, and wolf. The Next Button checks to see if the current image is a horse or a cat. If the image is a horse it will switch to a cat image and if it is a cat the image will switch to a wolf image when the Next Button is clicked. Also, if and when the image changes to the wolf the Next Button should no longer be available since the wolf is the last animal. Therefore, we changed the color of the Next Button and it's text to white so that way it would no longer appear. Here's what the Next Button block should look like:
7. After completing everything in the block editor we saved the application and downloaded it to our phones. This was the completion of our very first application!
If you would like to recreate this application but require help please visit our Tutorials page.
Download It!
Click the link below to download the code files and upload them to AppInventor.
Click the link below to download the application to your phone and try it out!
Scan the barcode below to download the application directly to your phone!
