ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS

SKOOL

Practice with ZIM CODE see the Learn Page for tutorials

ALL LESSONS

Welcome Teachers

INTRODUCTION

Coding on the HTML Canvas using JavaScript provides a very visual result which leads to a more inclusive and creative curriculum. There are also accompaning videos on YouTube. See ZIM Kids for Kids Lessons. All the information and code here is open source and free of charge. Your establishment is welcome to donate to the ZIM Foundation for Creative Coding.

Canvas Examples

JavaScript is one of the world's most popular and powerful programming languages. A major component of most computer courses and certainly computer science courses is programming. On this page, we will help map the ZIM Skool lessons to your curriculum. With ZIM you can use JavaScript programming basics to let students code with a very visual and exciting input / output called Interactive Media.

Interactive Media is a blend of design and development fostering creativity and multidisciplinary skills. From the start, Interactive Media is more inclusive as it caters to "both sides of the brain". It includes working with shapes, images, animations, sound and text to make Web and mobile apps, games, puzzles and art for sought after positions in the Cultural, Media, Service and Educational industries. Here is a link to an INTRO video on Interactive Media and ZIM.

Interactive Media

The ZIM Skool Creative Coding Lessons are prepared and maintained by Canadian New Media Awards Programmer (2002) and Educator (2008) of the Year. Zen has been teaching ZIM in the Sheridan Interactive Media program and guarantees that ZIM now offers the most simple, consistent, fun, and powerful coding environment he has worked in since graduating from Engineering in 1986. This includes Engineering work in Fortran and Basic, Patent work in Databases, CD Rom work in Director, Web work in Perl, PHP, HTML, Application work in Flash and Objective C and Canvas work in CreateJS. All this, has led to the ZIM Open Source JavaScript Canvas Framework.

JavaScript can be coded with any text editor and runs in a Browser. This means that it is very free and easy to set up assuming you have computers and Internet. We would recommend a modern editor with syntax coloring such as ATOM. Atom is free, used in industry and is created by the folks at GitHub the world's most popular repository of code.

Let's dig in to the mapping of Curriculum next!

CURRICULUM

ZIM is a FRONT END technology and as such, most of the lessons are client side. Lesson 09 is server side but the mapping of curriculum will be focused on front end.

Your Curriculum
There are a variety of curricula in the world. We would be happy to help you if you have any questions mapping objectives. The best way, would be to join our SLACK team and introduce yourself in the #general channel.

Example Curriculum
ZIM headquarters are located in the Province of Ontario in Canada. So we will provide a mapping example using the Ontario Curriculum for Computer Studies.


Small sample excerpt from Ontario Computer Studies

Goals
According to The Ontario Curriculum Grades 10 to 12 Computer Studies Guide, a goal for the Computer Studies Program is to gain an understanding of computer concepts and develop skills in: the following four critical areas. We have mapped the ZIM Skool lessons that relate:

Computer Curriculum Mapped to ZIM Skool Lessons

PARTNERSHIPS ⯈︎ ZIM SLACK COMMUNITY
According to the guide, community partners in the area of computer studies can be an important resource for schools and students. ZIM offers that partnership to use ZIM and its many resources beyond ZIM Skool such as ZIM Learn with code and video tutorials, ZIM Zap to code share, ZIM Teach with workshops, lessons and tests, ZIM Badges for very in-depth tutorials on making art and using physics, and the resources on the ZIM Site such as docs, examples, tips, templates, and more.

Courses
Text-based coding can be taught from about grade 5 on but usually shows up in secondary school (high school). Do not let this discourage you if you are teaching elementry school or camps, etc. ZIM is very readable. Even the code below gives the kids something wonderful to experience - a draggable red ball!

01
new Circle(100, "red").center().drag();

In the next section, we will continue to use the Ontario Curriculum to map the lessons to a particular secondary school course.

Grade 10

Grade 10 of the Ontario Curriculum for Computer Studies has an Introduction to Computer Studies course aimed at the intermediate college level. ZIM can be taught in the university preparation courses but for our mapping example, we have chosen a college preparation course. The course is organized in three strands:

Computer Studies Strands

  1. Understanding Computers
  2. Introduction to Programming
  3. Computers and Society

