Lesson Plan: Chapter 15
Connecting to CSTA Standards
| Grades | Concept | Subconcept | Standard Number | Practice |
|---|---|---|---|---|
| 6-8 | Algorithms & Programming | Control | 2-AP-12 | Creating Computational Artifacts: 5.1, 5.2 |
Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
Control structures can be combined in many ways. Nested loops are loops placed within loops. Compound conditionals combine two or more conditions in a logical relationship (e.g., using AND, OR, and NOT), and nesting conditionals within one another allows the result of one conditional to lead to another. For example, when programming an interactive story, students could use a compound conditional within a loop to unlock a door only if a character has a key AND is touching the door.
Learning Outcomes/Goals
In this chapter, students continue to work on their virtual world in A-Frame, adding interactivity using conditionals. Their task is to create a scenario using a physics library such that when a prowling animal gets too close to the protected grove, the butterflies flutter quickly together to repel the intruder, who moves away. Using JavaScript, they will use event listeners to check for a collision, and then make the butterflies, drawn to the screen in a loop, flap their wings as the cat reverses its course.
Note, conditionals are also addressed in earlier chapters and especially in the Twine chapters (17-19).
Differentiated Instruction
| Lower level students | Higher level students |
|---|---|
| Can complete the project recipe in A-Frame and explain how they would enhance it | Can complete the recipe and add more interactions using different types of conditional statements. |
Transfer Learning
This final project in A-Frame can be enhanced to express other types of interactions, such as a version of pong where balls bounce off walls. Challenge your students to take the lessons from the past three chapters and use them to build a different world, perhaps with more interactions.
Vocabulary
- Bodies (in a physics context): "An identifiable collection of matter, which may be constrained by an identifiable boundary, and may move as a unit by translation or rotation, in 3-dimensional space." source
- Collision: "In physics, a collision is any event in which two or more bodies exert forces on each other in a relatively short time. Although the most common use of the word collision refers to incidents in which two or more objects collide with great force, the scientific use of the term implies nothing about the magnitude of the force." source
- Control structures: In programming, control structures regulate the flow of a program, creating a set of statements that control the way the program behaves source
- Physics (in a web or game context): In games, the way bodies interact is managed by physics engines or libraries that help game elements mimic the way bodies interact in nature.
Assessment
Test your students on their comprehension of how A-Frame uses DOM manipulation to make bodies react to each other. They should be able to explain how conditionals should be understood in this context - rather than using if/or/not, the code is checking for an element's ID and making other elements react accordingly
| Formative | Summative |
|---|---|
| Research how DOM manipulation is used to create conditional reactions between elements | Write a summary of the various ways that DOM manipulation works to both 'listen' and 'react' to events. |
Quiz Answers
Q1: A physics body that moves and reacts to collisions can be:
a. A dynamic body
b. A kinetic body
c. Either of these
Q2: Code can run in the background, doing things like checking for events to happen.
a. True
b. False
Q3: An example of a control structure is:
a. A loop
b. A variable
c. A program
More Resources/Materials
Solution Code
The full solution codebase can be found here
Assignment and Rubric: A Realistic Simulation
You’ve only brushed the surface of all the interesting things you can do with a good physics engine in a 3D environment. In this assignment, bring your knowledge into the real world by creating a 3D simulation of a simple action that you could do in real life. It could be a ticking metronome, a cuckoo clock, a bouncing ball, the springs on a couch, or a doughnut dropping into the fryer. Choose one element of an animated real-life object and re-create it in A-Frame as realistically as possible.
| Exemplary | Adequate | Needs Improvement |
|---|---|---|
| The student creates a working A-Frame world that mimics a physics interaction found in the real world | The student creates a world that lacks creativity or one of the required elements | The student creates a prototype that is buggy |
*tip: prior to saving as a PDF, select the 'light' mode at the top using the 'sun' icon.