Quia - Class Page - 0-Mini Golf Game-Stage 1 Setting up the Canvas Quiz -Teacher's Answer Key

💭 Question of the Day

"Why do programmers prefer dark mode?"

Answer: Because light attracts bugs! 🐛💡

Fun Fact: In programming, "bugs" are errors in code. The term dates back to 1947 when an actual moth was found causing problems in a computer at Harvard University!

Alternative Thoughtful Question:

Question: "How is programming a video game similar to writing a story?"

Sample Answer: Both require planning and creativity. In a story, you create characters, settings, and plot. In a game, you create sprites, backgrounds, and gameplay mechanics. Both need a beginning (setup), middle (action/story), and consideration for how everything works together. Just as an author revises their writing, programmers test and debug their code.

🎥 Video Activity

Watch Before Coding: Introduction to p5play

Video Title: "Getting Started with p5play - Canvas and Drawing Basics"

Recommended CodeHS Video: Introduction to p5play (Canvas Setup)

Duration: Approximately 5-8 minutes

Topics Covered:

Creating a canvas with new Canvas()
Understanding setup() and draw() functions
Adding backgrounds and colors
Basic coordinate system

📺 Access CodeHS Game Design Course Videos

Teacher Note: Direct students to watch the appropriate p5play introduction video on CodeHS before beginning the coding activity. The specific video will depend on your course curriculum. Common options include:

Introduction to Game Design → Unit 1: Canvas Basics
JavaScript and Graphics → p5play Introduction
Custom course videos you've assigned

📝 Quiz Answer Key

Total Points: 50 (10 points per question)

Question 1: What is a canvas on a web page? 10 Points

✓ CORRECT ANSWER: D) A space where graphics can be displayed and interacted with by users

Explanation: A canvas is a rectangular area on a web page where you can draw graphics, animations, and interactive elements using JavaScript. It's not a photo (A), not a programming language itself (B), and not primarily for data storage (C). It's the visual "stage" where your game elements appear and can be manipulated.

Question 2: Which of the following is the correct code to create a p5play canvas that is 400 pixels wide and 300 pixels tall? 10 Points

✓ CORRECT ANSWER: A) new Canvas(400, 300);

Explanation: The correct syntax is new Canvas(width, height); with width first, then height. Option B reverses the order, option C has incorrect syntax with a period after "new", and option D uses the wrong order with "Canvas.new" instead of "new Canvas".

Question 3: Looking at the canvas image, which location represents the coordinates (0, 0)? 10 Points

✓ CORRECT ANSWER: A) Location A (Top-Left Corner)

Explanation: In computer graphics and p5play, the coordinate system starts at (0, 0) in the top-left corner. X increases as you move right, and Y increases as you move down. This is different from traditional math graphs where (0,0) is at the bottom-left. Location A is top-left (0,0), B is top-right, C is bottom-left, and D is bottom-right.

Question 4: What does the following code do? clear(); background('red'); 10 Points

✓ CORRECT ANSWER: C) It clears all graphics from the canvas and then sets its background to red

Explanation: The clear() function removes all previously drawn graphics from the canvas, and background('red') fills the canvas with a red background color. This is done in the draw() function to refresh the screen each frame, preventing "ghost images" or trails. It doesn't clear the entire web page (A), doesn't affect borders (B), and doesn't clear variables (D).

Question 5: Which statement best explains the purpose of the setup() and draw() functions when using p5play? 10 Points

✓ CORRECT ANSWER: B) The setup() function runs once at the start to prepare the program, while draw() runs continuously to update visuals

Explanation: This is the fundamental structure of p5play programs. setup() runs ONE TIME when the program starts—it's where you create the canvas and initialize variables. draw() runs CONTINUOUSLY (many times per second) to animate and update your game. They don't both run once (A), setup() doesn't just handle math (C), and draw() doesn't only run on key press (D).

💡 Reflection Question Sample Answers

Question 1: Why is it helpful to use the setup() and draw() functions in your program?

Sample Answer: Using setup() and draw() functions helps organize the code and makes it easier to understand. The setup() function runs once at the beginning, which is perfect for creating the canvas and setting up initial values. The draw() function runs repeatedly, which is necessary for animation and updating the game continuously. This separation makes the code cleaner and follows the structure that all p5play programs use.

