Code Quest Coding Adventure

Code Quest Coding Adventure

v1
by
F
FRONTENDDEVELOPER
Code Quest Coding Adventure
Loading...
Code Quest | Talent Code Africa
T
TALENT CODE AFRICA Spring of Knowledge

A Talent Code Africa coding adventure

CODE QUEST!

Let's bring a cartoon to life!

Hello, Future Coders! Are you ready?

when flag clicked
say Hello!
move 10 steps
✦
✦
✦
★First mission
01

Warm up

Today, YOU are the programmer!

!

A programmer gives instructions to a computer.

We can teach our cartoon what to do.

“Wave hello!”
Hi!

If you could teach a cartoon one amazing thing, what would it be?

Dance!Talk!Run!
Today, we will make our very own talking cartoon!
02

Our destination

Meet your new digital friend!

Hello, coder!

By the end, your character can...

⚑
StartSay hello when the green flag is clicked.
➜
MoveMove when arrow keys are pressed.
Aa
TalkSay something funny when clicked.
K
RespondReact to another keyboard key.
★Four powers. One brilliant cartoon.★
03

Your toolkit

Your coding playground: PictoBlox

PictoBlox
BLOCKS
when ⚑ clicked
say Hello!
move 10 steps
STAGE
⚑
1. StageThe playground where your character appears.
2. SpriteThe character we control.
3. Blocks paletteWhere we find instructions.
4. Coding areaWhere blocks join together.
5. Green flagStarts the program.
Memory trickStage = playground. Sprite = actor. Blocks = instructions!
04

Mission 1

Let's open our coding lab!

PictoBlox
●
1Open PictoBlox on your computer.
2Click “New Project” or open a blank project.
3Look for the Stage and the coding blocks.
4Find the green flag.
iIf a default cat is already on the Stage, that is perfect. You are ready!
MISSION COMPLETE?Can you see a character on your Stage?

05

Mission 2

Choose your cartoon hero!

In PictoBlox, a character is called a SPRITE.

Cat
Dog
Robot
Dinosaur

Your turn

  1. Look at the current sprite.
  2. Keep the cat if you like it.
  3. Or choose another sprite.
  4. Make sure your hero is visible on the Stage.
Every great game starts with a character!

For our first lesson, the whole class can use the cat. Customise later!

06

Build it

Blocks are like puzzle pieces

Snap blocks together to give your cartoon a plan.

when ⚑ clicked
say Hello! 2s
move 10 steps
↓
Your blocks tell a story!
1

Start with an eventIt tells PictoBlox when to begin.

2

Snap on an actionIt tells your sprite what to do.

3

Test, change, improveCoders learn by trying.

No worry if a block comes loose. Just snap it back!
07

Your first code

Make your cartoon talk

The hello recipe
when green flag clicked
say “Hello, world!”
Click the green flag to test it.
Hello, world!
You just wrote your first talking program!
08

Make it move

Arrow keys = super powers

Use a key press to make your sprite zoom across the Stage.

↑
←↓→
arrow keys
WHEN → KEY PRESSED
MOVE 10 STEPS
✦
●
⚑
Try it!Press the right arrow key. Then try left.
09

Make it fun

A click can cause a surprise!

↖
Why did the computer sneeze? It had a virus!
when this sprite clicked
say a funny message

This is an event: something that happens to start the code.

Code + imagination = a character with personality!
10

Coder mindset

Oops! My code did not work.

Oops!
? ? ?
1Check the blocksAre they snapped together?
2Check the triggerDid you click the flag or key?
3Try againGreat coders test and fix.
A bug is not a failure. It is a clue!
11

Class challenge

Choose your character's super skill

Pick one idea and build it with blocks.

♪

Dance

Make your sprite move left and right.

!

Tell a joke

Make it say something that makes us laugh.

★

Secret key

Choose a key and surprise the class.

★There is no single right answer. Be a creative coder!★
12

Showtime

Test, share, celebrate!

Mission complete

You brought a cartoon to life!

Today you learned that code is a set of instructions. You are now a real creator.

★CERTIFIEDCODE QUEST CODER

Keep asking. Keep building. Keep shining.

✦
✦
⚑
TALENT CODE AFRICA · Spring of Knowledge
Slide 1 of 14