Historical Slideshow App A Coding Solution (This is a spoiler document) Note: there are many ways to code this solution. This is just the solution I picked Use the table below to get you started with this App. Only peak at the solutions when you need help. App Screens Screen1 Description of Screen Template for all your pages Tutorial Hello Purr, Buttons, This App has multiple Pages. Screens are App Inventor s quick and easy way to move between app screens. However, everytime you add a new screen you have to create the interface from scratch and get all new blocks. This app does not use Screens. Pages is a way to reuse interface components you already selected and simple modify text blocks to swap out content. To use pages you often have to use a variable and if-then blocks. 1 P a g e
Using Multiple Pages (not multiple screens) with Variables & If-Else Statements Goal of this App To show you how to create an app that will allow the user to navigate through multiple pictures and descriptions (labels) to better understand the Reconstruction Period. Your app will have multiple pages to help you organize your historical content. Here we only have three pages but you will have multiple middle pages. Your App Intro Page Middle Pages Ending Page For each page of your app you will have a Title o Add a label to title a particular page/picture Picture o Add an image o Assign a picture to the image Description o Add a label with a description 1-2 Button o To navigate from one page to another o Name button Title Image, Video, Audio Each App Page Description Navigation Buttons The first and last page can be a bit tricky so we will provide specific instructions about how to construct these. The middle pages will all use the same instructions and code so you will be able to reuse these instructions to add more pages to your app. 2 P a g e
You only need one Button_click Block and one Button_Previous Block Having more than one of each type gives you an error because the computer doesn t know which one to pay attention to so it tries to do them both at the same time. Challenge #1 Use the App Design Mat to swap content in and out of the Button_Next.Click Block and the Button_Previous.click block to make your app work. Test this out with a friend to see if you can get your app to go through all the pages. Challenge #2 Figure out how to make the app changed the pages without you. Watch Variables and If-Then Videos 3 P a g e
Hint #1 for Challenge #2 Adding Code/functionality to Navigation Buttons - Button_Next We want to program Button_Next to make our app change images and text based on clicking the button. However to do this we need to do a little setup work. We will need to create a variable. Variables hold information until it is needed. We need a variable to hold the number of times the button has been clicked. We will call our variable, Count Goal: We need to use the variable to count the number of times the button is pressed. This will require use to come up with a simple equation that adds 1 to the count variable every time we press the button. Count = Count + 1 Creating variables takes several steps: 1. Defining the Variable - 2. Initializing the Variable a. Blocks: We need to set it equal to 0 when the app starts 3. Using the Variable a. Goal: This will require use to come up with a simple equation that adds 1 to the count variable every time we press the button. Count = Count + 1 b. Blocks: To do this we need to use the global Count block to get the current value of the block and Set global Count to store the new value of the block. Setting Global Count Grab a Variable Block Rename the variable Count Initialize to 0 Grab a set global Count Block - Set means set the value of count Grab a get global count Block - Get means get the current value of count Hint #2: Get your app to count up and down when you press the previous and next buttons. 4 P a g e
Hint #3 For Challenge #2 Making Page 2 Show up when Count = 2. Challenge #3: Fill in the rest of the block using your App Design Mat to figure out how to make App inventor show the right page when count is equal to the page number. 5 P a g e
Challenge #4: Let s take care of the starting and ending pages that may be causing you trouble. How do you make your app not count over or under the number of pages in your app? Hint Challenge #1 Use the Greater than or less than equal equation to help you control the count. Full Solution on the next page (Spoiler Alert!) 6 P a g e
Full Solution (Spoiler Alert!) 7 P a g e
8 P a g e