Key Points Students Should Mention:

setup() runs once / draw() runs repeatedly
Helps organize code / Makes code structure clear
setup() for initialization / draw() for animation
Standard structure for game programming

Question 2: How might knowing your mouse coordinates help you later when adding sprites and obstacles?

Sample Answer: Knowing the mouse coordinates helps me figure out exactly where to place sprites and obstacles on the canvas. Instead of guessing positions, I can move my mouse to where I want something to appear and see the exact X and Y coordinates. This makes it much easier to position the golf ball, hole, walls, and obstacles precisely where I want them. It saves time because I don't have to keep testing different numbers to get the placement right.

Key Points Students Should Mention:

Helps with accurate/precise positioning
Eliminates guessing coordinates
Saves time during design process
Makes it easier to place game elements
Helps with testing and debugging placement

✅ Student Checklist - Grading Criteria

Task	Points	What to Look For
Program structure created	10 pts	Both setup() and draw() functions are present and properly formatted
Canvas created & visible	15 pts	new Canvas(450, 520); appears in setup(), canvas displays when run
Background color added	10 pts	clear() and background() are in draw() function, color displays
(Optional) Mouse coordinates display	10 pts	If attempted: coordinates variable declared, functions implemented correctly
Reflection questions completed	15 pts	Both questions answered with thoughtful, complete responses
TOTAL	60 pts	Plus 50 pts for quiz = 110 total points

💻 Complete Code Solution

Note: This is the complete working code for Stage 1. Students should build this step-by-step following the instructions.

// Declare coordinates variable at the top
let coordinates;

function setup() {
  // Create the canvas (450 pixels wide, 520 pixels tall)
  new Canvas(450, 520);
  
  // Set up mouse coordinates display (optional)
  mouseCoordinates();
}

function draw() {
  // Clear the canvas and set background color
  clear();
  background("#79bef2"); // Sky blue color
  
  // Update mouse coordinate display
  coordinates.text = round(mouse.x, 1) + ', ' + round(mouse.y, 1);
}

// Function to create mouse coordinate display
function mouseCoordinates() {
  coordinates = new Sprite();
  coordinates.color = 'white';
  coordinates.width = 80;
  coordinates.height = 20;
  coordinates.x = width - coordinates.width / 2 - 5;
  coordinates.y = coordinates.height / 2 + 5;
  coordinates.collider = 'none';
}
                

What Each Part Does:

📌

let coordinates; - Creates a variable to store the coordinate display sprite

📌

new Canvas(450, 520); - Creates the game canvas, 450px wide and 520px tall

📌

clear(); - Clears all graphics from the previous frame

📌

background("#79bef2"); - Sets the background to sky blue color

📌

coordinates.text = ... - Updates the display with current mouse position

🎓 Teaching Tips & Common Student Mistakes

Common Mistakes to Watch For:

1. Syntax Errors:

Forgetting semicolons at the end of lines
Misspelling "Canvas" (capital C matters!)
Reversing width and height in Canvas()
Forgetting curly braces { } for functions

2. Logic Errors:

Putting canvas creation in draw() instead of setup()
Forgetting clear() before background() (causes visual issues)
Not declaring variables at the top of the program
Calling mouseCoordinates() in draw() instead of setup()

Extension Activities:

For Advanced Students:

Try different canvas sizes and see how it affects the display
Experiment with different background colors (hex codes, RGB, color names)
Make the coordinate display follow the mouse pointer
Add a second text display showing the canvas dimensions
Create a gradient background using multiple colors

🔑 Teacher Answer Key

💭 Question of the Day

Alternative Thoughtful Question:

🎥 Video Activity

Watch Before Coding: Introduction to p5play

📝 Quiz Answer Key

💡 Reflection Question Sample Answers

Question 1: Why is it helpful to use the setup() and draw() functions in your program?

Question 2: How might knowing your mouse coordinates help you later when adding sprites and obstacles?

✅ Student Checklist - Grading Criteria

💻 Complete Code Solution

What Each Part Does:

🎓 Teaching Tips & Common Student Mistakes

Common Mistakes to Watch For:

Extension Activities:

For Advanced Students: