Chapter 5.5 - Quiz App

Time Estimate: 45 minutes

5.5.1. Introduction and Goals

The Quiz App presents a quiz about pioneers in computer science. The questions, answers, and images are in parallel lists where the first question in the question list corresponds to the first answer in the answer list and the first image in the image list, and so on for each element in the lists.

Learning Objectives: I 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

Language Objectives: I 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 notesarrow-up-right from this lesson

5.5.2. Learning Activities

Tutorial

To get started, open App Inventor with the Quiz App templatearrow-up-right in a separate tab and follow along with the video tutorial, read the text tutorial, or for an extra challenge use just the short handout.

Activity: 5.5.2.1 YouTube (y7epbJbCZOI)arrow-up-right

Quiz Questions

In the app you will construct three 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 is known as a parallel list construction. 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

Enhancements and Extensions

Here are some programming problems that will let you 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 drawerarrow-up-right 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. If you like, you can research famous computer scientists on the Web to discover a fourth person. Or, if you wish, you can create a question about Hal Abelsonarrow-up-right, the creator of our App Inventor programming language. (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.)

5.5.3. Summary

In this lesson, you learned how to:

Learning Objective DAT-2.E: Explain how programs can be used to gain insight and knowledge from data.

  • Programs are used in an iterative and interactive way when processing information to allow users to gain insight and knowledge about data.

Learning Objective AAP-2.D: Evaluate expressions that manipulate strings.

  • String concatenation joins together two or more strings end-to-end to make a new string.

Learning Objective AAP-2.N.a: For list operations: a. Write expressions that use list indexing and list procedures.

Learning Objective AAP-2.N.b: For list operations: b. Evaluate expressions that use list indexing and list procedures.

  • The exam reference sheet provides basic operations on lists, including: - accessing an element by index o aList[i] accesses the element of aList at index i. The first element of aList is at index 1 and accessed using the notation aList[1]. - assigning a value of an element of a list to a variable o x ← aList [i] assigns the value of aList[i] to the variable x. - assigning a value to an element of a list o aList[i] ← x assigns the value of x to aList[i]. o aList[i] ← aList[j] assigns the value of aList[j] to aList[i]. - inserting elements at a given index o INSERT(aList, i, value) shifts to the right any values in aList at indices greater than or equal to i. The length of the list is increased by 1, and value is placed at index i in aList. -adding elements to the end of the list o APPEND(aList, value) increases the length of aList by 1, and value is placed at the end of aList. - removing elements o REMOVE(aList, i) removes the item at index i in aList and shifts to the left any values at indices greater than i. The length of aList is decreased by 1. - determining the length of a list o LENGTH(aList) evaluates to the number of elements currently in aList.

5.5.4. Still Curious?

More information about these computer science pioneers can be found below:

5.5.5. Self-Check

Vocabulary

Here is a table of the technical terms we've introduced in this lesson. Hover over the terms to review the definitions.

index

parallel lists

Check Your Understanding

Q-2: What name occurs at index 3 in the following list? Type your answer into the textbox. Spelling counts.

Q-3: What is the length of the following list? Type your answer into the textbox.

Q-4: What value will the global variable name have after Button1 is clicked? Type your answer into the textbox. Spelling counts.

Q-5: What value will the global variable name have after Button1 is clicked? Type your answer into the textbox. Spelling counts.

Q-6: Find the bug. When Button1 is clicked, Label1 is supposed to be set to a name that is selectedfrom the names list by the displayName procedure. But the label’s Text never changes. Why?

A. The displayName procedure is not being called when the button is clicked.

B. The displayName procedure was never defined.

C. The list is not properly set up.

D. The displayName procedure has a bug in it.

E. Maybe Label1 is not enabled.

Q-7: The following blocks specify what happens when the user clicks “Next” in a quiz app:There is a subtle error in the code such that the quiz won’t work as desired. What is the problem?

A. The quiz will stop at the last question and not allow the user to return to earlier questions.

B. The app will stop running and an error message will appear.

C. The last question in the quiz will never be reached.

5.5.6. Reflection: For Your Portfolio

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Docarrow-up-right where you may use File > Make a Copy to make your own editable copy.

  1. Consider one of the lists used in this program.

  2. What is the name of the list?

  3. Paste a screenshot of where the list has elements added to it.

  4. Paste a screenshot of where a list element is accessed.

  5. What does the data contained in the list represent in the program?

  6. Explain how the selected list manages complexity in your program code by explaining why your program code could not be written, or how it would be written differently, if you did not use the list.

  7. Describe how parallel lists were used in this app. Why was the parallel structure of the lists necessary?

  8. Include screenshots of your code for exercises 2 and 3 from the Enhancements section.

  9. Include a screenshot of the code that added your extra question (exercise 4). Explain why the code for the buttons worked without any changes after the addition of the extra question.

Portfolio Reflection Questions

Make a copy of this document in your Portfolio Assignments folder and answer these questions in the spaces below. Once complete, turn in this assignment according to the steps given by your teacher.

5.5 Quiz App Curriculum Pagearrow-up-right

Answer the following questions:

1. Consider one of the lists used in this program.

  • What is the name of the list?

  • Paste a screenshot of where the list has elements added to it.

  • Paste a screenshot of where a list element is accessed.

  • What does the data contained in the list represent in the program?

  • Explain how the selected list manages complexity in your program code by explaining why your program code could not be written, or how it would be written differently, if you did not use the list.

Answer

2. Describe how parallel lists were used in this app. Why was the parallel structure of the lists necessary?

Answer

3. Include screenshots of your code for exercises 2 and 3 from the Enhancements section.

4. Include a screenshot of the code that added your extra question (exercise 4). Explain why the code for the buttons worked without any changes after the addition of the extra question. Answer

Last updated