Magic 8 Ball Magic 8-Ball is a mobile version of the classic fortune-telling game. A user can ask a question, shake the phone, and hear the magic 8-ball’s prediction. This app uses the Accelerometer to handle the shaking event and the TextToSpeech block to have the phone speak the prediction, which is randomly selected from a list of predictions.
Objectives: In this lesson you will learn to :
create an app that
In the creative projects, you'll add enhancements to the app that:
use the Speech Recognizer block.
9.7.2. Tutorial
The Magic 8-Ball UI
The UI for our Magic 8 Ball app will consist of four categories:
Basic Components - Image, two Labels
Sound block
Sensor block- Accelerometer
Text-To-Speech block
The Accelerometer detects the shaking of the phone. The shaking event is used to simulate the shaking of the Magic 8-Ball and results in a prediction being given.
The Image is used to display an image of a Magic 8-Ball.
As you can see, there is a sentence asking the user to ask the Magic 8-Ball a question. This is the question label. Below this is another label, the answer label, which will display the Magic 8-Ball’s prediction.
The Sound is used to play a sound when the phone has been shaken and a prediction is made.
The Text-to-Speech block is used to speak the Magic 8-Ball’s prediction.
Adding the Magic 8-Ball
You have used the Button component and Canvas component and added an image background to each. But perhaps you would just like to add a still image. You can do so by using Thunkable’s Image component. To add a Magic 8-Ball image:
Drag and drop an Image component from the Palette’s User Interface category in the Viewer.
Set the Image’s picture to one of the Magic 8-Ball images provided in the template.
Adding the Labels
This app contains two labels: a question label that gives instruction to ask a question and an answer label that displays the Magic 8-Ball’s prediction. Both labels are provided in the template. Feel free to modify these labels to your liking.
Adding the Accelerometer
An accelerometer is a sensor that can detect shaking of a device and it can measure acceleration in three dimensions. The neutral position is when the device is laying flat on its back and the accelerometer can detect when the device is moved out of this neutral position. You can use the accelerometer for the shaking event which will give a Magic 8-Ball prediction. To add the accelerometer to your app:
Navigate to the Blocks tab of your project.
Under the App Features heading, locate Sensors.
Click the ⊕ symbol next to Sensor.
Select Accelerometer from the provided menu.
Click Add.
Adding the Sound
The Sound block will be used to play a sound when the phone is shaken. Add a sound block from Sounds category and set the Sound’s source to one of the sounds provided in the template.
Adding Text-to-Speech
The Text-to-Speech block is used to have your device speak text audibly. To add a text-to-speech block:
On the Blocks tab, Drag and drop a Text-to-Speech block from the Speech block
The default language is English (en-US) If you want to use the default values, you can just leave those options as it is. If you want to change the defaults, view the list of country and language codes
Coding the Behavior
Now that you have all of the components set up, you need to set up the functionality of the app. Remember that this app should simulate the process of asking a Magic 8-Ball a qusetion and shaking the Magic 8-Ball to read and hear its answer.
Handling the Shaking Event
The only event in this app is the Shaking event. The Shaking event results in the Magic 8-Ball’s prediction being displayed in the answer label, the text-to-speech block speaking the prediction, and a sound being played. The completed Shaking event looks like this:
Begin by getting the Shaking event handler from the AccelerometerSensor1 drawer.
Making a List
Now, you will need to create a list of possible predictions that the Magic 8-Ball might make. This is our first look at lists. We will be making lots of apps that use lists to organize data.To make a list in Thunkable, you will first need to initialize a variable. This time, instead of connecting a number block to the initialize variable block, you will need to connect the make a list block from the Lists drawer.
By default, the make a list block has three slots. This means you can only add three items to this list. In order to increase the number of items, click the plus icon to add or the minus icon to remove list items. Do this repeatedly until the number of items allowed in your list is what you would like it to be.
Items that you add to your list may be numbers or text. For this app, you will need to add text items. Get an empty text block from the Text drawer and add it to your list. Change the text to say a possible prediction. For example:
Repeat this for each possible prediction that you would like to have for your Magic 8-Ball.
Once you have finished making your list, here are some things to consider:
lists have a length property that keeps track of how many items or elements are in a given list. You will use the length of list property in a future lesson. What is the length of list you made?
lists are indexed, or numbered, starting with 1, which means that you can retrieve any item from a list by giving its index. You will use indexing in a future lesson. Select a random prediction in your list. What is its index?
Picking a Random Item From a List
Now that you have a list of possible predictions, you need to randomly select one prediction to be displayed and spoken each time the Magic 8-Ball is asked a question and the phone is shaken. To do this you, you could randomly pick a prediction from the list using its index, however Thunkable provides us with a pick random item block. Use this block to set the LabelAnswer Text to be a random item from your list:
Get a setter LabelAnswer Text block from the LabelAnswer drawer.
Get a pick a random item block from the Lists drawer
Set the list for the pick a random item block to be the list you just created.
It should look like this:
Using Text to Speech
Once you have set LabelAnswer to be one of the items from the list of predictions, you can now tell the Text-to-Speech block to speak the text in the label. In order to have the Text-To-Speech block speak, you must assign it a message to be spoken.
For your app:
Get a say [text] in [language] block from the TextToSpeech1 drawer
Set the message to be spoken as the getter LabelAnswer Text block from the LabelAnswer drawer.
Playing the Sound:
Play a sound when the device is shaken. Recall how to do this from the I Have a Dream app.
Testing the App
Now that you have a fully functioning Magic 8-Ball, it’s time to test your app on your device. Download the Thunkable live app to your device (phone or tablet) and open the app:
If your code is correct, the app should speak a response every time the phone is shaken.
Now that you've finished the tutorial, here are some creative projects. Work with your partner at implementing the following changes to the Magic 8 Ball App.
Change the predictions that were used in the tutorial to include your own predictions, perhaps ones that are more humorous.
If/Else Algorithm. If you recall from the Tutorial video, one problem with the current version of the Shaking block is that it causes the Sound and the Voice to occur at the same time, making it hard to hear the prediction:
One way to fix this is to use an if/else algorithm to perform either the speaking action or the sound action but not both. Of course, the decision to do one or the other has to depend on some boolean condition. What could that be?
One idea is to add a feedback setting to your app, which controls the type of feedback the user receives -- either a sound or a spoken prediction (in addition, of course, to the written prediction in the Label). To allow the user to choose which option they prefer, you can add a settings menu to your app that allows the user to select between either Speaking the prediction or playing an alert sound.
A nice UI component for this type of menu is a Simple List component. The Simple List can be initialized in the Designer, and using blocks. For example, if you initialize it to a list of Speak and Sound, then when you click on the Simple List, it lets you select one of those two choices. The Simple List has an Item Click event handler:
What action should you take after the user has selected an option? You will need to remember what setting the user has selected. HINT: Use a variable to remember the setting and use an if/else block to test the value of that variable in the AccelerometerShaking event handler.
If/ElseIf Algorithm. Modify your solution to the previous exercise to allow a 3-part menu that includes the following options: Speak, Sound, Silent. In the Silent case, the app should silently display the prediction in the label. HINT: You'll need to mutate the if-block to include a second boolean condition. To do so click the plus icon on the if-block. Your block should look like one of these. Notice that there are 2 when slots where you can plug an equals operator:
Another shortcoming of the current app is that the Magic 8 Ball provides a prediction whenever it is shaken, even if the user hasn’t asked a question. To fix this, require the user to “speak” their question to the Magic 8-Ball before Magic 8-Ball says its prediction. For this, you’ll need a Recognize Speech block. HINT: To have the app "wait" for the user to speak, you'll have to use the Recognize Speech advanced block when the device is shaken. And you'll have to use speech block from the Recognize Speech to provide the feedback to the user.
Be Creative. Come up with your own ideas to enhance your app or to create a variation of this app.
8.7.4. Self-Check
8.7.5. Reflection: For Your Portfolio
<p>Create a page named <i><b>Magic 8 Ball</b></i> under the <i>Reflections</i> category of your portfolio and answer the following questions:</p>
<ol> <li>This app is an <b><i>abstraction</i></b> of the real Magic 8 Ball game. You’ve created a <b><i>model</i></b> of the real Magic 8 Ball game. In the real game you shake a real ball that contains messages that somehow float into view when the shaking stops. Describe how the various features of your model represent features of the the real game. </li>
<li>This app makes use of <i><b>randomness</b></i> – it picks a random message from a list of options. Suppose you were going to create an app to model a coin flip. How might you use randomness in that case? </li> </ol> </div>
One way to fix this is to use an if/else algorithm to perform either the speaking action or the sound action but not both. Of course, the decision to do one or the other has to depend on some boolean condition. What could that be?
One idea is to add a feedback setting to your app, which controls the type of feedback the user receives -- either a sound or a spoken prediction (in addition, of course, to the written prediction in the Label). To allow the user to choose which option they prefer, you can add a settings menu to your app that allows the user to select between either Speaking the prediction or playing an alert sound.
A nice UI component for this type of menu is a Simple List component. The Simple List can be initialized in the Designer, and using blocks. For example, if you initialize it to a list of Speak and Sound, then when you click on the Simple List, it lets you select one of those two choices. The Simple List has an Item Click event handler:
What action should you take after the user has selected an option? You will need to remember what setting the user has selected. HINT: Use a variable to remember the setting and use an if/else block to test the value of that variable in the AccelerometerShaking event handler.