ZIM js JavaScript Framework

Canvas Components, Controls and more!

Royal Visit for ZIM Founder

AncasterHighLogo_copyCC___Gallery

ZIM founder, Dan Zen – a.k.a. Dr. Abstract, gave a talk workshop to the Ancaster High Secondary School (home of the Royals) Grade 10 Introduction to Computer Science class.  Computer Science Teacher, Halina Dziewa, invited Zen back to his alma mater where he was met by his former class-mate Jeremy Russell, now the Department Head!

The students were given Dan Zen spinny cards – which as they pointed out, were a great icebreaker.  After a words-of-wisdom intro, Zen had the students copy the ZIM template from the CODE page and get a circle dragging in less than five minutes using the who can get it working first? technique!

From there, they explored dragging, chaining, animation, registration points as they relate to programming basics.  They moved on to play with a Blob and an Emitter (particles) and ended up tiling an art piece with random or sequential colors animated in a sequence.  The process was similar to this presentation to the Toronto DevTO talk but much more interactive.

Zen had this to say about the experience:

“It was great to see the old school and park underneath the tall pines.  The halls were in wonderful condition with happy students lounging waiting for the next class.  Returning to your high school is a must for all graduates – and it was a delight to hopefully lead the students to a more creative future.”

Also present at the talk was the Principle, Randy Gallant – who was a trouper staying the whole time and helping the students debug.  Lynn Krusto an OCT Specialist High Skills Major (SHSM) from the Hamilton-Wentworth District School Board was there as this activity was a part of the Information & Communications Technology SHSM.

Ancaster_High_tstory-2459web

Of course, these halls were filled with students!

Zen is recommending ZIM to high school teachers as a very visual way to teach programming basics.  Here is a long excerpt from the ZIM Skool about ZIM in Secondary Education – see ZIM Skool Teachers for proper formatting:

Welcome Teachers

INTRODUCTION

Coding on the HTML Canvas using JavaScript provides a very visual result which leads to a more inclusive and creative curriculum. All the information and code here is open source and free of charge.

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, the lessons do NOT include server side coding or database work. ZIM can hook up with server side technologies just fine for example when needing a high-score table as in this game of ZONG but you will have to add any server side curriculum yourself.

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

    • Software development
      • Lesson 01 – Display Objects
      • Lesson 02 – Configuration Objects and Animation
      • Lesson 03 – Functions and Events
      • Lesson 04 – Abstraction
      • Lesson 05 – Arrays and Loops
      • Lesson 06 – Conditionals and Debugging
      • Lesson 07 – Templates and Building
      • Lesson 08 – Controls
    • Algorithms and data structures
      • Algorithms – Functions and Events – Lesson 03
      • Algorithms – Loops – Lesson 05
      • Algorithms – Conditionals – Lesson 06
      • Algorithms – Building – Lesson 07
      • Data Structure – Variables – Lesson 01
      • Data Structure – Classes and Objects – Lessons 01, 02
      • Data Structure – Abstraction – Lesson 04
      • Data Structure – Arrays – Lesson 05
    • Program correctness and efficiency
      • Program Correctness – Syntax – Lesson 01
      • Program Correctness – Debugging – Lesson 06
      • Program Efficiency – Classes – Lessons 01, 02, 04
      • Program Efficiency – Parameters – Lessons 01, 02, 03
      • Program Efficiency – Functions – Lesson 03
      • Program Efficiency – Abstraction – Lesson 04
      • Program Efficiency – Loops – Lesson 05
      • Program Efficiency – Controls – Lesson 08
  • Professional and ethical responsibility
    • Debugging – Lesson 06
    • Accessibility – Lesson 08

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Categories

%d bloggers like this: