lesson 19 - acer for education · 2 lesson 19: magic 8-ball ackground the magic 8-ball is a fortune...

1 Lesson 19: Magic 8-ball

What you will need

• CloudProfessor (CPF)

• LCD RGB Backlight

• Button

• Arduino Leonardo

• Arduino Shield

• USB cable

Learning Expectations (how learning / progress will be demonstrated)

All Use sequences of instructions.

Most Explain how their app works.

Some Use logical reasoning to detect errors in their algorithms.

Learning Objectives

Design and create an app which uses sequence, selection, repetition and variables.

Understand and use selection in an algorithm (IF, Else and Else if).

Understand and data structures in an algorithm (for example, Lists, Tables or Arrays).

Overview

In this lesson, students explore lists and use what they have learnt to create a ’Magic 8-ball’ game using a LCD RGB

Backlight connected to the CloudProfessor.

Curriculum Links (Computing PoS)

Designs simple algorithms using loops, and selection i.e. if statements. (AL)

Uses logical reasoning to predict outcomes. (AL) Detects and corrects errors i.e. debugging, in algorithms. (AL)

Creates programs that implement algorithms to achieve given goals. (AL)

Understands that programming bridges the gap between algorithmic solutions and computers. (AB)

Computational Thinking Concepts: AB = Abstraction; DE = Decomposition; AL = Algorithmic Thinking; EV = Evaluation;

GE = Generalisation.

Lesson 19 Magic 8-Ball

1


Background

The Magic 8-ball is a fortune telling toy created by Mattel in the 1950s.

The concept is simple. Ask the 8-ball a yes or no question and the 8-ball will reply with answers

such as “Yes”, “No”, “Without a doubt” etc. (Seemingly being able to predict the future)

The Magic 8 Ball is made up of 20 responses – 10 positive, 5 negative and 5 neutral. The 20 answers are:

Positive answers:

● It is certain ● It is decidedly so ● Without a doubt ● Yes definitely

● You may rely on it ● As I see it, yes ● Most likely

● Outlook good ● Yes ● Signs point to yes

Negative answers:

● Don't count on it ● My reply is no ● My sources say no

● Outlook not so good ● Very doubtful

Neutral answers:

● Reply hazy try again ● Ask again later ● Better not tell you now

● Cannot predict now ● Concentrate and ask again

2


1. Connect the power of CloudProfessor then press and hold the power button for two seconds; it will turn on and the

power indicator will light up.

2. Insert the Android Shield into Arduino Leonardo and use the USB cable to connect the CloudProfessor with Arduino

Leonardo. Attach the button to port D6 and the LCD RGB Backlight to port I2C.

3. When the CloudProfessor detects the Arduino Leonardo, a notification will appear on your device; click the

notification to launch the Arduino Leonardo APP, and select the CPF Arduino Blockly app. Click on Lesson 9.

4. Press the execute button to enter the control user interface (UI).

5. Press the edit button to enter the program editing page.

Step-by-step instructions (Blockly) 3

1

2

3

CPF Arduino app

Edit button

Execute button

Control user interface (UI) Program editing page


Code recap (Blockly)

Let’s explore some of the code used in the previous lessons.

1. Title Name Panel Set:

The Title Name Panel Set block displays a message on the screen. In this

example it will display a “Downloading…” message on the UI (User Interface).

2. If / else:

The if / else block is used to conditionally run code

depending on whether a Boolean condition is true or false.

In this example, if the light sensor value is less than (<) 500,

the RGB LED light will light up; or else (else), if the light

sensor value is greater than or equal to 500, the RGB LED

light will automatically turn off.

3. Button Pin# D6 Get Value

The Button Pin# D6 Get Value block reads the state of the attached button. If the button is pressed, the block will

return a ’1’ otherwise it will return a ’0’.

4. Delay Time(Sec.):

The Delay Time(Sec.) block is used to pause the code (time set in milliseconds). In the example above, the

program is paused for 1000 milliseconds (1 second).

5. Set CPF control request:

Finally, the Set CPF control request block at the end of the program tells the program to run the code from the

beginning again. The program will continuously repeat until the user closes the app or stops the program manually.

4


Step-by-step instructions (Blockly) - Part 1

Let’s write the code for our magic 8-ball game.

1. Clear the existing code so that you have a blank canvas to create your new program. Click on the bin icon (1). Click

on ‘OK’ (2) to create a blank canvas.

2. Note: You can return to the original program at any time by clicking on

the restore icon (3).

3. First, let’s set the ‘Title name’. Click on CPF UI. Select the ‘Title Name Panel Set’

block and drag it onto your code canvas. Set the title to ‘8 Ball’.

4. Next, we need to create a list. A list is a special variable

which can hold more than one value at a time. Let’s

create a list to store all of the magic 8 ball’s responses.

a) Click on the ‘Variables’ tab. Drag the ‘Set item to’

block and attach it to the Title block. Rename the new variable to ‘responses’.

b) Click on the ‘Lists’ tab. Select and drag the ‘create list with’ block and attach

it to ‘responses’.

c) Click on the ‘Text’ tab. Drag the “text“ block and

attach it to the list. In the space provided, enter the word ‘Yes’.

Repeat this for the ‘No’ and ‘Maybe’ responses.

5. Next, let’s set the background colour for the RGB LCD. Click on

‘Output Devices’. Select ‘Display’. Drag the ‘RGB LCD(IC2) LCD

Backlight’ block and attach it to your code. Set the Blue value

to ‘255’and the Red and Green values to ‘0’.

6. We will activate the magic 8 ball by pressing a button connected to socket d6. Let’s write the code to see if the

button has been pressed. For this, we will use an IF statement.

a) Click on the ‘Logic’ tab. Select and drag the ‘if’ block and attach it to your code.

b) Click on ‘Input Devices’. Select ‘Switches’. Drag the ‘Button Pin#’ block and place it inside

the first empty cell in the if block.

c) Click on ‘Math’. Drag the ‘number’ block and place it inside the remaining empty cell in the if block. In the

space provided, enter a ‘1’.

4

3 1 2


Step-by-step instructions (Blockly) - Part 2

Let’s create a new program to simulate a simple sorting hat.

6. Next, let’s clear the RGB LCD display ready for our random

response. Click on ‘Output Devices’. Select ‘Display’. Drag the ‘RGB

LCD(IC2) Clear block and place it inside your if statement.

7. Next, let’s pick a response at random from our list and store this in a variable called ‘rand’.

Click on the ‘Variables’ tab. Drag the ‘Set item to’ block and place it inside the if statement.

Rename the new variable to ‘rand’.

b) Click on the ‘Lists’ tab. Select and drag the ‘in list get’ block and attach it to ‘rand’.

c) Click on the ‘List’ (inside the list block). From the drop down menu, select

’responses’.

d) Click on the ‘#’ symbol (inside the list block). From the drop down menu,

select ‘random’.

8. Let’s now display our random response on the RGB LCD display. Click on

‘Output Devices’. Select ‘Display’. Drag the ‘RGB LCD(IC2) setCursor’ block and place it inside the if statement.

Click on the ‘Variables’ tab. Drag ‘rand’ and place it

inside the ‘Print’ section of the setCursor block.

9. Finally, we want the program to run until

the user ends the program. Click on the

‘CPF Devices’ tab. Drag the ‘Set CPF control

repeat’ block and attach it to the end of

your code.

8. Run your code.

4

Your finished code should look like this.


1. Connect the power of CloudProfessor then press and hold the power button for two seconds; it will turn on and the

power indicator will light up.

2. Insert the Android Shield into Arduino Leonardo and use the USB cable to connect the CloudProfessor with Arduino

Leonardo. Attach the button to port D6 and the LCD RGB Backlight to port I2C.

3. When the CloudProfessor detects the Arduino Leonardo, a notification will appear on your device; click the

notification to launch the Arduino Leonardo APP, and select the CPF Arduino app. Click on Socket Mode.

4. Press the execute button to enter the control user interface (UI).

5. Press the edit button to enter the program editing page.

Step-by-step instructions (JavaScript) 3

1

2

3

CPF Arduino app

Edit button

Execute button

Control user interface (UI) Program editing page


Code recap (JavaScript)

Let’s explore some of the code used in the previous lessons.

1. d6 = cpf.get(“socket d6”);

The cpf.get(“socket d6”); statement returns the value of the button. (Returns a numeric value of ‘1’ if the button is

pressed and ‘0’ if the button is not pressed) and stores it in a variable called d6.

2. If / else:

The if / else statement is used to conditionally run code

depending on whether a Boolean condition is true or false.

In this example from lesson 1, if the light sensor value is less than (<) 500, the

RGB LED light will light up (based on the values taken from the UI); or else

(else), if the light sensor value is greater than (>) 500, the RGB LED light will

automatically turn off: cpf.set(“rgb led”, 0, 0, 0);

3. Math.random()

Through Math.random(), a random number between 0 and 0.999999 is generated. If we want to generate a whole

number in a range such as 1—255 we first need to multiply the result of the random function by 255 and then

round the result to produce a whole number e.g.,

4. cpf.sleep(1000);

The cpf.sleep(1000); statement is used to pause the code (time set in milliseconds). In the example above, the

program is paused for 1000 milliseconds (1 second).

5. Set CPF control request:

Finally, the cpf.repeat(); statement, usually found at the end of the program, tells the program to run the code from

the beginning again. The program will continuously repeat until the user closes the app or stops the program

manually.

3


Step-by-step instructions (JavaScript) - Part 1

Let’s write the code for our magic 8-ball game.

1. Clear the existing code so that you have a blank canvas to create your new program. Press and hold on a selection

of code and click on ’Select all’ (1). Click on ‘Cut’ (2) to create a blank canvas (3).

Note: You can return to the original

program at any time by clicking on

the restore icon in the Save/load

menu.

2. First, let’s give our new script a name. Click on line 1 and type in the following: //Magic 8 Ball

3. Let’s also set the title of our app. Click on line 3 at type the following: ui.set(“title”, “Magic 8 Ball”);

4. Next, we need to create a list. A list is a special variable which can hold more than one value at a time. Let’s create a

list to store all of the magic 8 ball’s responses. Click on line 4 and type the following:

responses = [’Yes’, ‘No’, ‘Maybe’];

5. Next, we need to generate a random number between 0 and 2 (We will use the randomly generated number to

select a response from our list created in step 3). Math.random() generates a random number

between 0 and 0.999999. If we want to generate a whole number in a range of 0—2, we first need to multiply the

result of the random function by 2 and then round the result to produce a whole number. Click on line 6 and type in

the following:

var rand = Math.round(Math.random() * 2);

6. Next, let’s use the randomly generated number to select a response from our list. We will store the result in a

variable called ’response’.

Imagine our list as 3 numbered boxes each containing a response.

If our program randomly generates a ’0’, the program will return

‘Yes’, if it generates a ’1’, it will return ’No’, and if it generates a 2,

it will return ’Maybe’. Click on line 8 and type in the following:

var response = responses[rand];

7. We will activate the magic 8 ball by pressing a button connected to socket d6. Let’s write the code to see if the

button has been pressed. For this, we will use an IF statement. Click on line 10 and type in the following (making

sure you leave a blank line on line 8):

if(d6 == 1) {

}

3

1

3

2


Step-by-step instructions (JavaScript) - Part 2

8. Next, we need to display the response from our magic 8 ball. To do this, we will use the attached RGB LCD.

a) First, let’s clear the RGB LCD. Click on line 13 and type the following:

cpf.set(“grove_rgblcd_clear”, 0, 0, 0);

ui.set(“grove_rgblcd_clear”, 0, 0, 0);

b) Next, let’s set the background colour of our RGB LCD. This is done by setting the Red, Green and Blue values just

like you would do for an RGB LED. Click on line 16 and type the following:

cpf.set(“grove_rgblcd_set_rgb”, 0, 0, 255);

ui.set(“grove_rgblcd_set_rgb”, 0, 0, 255);

c) Next, let’s display the random response. Click on line 19 and type in the following:

cpf.set(“grove_rgblcd_print”, 0, 0, rand);

ui.set(“grove_rgblcd_print”, 0, 0, rand);

9. Finally, we want the program to run until the user ends the program. Click on line 23 and type the following:

cpf.repeat();

10. Run your code.

3

Add a natural pause in the program so that it appears that the 8 ball is thinking about its answer. Hint:

cpf.sleep(1000);

Your finished code should look like this.


Extension

Students to add all 20 answers (10 positive, 5 negative and 5 neutral).

If they wish, students could create their own set of 20 responses for the ‘Magic 8 ball’.

Differentiation

To support students, provide step by step guides.

To stretch students ask them to create a flowchart / pseudocode of their code first or code their solution using JavaScript.

Homework

Students to write up a summary of what they’ve learned; students to include screenshots and snippets of their code in

their summary.

Links

Magic 8 ball (Wikipedia): http://en.wikipedia.org/wiki/Magic_8-Ball

How a magic 8 ball works: http://www.magic8ball.org

Disclaimer: Use these sites at your own risk. Acer is not responsible for the content of external Internet sites. We

recommend that you check the suitability of any recommended websites links before giving them to students.

5

6

7

8

lesson 19 - acer for education · 2 lesson 19: magic 8-ball ackground the magic 8-ball is a fortune...

Documents