Sparks Unit 2 Lab 2 Teacher Guide

After experimenting with song writing as an introduction to sequencing and looping commands, students explore the graphical aspects of Snap! programing, including sprite movement and costumes as well as events such as clicking a sprite or a specific area on the Snap!. stage. One goal is for students to create a fun and/or useful object of their own design such as an animated greeting card to share with others or an interactive poster for a presentation topic in another class. Another goal is for students to consider the user experience and solicit feedback before and after coding the project.

In response to teacher requests for shorter lab pages and more opportunities for differentiation, Unit 2 Lab 2 offers a greater number of shorter lab pages, some of which are entirely optional. To further shorten the appearance of the student-facing pages (both to present more manageable-looking content and to facilitate navigation), more of the text has been hidden behind links that open additional information available on the page.

As the teacher, you may choose which of these optional pages to include (suggestions on how to decide below) based on your teaching context. Please provide us with your feedback on this new model as we consider whether to design/redesign other BJC Sparks labs with these formatting changes.

Pacing

This lab is designed for 5–16 class periods (215–705 minutes). You may opt to focus on some activities in this lab more than others.

Activity 1: Sprite Costumes and Stage Backgrounds.

Materials: Sprite Costumes and Stage Backgrounds student page
Learning Goals:
- Understand that Snap! sprites can have costumes and can move around on the Snap! stage, which can have backgrounds.
Prepare:
- If you aren't familiar with Snap! costumes and the Snap! stage, take a few minutes to review the activity page and explore these features in Snap!. You may also wish to review the student pages for Activity 3: Adding a Stage Background and Activity 4: Adding Sprite Costumes.
Activity Plan:
- Students read about Snap! sprites and costumes and about the Snap! stage and backgrounds. (5-10 minutes)
Tips:
- This quick, read-through page introduces visual Snap! user experience elements after a primarily functional first unit. There are several possible ways to present this content: you may choose to present this content as a demo (rather than as a reading), to have students read the page in class or before class as homework, or to have a student or group of students review the activity page before class and present a quick demo.

Activity 2: Planning Your Interactive Project

Materials:
- Planning Your Interactive Project student page
- Planning Your Interactive Project worksheet
Learning Goals:
- Understand the basic functionality of the new Snap! skills they will learn in this lab.
- Plan an interactive project that uses each of these new skills.
Prepare:
- New Snap! Skills
  - Costumes and Backgrounds (activity pages 3-6)
  - Animation (activity pages 7-8)
  - Events (activity page 9)
  - Importing Code (activity page 10)
  - Sounds (activity page 11)
  - Click Areas (activity pages 12-14)
  You may wish to review the list of "New Snap! Skills" described on the student activity page and decide ahead of time whether your class will cover (and hence should design a project plan for) each of the new skills. Each skill aligns with one or more upcoming activity page as described at right.
- Prepare to share the Planning Your Interactive Project worksheet with students (e.g., print it, add it to your learning management system, etc.). This worksheet is designed to be flexible for use online or on paper; you may wish to modify for your context. You may also wish to modify the worksheet if you plan to cover only a subset of the activities in this lab.
Activity Plan:
- New Snap! Skills: Students read about the animation-related features they will be creating in their project. (5–10 minutes)
- Making Your Plan: Students decide on the purpose of the interactive project they will create and decide how their project will demonstrate each of the new skills they will cultivate. (25–50 minutes)
Tips:
- We don't have a comprehensive enough example project yet. You might choose to review one or more of the example interactive projects together and to discuss how they use each of the new Snap! skills students will be learning.
  Students do not need to stick to their design plan perfectly. As they develop their project in Snap!, their design may change; this is normal for any creative endeavor. The purpose of creating a plan is so that they design a project with some overall coherence and that supports the building of specific new skills.
- Look out for any students having trouble understanding the functionality of new features they will be learning about throughout the lab. It's hard to design for a feature you don't understand. Discuss and/or demonstrate these upcoming skills as needed.
Standards:
- 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
- 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-15: Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
Solutions:
- This activity is a creative process. Each students' submission will be different. Ideal responses will address each prompt sufficiently in the context of the student's own plan.

Activity 3: Adding a Stage Background

example sprite background: cartoon of a room with a disco ball, speakers, colorful lights, a projection screen, and a microphone; in Snap!, this costume is called 'Party Room'

Materials: Adding a Stage Background student page
Learning Goals:
- Add stage a background to their Snap! project.
Prepare:
- You may wish to familiarize yourself with Snap! stage backgrounds if you haven't used them before.
Activity Plan:
- Revisiting Your Plan: Students reflect on their interactive project plan from the previous activity and consider which stage background(s) they will add to their project. (5–10 minutes)
- Adding a Stage Background: Students add a background to the stage. (5–10 minutes)
- Optionally, students can add additional backgrounds. (5–10 minutes, if used)
Standards:
- None covered.

