JS 101 Lesson Plan

An example meetup description for this workshop is here.

Facilitator Prep:

• Create the doc to share with students, like this one.

• Make (4*num_students/2) printouts of Pairing Time doc.

• Make num_students printouts of JS documentation.

• Make num_students printouts of grid paper.

• Make num_students printouts of Welcome doc (modifying the tinyurl and coach code).

• Collect other supplies: extra headphones, extra laptops, red/green colored cups. (Students put red cup on top when they need help.)

• Invite students and TAs to the Slack workshops channel.

• Send reminders to students about completing the first tutorial beforehand.

TA prep:

• Try out the Khan Academy JS environment, one of the JS challenges (like Exploding Sun) and a JS project (like Fish Tank).

Day 1:

11:20	Setup tables, name tags
11:30	Early students start arriving, setting up laptops
11:45	Lunch arrives, TAs mingle with students
12:00	Welcome, start round of introductions with an intro quick question
12:15	Sponsor welcome, if a sponsor host is available Present “What is GDI?”
12:20	Introduce yourself to person nearest to you, with an intro question
12:25	Ask how many have done the first hour (as requested) Make sure they’ve added GDI chapter account as coach Talk about the structure for workshop - self-paced learning, *skip* the projects and keep going, then pair on projects together.
12:30	Start self-paced learning
1:30	Stretch!   Pair programming intro
1:40	Project: What’s for Dinner? With a twist: Draw a local meal or a favorite seasonal meal Pair people based on progress (see below)
2:30	Project Show & Tell (see below)
2:45	Re-start self-paced learning
5:00	Stretch!   Project: Fantasy Race Pair people based on progress (see below)
5:55	Project Show & Tell (see below)
6:15	Go home!

Day 2:

11:15	Setup tables, name tags
11:30	Students start arriving, eating lunch, setting up
12:00	Discussion/Demo Show an inspirational use of JS
12:10	Start self-paced learning
2:20	Stretch!   Pair Project: If they did “Function Return Values”: Project: Shape-Maker If they didn’t: Project: Ad Design. Suggest twist: make an animated ad for a local startup or one you wish existed, try to animate part of it. Pair people based on progress (see below)
3:15	Project Show & Tell Alternative: Have them walk around to eachother’s computers and admire their work
3:35	Self-paced starts again
5:10	Stretch!   Present “Thanks for coming!” Walk through the entire JS sequence, talk about the format of each class, the prerequisites, emphasize the study groups We do this before the pair project
5:20	Pair Project: If they did “Smarter Button”: Project: Interactive Diagram. If they did “Functions” tutorial: Project: Fish Tank. Suggest twist: make it into a ‘Where’s Waldo’, trying to hide a weird fish, or replace the fish with your own pet. Else, Project: Ad Design. Pair people based on progress (see below)
6:00	Project Show & Tell, Science Fair Style Have them walk around to eachother’s computers and admire their programs

Project Show & Tell

We want to get students in the habits of being proud of what they’ve made, so we do show & tells. There are two ways to run a show & tell:

• Front of the room: The students can put all of their URLs in the shared doc, and once everyone’s done working, the facilitator can open them all up, point out the neat aspects of each program, and ask the team members to raise their hand when showing their program.

• Science fair style: This works well if you have large monitors (like pairing stations). Once students are done working, they walk around the room and check out other people’s program.

You can mix and match these styles throughout the workshop, or pick one based on timing, or even do both for some projects.

Pairing Based on Progress

As students move through the course, their progress will vary more - some of them may be 1-2 tutorials ahead of others. When pairing people on the projects, the goal is to give them a project to work on that’s roughly at their level, but when possible, pair more advanced with less advanced.

On day 1, students are generally close enough to each other in progress that it works to have them work through the same projects. Thus, the goal of creating the pairs is to pair more advanced with less advanced. The way to do that is to look at the coach reports on Khan Academy and select the Skill Progress tab. That will show you graphs of how many students have started and completed each node in the course, and is a great way to figure out pairs.

Find a node that looks roughly 50/50 (keeping into account no-show students), and come up with pairs based on that. Make the list of pairs right before connecting your laptop to the monitor, to avoid showing that data to the whole class.

On day 2, students get farther apart, so there are 2-3 suggested projects for each pairing time, with a prerequisite listed. To select the pairs, open the Skill progress report, find which students have completed the highest pre-req, make the pairs, and keep going down the projects list until all are paired.

It’s okay if pairs aren’t perfectly matched, students can always learn from each other.

Here’s a screenshot of the Skill progress report halfway through Day 1: