Quiz App

What We're Going to Learn Today

This tutorial will guide you through the steps of making a Quiz App that introduces creating a list and its index. We assume that you are already familiar with App Inventor and have worked through several of the earlier tutorials. Watch the movie below to see what the Quiz App looks like and how it works.

The movie and tutorial feature an app that was designed for adult English language learners. It is a quiz that checks understanding of how to form the comparative of adjectives (the "er" form) in English. Once you know how to build this app, you can modify the app to make a quiz that interests you (foreign language vocabulary, trivia, the elements of the Periodic Table).

Getting Started

    1. Go to the MIT App Inventor and log in using your Google account

    2. Click on "My Projects" on the top and then press the New button.

    3. Name the new project Quiz_App

    4. Click to open it

Connect Your Android Device

    1. If this is the first time you've connected your Android device, see this App Inventor page for directions. http://appinventor.mit.edu/explore/ai2/setup-device-usb.html

    2. Once you have tested your connection and know it works, go back to your Quiz App project and click on the Connect drop down at the top of the page. Select USB and the blank app should appear on your device.

Let's Start - Designing the opening screen

Here is how we designed the opening screen. You can modify this if you'd like. The components that will be programmed to change are Image1, QuestionLabel, and the CorrectOrNotBox. The question word appears in the QuestionLabel, the answer will be typed into TextBox1 and after the Submit button is clicked the answer is compared to a list of correct answers and "Correct!" or "Wrong! Resubmit" is returned. If the answer is still wrong when resubmitted the app gives the correct answer.

Programming the app

This app uses lists for the quiz words, answer words, and associated images. Start by creating these lists.

    1. From Variables pull out the initialize global (name) to block, add a make a list block, and add Text blocks to make your variable list

    1. Repeat the steps to make an AnswerList with the correct comparative for each word. A quick way to do this is to duplicate the QuestionList block above (hover on the initialize global QuestionList to block and select duplicate from the drop down menu. Rename it and alter the answers appropriately). The new blocks should look like this:

    1. Duplicate these blocks and rename the global variable to PictureList. You will rename the list members to the names for the matching images (see this LINK to upload these images and then add them to your App Inventor program).

    1. All lists have indexes. The index is the number that corresponds to the item on the list. The items in the list are numbered beginning with 1. However, we need to tell app inventor that we have an index. Create this global variable (even though this index is called "currentQuestionIndex" it will work for all of our lists):

    1. Next define the initial screen using the when Screen1.Initialize do block to set the Image1 picture and the QuestionLabel text. It should look like this:

    1. The NextButton will bring up the first quiz word and subsequent quiz words.Drag out a when NextButton.Click do block. Clicking the Next button will move you through the lists. Build the block to look like this:

    1. When the Next button is clicked you move forward through the items on the list by adding one to the currentQuestionIndex. You need to add blocks to check if you are at the end of the list and, if so, to reset the index to 0. Add an if/then block to do this and place it at the beginning of the when NextButton.Click do string of commands so this condition will be checked with each click of the Next button. Your completed when NextButton.Click do block should look like this:

    1. When Submit (the Answer Button) is clicked the answer typed in the text box is compared to the corresponding answer in the AnswerList (the Index keeps track of the question and corresponding answer). If the typed answer is the same as the answer in the AnswerList, "Correct" will appear in the CorrectOrNotBox. Otherwise, "Wrong! Resubmit" appears in the CorrectOrNotBox. Your completed whenAnswerButton.Click do block should look like this:

    1. If the answer is incorrect,the user hits the Clear button in order to resubmit an answer. This is what the blocks should look like:

    2. After retyping an answer, the user hits the Resubmit button which will tell them if they are correct or supply them with the correct answer if they are not correct.

    1. You can expand the quiz by adding more questions, answers, and images. You can also modify this app and create a different quiz by changing the words in the text blocks in the QuestionList and AnswerList and the images in the PictureList. The answers need to be single words or unique short phrases so that there is only one correct answer for each question.