Select Lesson

Computational Thinking 200 - Matariki - Māori New Year

Computational Thinking 200 - Course layout

Background

1: Matariki

60 min

Lesson 1. Matariki: Māori New Year

20 min

Task 1 Star Gazing

5 min

Origami stars - The Matariki cluster

20 min

Task 2 - Star patterns

5 min

Task 3 - Planting kumara

5 min

Task 4 - Making kites

5 min

Create your own kite | Mana tukutuku

20 min

Task 5 - Matariki Macarena dance

5 min

Computational Thinking 200

Computational Thinking 200 - Matariki - Māori New Year

Computational Thinking 200 - Course layout

Background

1: Matariki

60 min

Lesson 1. Matariki: Māori New Year

20 min

Task 1 Star Gazing

5 min

Origami stars - The Matariki cluster

20 min

Task 2 - Star patterns

5 min

Task 3 - Planting kumara

5 min

Task 4 - Making kites

5 min

Create your own kite | Mana tukutuku

20 min

Task 5 - Matariki Macarena dance

5 min

Computational Thinking 200 - Matariki - Māori New Year

A Code Avengers' Junior Themed Course

Computational Thinking 200 - Course layout

Computational Thinking 200 - A Code Avengers' Junior course.

Matariki is a great way to make links to the Computational Thinking strand of the new Digital Technologies curriculum. All of the progress outcomes make reference to “authentic contexts”. Your school is likely to be engaging in a number of Matariki activities during June so the tasks that CodeAvengers have designed will be meaningful to the students.

Our Computational Thinking 200 course on Matariki covers material from Progress Outcome 1 and 2 of the NZ Curriculum and is suitable for primary school students in Years 4-6. The course consists of one 60 minute lesson, made up of five tasks that explore the New Zealand Māori celebration of Matariki, the constellation which heralds the beginning of the new year in the Māori calendar.

The lesson includes an online component for students to work through at their own speed (although students generally take between 20 minutes and half an hour to complete this component). The online lesson will usually be completed in one session, but teachers may elect to break at the end of a task and continue at another time. Supplementary material in the form of additional unplugged activities, worksheets, computer based tasks and videos are available for use at the teacher's discretion, depending on the needs of the students in the class.

We suggest that for lower primary school students, the teacher should work through some of the online tasks with the whole class, and follow this up with a number of unplugged activities. Computers are not needed, but the computational thinking concepts can still be covered.

This computational thinking course incorporate concepts that relate to Progress Outcome 1 and 2 of the NZ Digital Technology Curriculum.

The course acknowledges the principles of the Treaty of Waitangi and also covers other aspects of the New Zealand curriculum, particularly:
Social Sciences - L1 Understand how the cultures of people in New Zealand are expressed in their daily lives; L2 Understand how cultural practices reflect and express people's customs, traditions, and values.
Science Planet Earth and Beyond Learning languages L1-4 - Make connections with known cultures - Te Reo Māori.

Background

Matariki is a small cluster of seven stars (Pleiades) which Māori call Matariki (translated as "tiny eyes" or "the eyes of God"). There are a number of myths surrounding this festival.

This video will explain how Māori might give the directions to find the stars of Matariki
External link for instructions to find Matariki

This cluster of stars is part of a bigger constellation of around 500 stars, most of which we can't see without a telescope. The Matariki stars become visible at dawn each year in May-June and remains in the night sky through to March. The Māori new year begins at the first full moon that follows the appearance of the seven stars. The constellation was important for early navigators crossing the Pacific,for determining when crops should be planted and whether there would be an abundant harvest or not the following year.

There are a number of myths told about Matariki. You can listen to one version of the story here:

Click on this link to watch one of the stories about the seven sisters of Matariki:

External link to 'The story of the seven sisters'.

You can listen to the Ngāti toa stories associated with each Matariki star here:

External link to 'The seven stars of Matariki.

At Matariki celebrations Māori meet together for karakia to remember those who had died in the previous year and to share a hāngī where food is cooked in an underground oven and then shared.

60 min

1: Matariki

Maia tells Charlie about Matariki and asks him to join her whanau on her marae for this important Māori celebration. Join Charlie and Maia as they take part in star watching, planting kumara, creating star decorations and flying kites.

