CoderDojoChi JavaScript course examples

Working with CoderDojoChi to teach children the basics of programming with the JavaScript language and P5.js.

You can view the examples below:

• Lesson 1 - calling functions
  • Examples
    • Basic shapes
    • Add color to shapes - RGB values and fill()
    • Control the outlines of our shapes with stroke()
  • Challenges
    • Neutral face smiley
    • Open mouth smiley
    • Eye balls
    • The perfect smore!
• Lesson 2 - variables that are assigned numbers
  • Examples
    • Variable basics - declare, assign, use
    • Number operators and using JavaScript like a calculator
    • Car drawn with relative positioning
    • Animating our car
  • Challenges
    • Ice cream dream
    • Seconds in a year and number of pizza slices per person
    • Open mouth smiley drawn using relative positioning
    • Lake Michigan sunrise with boats and shooting stars!
• Utilities
  • Show or hide a grid and tooltip. Should help kids grasp coordinate systems.
• Examples for fun
  • Hello World! Smiley face example
  • Cookie monster with wobbly eyes!

Where are the lessons?

Each folder located in the project root directory and starting with a number is a lesson. A path to a lesson would look like /<lesson-number>-<lesson-description>/. A lesson is made up of 2 parts:

1. "examples"
2. "challenges"

The idea is that teachers walk through "examples" to teach concepts and then students work on "challenges" to help them understand the concepts they have just been shown.

"examples" and "challenges" are explained in more detail below.

Examples

"examples" are code samples to use when teaching. You can find all examples for a given lesson in /<lesson-number>-<lesson-description>/examples/.

Each lesson contains an "examples" folder and each "examples" folder contains 1 or more folders containing code examples. A path to a code example would look like /1-calling-functions/examples/1-simple-shapes/.

Typically code examples are made up of 2 files:

1. index.html
2. sketch.js

sketch.js contains the code necessary for demonstrating JavaScript concepts. sketch.js files contain learning outcomes at the top of the file and are within code comments.

Challenges

"challenges" are coding challenges for students. You can find all challenges for a given lesson in /<lesson-number>-<lesson-description>/challenges/.

Each lesson contains a "challenges" folder and each "challenges" folder contains 1 or more folders with code challenges. A path to a code challenge would look like /1-calling-functions/challenges/3-eye-balls/.

Code challenges contain 2 folders:

1. "problem"
2. "solution"

The "problem" folder contains starter code for students to hack on. The "solution" folder contains one answer to the challenge.