#CSinSF CS 2: thunkable

Lesson# 5

Paint Pot

What you will do in this lesson:

Create a Drawing App with the Canvas Component

What you learn do in this lesson:

How to use the Thunkable Canvas app for drawing and animation
How to use variables to adjust output on the screen
*How to use the slider component

Vocabulary

Incrementing is adding to a value. You will increment the value of a property when creating your counter app.
Decrementing is subtracting from a value. You will decrement when creating the countdown timer app.

Agenda/Lesson Steps

Build Paint Pot User Interface
Program Paint Pot
Customization Challenges

Slidedeck/MiniLesson

2-5 Build Paint Pot

Activity

0. Open the Paint Pot Template

1. Build Paint Pot User Interface

2. Program Paint Pot

3. Customization Challenges

Challenge #1: Program the Plus and Minus Buttons

Challenge #2: Fix the Bug

In this app, if the user continues to press the Minus Button, the value of Size variable will eventually become negative.

Try fixing this bug by:

adding an if/else algorithm to the Minus Button, that checks to see if the value of the variable “Size” = 0.
When Size = 0, reset the value of the Size variable to 20.

Challenge #3: User Interaction

When a color button is chosen, set the background color of the other color buttons to grey.

Challenge #4: Reset Button

Add a button that resets:
- the Size variable back to its original value
- changes the Drawing Width and the Size Label to the original value
- resets the button background colors

Extra Credit: Slider Component

Add a slider component to change the Drawing Width, instead of Plus Button and Minus Button.
Watch this video tutorial for the learn how to use the slider (no sound)

Handout

2-5 Build Paint Pot

Universal Supports

Report abuse