Create a Tourist App which uses a List to scroll through pictures of famous locations in theBay Area
How to use an Index variable to track the position of an element in a List
List: a data type that contains "lists" of data
Create a List with the name of image files
coittower.jpg
alcatraz.jpg
ggbridge.jpg
Initialize an Index Variable
When the Next button clicked, changes the picture shown
Index Label shows the value of the index
Lists have a length of property that keeps track of how many items or elements are in a given list.
This is how you can check the length of the Image List
When the Next Button is Pressed:
If the index variable is less than the length of the list
Then add 1 to the value of the index variable
Set the image picture to Image List at Index variable
Else
Set the index variable to 1
Set the image picture to Image List at Index variable
Add a Previous Button to the Screen
Program the Button to move BACKWARDS through the List
*If the Index variable is equal to 1, what should happen??
**You will need the length of list block
Add a label to the User Interface
Build another List with the name of the pictures
Program your app so the correct name appears with each picture.
*Make sure it works for both next and previous buttons
Add a button and name it “resetButton”
Add a Button and name it “Reset Button”.
Code a procedure that:
sets the Index to one,
sets the Image List and and Image Picture to the Index Variable
Sets the Location List and Location Label to Index Variable
Sets the Index Label to Index Variable
Add a Start Button that when clicked, starts a slideshow that moves along to the next slide automatically every 5 seconds.
Hints:
Use the Timer component
Set Loops to “True”
Change Interval to 2 seconds
You will need two Events:
When Start button is clicked
When Timer Fires
Add a Stop Button.
When the Stop Button is clicked, set Timer1 enabled to False
Program the app so that when the user reaches the last item, the NextButton is disabled (stops working) and when she reaches the first item, the PrevButton is disabled (stops working).
Hint:
Use the “length of list” block to check if you are at the beginning/end of a list
Be sure consider how these buttons get re-enabled.
You’ll need this block to (dis-) enable the buttons:
In Projects (x.thunkable.com/projects), duplicate your Tourist App, and rename it “Favorites”
Make your own list of 3 favorite items (Books, Movies, Food). Find images of each and upload them into the Media section of your app.
Then, modify your Tourist app so that it steps through the pictures your favorite items.