Lesson Plan: Chapter 15

Connecting to CSTA Standards

GradesConceptSubconceptStandard NumberPractice
6-8Algorithms & ProgrammingControl2-AP-12Creating 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 studentsHigher level students
Can complete the project recipe in A-Frame and explain how they would enhance itCan 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.


  • 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." sourceopen in new window
  • 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." sourceopen in new window
  • Control structures: In programming, control structures regulate the flow of a program, creating a set of statements that control the way the program behaves sourceopen in new window
  • 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.


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

Research how DOM manipulation is used to create conditional reactions between elementsWrite 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 hereopen in new window

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.

ExemplaryAdequateNeeds Improvement
The student creates a working A-Frame world that mimics a physics interaction found in the real worldThe student creates a world that lacks creativity or one of the required elementsThe 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.