Adding Click-Based Interaction (CodeHS Lesson: 4.1)

In this lesson, students will create VR worlds that allow the user to animate objects interacting with them using a mouse. They will learn how to interactively move, resize, and recolor shapes

Author: Stephanie May
Grade Levels: 6-8, 9-12
Materials: Website, https://codehs.com/lms/assignment/105257640/lesson_plan
Tag: WySTACK

National Standards Alignment

csta 2-AP-10 2-AP-11 2-AP-12 2-AP-17 2-DA-07 2-NI-06 3A-AP-13 3A-AP-14 3A-AP-15 3A-AP-21 3A-DA-09
iste ISTE-1d ISTE-4a ISTE-4b ISTE-4c ISTE-4d ISTE-5c ISTE-5d ISTE-6a ISTE-6b

OVERVIEW

Activity Overview:

In this lesson, students will create VR worlds that allow the user to animate objects interacting with them using a mouse. They will learn how to interactively move, resize, and recolor shapes

Meta description

  • Subject Area: Computer Science
  • Grade Level : 6-8, 9-12
  • Computer Science Domains:
    • Algorithms and Programming
  • Computer Science Principles:
    • Developing and Using Abstractions
    • Testing and Refining Computational Artifacts
  • Materials:
  • Considerations:
    • Planning Notes • The exercises in this lesson do not have autograders due to the complexity of the problems. Be sure to plan some extra time to check student programs for accuracy and style. • Students will be creating click-based interactions. They may try to take the hand on the screen and click on the object, but the click that gets recorded is where the small circle is positioned. If the student claims nothing is happening, verify that the circle is on the object they are trying to animate.

Lesson Plan

Overview

In this lesson, students will create VR worlds that allow the user to animate objects interacting with them using a mouse. They will learn how to interactively move, resize, and recolor shapes

ASSESSMENT PRE/POST-TEST

Beginning of Class: • What methods do we use to start our animation? o Currently, animations either begin at the start of the scene or based on a delay in the program. • Why do you think interactions will enhance your VR world? o Answers will vary. For example, interactions can help engage users, help make more of a real world feel, create a more gaming environment, etc. • What kind of interactions do you think should be available in a VR world? o Answers will vary and some interactions with A-Frame are out of scope for this class. Some things that we will look at are interacting to start an animation. End of Class: • Which aspect of adding click-based interactions did you find the most challenging? Why? o Answers will vary. • How do you think adding click-based interactions will affect how users perceive your VR world? o It can allow them to feel more apart of the world. • Other than clicking with your mouse, what other ways should a user be able to interact with a scene? o This question will help them think ahead to the next lesson and beyond. o Answers will vary, for example, looking at objects, using a controller/joystick, being able to move your hands. etc. (All of these are actual ways you can program in A-Frame, but this course will only explore looking at objects)

OBJECTIVES

• Create a cursor in a VR world • Create a camera entity • Interact with objects by clicking on them

CATCH/HOOK

Imagine a world where you could not interact. Imagine a world where you could do anything. Describe experiences in both worlds.

ACTIVITY INSTRUCTIONS

Activities:

Watch the lesson video and complete the corresponding quiz. This quiz is a quick check for understanding [7-10 mins] Explore the Click to move example. [2-3 mins] Have students explore changing the direction and position that the cube travels in. Explore the Click to change color Example. [2 mins] Make sure the students click with the cursor over the ball, otherwise the click will not register the event. Explore the Click to expand Example. [2 mins] Have students explore changing different aspect ratios. What happens when you don’t change the direction to alternate? Does it keep growning? [No it reverts back to the original size and then grows again] Complete the Too Much Sun exercise. [3-5 mins] Students may rush to add the click, but not realize they also need to add the cursor in the camera tags. Complete the Blast off! exercise. [3-5 mins] This exercise is similar to the last one. Have students look back to the examples if they need assistance. Complete the Going Outside exercise. [5-10 mins] The door in this exercise starts very close to the user, students may need to move back to get a little perspective.

Supplements

Any items in this section are the property & under the license of their respective owners.

REVIEW

Have students reflect and discuss their responses to the end of class discussion questions. Students can also showcase their newly create artifacts.

STANDARDS

TypeListing
CS DomainsAlgorithms and Programming
CS PrinciplesDeveloping and Using Abstractions, Testing and Refining Computational Artifacts
Other Content StandardsOhio’s Learning Standards Computer Science
Program Development
ATP.PD.7.a Write code that utilizes algorithms, variables and control
structures to solve problems or as a creative expression.
ATP.PD.7.b Test, trace and debug to refine code.
ATP.PD.7.c Identify procedures that utilize parameters.