## Lesson: 4.8 Random Numbers

### Section:

A randomizer gives a program the appearance of randomly generated number, color or attribute in a program. The `Randomizer` can be used in conjunction with `nextInt(low, high)``nextBoolean()``nextFloat(low, high)`, and `nextColor()`. It can be utilized to make programs more interesting and engaging for users. With this lesson, students will be made to see how randomization can enhance a program and used in combination with various control structures.

## Objective

Students will be able to…

• Explain why random numbers are a useful part of computer programs
• Create random values in a program
• Create programs that do something different on each run depending on random values that are generated
• Utilize the DOCS for the Randomizer class in order to learn how to generate random values

## Activities

These are all the activities included in the lesson.

Activity

4.8.1 Random Numbers

Video

4.8.2 Random Numbers Quiz

Quiz SHOW ME

4.8.3 Rolling a Die

Example

4.8.4 Flipping a Coin

Example

4.8.5 Lots of Dice

Exercise SHOW ME

4.8.6 Random Color Square

Exercise SHOW ME

4.8.7 Randomizer Badge

Badge

## Lesson: 4.9 While Loops

### Section:

In this lesson students will explore while loops and JavaScript variables. This combines the ideas of creating variables, updating variables throughout a loop, and determining the correct ending condition. Note that the fibonacci problem is a bit tricky, so you may want to discuss the idea of that on the board or projector.

## Objective

Students will be able to…

• Explain the purpose of a while loop
• Create while loops to repeat code while a condition is true
• Utilize while loops to solve new types of problems

## Activities

These are all the activities included in the lesson.

Activity

4.9.1 While Loops

Video

4.9.2 While Loops Quiz

Quiz SHOW ME

4.9.3 While Loop Countdown

Example

4.9.4 Inventory

Exercise SHOW ME

4.9.5 Fibonacci

Exercise SHOW ME

## Lesson: 4.10 Loop and a Half

### Section:

A Loop and a Half is a specific way to write a while loop with the condition being `true`. Inside the loop, you compare to a `SENTINEL` value to break out of the loop. This structure often allows you to write less code.

## Objective

Students will be able to…

• Explain the how the loop-and-a-half structure is different from a traditional while loop
• Explain what an infinite loop is
• Explain what the break statement does
• Create programs that use the loop-and-a-half structure to repeat code until a SENTINEL is met, causing the program to break out of the loop

## Activities

These are all the activities included in the lesson.

Activity

4.10.1 Loop and a Half

Video

4.10.2 Loop and a Half Quiz

Quiz SHOW ME

4.10.3 Adding Up Numbers

Example

4.10.4 Snake Eyes

Exercise SHOW ME

4.10.5 Better Password Prompt

Exercise SHOW ME

4.10.6 Looper Badge

Badge

## Lesson: 5.1 Functions and Parameters 1

### Section:

In this lesson we start to introduce functions and parameters. Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes next. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

## Objective

Students will be able to…

• Explain the purpose of functions
• Create their own JavaScript functions
• Utilize their JavaScript functions to solve simple problems
• Create functions that take in parameters as input

## Activities

These are all the activities included in the lesson.

Activity

5.1.1 Functions and Parameters 1

Video

5.1.2 Functions and Parameters Quiz 1

Quiz SHOW ME

5.1.3 Double Number

Example

5.1.4 Square

Exercise SHOW ME

5.1.5 Triple

Exercise SHOW ME

## Lesson: 5.2 Functions and Parameters 2

### Section:

Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes later. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

This lesson covers functions with multiple parameters. Students will write functions that take in multiple parameters as input and print out output.

## Objective

Students will be able to…

• Explain the purpose of functions
• Create their own JavaScript functions
• Utilize their JavaScript functions to solve simple problems
• Create functions that take in multiple parameters as input, and use print statements for output

## Activities

These are all the activities included in the lesson.

