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

Three Hour CORE Workshop


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 ----------------------------------------

P H Y S I C S - Create a magical data visualization

Make a cluster of interactive circles that represent data
The circles can be moved about but will always settle in a cluster
In this workshop we explore a physics world with bodies,
forces, linkages and mappings to visual elements in ZIM
Physics has many uses from games and puzzles to e-learning apps
ZIM provides an easy connection to the Box2D Physics Engine


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

Create a physics world
Add bodies such as basic shapes
Map the shapes to ZIM shapes
Apply forces and linkages
Apply mouse interaction
Create shapes based on data
Add labels to visualization
Apply colors to match data


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

1. This is a mid level workshops so at least one of the first three workshops is recommended.
These include Canvas, Coding and Game - Canvas will help with the ZIM environment

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 -------------------------------------

Refer the students to the "What IZ" and "Capture" tutorials.
They can take a look through 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.

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.

All the best,


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