{"id":11512,"date":"2017-07-04T15:17:35","date_gmt":"2017-07-04T15:17:35","guid":{"rendered":"https:\/\/www.process.st\/templates\/javascript-training-2\/"},"modified":"2024-02-28T20:45:56","modified_gmt":"2024-02-28T20:45:56","slug":"javascript-training-2","status":"publish","type":"post","link":"https:\/\/www.process.st\/templates\/javascript-training-2\/","title":{"rendered":"Javascript Training"},"content":{"rendered":"<section id=\"introduction\">\n<h2> Introduction: <\/h2>\n<div class=\"text-content\">\n<p>Hello coach!<\/p>\n<p>Welcome to Javascript Training! I\u2019m so excited to see you taking the time to expand your abilities and become immersed in the Hatch community! <\/p>\n<p>This basic Javascript training will get you understanding the main concepts used throughout Hatch. We will learn the basics of:<\/p>\n<p>- Javascript Programming \/ The Hatch Programming Environment<br \/>- Coordinate Space \/ Basic Shapes<br \/>- Advanced Shapes<br \/>- Functions<br \/>- Variables<br \/>- If Statements<br \/>- For Loops<\/p>\n<p>Each of these 7 concepts will be explained through a short video that will work through a Hatch project. The video should explain the overarching ideas of the concept at hand and give you a general understanding of the concept.&nbsp;<\/p>\n<p>At the end of every video, you will need to complete two tasks:<\/p>\n<ol>\n<li>Complete the project demonstrated in the video -&gt; Complete a challenge&nbsp;<\/li>\n<li>Complete at least one additional project<\/li>\n<\/ol>\n<p>Details for all of this are included in the Javascript Training Booklet. <strong>When you are complete, email <a href=\"mailto:recruitment@hatchcanada.com\" rel=\"nofollow noopener\" target=\"_blank\">recruitment@hatchcanada.com<\/a> to let me know<\/strong>. I will check your projects and suggest any follow up projects I may have. Once you\u2019ve completed the follow-up projects your Basic Javascript Training is complete!<\/p>\n<p>If&nbsp;you get stuck, you can refer to :<\/p>\n<p>www.p5js.org\/reference<br \/>www.hatchcanada.com\/hints<\/p>\n<p>Or email any questions you have to <a href=\"mailto:hellohatch@hatchcanada.com\" rel=\"nofollow noopener\" target=\"_blank\">hellohatch@hatchcanada.com<\/a>! I\u2019ll do my best to help explain anything that you\u2019re getting confused by.<\/p>\n<p>Now go explore Hatch. Learn some things. Come out a stronger programmer then you came in!<\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"download-the-javascript-training-booklet\">\n<h2> Download The Javascript Training Booklet <\/h2>\n<div class=\"text-content\">\n<p>Further information on the materials presented in these lessons can be found in the Javascript Training Guide Below:<\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"sign-into-hatch-canada\">\n<h2> Sign into Hatch Canada <\/h2>\n<div class=\"text-content\">\n<p>I have created you a Hatch account!<\/p>\n<p>If you navigate to&nbsp;<a href=\"http:\/\/www.hatchcanada.com\/user\/login\" rel=\"nofollow noopener\" target=\"_blank\">www.hatchcanada.com\/user\/login<\/a>&nbsp;you can log on with the following credentials:<\/p>\n<p>email: <em>firstname.lastname@hatchcanada.com<\/em><br \/>password: hatch123<\/p>\n<p>We recommend you change your password by clicking the \u201cAccount\u201d button in the top right when you first log on.<\/p>\n<p>If you are having issues accessing the system, please email <a href=\"mailto:hellohatch@hatchcanada.com\" rel=\"nofollow noopener\" target=\"_blank\">hellohatch@hatchcanada.com<\/a>&nbsp;<\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lessons\">\n<h2> Lessons: <\/h2>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-1--hold-a-ball\">\n<h2> Lesson 1 - Hold A Ball <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/1cmqyp61h1\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: Hold A Ball Series: Quick Start\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete Hold A Ball<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Change the size of the ball\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Change the colour of the ball\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Have the colour of the ball change as you move your mouse\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       4\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a second ball\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them! It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Basic Painter\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Inverted Painting\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Globulator\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-2--coordinate-space\">\n<h2> Lesson 2 - Coordinate Space <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/no5oh6sjrf\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: Basic House Series: Lessons\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete Basic House<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a cloud using three ellipses\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create windows on the house\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a flower in the front garden\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Minnie Mouse\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Steve\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create-A-Bug\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-3--advanced-shapes\">\n<h2> Lesson 3 - Advanced Shapes <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/7nhyof5ayo\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: Origami Cat Series: Lessons\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete&nbsp;Origami Cat<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Add in a triangle nose\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Add in a diamond tail\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Add in eyes using quad or triangle\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Basic Design\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      House Drawing\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Pokeball\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-4--variables\">\n<h2> Lesson 4 - Variables <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/wep9k8q0zr\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: Variadot Series: Lessons\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete&nbsp;Variadot<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create another variable that sets the xPosition of the circle\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a variable that sets the red value of the circle\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Modify the code so that there are many circles that all have the same size\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:&nbsp;<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Car Positioning\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Pseudocode Falling Circles\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Move Character\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-5--functions\">\n<h2> Lesson 5 - Functions <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/4752667b4l\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: The Function Monster Series: Lessons\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete&nbsp;<u><\/u>The Function Monster<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Add in many extra eyes\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a function to draw arms\/spots\/hair\/etc. on the monster\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Create a function to draw a mouth on the monster\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Hatch Egg\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Stamp Maker\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Mike Wazowski\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-6--if-statements\">\n<h2> Lesson 6 - If Statements <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/7ffym87avs\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete&nbsp;If mouseX...<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Modify the project so that the colours change when you move the mouse up and down\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Modify the project so that moving your mouse into the different corners changes the colour\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Have a different shape appear as the backgrounds change colour\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Is The Mouse on The Top Half\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Mouse In Rectangle\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Mouse Clicks On A Button\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"lesson-7--for-loops\">\n<h2> Lesson 7 - For Loops <\/h2>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/a4f7066w3r\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe>\n  <\/div>\n<div class=\"description\">\n    Project: Numbered Circles Series: Lessons\n  <\/div>\n<\/p><\/div>\n<div class=\"text-content\">\n<p><strong>Task 1 - Complete&nbsp;Numbered Circles<\/strong><\/p>\n<p>Complete at least one of the following challenges:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Have the circles count up by 2's\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Start the circles at 400 and count down to 0\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Have the circles only appear in the top half of the canvas\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>Task 2 - Complete <em><\/em>an Additional Project<\/strong><\/p>\n<p><em>Make sure you're adding your own unique modifications to them!&nbsp;It isn't mandatory to complete challenges. Although, I challenge you to complete the first challenge!<\/em><\/p>\n<p>Complete at least one&nbsp;of the following projects:<\/p>\n<\/p><\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Stripes\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Pseudocode Lines\n    <\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3\n     <\/div>\n<\/p><\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/p><\/div>\n<div class=\"item-name-static\">\n      Pseudocode Rectangles\n    <\/div>\n<\/li>\n<\/ul><\/div>\n<div class=\"text-content\">\n<p><strong>If you are having trouble playing the videos, an alternate version of each of them can be found here:<\/strong><\/p>\n<p><a href=\"https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/drive.google.com\/open?id=0Byhyg5pqIg3RaUMzZDJHS0ZfMDQ<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"finishing-up\">\n<h2> Finishing Up: <\/h2>\n<\/section>\n<section id=\"reflections\">\n<h2> Reflections <\/h2>\n<div class=\"text-content\">\n<p>It's always important to reflect back on yourself after learning something new. Take some time now to think about what you've just created!<\/p>\n<\/p><\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Which lesson did you struggle most with? Which parts specifically? <\/label><br \/>\n   <textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea>\n  <\/div>\n<\/p><\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Which project did you most enjoy? Why? <\/label><br \/>\n   <textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea>\n  <\/div>\n<\/p><\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> What unique modifications did you make to your projects? <\/label><br \/>\n   <textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea>\n  <\/div>\n<\/p><\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> What questions did you have throughout this process? (Keep track of these to discuss during orientation!) <\/label><br \/>\n   <textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea>\n  <\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"blank-canvas\">\n<h2> Blank Canvas <\/h2>\n<div class=\"text-content\">\n<p>Now&nbsp;that&nbsp;we\u2019ve&nbsp;learned&nbsp;all about these programming structures, it\u2019s&nbsp;time to start combining it all together.&nbsp;The&nbsp;most&nbsp;robust, interesting projects&nbsp;will use many&nbsp;and all of the things&nbsp;we\u2019ve learned. Explore&nbsp;Hatch.<\/p>\n<p>Experiment with larger&nbsp;and larger&nbsp;projects. Build your own projects! <a href=\"https:\/\/hatchcoding.com\/projects\/showcase-all\" rel=\"nofollow\">https:\/\/hatchcoding.com\/projects\/showcase-all<\/a><\/p>\n<p>From&nbsp;this&nbsp;link&nbsp;you&nbsp;can&nbsp;select a Blank&nbsp;Canvas. This&nbsp;is&nbsp;a project that has&nbsp;no instructions. Experiment&nbsp;here.&nbsp;Be&nbsp;wildly&nbsp;creative. There is&nbsp;no limit to what you can create with code. The more&nbsp;time&nbsp;you&nbsp;spend&nbsp;with this, the more exposure you have to programming and the more comfortable&nbsp;and&nbsp;proficient you will be.<\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"just-cool-tech-projects\">\n<h2> Just Cool Tech Projects <\/h2>\n<div class=\"text-content\">\n<p>I&nbsp;would&nbsp;like&nbsp;to&nbsp;leave&nbsp;you&nbsp;with examples&nbsp;of artwork&nbsp;that can be created with code. You\u2019ll see that it&nbsp;can&nbsp;span&nbsp;so&nbsp;much&nbsp;further&nbsp;than circles&nbsp;drawn on a screen. You\u2019ll even see that it can be brought&nbsp;into&nbsp;the&nbsp;real&nbsp;world, in full exhibitions&nbsp;and installations. I hope this&nbsp;inspires&nbsp;you, and I hope that you can use these projects and ideas to help inspire out students as well!<\/p>\n<p>Created&nbsp;with&nbsp;p5.js&nbsp;\/&nbsp;processing:<\/p>\n<p><a href=\"https:\/\/therewasaguy.github.io\/p5&shy;music&shy;viz\/demos\/08_echonestPitchSegment\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/therewasaguy.github.io\/p5&shy;music&shy;viz\/demos\/08_echonestPitchSegment\/<\/a><br \/> <a href=\"http:\/\/michellechandra.github.io\/starTrails\/\" rel=\"nofollow\">http:\/\/michellechandra.github.io\/starTrails\/ <\/a><br \/><a href=\"http:\/\/fun.the816.com\/neobrush\/\" rel=\"nofollow\">http:\/\/fun.the816.com\/neobrush\/<\/a><br \/><a href=\"https:\/\/uclab.fh&shy;potsdam.de\/cf\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/uclab.fh&shy;potsdam.de\/cf\/<\/a><br \/> <a href=\"https:\/\/vimeo.com\/1747316\" rel=\"nofollow\">https:\/\/vimeo.com\/1747316<\/a><br \/><a href=\"https:\/\/vimeo.com\/151334392\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/vimeo.com\/151334392<\/a><br \/><a href=\"https:\/\/vimeo.com\/10154340\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/vimeo.com\/10154340<\/a><\/p>\n<p> Other:<\/p>\n<p><a href=\"https:\/\/vimeo.com\/106798521\" rel=\"nofollow\">https:\/\/vimeo.com\/106798521<\/a><br \/><a href=\"http:\/\/minimaforms.com\/#item=petting&shy;zoo&shy;frac&shy;2\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/minimaforms.com\/#item=petting&shy;zoo&shy;frac&shy;2<\/a><br \/><a href=\"http:\/\/nilsvoelker.com\/content\/onehundredandeight\/index.html\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/nilsvoelker.com\/content\/onehundredandeight\/index.html <\/a><a href=\"http:\/\/www.niklasroy.com\/project\/88\/my&shy;little&shy;piece&shy;of&shy;privacy\/\" rel=\"nofollow\">http:\/\/www.niklasroy.com\/project\/88\/my&shy;little&shy;piece&shy;of&shy;privacy\/<\/a><br \/><a href=\"http:\/\/listen.hatnote.com\/\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/listen.hatnote.com\/<\/a><br \/><a href=\"http:\/\/map.norsecorp.com\/#\/\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/map.norsecorp.com\/#\/<\/a><\/p>\n<\/p><\/div>\n<\/section>\n<section id=\"never-stop-learning\">\n<h2> Never Stop Learning <\/h2>\n<div class=\"text-content\">\n<p>It doesn't end here!<\/p>\n<p>The Hatch platform has over 350 projects! Continue to create, to explore, to discover! Not only will you feel more confident in your abilities the more projects you do, your students will also benefit from having a confident, creative instructor!&nbsp;<\/p>\n<\/p><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Hello coach! Welcome to Javascript Training! I\u2019m so excited to see you taking the time to expand your abilities and become immersed in the Hatch community! This basic Javascript training will get you understanding the main concepts used throughout Hatch. We will learn the basics of: - Javascript Programming \/ The Hatch Programming Environment- [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"ep_exclude_from_search":false,"cover_icon_emoji":"","cover_icon_url":"","tasks_count":"16","template_description":"","template_id":"sCtWj8iQ-gMDvDElfBFN7A","task_0":"Introduction:","task_slug_0":"introduction","task_1":"Download The Javascript Training Booklet","task_slug_1":"download-the-javascript-training-booklet","task_2":"Sign into Hatch Canada","task_slug_2":"sign-into-hatch-canada","task_3":"Lessons:","task_slug_3":"lessons","task_4":"Lesson 1 - Hold A Ball","task_slug_4":"lesson-1--hold-a-ball","task_5":"Lesson 2 - Coordinate Space","task_slug_5":"lesson-2--coordinate-space","task_6":"Lesson 3 - Advanced Shapes","task_slug_6":"lesson-3--advanced-shapes","task_7":"Lesson 4 - Variables","task_slug_7":"lesson-4--variables","task_8":"Lesson 5 - Functions","task_slug_8":"lesson-5--functions","task_9":"Lesson 6 - If Statements","task_slug_9":"lesson-6--if-statements","task_10":"Lesson 7 - For Loops","task_slug_10":"lesson-7--for-loops","task_11":"Finishing Up:","task_slug_11":"finishing-up","task_12":"Reflections","task_slug_12":"reflections","task_13":"Blank Canvas","task_slug_13":"blank-canvas","task_14":"Just Cool Tech Projects","task_slug_14":"just-cool-tech-projects","task_15":"Never Stop Learning","task_slug_15":"never-stop-learning","task_16":"","task_slug_16":"","task_17":"","task_slug_17":"","task_18":"","task_slug_18":"","task_19":"","task_slug_19":"","task_20":"","task_slug_20":"","task_21":"","task_slug_21":"","task_22":"","task_slug_22":"","task_23":"","task_slug_23":"","task_24":"","task_slug_24":"","task_25":"","task_slug_25":"","task_26":"","task_slug_26":"","task_27":"","task_slug_27":"","task_28":"","task_slug_28":"","task_29":"","task_slug_29":"","task_30":"","task_slug_30":"","task_31":"","task_slug_31":"","task_32":"","task_slug_32":"","task_33":"","task_slug_33":"","task_34":"","task_slug_34":"","task_35":"","task_slug_35":"","task_36":"","task_slug_36":"","task_37":"","task_slug_37":"","task_38":"","task_slug_38":"","task_39":"","task_slug_39":"","task_40":"","task_slug_40":"","task_41":"","task_slug_41":"","task_42":"","task_slug_42":"","task_43":"","task_slug_43":"","task_44":"","task_slug_44":"","task_45":"","task_slug_45":"","task_46":"","task_slug_46":"","task_47":"","task_slug_47":"","task_48":"","task_slug_48":"","task_49":"","task_slug_49":"","task_50":"","task_slug_50":"","task_51":"","task_slug_51":"","task_52":"","task_slug_52":"","task_53":"","task_slug_53":"","task_54":"","task_slug_54":"","task_55":"","task_slug_55":"","task_56":"","task_slug_56":"","task_57":"","task_slug_57":"","task_58":"","task_slug_58":"","task_59":"","task_slug_59":"","task_60":"","task_slug_60":"","task_61":"","task_slug_61":"","task_62":"","task_slug_62":"","task_63":"","task_slug_63":"","task_64":"","task_slug_64":"","task_65":"","task_slug_65":"","task_66":"","task_slug_66":"","task_67":"","task_slug_67":"","task_68":"","task_slug_68":"","task_69":"","task_slug_69":"","task_70":"","task_slug_70":"","task_71":"","task_slug_71":"","task_72":"","task_slug_72":"","task_73":"","task_slug_73":"","task_74":"","task_slug_74":"","task_75":"","task_slug_75":"","task_76":"","task_slug_76":"","task_77":"","task_slug_77":"","task_78":"","task_slug_78":"","task_79":"","task_slug_79":"","task_80":"","task_slug_80":"","task_81":"","task_slug_81":"","task_82":"","task_slug_82":"","task_83":"","task_slug_83":"","task_84":"","task_slug_84":"","task_85":"","task_slug_85":"","task_86":"","task_slug_86":"","task_87":"","task_slug_87":"","task_88":"","task_slug_88":"","task_89":"","task_slug_89":"","task_90":"","task_slug_90":"","task_91":"","task_slug_91":"","task_92":"","task_slug_92":"","task_93":"","task_slug_93":"","task_94":"","task_slug_94":"","task_95":"","task_slug_95":"","task_96":"","task_slug_96":"","task_97":"","task_slug_97":"","task_98":"","task_slug_98":"","task_99":"","task_slug_99":"","footnotes":""},"categories":[7,1],"tags":[],"class_list":["post-11512","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts\/11512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/comments?post=11512"}],"version-history":[{"count":0,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts\/11512\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/media?parent=11512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/categories?post=11512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/tags?post=11512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}