vocab

Computational Thinking 2 Lesson

1.1: Lesson 1. Matariki: Māori New Year

Start 20 min

Join Maia and Charlie as they celebrate Matariki: the Māori new year celebration from New Zealand. Learn about all kinds of computational thinking skills that fit into the gardening, food preparation, and story of the stars of Matariki.

Lesson Outline

task 1: Follow instructions step by step

task 2: Identify the repeating patterns

task 3: Determine whether steps are relevant for a process and put steps into a logical order to solve a problem

task 4: Order the steps for designing kites into the correct order by identifying the problems and correcting them

task 5: Build algorithm for an animation taking into account end-users and in a computerised context.

Concepts

1.2: Task 1 Star Gazing

5 min

We will break the task of drawing a constellation into smaller parts and follow steps in sequence to draw them.

Drawing the constellations of Orion and Taurus is a big task. When the task is decomposed (broken down into smaller steps) it will be easier to complete. Follow Maia and Charlie's instructions in the correct sequence (order) and you will find the Matariki stars.

Teacher notes

This task links to Progress outcome 1 - students are introduced to the idea of algorithmic thinking. Charlie shows Maia how he learnt to identify constellations in the sky by following step by step instructions to join the stars up like a dot to dot puzzle to form star patterns.

You can listen to the Māori directions to Matariki at:
External video link - "How did Māori find Matariki?

You can listen to the Ngāti toa stories associated with each of the seven stars here:
External video link - Ngati toa 'Stories of the seven stars of Matariki'

Activity

1.3: Origami stars - The Matariki cluster

20 min

Objective

To celebrate Matariki and the New Year, and practice following simple algorithms

Background

"Matariki (Pleiades) is an important cluster of stars in New Zealand. When Matariki appears, it marks the start of the new year at mid-winter (End of May, start of June)." See more Matatiki Star Facts at Te Papa.

"There are many legends about the star cluster Matariki. One of the most popular is that the star Matariki is the whaea (mother), surrounded by her six daughters, Tupu-ā-nuku, Tupu-ā-rangi, Waipunarangi, Waitī and Waitā, and Ururangi.

Matariki and her daughters journey across the sky each year to visit their tupuna wahine (great grandmother), Papatūānuku (Mother Earth).

During this visit, each of the stars help Papatūānuku to prepare for the year to come, using their unique qualities or gifts to bring mauri, life force or energy, to her different environments. Whilst spending time with their kuia grandmother, they also learn new skills and gain new knowledge from her, which they guard and pass on to others." From Matariki - Whare tapere, Te Papa.
Find out more about each sister at Te Papa's website.

Preparation

You will need -

A template for each student, pair or group of seven click here for pdf
Scissors
Coloring-in implements

image of the star template — Origami star template and instructions.pdf

Instructions

1. Colour the Matariki Cluster page to look like space

2. Cut out these 7 triangles

3. Turn each triangle into a star following steps 1-7 below

4. Glue each star into the cluster. Star A on dot A, a star B on a dot B etc...

Video instructions

Folding starts at 1:09

Concepts

1.4: Task 2 - Star patterns

5 min

We will recognise the 'unit that repeats' within a pattern and finish the decorations by continuing the pattern.

Each set of decorations for the Matariki celebration has a different pattern - some of the patterns aren't quite right though. Help Maia and Charlie decide where the pattern is wrong and then fix it (debugging).

Teacher notes

Being able to spot patterns in data is a great Computational Thinking skill and will help students recognise where they can use loops in programming at Progress Outcome 3. This set of tasks requires them to identify any errors in the star sequence and correct them (simple debugging). This is a requirement of Progress Outcome 1 .

Concepts

1.5: Task 3 - Planting kumara

5 min

We will decide whether steps are important to complete a process and put these steps into a logical order.

Reorganise the steps to plant kumara.

This task also links to Progress Outcome 1 as students use decomposition skills to identify the different steps needed to plant kumara. They ignore any ambiguous parts such as measuring ingredients. The instructions are given to them, in the wrong order, and they have to correct the errors (simple debugging)

Teacher notes

Many children will not be familiar with planting Kumara. This video will show your students how kumara were grown - including the use of traditional planting sticks and the step by step process the students will need to order in the activity.

External video of kumara planting process (5 min)

Since kumara are often cooked in a hangi and a shared meal is part of the celebration you may like to share these videos with your students

Hangi

Māori cooked their food (kai) in underground pits called ‘hangi’. Traditionally the food was wrapped in leaves and then put on hot stones.
A wet cloth over the top made the steam that cooked the food. Earth piled on top trapped the heat and after 3-4 hours the food was ready to share.
Usually food like fish, chicken, and root vegetables like kumara are cooked. The food from a hangi is moist and has a slightly smoky flavor. It is very important to follow this order correctly or the food might be uncooked or dirty!

Use these link to see the videos Maia showed Charlie.

External link to Preparing the hangi

External link to Cooking in the hangi

Concepts

1.6: Task 4 - Making kites

5 min

We will order the steps for designing a kite, debugging any problems so we can achieve the output we want.

For Māori, kites were a way to connect heaven and earth, they may also have used kites for navigation. Māori often fly kites at Matariki. Join Maia and Charlie as they order the steps for building a Māori kite. Afterwards you could build your own kite and decorate it.

Teacher notes

This task relates to Progress Outcome 2 as students are presented with simple algorithms, step by step instructions, that are in the wrong order. This has resulted in incorrect kite designs being constructed. They have to debug, find the error, and change the instructions to the correct order.

The context of this task could be non-computerised or computerised. Students could be following instructions to make actual kites or using the virtual kite builder on our CodeAvengers platform. On the platform, students are taking their first steps into creating a simple program (a virtual kite) involving sequence and outputs (the graphical parts of the kite)

Activity

1.7: Create your own kite | Mana tukutuku

20 min

Objective

To celebrate New Zealand's unique culture and technology and practise design skills.

Background

Drawing of a kite by Charles Barraud in British Library

Kites, or mana tukutuku, were made by Māori for fun, divination and communication. There were a few types of kites, the one this activity covers is the triangular Manu Taratahi, Manu means bird or kite and Taratahi is named after the large feather plume often attached to it.

We will be making our own kites today based on mana tarahi design. However, a real mana tarahi is 4 times bigger and made from toetoe and raupō. How to make a manu taratahi - Te Ara site

Preparation

You will need -

A template each, click here for pdf
Scissors
Glue
Pens, feathers and other decorating bits and bobs
Plastic drinking straws and/or bamboo skewers for the frame (4 pieces per kite)
String

image of the kite template — Kite template

Instructions

1. Cut out the triangle of the mana taratahi kite

2. Decorate the mana taratahi, use shells, feathers, coloring in pencils or anything else you like.

3. Attach skewers or straws along the middle and sides of the triangle.

4. Attach a string to each end of the middle line and tie together, adding a long string to that knot.

5. You can then try to fly it and hang on the wall.

Concepts

1.8: Task 5 - Matariki Macarena dance

5 min

We will build an algorithm to learn the Matariki Macarena.

Maia tells Charlie that they will sing waiata to celebrate this important event. Traditional Māori have actions with their many of their waiata. The Matariki macarena is used to help Māori children learn the names of the seven stars. Join Charlie as Maia teaches him the actions for this song.

Teacher notes

This task is asking the students to create an algorithm for a sequence of photos of dance moves for the Matariki Macerena song. The characters in the course want to create an on screen animation so the context is computerised.

This task relates to Progress Outcome 2 as students are using the algorithm (the draggable text blocks) to create a simple program (animation) involving outputs (photos) and sequence (a dance routine). The characters want to show this to their classmates at the end so they are taking account of end users.

The lyrics for the waiata included in the lesson can also be found here.

External link to waiata with lyrics

This wonderful tutorial demonstrates different actions for the girls and boys. It is done by a group of school students so may have greater appeal for some students.

External link to macarena tutorial

1. NAV BAR

13HRS

Resources

Guide

</div>
<div class="js comments_comment-content">
<div class="comments_comment-profile-info">
<span class="js comments_comment-profile-name">{{codeName}}</span>
        