Activity 4: Adding Sprite Costumes

Materials: Adding Sprite Costumes student page
Learning Goals:
- Add a costume to their Snap! sprite.
- Adjust the size, position, and direction of their sprite.
Prepare:
- You may wish to familiarize yourself with Snap! sprite costumes if you haven't used them before.
Activity Plan:
- Revisit Your Plan: Students reflect on their interactive project plan and consider which sprite costume(s) they will add to their project. (5–10 minutes)
- Adding a Costume: Students add a costume to a sprite and adjust the size, position, and orientation of sprites. (10–20 minutes)
Standards:
- None covered.

Activity 5: More with Sprites and Costumes

Materials: More with Sprites and Costumes student page
Learning Goals:
- Add additional sprites and costumes, and change between them.
- Name/rename sprites and costumes.
Prepare:
- Decide how to use this page. If you have ample time, may wish to use it as any other activity page. If you have students moving at different paces, you may assign it to students moving more quickly through the materials so as to leave time for others to catch up. If you don't have time in class, you may wish to assign it as homework or to skip it entirely.
- If students may create projects with multiple sprites, review the box at the bottom of the "Adding More Sprites" section. which describes how "Each Sprite Has Its Own Wardrobe" and "Each Sprite Also Has Its Own Code."
Activity Plan:
- Adding More Costumes and Adding More Sprites: Students may add additional sprites and/or costumes to their project plan. (5–10 minutes, if used)
- Naming Your Sprites and Naming Your Costumes: Students may wish to add names in order to help organize their project. (5–10 minutes, if used)
Tips:
- If students add additional sprites, ensure that they review the box at the bottom of the "Adding More Sprites" section describing how "Each Sprite Has Its Own Wardrobe" and "Each Sprite Also Has Its Own Code." These points are essential to managing a project with multiple sprites.

Activity 6: Importing Your Own Images

Materials: Importing Your Own Images student page
Learning Goals:
- Add additional images for costumes or costumes by drawing them in Snap!, importing them, or using a webcam.
Prepare:
- You may wish to:
  - Review the steps on the student activity page describing how to: draw an image in Snap!, import and image, and add an image from a webcam.
  - Review your school's student privacy rules around the use of webcams.
  - Ensure that the webcams available will work for this activity, if you do choose to use them.
Activity Plan:
- Students personalize their projects further by adding their own images by using the Snap! paint editor, importing an image from their computer, or using a webcam. (5–20 minutes, if used)
Tips:
- If students import images that were created by someone else, they should include attribution in their project. There is a remark about this in the section "Importing an Image from Your Computer."
Standards:
- 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.

Activity 7: Planning Your Animation

Materials: Planning Your Animation student page
Ways to Create Animation in Snap!
- Changing the sprite costume (or stage background) with code
- Making a sprite move, change size, or turn
- Making a sprite talk or think
- Creating special effects
- Making a sprite turn toward or follow something
- Making a sprite leave a path as it moves
Learning Goals:
- Plan the type(s) of animation they will use in their interactive project.
Prepare:
- Students will review back to their original interactive project plan, so you will want to have these handy.
- You may also wish to prepare a way for students to document changes to their plan as they work. This could be a paper journal or a digital file.
- If you aren't familiar with methods for creating animations in Snap! (listed at right), you may wish to review the student pages for Planning Your Animation and Creating an Animation before class.
Activity Plan:
- Students reflect on their plan and consider which types of animation will be appropriate for their project. (5–10 minutes)

Activity 8: Creating an Animation

Materials: Creating an Animation student page
Learning Goals:
- Add an animation to their project and adjust it until it displays as desired.
Prepare:
- You may find it helpful to quickly practice each of the animation methods described on this page in Snap! before class.
Activity Plan:
- Students add one or more animation(s) to their project. (15–90 minutes)
Tips:
- Adding animations can be especially fun! If your students are engaged, considering allowing extra time for them to extend their original project design by adding extra animations. If you do, encourage them to explore different types of animation.
- Consider allowing time for students to share their animations and show how they work.

Activity 9: Responding to Events

Materials: Responding to Events student page
Learning Goals:
- Make their project respond to user events (such as a mouse click or key press).
Prepare:
- If you aren't familiar with using Snap! hat blocks, review the student activity page before class.
Activity Plan:
- Revisiting Your Plan: Students reflect on their interactive project design with a partner and consider what user events should trigger which pieces of code in their project. (5–15 minutes)
- Adding Hat Blocks to Make Your Code Respond to Events: Students use one or more user events to trigger their animation(s). (5–15 minutes)
- Optionally, students can experiment with additional hat blocks that use messaging and/or predicates. (5–15 minutes, if used)
Tips:
- The Take It Further activity (experimenting with additional hat blocks) is designed for engaging more intrepid students who are moving at a faster pace in a related and meaningful exercise while other students catch up.