Activity
5.2.1 Functions and Parameters 2 Video
5.2.2 Functions and Parameters Quiz 2 Quiz SHOW ME
5.2.3 Sum Function Example
5.2.4 Area of Triangle Exercise SHOW ME
5.2.5 Height in Meters Exercise

## Lesson: 5.3 Functions and Parameters 3

### Section:

Functions and parameters are some of the key building blocks for all programs. Here we just introduce functions with parameters, but functions with return values comes later. This way students can just focus on the “input” to the function rather than the input and output at the same time. Students will start writing console programs to try simple functions with parameters and will then write graphics programs.

This lesson covers functions with multiple parameters that create graphics as output. This is very useful, since creating several different graphical objects involves writing the same code over and over again (set the size, set the color, set the location, etc). Functions and parameters allow us to write the code once and then use parameters to create the different graphical objects and add them to the canvas.

## Objective

Students will be able to…

• Explain the purpose of functions
• Create their own JavaScript functions
• Utilize their JavaScript functions to simplify their graphics programs
• Identify repeated code that can be simplified with functions and parameters
• Create functions that take in multiple parameters as input, and create graphics as output

## Activities

These are all the activities included in the lesson.

Activity

5.3.1 Functions and Parameters 3

Video

5.3.2 Functions and Parameters Quiz 3

Quiz SHOW ME

5.3.3 Draw Circles

Example

5.3.4 Horizontal Lines

Exercise SHOW ME

5.3.5 Graphics Stop Light

Exercise SHOW ME

5.3.6 Pool Table

Exercise SHOW ME

5.3.7 Parameters Badge

Badge

## Lesson: 5.4 Functions and Return Values 1

### Section:

Think of a function like assigning a task. A return value is giving you the completed work.
This allows you to write functions that do some work for you and send back the result.
Parameters are like inputs into the function, and the return value is output.

## Objective

Students will be able to…

• Explain the purpose of returning a value from a function.
• Create functions that return values.
• Create programs that call functions with return values and store the result for later use.

## Activities

These are all the activities included in the lesson.

Activity

5.4.1 Functions and Return Values 1

Video

5.4.2 Functions and Return Values Quiz

Quiz SHOW ME

5.4.3 Double Number

Example

5.4.4 Square with Return Values

Exercise SHOW ME

5.4.5 Triple with Return Values

Exercise SHOW ME

## Lesson: 5.5 Functions and Return Values 2

### Section:

Think of a function like assigning a task. A return value is giving you the completed work.
This allows you to write functions that do some work for you and send back the result.
Parameters are like inputs into the function, and the return value is output.

## Objective

Students will be able to…

• Explain the purpose of returning a value from a function.
• Create functions that return values.
• Create programs that call functions with return values and use the return values to solve a higher order problem.

## Activities

These are all the activities included in the lesson.

Activity

5.5.1 Functions and Return Values 2

Video

5.5.2 Functions and Return Values Quiz 2

Quiz SHOW ME

5.5.3 Return Values

Example

5.5.4 Is It Even?

Exercise SHOW ME

5.5.5 Max

Exercise SHOW ME

## Lesson: 5.6 Local Variables and Scope

### Section:

In this lesson we explore the scoping of a variable, which is where the variable is “defined” or where it exists. In this unit getting students to define and explain the concept themselves is key.

## Objective

Students will be able to…

• Identify the scope of a variable
• Identify which variables are in scope at a given point in a program

## Activities

These are all the activities included in the lesson.

Activity

5.6.1 Local Variables and Scope

Video

5.6.2 Local Variables and Scope Quiz

Quiz SHOW ME

5.6.3 Return Values

Example

5.6.4 Local Variables

Exercise SHOW ME

5.6.5 JavaScript Exercises Badge

Badge

## Lesson: 6.1 Unit Test

### Section:

Use your knowledge of basic Javascript to create some fun programs! Students will create their own Ghost drawings from Pac-Man, a Guessing Game, and a drawing of their own choosing. This will allow students to get creative with their code to show what they have learned.

## Objective

Students will be able to…

• Synthesize the skills and concepts from the JavaScript and Graphics, JavaScript Control Structures, and the Functions and Parameters units to solve increasingly difficult programming challenges
• Break down a large problem into smaller parts using Top Down Design, and solve each of these smaller parts using functions
• Create helpful comments with preconditions and postconditions to help the reader understand the code
• Find and fix bugs in large programs

## Activities

These are all the activities included in the lesson.

Activity

6.1.1 Ghosts

Challenge SHOW ME

6.1.2 Guessing Game

Challenge SHOW ME

6.1.3 Draw Something

Challenge SHOW ME

6.1.4 Basic JS Unit Quiz

Quiz SHOW ME

6.1.5 JavaScript Challenges Badge

Badge

## Lesson: 7.1 Timers

### Section:

In this lesson students will be introduced to the concept of using timers for animation. Now instead of having graphics programs that stay the same, the content changes every time the timer runs. The first program students will see is a moving ball, so discussing this with the class as a demo on the projector is very useful.

## Objective

Students will be able to…

• Explain in their own words how animation works
• Create animation in programs using the `setTimer` function
• Explain what a callback function is

## Activities

These are all the activities included in the lesson.

Activity

7.1.1 Timers

Video

7.1.2 Timers Quiz

Quiz

7.1.3 Moving Ball

Example

7.1.4 Magic 8 Ball

Example

7.1.5 Crazy Ball

Exercise

## Lesson: 7.2 Random Circles

### Section:

In this lesson we’ll look at more examples with timers and start making more interesting animations. Students will use timers and the Randomizer to create animations on the canvas.

## Objective

Students will be able to…

• Create programs with timers to create increasingly challenging animations
• Analyze existing programs and explain how they create animations
• Utilize the Randomizer to generate random events in their animations

## Activities

These are all the activities included in the lesson.

Activity

7.2.1 Example: Random Circles

Video

7.2.2 Random Circles Quiz

Quiz

7.2.3 Random Circles

Example

7.2.4 Spinner Example

Example

7.2.5 Growing Circle

Exercise

7.2.6 Paint splatter

Exercise

7.2.7 Animating Shapes Badge

Badge

## Lesson: 7.3 Random Ghosts

### Section:

In this lesson students now use timers in combination with the other ideas they have learned, including more graphics as well as coordinate math to create different objects. The random ghosts serves as a fun example to show how you can modify things once you have the basic building blocks in place.

## Objective

Students will be able to…

• Explain the general workflow of creating an animation program
• Analyze animation programs and identify similarities and differences
• Create increasingly challenging animations using timers, graphics, and the Randomizer

## Activities

These are all the activities included in the lesson.

Activity
7.3.1 Example: Random Ghosts Video
7.3.2 Random Ghosts Quiz Quiz
7.3.3 Random Ghosts Example
7.3.4 Random Fireworks Example
7.3.5 Circle Wall Exercise

## Lesson: 7.4 Bouncing Ball

### Section:

This lesson builds on our use of timers and utilizes if statements inside timers to dynamically change what the animations are doing. The exercises build on the Bouncing Ball example.

## Objective

Students will be able to…

• Explain the general workflow of creating an animation program
• Analyze animation programs and identify similarities and differences
• Create increasingly challenging animations using timers, graphics, and the Randomizer

## Activities

These are all the activities included in the lesson.

Activity

7.4.1 Example: Bouncing Ball

Video

7.4.2 Bouncing Ball Quiz

Quiz

7.4.3 Bouncing Ball

Example

7.4.4 Hotspot Ball

Exercise

7.4.5 Trail

Exercise

7.4.6 Animator Badge

Badge

## Lesson: 7.5 Mouse Events: Mouse Clicked

### Section:

Here we introduce a way the students can get input from the mouse using mouse clicked. We keep some of the same building blocks by showing examples with circles and ghosts, and then the student programs prompt them to use this new idea in combination with tracking overall program state.

