Skip to main content

Section 3.11 App Inventor Quiz App Tutorial (Optional)

90 minutes
In this App Inventor tutorial, you will learn how to create a quiz app about computer science pioneers.
In this tutorial, you will learn to:
  • navigate a list using an index variable
  • perform operations on a list, such as selecting items and checking for the end
  • use parallel lists to organize data
  • use loops with lists and standard algorithms to enhance the app
Language Objectives: you will be able to:
  • explain how items in parallel lists are related to each other
  • use target vocabulary, such as index and parallel list, while describing app features and User Interface with the support of concept definitions and vocabulary notes from this lesson

Subsection 3.11.1 Quiz App Tutorial Part 1

To get started, open App Inventor with the Quiz App template in a separate tab and follow along with the video tutoral below, or follow the text tutorial or for an extra challenge use just the short handout.
In the app, you will construct 3 separate lists for the questions, answers, and the names of image files. The first question in the question list corresponds to the first answer in answer list and the first image in the image list. This parallel setup allows you to use an index variable to associate each question with its corresponding answer and image. For example, when the index variable has the value 2, it is referring to the second question, second answer, and second image.
You will be typing in the quiz questions, answers, and image names (the image jpg files are provided in the Quiz App template).
The questions are:
  1. Which computer science pioneer broke the German Enigma Code during the World War II?
  2. Which NASA engineer was the first black female engineer at NASA and a human computer featured in the movie Hidden Figures?
  3. Which Navy admiral led the creation of COBOL, one of the first high level programming languages?
The corresponding answers are:
  1. Alan Turing
  2. Mary Jackson
  3. Grace Hopper
The corresponding images are:
  1. AlanTuring.jpg
  2. MaryJackson.jpg
  3. GraceHopper.jpg

Subsection 3.11.2 Quiz App Extensions

Here are some ways to enhance and extend the Quiz App.
  1. As you might have noticed, if the answer is β€œAlan Turing” and the user types in β€œalan turing”, the answer will be marked incorrect. That’s not very nice for the user. To remedy this problem you will want to convert both the user’s answer and the stored answer to upper case β€œALAN TURING”. (HINT: use the upcase block in the Text drawer to convert both strings.)
  2. When the user gets an incorrect answer, instead of just reporting β€œincorrect”, use a join block to also display the correct answer. For example, β€œSorry, that is incorrect. The correct answer is Grace Hopper.”
  3. Add RandomButton to the app that when clicked will display a random question from the quiz. (HINT: You could use some new blocks from the List drawer such as a pick a random item block fed into an index in list thing block to set the index randomly.)
  4. Add a fourth question (and answer and image) to the quiz. Research famous computer scientists on the Web to find a fourth person. (HINT: You should only have to modify the 3 lists and upload an image file. The code should work with any number of questions as long as you used the length of list block instead of hard coding in the number 3 for the number of questions.)

Subsection 3.11.3 App Inventor Loops with Lists

Watch the following video to learn how to use loops with lists in App Inventor (Slides).
The rest of this lesson can be finished after you learn about procedures in lesson 3.2.

Subsection 3.11.4 Quiz App Extensions with Search Procedure

  1. If/else Scoring Algorithm: Modify your app to keep score of how many questions are answered correctly or incorrectly. Be sure to restrict it so that the quiz taker can only receive credit for answering each question once (i.e., if there are three questions, the quiz taker can only be credited with three correct answers). Use this short handout to guide you with this project.
  2. Loop Algorithm for Searching: Add a keyword search capability to your app. For example, if the user types in NASA and clicks on the search button, you should find the question or answer with the word NASA in it and show that question. This will be a linear search through the parallel question and answer lists using a loop. Use this short handout to guide you with this project.
  3. Your Own Quiz App: Use the Quiz App as a template to create a quiz on a topic of your own choosing. Besides changing the questions, answers, and pictures, add at least one enhancement to the app. Be creative!

Subsection 3.11.5 Quiz App Reflection

Activity 3.11.1 Data Abstraction Reflection.

Consider the lists used in your project code above.
  1. Explain how the lists use data abstraction to manage complexity in your program.
  2. Explain how your code would be more complex if you did not have lists.
  3. If you decide to add more elements to your lists, describe how you would need to adjust your code. How do lists make this easier?

Activity 3.11.2 Procedural Abstraction Reflection.

Consider the search procedure that you wrote in the quiz app.. Describe the functionality provided by this procedure. Explain the advantages of implementing this functionality as a procedure. Describe how the program would be coded if this functionality was not in a procedure. What are the benefits of using procedural abstraction in your code?

Activity 3.11.3 Procedure Calls Reflection.

Consider the search procedure that you wrote in the quiz app. Write two calls to your procedure that each cause a different code segment in the procedure to execute. (Hint: whether the search keyword is found or not.) Describe the expected behavior of each call. Describe why this is a good use of procedural abstraction. If it is not possible for two calls to your procedure to cause different code segments to execute, explain why this is the case for your procedure.
You have attempted of activities on this page.