Our lessons apply to part B. Introduction to Computer Programming. This is broken down into three expectations:

Part B Expectations

  1. describe fundamental programming concepts and constructs
  2. plan and write simple programs using fundamental programming concepts
  3. apply basic code maintenance techniques when writing programs
Each of these are broken down into subsections listed below with the matching lessons from ZIM Skool. As outlined in the Curriculum Expectations section, the expectation examples provided are intended as a guide for teachers rather than as an exhaustive or mandatory list.

B1 - Programming Concepts

  1. use correct terminology to describe programming concepts
    • Lesson 01: classes, objects, parameters, variables, constants, scope, syntax, statements, keywords, identifiers, opertators, expressions, terminators, chaining
    • Lesson 02: parameters, null, literals (number, string, boolean, array, object and function)
    • Lesson 03: functions, function literals, return values, scope and events
    • Lesson 04: abstraction, object oriented programming (oop), classification
    • Lesson 05: composition, arrays, elements, indexes, loops
    • Lesson 06: conditionals, debugging

  2. describe the types of data that computers can process and store [and objects it can display]
    • Lesson 01: Shapes such as Rectangles, Circles, Triangles, Blobs, Squiggles and Custom Shapes
    • Lesson 01: Components such as Labels, Buttons, CheckBoxes, RadioButtons, Panes, Windows, Waiters, Indicators, Steppers, Sliders, Tabs, Pads, Dials, Loaders and TextAreas
    • Lesson 02: Numbers, Strings, Boolean, Array, Objects
    • Lesson 06: Boolean

  3. explain the difference between constants and variables used in programming;
    • Lesson 01: variables, var, let, const

  4. determine the expressions and instructions to use in a programming statement, taking into account the order of operations
    • Lesson 01: statements, expressions and chaining

  5. identify situations in which decision and looping structures are required
    • Lesson 05: loops - for, while, loop
    • Lesson 06: conditionals - if, if else, if else if

  6. describe the function of Boolean operators, comparison operators, and arithmetic operators
    • Lesson 01: operators
    • Lesson 06: Boolean and comparison operators

B2 - Writing Programs

  1. use a visual problem-solving model to plan the content of a program;
    • Lesson 07: building

  2. use variables, expressions, and assignment statements to store and manipulate numbers and text in a program
    • The PRACTICE sections of all the Lessons

  3. write keyboard input and screen output statements that conform to program specifications
    • Lesson 03: Events - Practice 3 - keydown
    • Lesson 08: Controls - Practice 2 - MotionController

  4. write a program that includes a decision structure for two or more choices
    • Lesson 06: Conditionals

  5. write programs that use looping structures effectively
    • Lesson 05: Loops - For Loop Practice 1-8, Loop 1-9, Abstraction 1-5

  6. explain the difference between syntax, logic, and run-time errors
    • Lesson 06: Debugging

  7. compare and contrast the use of different programming environments to solve the same problem
    • Lesson 01: INTRO video to ZIM

B3 - Code Maintenance

  1. write clear and maintainable code using proper programming standards
    • Lesson 01: Theory
    • Lesson 06: Debugging

  2. write clear and maintainable internal documentation to a specific set of standards
    • Lesson 01: Docs

  3. use a tracing technique to understand program flow and to identify and correct logic and run-time errors in a computer program
    • Lesson 06: Debugging

  4. demonstrate the ability to validate a computer program using test cases
    • Lesson 06: Debugging

Summary

The ZIM Skool Lessons 1 - 8 are an introduction to programming in a very open and visual environment which makes coding more inclusive for many learners.

ZIM can be also used to teach how to build complex yet fun and creative features such as apps, games, puzzles and art. See the ZIM Teach section for lessons to build a simple game, an asteroids game, a meme maker and a physics visualization. ZIM Badges are detailed tutorials with five badges each to build apps, art and games. The ZIM Examples show applications that are well commented. The Explore and Bubbling videos show all sorts of fun examples of what can be built with ZIM.

If you are interested in teaching with ZIM and would like help matching ZIM Skool lessons to your curriculum, please join the free and easy ZIM Slack Team and message Dan Zen. We look forward to hearing from you.



ALL LESSONS