Visual Programming week 05 Lists Quiz Tutorial Outline

Visual Programming week # 05 Lists Quiz Tutorial

Outline 1. Lists 2. Tutorial # 05: President Quiz 3. Homework # 04 VP Lecture Note by Dr. Hanh Pham 2

Lists List = a set of similar things/data Examples: • a list of phone numbers: {257 -3574, 255 -3015, …} • a list of names: {Emma Smith, Andy Mills, …} “Phone” List: Elements 257 -3574 255 -3015 … 256 -7980 Index 1 2 … N Phone[1] = 257 -2574 … Phone[N]=256=7980 VP Lecture Note by Dr. Hanh Pham 3

Tutorial # 05: President Quiz TASK: A quiz about US presidents (but you can use it as a template to build quizzes on any topic). The user steps through a series of questions, clicking a button to proceed to the next question. The user enters an answer for each question and the app reports whether each answer is correct or not. The PROBLEM (requirements): display a question with an image that relates to the question user can enter/type their answer and click on “SUBMIT” to see if the answer is correct or not ? user can go to another question by clicking on “NEXT” button VP Lecture Note by Dr. Hanh Pham 4

Tutorial # 05: President Quiz INSTRUCTIONS to Build: More guidance and explanation including video instructions are at: http: //www. appinventor. org/presidents. Quiz 2 1) Create a new project called “t 5_Quiz. Me” 2) In DESIGN window: • add an Image, set Width=Parent, Height=300 • Download and Upload 3 images at: • http: //cs. newpaltz. edu/~phamh/avp/Homework/hw 04/ Add 2 labels and 2 buttons 3) Use “Screen Arrangement” to place the Textbox and the “Submit” button 4) RENAME the components VP Lecture Note by Dr. Hanh Pham 5

Tutorial # 05: President Quiz The DESIGN window should look like this: VP Lecture Note by Dr. Hanh Pham 6

Tutorial # 05: President Quiz Stage 1: Display the question. The DESIGN window should look like this: VP Lecture Note by Dr. Hanh Pham 6

Lists HOW to CREATE a LIST ? a List is a VARIABLE Click on “Built-In” then “Variables” and get the first block: Drag it to the working area. Click and change the default name “variable” to “Question. List” (NAME of the LIST) VP Lecture Note by Dr. Hanh Pham 7

Lists ADD elements to a LIST: • Click on “Built-In” then “Lists” and select “call make a list”: • Left Click, choose “TEXT” and get • Plug them into each other as shown then type the question in that block • Do the same for ANSWER list and PICTURE list VP Lecture Note by Dr. Hanh Pham 8

Lists ADD elements to a LIST: • Do the same for ANSWER list and PICTURE list. Then, we’ll have 3 lists: VP Lecture Note by Dr. Hanh Pham 8

Lists Create INDEX variable to navigate/access elements of a LIST: • Create a Variable for INDEX of the list and set it initially to 1: (Click on “Built-In” then “Variables” ) • ASSIGN an element of Question. List to the Question. Label use “call select list item”, get it under “Built-In” then “Lists”: • Need to specify list = Question. List and index = Index. Of. Current. Question For NEXT button: increase index by 1 to go to the NEXT element VP Lecture Note by Dr. Hanh Pham 9

Tutorial # 05: President Quiz Create lists for the questions and pictures, and an index to keep track of your place. Then program the Next. Button. Click to show the right question each time. : VP Lecture Note by Dr. Hanh Pham 10

Tutorial # 05: President Quiz Complete the code by adding an if block that checks if the user has reached the end of the list. VP Lecture Note by Dr. Hanh Pham 10

Tutorial # 05: President Quiz Add a textbox and button for the user's answer, then use an if block to check whether the submitted answer is correct. VP Lecture Note by Dr. Hanh Pham 10

Tutorial # 05: President Quiz In Block EDITOR window ADD more blocks: VP Lecture Note by Dr. Hanh Pham 10

Tutorial # 05: President Quiz ANOTHER (simpler) version of BLOCKS: VP Lecture Note by Dr. Hanh Pham 10

Homework #4: Quiz Me (done at class) VP Lecture Note by Dr. Hanh Pham 10

Homework #4: Quiz Me (done at class) VP Lecture Note by Dr. Hanh Pham 10

Homework #4: Quiz Me VP Lecture Note by Dr. Hanh Pham 10

Homework #4: Quiz Me VP Lecture Note by Dr. Hanh Pham 10

References These slides contain materials from many sources including the following: • http: //www. appinventor. org • http: //appinventor. mit. edu • “App Inventor: Create Your Own Android Apps” by David Wolber, Hal Abelson, Ellen Spertus, Liz Looney, Publisher: O'Reilly • App Inventor for Android: Build Your Own Apps - No Experience Required, Jason Tyle VP Lecture Note by Dr. Hanh Pham 14