## Objective

Students will be able to…

• Describe how events are different than timers
• Use mouse click events to create programs that respond to user clicks

## Activities

These are all the activities included in the lesson.

Activity

7.5.1 Mouse Events: Mouse Clicked

Video

7.5.2 Mouse Events: Mouse Clicked Quiz

Quiz

7.5.3 Click For Circles

Example

7.5.4 Click For Ghosts

Example

7.5.5 Teleporting Ball

Exercise

7.5.6 Pause

Exercise

## Lesson: 7.6 Mouse Events: Mouse Moved

### Section:

Mouse events capture actions performed by the mouse. This allows you to create interactive programs including basic games. This lesson explains how to use mouse events to make some interactive animations.

## Objective

Students will be able to…

• Explain how events are different from timers.
• Create interactive programs that use events to respond to the mouse moving.

## Activities

These are all the activities included in the lesson.

Activity

7.6.1 Mouse Events: Mouse Moved

Video

7.6.2 Mouse Events: Mouse Moved Quiz

Quiz

7.6.3 Simple Painting

Example

7.6.4 Colorful Drag to Paint

Example

7.6.5 Coordinates

Exercise

7.6.6 Target

Exercise

## Lesson: 7.7 Drawing Lines

### Section:

In this lesson we continue to use user input via the mouse.

## Objective

Students will be able to…

• Explain how events are different from timers.
• Create interactive programs that use events to respond to the mouse moving.

## Activities

These are all the activities included in the lesson.

Activity

7.7.1 Example: Drawing Lines

Video

7.7.2 Drawing Lines Quiz

Quiz

7.7.3 Drawing Lines

Example

7.7.4 Leash

Exercise

7.7.5 Advanced Animator Badge

Badge

## Lesson: 7.8 Key Events

### Section:

Keyboard events capture when the user presses keys on the keyboard. This allows you to write programs that take input from the keyboard to change what is happening in the program.

## Objective

Students will be able to…

• Explain how events are different from timers.
• Create interactive programs that use events to respond to the keyboard input.

## Activities

These are all the activities included in the lesson.

Activity

7.8.1 Key Events

Video

7.8.2 Key Events Quiz

Quiz

7.8.3 Keyboard Square

Example

7.8.4 Basic Snake

Exercise

## Lesson: 7.9 Crazy Ball Game

### Section:

In this lesson students will create a drag and drop program by combining lots of the ideas from this section.

## Objective

Students will be able to…

• Synthesize the skills and concepts learned in the Animation and Games unit to create a full game step by step.

## Activities

These are all the activities included in the lesson.

Activity

7.9.1 Crazy Ball Game 1

Video

7.9.2 Crazy Ball Game Quiz 1

Quiz

7.9.3 Crazy Ball Game 1

Example

7.9.4 Crazy Ball Game 2

Video

7.9.5 Crazy Ball Game Quiz 2

Quiz

7.9.6 Crazy Ball Game 2

Example

7.9.7 Drag and Drop

Exercise

7.9.8 Animation and Games Unit Quiz

Quiz

7.9.9 Animation Exercises Badge

Badge

## Lesson: 8.1 Breakout

### Section:

Students will learn to make their very own Breakout video game! This lesson brings together everything they have learned in the module and allow them to show it off in a complete game.

## Objective

Students will be able to…
* Synthesize the skills and concepts from Java Script Control Structures, Functions and Parameters, and Animation and Games to create their very own Breakout game from scratch!
* Break down a large problem into smaller parts using Top Down Design, and solve each of these smaller parts using functions
* Create helpful comments with preconditions and postconditions to help the reader understand the code
* Find and fix bugs in large programs

## Activities

These are all the activities included in the lesson.

Activity

8.1.1 Bricks

Challenge

8.1.2 Ball and Paddle

Challenge

8.1.3 Breakout

Challenge

8.1.4 Breakout Badge

Badge