Swift Coding Club Middle School Coding LessonsAdvanced

Welcome to the Everyone Can Code Club! These coding lessons cover fundamental coding concepts to go along with the app design lessons. With these lessons, you’ll not only build up your coding skills, but start to understand how apps work. This will help you design better apps.

In each lesson, you’ll learn about a specific coding concept with a brief introduction activity, then you’ll apply that coding concept in Swift Playgrounds.

There are also “Pick and Choose” activities for each lesson to help you learn more about the concept. These additional activities are optional and you can choose to do none, one, or both activities. Note that some of these activities require another device like a robot or drone. If you have these devices, they’re a great way to apply what you’ve learned.

Have fun!

Lessons

Introduction to Learn to Code 3 3Coordinates

Think Like an App Designer: 5Touch Events

Think Like an Editor: Strings 7

Think Like an Animator: 9Event Handlers

2

Introduction to Learn to Code 3: CoordinatesAdvanced

1

Coordinates

Introduction

Coordinates and Graphics

Adding a Background

Placing Images

Placing Text

Cosmic Bus

Placing an Array of Images

Changing an Array

Elliptical Orbits

Algorithm: A step-by-step set of rules or instructions. For loop: Runs a block of code over and over for a set number of times. Array: A collection that stores an ordered list of items. The same item can appear multiple times at different positions.

Introduction (5 minutes) Now you’ll put the skills you learned in Learn to Code 1 and 2 to use by building and editing features used by an image editing tool. What are some image editor apps?

What’s the appeal of these apps and what are some of their features?

Learn to Code 3 is all about images. But what is an image, really? Think about pointillism artwork or magic eye images. Likely, you see more than just a bunch of dots.

To a computer though, the image actually is just a bunch of dots. More specifically, it’s an array of pixels. This way, a computer can easily create and manipulate images. You just need to tell the computer exactly where to place each dot using a coordinate system.

Practice (40 minutes) Now use Swift Playgrounds to complete the activities with the green checkmarks in the list at right.

Think about it: How did using coordinates help you with the app?

Introduction

Preview

3

Picture Bingo (1 session) 1. Choose one person to be the bingo number caller.

This person should download this file with coordinates and call out the coordinates one by one in random order.

2. The bingo players should use Numbers and fill in the cells for the coordinates that are called out.

3. What did the players make? It’s Bot! You can add color and change the size of the cells to customize your Bot.

4. Write an algorithm in pseudocode for how a computer would accomplish this same task. Remember to use arrays and for loops.

Think about it: How many variations were there in each version of the pseudocode? Was there any pseudocode that was more or less efficient?

Brick Breaker (1 session) 1. Download and explore the Brick Breaker challenge from

Swift Playgrounds.

2. Design your own game board on paper or in a drawing app like Notes.

3. Program your board on the Placing Bricks page using the correct coordinates.

4. Did you successfully program your board? If not, debug accordingly.

5. Switch devices with another student and play each other’s Brick Breaker board.

Think about it: What other elements of the game were you able to customize? What coding concepts did you use to program those parts?

Introduction to Learn to Code 3 :Coordinates Pick and Choose

Advanced

1

4

Advanced

2

Touch Events

Introduction

The Image Tool

Spacing Out Graphics

Moving and Erasing Graphics

Iterating Through an Array

Randomizing an Array

Going, Going, Gone

Placing in Patterns

The Text Tool

Emoji Confetti

Interstellar Symmetry

My Own Project

Think Like an App Designer: Touch Events

Variable: A named container that stores a value. The value can change over time. Type: A named grouping of properties (the features) and methods (the behaviors) of a kind of data. Initialization: The act of creating a new instance of a type, which includes setting initial values for any properties of the type.

Introduction (5 minutes) In Learn to Code 2, you learned about variables, types, and initialization. You had to solve puzzles using multiple instances of portals, characters, and gems. Do a quick review of those chapters in Learn to Code 2.

Now that you’ve refreshed your memory on types and initialization, how do you think they’ll apply to Learn to Code 3?

To create your own image editing tools, you’ll initialize new graphic types and editing tools.

Practice (40 minutes) Now use Swift Playgrounds to complete the activities with the green checkmarks in the list at right.

Think about it: How did you use types and variables in the app?

5

App Analysis (1 session) 1. Working in groups, pick an app to analyze.

2. Collaborate in an app like Pages or Explain Everything to identify as many types used in the app as you can and include screenshots that show the type in the app.

For example, types in Pages include: Fonts, Charts, Shapes, Table Styles

