external image yes-positive-self-talk.jpg

Goal:This next App will be a bit more complicated. We will use Lists and if.then.else blocks to create an App that steps through images and coordinated messages, while playing music.

Check out this video to see a preview of the app.



Positive self talk is important to self esteem. Use this app to tell yourself positive things. Ideas include:
  1. I am awesome
  2. I am so much stronger than I think
  3. I can laugh
  4. I am smart
  5. I am fearless
  6. I am beautiful/strong
  7. I am a winner
  8. I can handle it
  9. I am going to get better at this
  10. I am remarkable
  11. Today I will be my own superhero
  12. Stop looking for the magic. I am it!
  13. When you are going through tough times, keep going. (paraphrased from Winston Churchill)



Phase 1: Setting up the user interface in Designer.



1. Before you start to design your app, plan five messages you want to display.

Download five images that go with the messages. Make sure to rename the files to something that is short and easy to type (with no special characters). You will have to type these in later.

Download a song you like. Remember you can make your own clip or download another, but the size of the file can't be too big.



***IF YOU SPEND MORE THAN 10 MINUTES ON THIS YOU HAVE SPENT TOO MUCH TIME.

2. We will use a button to both display images and start the slideshow. Add a button with your first image attached to it. Be sure to re-size your button so that it fits almost the entire screen.


3. Add a label at the bottom of your image. This is where the messages will be displayed.

A) Write a message that is relevant to your first image.

B) Try to change the appearance of your label by changing the background and text color.


4. Add a player component to your App.

A) Associate it with the audio file you have uploaded.


5. Add a clock component to your App. This will be used to change the pictures and messages every few seconds.

A) When adding the clock component to your designer page it is important that you set the TimerInterval. Remember 1000 = 1 second...so if you want a longer interval, say 8 seconds you would need to change this to 8,000. If you want a shorter interval you could change it to 500 which is 0.5 seconds.

6. At this point, my design looks something like this


Positive2.PNG


Phase 2: Adding the functionality in Blocks.



The goal is to switch the image and corresponding text every time the clock fires. We will control the starting and stopping by enabling (or disabling) the clock firing.


1. Add a when.Click button to activate the Player when you click the button.

A) You will need to use an if.then.else block like you have used before in Channel Surfing. When the player is paused, you will want to set the Clock.TimerEnabled to false. When the player is started again, you want to set the Clock.TimerEnabled to true. Otherwise, the images and messages will keep changing even if the music stops playing.


2. The when.timer block tells the device what to do every time the timer fires (every 1 second in our case).

A) As a first step, let's only use two images and messages. We will use a variable to keep track of which image we want to see. Watch this video which describes how we will use variables.


3. Test your app to see if you can switch between your two images and start and stop the player.



Phase 3: Working with a list of images and a list of messages.



1. What we really need is a list of images and a list of messages. We need to write the code to cycle through them.


2. You will need to create two variables with lists attached to them.

A) Variable one should be called: ImageList and will include all of the pictures that you want to include in your app.

B) Variable two should be called: MessageList and will include all of the messages that are at the bottom of each picture.

C) Check your answer only after you have tried to complete this task on your own. Check.

***Note when adding the picture to your list remember to add the .jpg or .png depending on the type of file.


3. We will use the when.Timer block and set the image of our button and the text of our label. We will need to select an item from each list. To do this we need to tell the computer which list to go to (remember we gave our lists names with the variables) and which item on the list (called the "index", we can use the whichItem number from before).

selectList.png

Create a second block like this to set the text on the label.

Test yourself

Recall there are three important variables associated with a list.
a. The name of the list itself
b. The items inside the list
c. The index indicating which item you care about.

You need to keep them straight or your use of lists will be PAINFUL!

In the example below,
a. What is the name of the list
b. What are we doing with the thing inside the list?
c. Which element of the list are we accessing?
selectList.png


4. We need to make sure we access corresponding elements of the imageList and the MessageList. If we change whichItem for BOTH lists, they automatically stay synchronized.

What we need to do is add one to whichItem each time Clock.timer is called. How do we do that? This is one of the ah-ha moments of computer science. We can increment the whichItem by doing the following:

Increment.PNG

Place this inside the when.Timer block.


5. This video clip takes you through the steps of using an increment to pull the next item from the list. It also helps us deal with what happens when we reach the end of the list (we'd like it to start over from the beginning!).

The video clip invites you to pause the video and try out what the video describes. Don't be tempted to just wait until the video gives you the answer. That is not learning!


Challenges

1.(**) Allow the user to type in their name. If the name they types is Katie, for every message in the list, replace each instance of "you" with "you Katie".