<span class="js comments_comment-timestamp">{{timestamp}}</span>
      </div>
<p class="js comments_comment-text">{{comment}}
<div class="js comments_comment-buttons">
<span class="js comments_comment-replies-count" data-upvotes="{{upvotes}}">{{upvotes}}</span>
<button class="js comments_comment-up-vote"></button>
<button class="js comments_comment-reply"></button>
      </div>
    </div>
    {{#if parentID}}

{{else}}
<div class="js comments_comment-replies">
        
      </div>
    {{/if}}
  </div>

<div class="guiders-preview_content">
      {{#if complete}}{{else}}
<h4 class="guiders-preview_subtitle">{{subtitle}}</h4>
      {{/if}}
<h2 class="guiders-preview_title">{{{title}}} {{#if complete}}{{{message}}}{{/if}}</h2>
      {{#if complete}}{{else}}
<div class="guiders-preview_description"><p>{{{message}}}</div>
      {{/if}}
      {{#if complete}}
<div class="guiders-preview_social-buttons">
<a href="{{{twitterUrl}}}" target="_blank" onclick="ai.publish(true, null, event);" class="js guiders-preview_social-button -twitter"><i class="guiders-preview_social-icon icon-ca-twitter"></i> {{{twitter}}}</a>
<button class="js guiders-preview_social-button -facebook" onclick="ai.share.facebook();ai.publish(true, null, event);"><i class="guiders-preview_social-icon icon-ca-facebook"></i> {{{facebook}}}</button>
      </div>
      {{/if}}
    </div>
  </div>  
  {{#if tour}}
<p class="guiders-preview_action">{{{action}}}
  {{/if}}

{{#with pricing}}
<div id="pricing-popup">
<div class="pricing">
<h3 class="pricing_header">{{{header}}}</h3>
<p class="pricing_info">
    
    {{{text}}}

<div class="pricing_sections">
    {{#each sections}}
<div class="pricing_section-wrapper">
<div class="pricing_section">
<h3 class="pricing_section-header">{{header}}</h3>
          {{#if list}}
            {{#each list}}
<p class="pricing_section-info">{{this}}
            {{/each}}
          {{else}}
<p><span class="js- pricing_section-price">{{price}}</span> <span class="js- pricing_section-dom">{{dom}}</span> <span class="pricing_section-details">{{{details}}}</span>
<p class="pricing_section-info">{{{text}}}</p>
          {{/if}}
        </div>
        {{#if button1}}
<button class="pricing_button js signup-button">{{../button1}}</button>
        {{/if}}
        {{#if button2}}
<button class="pricing_button -red js-quote-button" data-analytic="submit-quote">{{../button2}}</button>
        {{/if}}
      </div>
    {{/each}}
    </div>
    
  </div>
</div>
{{/with}}

<div id="quote" class="js quote">
    <div class="pricing">
        <h3 class="pricing_header">{{{header}}}</h3>
        <p class="pricing_info">{{{text}}}</p>
        <div class="js pricing_sections">
        {{#each inputs}}
            <div class="pricing_input-wrapper {{size}}">
                <label class="pricing_label">{{placeholder}}</label>
                {{#if list}}
                    <select required name="{{name}}" class="js pricing_input">
                    {{#each list}}
                        <option value="{{#if name}}{{name}}{{/if}}">{{#if name}}{{name}}{{else}}{{this}}{{/if}}</option>
                    {{/each}}
                    </select>
                {{else}}
                    <input required type="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{name}}" placeholder="{{placeholder}}" class="js pricing_input" value="{{value}}">
                {{/if}}
            </div>
        {{/each}}
        </div>
        <button class="js-teacher-quote pricing_button -red" data-analytic="submit-quote-button Quote">{{{button}}}</button>
  </div>
</div>

{{else}}
            {{{level}}}
          {{/if}}
        </h2>
<h3 class="track-popup_name">{{name}}</h3>
<p class="track-popup_description">{{description}}</p>
      </div>
    </div>
<div class="track-popup_header-right">
      {{{trackBox}}}
      
      {{#if secondaryButton}}
<a href="{{trackUrl}}" class="js track-popup_header-button">{{secondaryButton}}</a>
      {{/if}}
    </div>
  </div>
<div class="js track-popup_tracks">
    {{#each courses}}
<div class="track-popup_course">
<div class="track-popup_course-left">
<div class="track-popup_course-left-content">
<h2 class="track-popup_course-name">{{name}} {{type}}</h2>
<p class="track-popup_course-info">{{{description}}}</p>
          </div>
        </div>
<div class="track-popup_course-right">
          {{{boxHtml}}}
<a href="{{url}}" class="track-popup_course-button {{#if ../disableTrack}}is-disabled{{/if}}">{{../startNowButton}}</a>
        </div>
      </div>
    {{/each}}
  </div>
</div>

<div class="guides-info-section">
<h3 class="guides-info-section_heading">Key</h3>
<div class="js guides-info-section_key">
<p class="js guides-info-section_key-text">There are five types of lesson segments:</p>
<i class="guides-info-section_key-icon icon-ca-puzzle"></i> <span class="guides-info-section_type">Concepts</span>: <p class="guides-info-section_key-description">Notes on the concepts covered in the CA lessons.</p>
<i class="guides-info-section_key-icon icon-ca-rocket"></i> <span class="guides-info-section_type">Activities</span>: <p class="guides-info-section_key-description">Off-line and online activities to supplement the CA lessons. </p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Lessons</span> = <p> class="guides-info-section_key-description"Online lessons created by CA.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Projects</span> = <p class="guides-info-section_key-description">Online projects created by CA to reinforce your learning.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Quizzes</span> = <p class="guides-info-section_key-description">Online quizzes created by CA to review previous lessons.</p>
<p class="js guides-info-section_key-text">These small segments can be organised into three sections</p>
<p><span>Prior Learning</span>: These are recap/review segments</p>
<p><span>The Lesson</span>: This section leads you through the concepts, activities and CA lessons.</p> 
<p><span>Extension</span>: These are additional concepts, activities and lessons.</p>
  </div>
</div>

<div class="js purchase-item {{handler}} {{type}} {{#if purchased}}has-purchased{{/if}} {{#if isComplete}}is-complete{{/if}} {{#if new}}-new{{/if}}" {{#if id}} data-id="{{id}}" {{/if}} {{#if plan}} data-plan="{{plan}}" {{/if}} {{#if item}} data-item="{{item}}" {{/if}} {{#if url}} data-url="{{url}}" {{/if}}>
<img src="{{img}}" class="purchase-item_img">
<p class="purchase-item_header">{{title}}</p>
    {{#if description}}
<p class="purchase-item_text">{{description}}</p>
    {{/if}}
<p class="purchase-item_price"><span class="purchase-item_price-price {{#if salePrice}}-strikethrough{{/if}}">{{price}}</span> {{#if salePrice}}<span class="purchase-item_price-sale">{{salePrice}}</span>{{/if}}</p>
<p class="purchase-item_type">USD {{per}}</p>
<div class="purchase-item_buttons">
      {{#each buttons}}
        {{#if url}}
<a href="{{url}}" {{#if target}} target="{{target}}" {{/if}} class="js purchase-item_button external-link" title="{{text}}">{{text}}</a>
        {{else}}
<button class="js purchase-item_button {{hander}}" title="{{text}}">
<span class="js show-spinner">{{text}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
          </button>
        {{/if}}
      {{/each}}
    </div>
    {{#if info}}
<p class="purchase-item_info">{{info}}</p>
    {{/if}}
  </div>

<div class="js payment-form">
<div class="payment-form_content">
      {{{header}}}
<div class="payment-form_inputs">
<div class="js payment-form_input-wrapper -wide -radios">
<div class="js payment-form_option" data-type="ccd">
<label class="js payment-form_label" title="{{creditCard}}">{{creditCard}}</label> 
<span class="js payment-form_option-radio is-active"></span>
          </div>
<div class="js payment-form_option" data-type="paypal">
<label class="js payment-form_label" title="Paypal">Paypal</label> 
<span class="js payment-form_option-radio"></span> 
          </div>
        </div>
      </div>
<form class="js payment-form_input-wrapper -wide ccd_form">

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{firstName}} *</label>
<input class="js payment-form_input -dark" type="text" data-recurly="first_name">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{lastName}} *</label>
<input class="js payment-form_input" type="text" data-recurly="last_name">

</div> 
        </div>
        
        {{#if includeSignup}}
<div class="js payment-form_inputs include-signup">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{email}} *</label>
<input class="js payment-form_input -dark" type="email">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{password}} *</label>
<input class="js payment-form_input" type="password">

</div> 
          </div>
        {{/if}}

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{cardNumber}} *</label>
<div data-recurly="number"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">CVV *</label>
<div data-recurly="cvv"></div>
          </div> 
        </div>
<div class="payment-form_inputs">  
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{month}} *</label>
<div data-recurly="month"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{year}} *</label>
<div data-recurly="year"></div>
          </div> 
<input type="hidden" name="recurly-token" data-recurly="token">

</div>
      </form>
<div class="payment-form_input-wrapper -wide js code">
<label class="js payment-form_label">{{couponCode}} </label>
<input type="text" name="coupon" class="js payment-form_input">

</div>
      
      {{#if includeSignup}}
<div class="js payment-form_input-wrapper include-signup">
<span class="js payment-form_option-checkbox policy-consent -dark" data-value="yes"></span>
<label class="js payment-form_label -checkbox -no-caps">
            {{{consent}}}
          </label>
        </div>
      {{/if}}

<div class="payment-form_buttons">
<div class="js payment-form_error"></div>
<button class="js payment-form_continue-button">
<span class="payment-form_continue-button-text js show-spinner">{{buttonText}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
        </button>
      </div>
    </div>
  </div>

<!doctype html>

<body class="slide -{slideType}">
<header class="slide_header"> 
<i class="slide_logo icon-ca-ca-logo"></i>
<span class="slide_title">{header}</span>
<div class="slide_controls">
<button id="presentation-jump" class="js slide_controls-button -jump" onclick="window.opener.ai.presentation.previousSlide(true)"><i class="slide_controls-icon icon-ca-left-arrow -double"></i><i class="slide_controls-icon icon-ca-left-arrow -double"></i></button>
<button id="presentation-prev" class="js slide_controls-button -prev" onclick="window.opener.ai.presentation.previousSlide(false)"><i class="slide_controls-icon icon-ca-left-arrow"></i></button>
<button id="presentation-next" class="js slide_controls-button -next" onclick="window.opener.ai.presentation.nextSlide(false)"><i class="slide_controls-icon icon-ca-right-arrow"></i></button>
<button id="presentation-skip" class="js slide_controls-button -skip" onclick="window.opener.ai.presentation.nextSlide(true)"><i class="slide_controls-icon icon-ca-right-arrow -double"></i><i class="slide_controls-icon icon-ca-right-arrow -double"></i></button>
</div>
</header>

{content}
</section>

</body>

<div class="js- projects-popup -{{type}}">
<div class="js- projects-popup_top">
    {{#if image}}
<div class="js- projects-popup_image-wrapper">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
  </div>
<div class="js- projects-popup_bottom">
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
    {{#if image}}
<div class="js- projects-popup_image-wrapper {{#if promo}}-promo{{/if}}">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
  </div>
</div>

<div class="pdf-header_title">{{name}} Answers</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if solution}}
<pre class="prettyprint pdf-section_code">{{{solution}}}</pre>
        {{else if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{answer}}}
            {{/each}}
          </ol>
        {{else if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

<div class="pdf-header_title">{{name}} Instructions</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if goal}}
          {{{goal}}}
        {{/if}}
        {{#if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{question}}}
            {{/each}}
          </ol>
        {{/if}}
        {{#if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

{{#each this}}
<div class="course-box -{{theme}}">
<div class="course-box_content">
<div class="course-box_top-bar">
<div class="course-box_top-bar-left">
<span class="course-box_type">{{level}}</span>
<span class="course-box_title">{{{name}}}</span>
          </div>
<div class="course-box_top-bar-right">
<span>{{hours}} HRS</span>
<span class="course-box_top-post"></span>
<span class="course-box_preview-btn">Preview <i class="icon-ca-play-full course-box_preview-btn-triangle"></i></span>
          </div>
        </div>
<div class="course-box_details">
<p class="course-box_description">{{{description}}}</p>
<div class="course-box_buttons">
<div class="course-box_buttons-left">
              {{#if progress}}
<a href="{{url}}" class="button course-box_resume-button">Resume</a>
              {{else}}
<a href="{{url}}" class="button course-box_resume-button">Start</a>
              {{/if}}
            </div>
<div class="course-box_buttons-right">
<button class="button course-box_details-button">View Details</button>
<div class="course-box_content-footer">
<div class="course-box_footer-info">
                  
                </div>
<div class="course-box_footer-info">
                  {{difficulty}}
                </div>
<div class="course-box_footer-info">
                  {{taskCount}} Tasks
                </div>
              </div>
            </div>
          </div>
<div class="course-box_footer">
<div class="course-box_footer-info">
                  
            </div>
<div class="course-box_footer-info">
              {{difficulty}}
            </div>
<div class="course-box_footer-info">
              {{taskCount}} Tasks
            </div>
          </div>
        </div>
      </div>
<div class="course-box_preview">
        {{#if image}}
<div class="course-box_preview-image">
<image src="{{image}}" class="course-box_preview-image-image">
          </div>
        {{else}}
<div class="course-box_preview-video">
<div class="course-box_preview-video-play">
<div class="course-box_preview-video-play-icon">
<i class="icon-ca-play"></i>
              </div>
            </div>
          </div>  
        {{/if}}
      </div>
<div class="course-box_percentage-top">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
<div class="course-box_percentage-bottom">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-star course-box_percentage-star"></i>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
    </div>
  {{/each}}

<!doctype html>
<style>
    html {
        font-size: 0 !important;
    }

.t-quiz > * {
        font-size: initial !important;
        margin-bottom: 0 !important;
    }
</style>
<link rel="stylesheet" href="/dist/style.min.css?0.052468554855654936">
{{#each css}}
{{/each}}
<script>
    window.CHINA = true;
    window._MIN_ = '';
    window.CURRENT_VERSION = '1';
    window.IFRAME = true;
</script>
<script src="/js/jquery.js?v=yOKaW5htuhTZ_ZEWQ-n3h0ennNBkN3zmVmtasuaxVKk"></script>
<script src="/js/jquery-ui.min.js?v=_CzTpg6QTje_ISm9yjDTYORSNm5j6oJ56j0nP6TCzhc"></script>

download
new file
upload media
rename

delete

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

table {
        position: absolute;
        width: 360px;
        height: 300px;
        background-color: black;
        top: 50%;
        opacity: 0.9;
        margin: auto;
        margin-top: -150px;
        left: 0;
        right: 0;
        cursor: pointer;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

#code {
        display: none;
    }
</style>

<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
<iframe id="myApp" {events} width="{width}" height="{height}"></iframe>
<p>Learn to make apps, games and websites with <a style="color: #ef5555" href="/">CodeAvengers.com</a>

<table onclick="this.style.display='none';displayApp()">
<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<div id="code">
{content}
</div>

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

.fullscreen footer, .fullscreen header {
        display: none;
    }

.fullscreen table {
        top: 170px;
    }
</style>

<header>
<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
</header>

<canvas id="paperscriptCanvas" tabindex="0"
        {canvasEvents} width="{width}" height="{height}"></canvas>

<footer>
<p>Learn to make apps, games and websites with <a style="color: #ef5555;" href="/">CodeAvengers.com</a>

</footer>

<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<title>Code Avengers Profile</title>
<meta name="viewport" content="width=device-width">

<header>
<a href="https://codeavengers.com"><img src="/images/logo.png"></a>
<a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a>
</header>
<section>
<h2>My Profile</h2>
<img src="/images/profile9.png" width="180" alt="profile">

</a>
<strong>Name</strong>: Supacoda<br>

<strong>Birthday</strong>: 14<sup>th</sup> April<br>

<strong>Height</strong>: 1.79m<br>

<h3>My Super Powers</h3>
<p>I have super endurance, once I start, I keep going until I finish!
	
<p>I will eat anything and lots of it... if there is a plate with food on it, I will eat it!