3. Now identify a few variables that define each type. Add values for a new instance of each type. Here’s an example for Pages:

Type: Chart • graph = bars • legend = true • isStacked = false

Think about it: Does everyone agree on the types and variables that were identified?

Shapes Starting Point (1 session) 1. Download and explore the Shapes Starting Point from

Swift Playgrounds.

2. On the Canvas page, create your own art image by initializing instances of multiple types of shapes and editing the properties. Place the shapes with code rather than making them draggable.

3. When you finish the image, use what you learned on the Touch and Animate pages to create touch events that make it interactive.

4. Switch your playground with another student so they can interact with your art, creating a new version of it.

5. Continue switching playgrounds with other students and see how your art evolves.

Think about it: Did you recognize your art at the end? What touch events led to more interesting changes?

Think Like an App Designer: Touch Events Pick and Choose

Advanced

2

6

Advanced

3Think Like an Editor: Strings

Introduction (5 minutes) Name all the instances where you’ve encountered text today. It could be anything from a passage in a book you’re reading to the label on the cereal box at breakfast this morning. Text is everywhere. Can you come up with examples you think could be text, but aren’t sure—like symbols, foreign language text, or morse code?

Do you think humans think about text or strings differently from computers?

Practice (40 minutes) Now use Swift Playgrounds to revisit the activities with the green checkmarks in the list at right.

Think about it: With your new knowledge about strings, what more can you do in these activities?

String: A type that stores a series of characters, such as “Hello, world!” or “dancing kittens.”

Coordinates

Placing Text

Cosmic Bus

Touch Events

The Text Tool

Emoji Confetti

7

String Trivia (1 session) 1. As a club, select any short text to analyze. This could

be from a book you’re reading or something you write yourselves.

2. In groups, answer the following trivia questions about the text in an app like Notes or Pages.

Computers can analyze the length of a string and parse up a string into smaller parts.

• How many words are there? • How many five-letter words are there?

Computers are also very particular; a capital letter is different from a lowercase one.

• How many times is “the” used? • How many of those instances were capitalized versus

lowercase?

Computers can also combine different strings together. • How many compound words can you make?

3. Double-check each other’s work and award a point for each correct answer. Which group won? Now write pseudocode for a computer to determine the answer to each trivia question.

Think about it: How might a computer approach getting the answers to the questions similarly or differently from you?

Cipher (1 session) 1. Download and explore Cipher from Swift Playgrounds.

2. Learn about cryptography, the practice of encrypting and decrypting messages written in secret code.

3. On It’s Your Turn Now, decrypt each other’s messages.

Think about it: How did you use code to decipher the strings? Did you solve the mystery?

Think Specifically: Parameters Pick and Choose

Advanced

3

8

Advanced

4Think Like an Animator: Event Handlers

Introduction (5 minutes) As a group, brainstorm examples of instructions that are done with a trigger: xx happens when xx occurs. For example, when the bell rings at school, students know to go to the next class.

The trigger may not always lead to the same action. When the bell rings, the teacher may stay in the class and prep for the next one or the principal might go to her next meeting.

What are some triggers (events) and responses (event handlers) when using iPad?

Practice (40+ minutes) Now use Swift Playgrounds to complete the puzzles with the green checkmarks in the list at right.

Think about it: What events and event handlers are used in the app?

Event: An action that can be detected by a program. User input, such as tapping a button or rotating the screen, triggers an event. Event handler: A function that’s called after an event happens in order to handle the event.

Event Handlers

Introduction

Creating a Tool

Creating More Tools

Creating Tools for Different Events

Touching a Graphic to Speak

Modifying a Graphic

Removing a Graphic

Responding to a Button

Playing Sounds

Playing Instruments

Soundboard

My Own Project

9

Game Designer (1 session) 1. In groups, use a brainstorming app like Notability or

Keynote to help think through your ideas for a game.

2. Your game must include at least three different events and five different responses. For example, a player freezes when tagged in the game Freeze Tag.

3. Create a presentation for your game with instructions so another group can play it.

4. Each group should identify the events and event handlers for the game they just played.

Think about it: Were the events and event handlers clear for each game? Why or why not?

Skoog (1 session) 1. If you have a Skoog device available, download and

explore the Skoog playground from Swift Playgrounds.

2. Apply your coding skills to create your own musical instrument.

3. Try out each other’s instruments.

Think about it: How are your instruments different? What parts of your code differed to create your individual instruments?

Think Like an Animator: Event Handlers Pick and Choose

Advanced

4

10