ZIM WORKSHOPS - http://zimjs.com/code/learn/

Three Hour CORE Workshop

This Workshop is dedicated to Carrie Fisher - a most amazing idol


INTRODUCTION ---------------------------------

The goal of each workshop is to teach the core elements of the topic.
Each workshop contains:

0. This instruction.txt page for the workshop.
1. A workshop_topic.zip file to give to the students with all they need for the workshop.
2. A teacher folder with sample code (topic1.html, topic2.html, etc.) to build with students.
3. A more finished project (topic_final.html) that you can give learners at the end.
4. An assets folder for the projects - also in the student ZIP.
5. A resources folder with docs, libraries and zim templates - also in student ZIP.
6. An index.html page that points to teacher/steps.html - also in student ZIP.


TOPIC ----------------------------------------

G A M E - Make a game to stop circles from hitting one another as they grow.

The player sees colored circles growing randomly on the stage.
They have to click the circles to make them smaller.
If the circles touch they stop growing.
If all the circles have stopped growing then the game is over.
The score is how long the player has played.


TECHNIQUES --------------------------------------

Shapes (with random colors)
Tiling (looping)
Timers (intervals)
Animation
HitTests
Interaction (click / mousedown)
Sound
Scoring (text fields)
Toggle Buttons


PREREQUISITES AND REQUIREMENTS ---------------

1. It will be handy to have completed the CODING and CANVAS workshops
but this is not necessary if student has coded before or is a fast learner.

2. A computer with a browser and a text editor (syntax coloring helpful - Atom is good).
Internet is not required if the resources folder can be distributed by thumb drive, etc.

3. A projector and screen is probably necessary to show code if there are multiple students.
Make sure the code is large to easily see periods, commas, colons, semi-colons, etc.
And when students arrive make sure their code is big enough for them to see.  CTRL + -


PREPARATION -------------------------------------

Let potential students know about the CODING and CANVAS workshops (if available).
Refer the students to the Basics "What IZ" and "Capture" tutorials.
They can take a look through the Basics ZIM Bits as well to help prepare.

Post the index.html, the teacher/steps.html and the workshop_topic.zip.
The index page redirects to the steps page which has a link to the zip.
Test the links.  You can give the link to the index to the students.
Or prepare a Thumb Drive with the student ZIP to distribute.

In the teacher/topic folder are numbered project files representing stages of building.
There are comments in the code to say what and why we are doing things.
Read over the comments and practice building the app at least once before teaching.
Print the source and use a highlighter to help you keep track while teaching.


INSTRUCTIONS ------------------------------------

Introduce yourself and have the students briefly meet one another.

Introduce the workshop and topic.  Introduce ZIM.

ZIM is a JavaScript framework to make interactive media on the HTML canvas.
ZIM is powered by CreateJS which is a library to make coding on the canvas easier.
If you have Internet, then show learners the ZIM site at http://zimjs.com
And in particular show the LEARN section.

Show learners the steps page with a link to their workshop ZIP file.
Or distribute the zip with a thumb drive.

Follow the steps to build.

When the workshop is done, show learners the resources links.
You are also welcome to show / distribute the game_final.html app.

All the best,


Inventor Dan Zen
http://danzen.com - Museum of Interactive Works
