Click the orange "Start Activity" button below to go through the activity.
Creating this module
After two semesters of teaching web programming classes to students aged 14-17, I noticed a consistent trend: while the students were often able to grasp the logic of Javascript functions, loops, and variables, they would get stuck trying to execute correct syntax. In some cases the students needed more rudimentary instruction - for example, they did not know how to use the shift key to create parentheses or curly braces - and in other cases, they could not remember the keywords, names, and symbols to use to execute a block of code.
The objective of this activity is to significantly reduce student errors when writing basic Javascript functions. The strategy is to give students multiple ways to focus only on writing and recognizing correct syntax, without needing to think about programming considerations. In this way, hopefully executing correct syntax will become automatic, and the students will be able to focus on the programming goals of their Javascript functions without the frustration of so many syntax errors.
Step 1: Mindmeister
I used Mindmeister as a first step, to have a simple reference to outline the learning objective..
Step 2: Sketch
Yes, it's chicken scratch, but sometimes a pencil is useful for quickly sketching out layout ideas.
Step 3: Figma Design Mockups
Once I had a rough idea of how I wanted the project to look, I built out the Figma frames. I chose an orange and green color scheme, which, along with the background images, is meant to help emphasize a focused but fun environment. I wanted to make the activity more approachable and a bit lighter in tone than many of the beginner coding tutorials I've looked through online.
I also used Figma to write the script, storing it in comments associated with each frame.
Step 4: Articulate Storyline Build
Once the Figma layouts looked good, I built the activity in Articulate Storyline.