Activity 10: Importing Code

Materials: Importing Code student page
Learning Goals:
- Export blocks from one Snap! project and import them into their current project.
Prepare:
- If you aren't familiar with importing and exporting blocks in Snap!, take a few minutes to review the instructions for these processes on the student activity page and try it in Snap!.
- Consider whether you will demonstrate the export/import process for the class.
Activity Plan:
- Students reflect on their project plan, export the desired block(s) from one or more previous projects, import the blocks into their current project, and test that they work correctly in the current project. (10–30 minutes)
Tips:
- Keep an eye out for:
  - Students exporting/importing a block that references a global variable that has not been created in their project. They will need to create the necessary variable in their current project in order to use code that relies on it.
  - Students exporting/importing code that relies on some other piece of code having been run first. If something isn't working with a student's imported code, encourage them to go back to the original project where the code came from and understand how the code worked on that context. Is there anything that the code references in the original project that is missing in the current project?
Standards:
- 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.

Activity 11: Adding Sounds

Materials: Adding Sounds student page
Learning Goals:
- Add sounds to a project by using the built-in sounds, recording new sounds, importing sound files, or importing songs from the previous lab.
Prepare:
- If you aren't familiar with the methods of adding sounds to a Snap! project presented on the student activity page, take a few minutes to review the instructions on the student activity page.
- You may wish to:
  - Review your school's student privacy rules around the use of recorded audio.
  - Ensure that the microphones available will work for this activity, if you do choose to use them.
Activity Plan:
- Students determine what sounds will be appropriate for their project, choose and implement one method for adding sounds to their project, and trigger their sound(s) using one or more Snap! hat blocks to detect user events. (10–30 minutes)
Tips:
- If students import sounds that were created by someone else, they should include attribution in their project. There is a remark about this in the section "Importing Sounds from Your Computer."
Standards:
- 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.

Activity 12: Choosing Your Click Areas

Materials: Choosing Your Click Areas student page
Learning Goals:
- Learn about coordinates on the Snap! stage.
- Identify the coordinates of the rectangle(s) that will define the area(s) of the Snap! stage that will respond to user clicks.
Prepare:
- If you aren't familiar with responding to user clicks by using broadcast Snap! messages with predicates and Snap! stage coordinates, review this student activity page and also Activity 13: Setting Up Your Click Areas and Activity 14: Broadcasting a Click Message. In particular, review the "Ways to Figure Out Snap! Coordinates" section on this page, the text around the example predicate (shown below) in Activity 13 before the first exercise, and the text about messages (shown right) in Activity 14 before the first exercise. Consider trying out the process and setting up a specific click area to trigger a script.
- You may wish to plan a demonstration of the Snap! coordinate system and/or the "Ways to Figure Out Snap! Coordinates" described on the student activity page before students identify the coordinates of the rectangle(s) they want to define their click area(s).
Activity Plan:
- Students review their project plan, decide which rectangular area(s) will respond to user clicks, and determine the coordinates of the corners of each click area. (10–30 minutes)
Tips:
- The "Ways to Figure Out Snap! Coordinates" section on this page presents several strategies for determining the coordinates of the rectangular area(s) that will be responsive to user clicks. These methods are not mutually exclusive, and sometimes a combination of methods can be useful.
- Students may ask why click areas have to be rectangular. They don't have to be rectangular, but because rectangles (that are at right angles with the coordinate system) have only two x-coordinates and two y-coordinates, they are much easier to encode than other shapes. If students have extra time after finishing the basic requirements of this lab, they can explore using non-rectangular click areas by writing more complicated predicates. There is an activity about matching predicates to the results of running them through a specific drawing script that may give you or your students ideas about how to encode diagonal or curved lines with predicates on page 2.3.4 of the AP Computer Science Principles BJC course, but do note that some translation from that project, which has different goals, will be required.

Activity 13: Setting Up Your Click Areas

Materials: Setting Up Your Click Areas student page
Learning Goals:
- Create one or more predicate expression to check if the mouse is in your click area(s).
Prepare:
- You may wish to offer a quick demonstration of how a click area can be encoded with a predicate expression.
- Consider whether your students need a review of predicate expressions (covered in Unit 1 Lab 6 Activity 2: L33t Text), and plan to meet student needs for review.
Activity Plan:
- Students learn how their click areas can be encoded with predicate expressions and build and test one or more predicate expressions for their project. (5–20 minutes)
Tips:
- Students who are more comfortable with predicates, coordinates, and Snap! operators such as inequalities and the and block as well as those with fewer click areas in their project may move through this page more quickly. These students could move on to implementing their click area predicates on the next activity page. Those who need a little more support may benefit from the "tip about checking your predicate," in call-out box in exercise 1, which describes a script that follows the mouse and can reports the result of their predicate expression as the mouse moves around the stage.

Activity 14: Broadcasting a Click Message

Materials: Broadcasting a Click Message student page
Learning Goals:
- Broadcast and receive Snap! messages to communicate between scripts in their project.
Prepare:
- You may wish to review how the broadcast and when I receive blocks work together and how they will be used in this project by reviewing the text on the student activity page.
Activity Plan:
- Students experiment with the broadcast and when I receive in a new Snap! project. (5–10 minutes)
- In their interactive project, students create a script that broadcasts a message when the stage is clicked and a script for their sprite(s) that responds to that message. (10–30 minutes)
Tips:
- Have students start with a single click area first, and once that's working correctly, those who planed for multiple click areas can work on additional ones. It's good programming practice, in general, to get one thing working correctly before starting to code another thing, but sometimes enthusiasm can get the best of anyone.
- The program needs to check whether the user's click is within the click area by using the predicate expression designed on the previous activity page. Either the stage can check or the sprite(s) can. There are examples of each approach on the student activity page.

Activity 15: Testing and Improving Your Interactive Project

Materials:
- Testing and Improving Your Interactive Project student page
- Testing and Improving Your Interactive Project worksheet
Prepare:
- Print or post copies of the Testing and Improving Your Interactive Project worksheet.
- Decide how you want to run the testing and feedback sessions. How many users will student's observe using their project? Will you assign the users/testers to each programmer, or will they self-organize? Will some of the testing and feedback sessions occur outside the classroom as homework (such as with family or friends)?
Learning Goals:
- Consider the user's experience of the final project without programmer support.
- Identify potential project improvements, and select and implement one or more that offer the greatest potential for improvement to the user experience within the constraints of time and programming ability.
Activity Plan:
- Soliciting Feedback (20-60 minutes total): Each student should work with 2-3 users to evaluate their project. For each user, they should
  - Share the project (5-10 minutes per user): Students share their project with 2-3 people and watch them use it without any support. Programmers will want to tell their users how to use program, but they must resist this urge in order to observe an authentic user experience.
  - Interview the users (5-10 minutes per user): After each unassisted user experience, students should gather feedback from the users. During this phase, the user can ask questions, the programmer can answer them, and the two can look at the Snap! project together.
- Reflection (5-10 minutes): The programmer should reflect on the observed user experience and the user's feedback, and they should plan potential project improvements.
- Improvements (20-40 minutes): Students should have time to make at least one improvement (balancing the amount of potential improvement to the user experience with the time and technical demands of the change). As always, not all potential improvements will be possible with the time available and student's current skill-level.
Tips:
- You may wish to wrap up the lab with a class discussion about the importance of soliciting and incorporating user feedback in the development process. You might ask students to describe a time when they wish that the software they were using was developed differently and how they dealt with it (keep using it despite the problem, contacted technical support, used a different project, etc.) or to share some of their feedback or observations about their own project and the improvement they made (or plan to make) in response.
Standards:
- 2-AP-15: Seek and incorporate feedback from team members and users to refine a solution that meets user needs.

Correlation with CSTA Standards

2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs. Students should break down problems into subproblems, which can be further broken down to smaller parts. Decomposition facilitates aspects of program development by allowing students to focus on one piece at a time (e.g., getting input from the user, processing the data, and displaying the result to the user). Decomposition also enables different students to work on different parts at the same time. For example, animations can be decomposed into multiple scenes, which can be developed independently.
2-AP-15: Seek and incorporate feedback from team members and users to refine a solution that meets user needs. Development teams that employ user-centered design create solutions (e.g., programs and devices) that can have a large societal impact, such as an app that allows people with speech difficulties to translate hard-to-understand pronunciation into understandable language. Students should begin to seek diverse perspectives throughout the design process to improve their computational artifacts. Considerations of the end-user may include usability, accessibility, age-appropriate content, respectful language, user perspective, pronoun use, color contrast, and ease of use.
2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution. Building on the work of others enables students to produce more interesting and powerful creations. Students should use portions of code, algorithms, and/or digital media in their own programs and websites. At this level, they may also import libraries and connect to web application program interfaces (APIs). For example, when creating a side-scrolling game, students may incorporate portions of code that create a realistic jump movement from another person's game, and they may also import Creative Commons-licensed images to use in the background. Students should give attribution to the original creators to acknowledge their contributions.

Lab 2: Graphics and Animation