Unit 9: Sketch and Guess: Challenge

SKETCH AND GUESS:

CHALLENGE
In the Challenge, you can
add color and line thickness
to your drawing!

REVIEW OF CLOUDDB TAGS

To make this app more fun, you start the challenge by adding PaintColor and LineWidth as part
of the DrawingData to be stored on CloudDB.

Review the table below for the tags that are used in this app.

Tags Meaning Sketcher Guesser

The start point and

Store the coordinates Get the coordinates
end point for
of drawing of drawing
drawing.
Store the random Get the
The drawing option
generated drawing CurrentDrawing for
for drawing
option. answer checking.
Guesser made a
Get notification of a Store the correct
correct guess of the
correct guess guess
drawing

1
 Unit 9: Sketch and Guess: Challenge

ADD COMPONENTS TO SKETCHERSCREEN

❏
1 Open your project. Make sure you are in the SketcherScreen and in the Designer.

●
2 Drag in a Slider component from the User Interface drawer, and place it below the
HorizontalArrangement that has the StartButton, BackButton, and ClearButton.
Change its properties:
The Slider will allow the user to set the
○ Width: “Fill Parent”
width of the line drawn on the Canvas,
○ MinValue: 1 so the minimum size will be 1 and the
○ MaxValue: 10 maximum size, 10.

2
 Unit 9: Sketch and Guess: Challenge

ADD COMPONENTS TO SKETCHERSCREEN (continued)

❏
3 Add a HorizontalArrangement from the Layout drawer, placing it below the Slider. Name
the new Arrangement “ColorArrangement”.

❏
4 Change ColorArrangement’s Width to “Fill Parent” and its AlignHorizontal to “Center:
3”.

❏
5 Drag 5 Buttons into ColorArrangement. They might not all fit so you can see them on the
screen, but their order is not important, so you can drop them all in on the left.

❏
6 Update the Buttons as follows:
❏ Rename them RedButton, BlueButton, GreenButton, YellowButton, and
BlackButton.
❏ Change their BackgroundColor to correspond to their name.
❏ Delete all text in their Text property.
❏ Change their Width to 20%, so all five will fill the width of the screen.

Your SketcherScreen should look

something like this:

3
 Unit 9: Sketch and Guess: Challenge

COLOR BUTTONS

When the Sketcher clicks on one of the color buttons, you need to
set the Canvas1.PaintColor to that color.

❏
7 Switch to the Blocks Editor.

8 Drag out a when RedButton.Click event block.

❏
9 Set the Canvas1.PaintColor to red.
b

4
 Unit 9: Sketch and Guess: Challenge

COLOR BUTTONS (continued)

❏
10 Duplicate the when RedButton.Click block and change RedButton to BlueButton.

❏
11 Click on the red color block to popup the
color grid and change it to blue.

❏
12 Do the same for the Green, Yellow, and Black buttons.

❏
13 Test it out with MIT AI2 Companion.
Try changing the color and see if your
drawing colors change!

5
 Unit 9: Sketch and Guess: Challenge

SLIDER TO CHANGE LINE WIDTH

You will add code so when the Sketcher moves the slider to the left, the line drawn will be
thinner, and when the slider is moved to the right, the line will be thicker.

❏
14 Click on Slider1 and drag out the Slider1.PositionChanged block.

❏
15 Click on Canvas1 and drag out a set Canvas1.LineWidth to block.

❏
16 Mouse over thumbPosition to get the get thumbPosition block to snap in.

6
 Unit 9: Sketch and Guess: Challenge

SAVE THE PAINT COLOR AND LINE WIDTH PROPERTIES TO CLOUDDB

In the Canvas1.Dragged event, you will expand the DrawingData list from 4 elements to
6 elements for PaintColor and LineWidth.

❏
17 Click on the blue setting icon of the make a list block, then drag two more items to
the end of the list.

b
Make sure
these are in
the correct
order!
a

❏
18 Add Canvas1.PaintColor and Canvas1.LineWidth as the two new items. c

a b

7
 Unit 9: Sketch and Guess: Challenge

GET THE PAINT COLOR AND LINE WIDTH PROPERTIES FROM CLOUDDB

❏
19 Switch to the GuesserScreen.

LineWidth and PaintColor should be updated for the Guesser before the line is drawn.

❏
20 Get the set Canvas1.PaintColor to block and
the set Canvas1.LineWidth to blocks from Canvas1 drawer.

❏
21 Right-click and duplicate the select list item block from above twice.

❏
22 Update the index number box to
Make sure
5 and 6 on the duplicated blocks these match
the order used
in StoreValue. 8
 Unit 9: Sketch and Guess: Challenge

TEST THE APP

❏ Test with your partner. Build

the apk using the QR code option,
scan the QR code and download
and install the apk on your
individual devices.

Can the Sketcher change the color

and line width of the pen while drawing?

9
COMPUTATIONAL THINKING CONCEPTS
The following are the Computational Thinking Concepts learned in this lesson.

Sketch And Guess

1. Manipulation of data and elementary data structures

10