Select Lesson

Code Avengers and the International Baccalaureate Curriculum (IB)

IB Computer Science Pathway

Primary Years Programme (PYP)

Middle Years Programme (MYP)

Computer Science for Diploma Programme (DP) or Career Related Programme (CP)

DP: In detail lesson/topic objective alignment

Code Avengers and the International Baccalaureate Curriculum, IB

Level Guide

Code Avengers and the International Baccalaureate Curriculum (IB)

IB Computer Science Pathway

Primary Years Programme (PYP)

Middle Years Programme (MYP)

Computer Science for Diploma Programme (DP) or Career Related Programme (CP)

DP: In detail lesson/topic objective alignment

Code Avengers and the International Baccalaureate Curriculum (IB)

Code Avengers can support student learning across all IB programmes.

IB Computer Science Pathway

Page 5 of the IB Design Guide 2014 — Image from Page 5 of the IB MYP Design Guide 2014

Our cross-curricular focused Junior courses can support inquiry learning in Primary Years Programme (PYP).
Our Intro and Level 1 courses all teach the skills to create programs, web sites and apps, which students can use to create outcomes for a Digital Design course in the Middle Years Programme (MYP).
For Computer Science in the Diploma Programme (DP) or Career Related Programme (CP) our Level 1 Computer Science courses can support struggling learners develop confidence in select general topics.

Primary Years Programme (PYP)

Code Avengers' Junior programmes were created with multiple topics in mind and can form a part of the learning of the inquiry topic

Inquiry alignments

Below we have given suggestions for courses that could support learning of each inquiry topic.

Note that the numbers indicate the expected age group of the learners.

Level 1 - Ages 5 to 8
Level 2 - Ages 7 to 11
Level 3 - Ages 10 to 13 (This is above PYP age groups but might provide further extension)

Inquiry	Code Avengers course with key learning.
Transdisciplinary Theme - Who We Are
An inquiry into the nature of the self, beliefs and values; personal, physical, mental, social and spiritual health; human relationships including families, friends, communities and cultures; rights and responsibilities; what it means to be human.	PR2 Gear up for Safety - design, physical health, programming, app creation, user safety
Transdisciplinary Theme - Sharing the Planet
An inquiry into rights and responsibilities in the struggle to share finite resources with other people and with other living things; communities and the relationships within and between them, access to equal opportunities; peace and conflict resolution.	DR1 Carnival Crisis - Math, graph, solving problems/conflict CT3 The Best Robot Restaurant - Math, algorithms, deconstructing problems, how to formulate and evaluate better solutions
Transdisciplinary Theme - Where We Are in Place and Time
An inquiry into orientation in place and time; personal histories; homes and journeys; the discoveries, explorations and migrations of humankind; the relationships between and the interconnectedness of individuals and civilisations, from the local and global perspectives.	DR2 Museum Mystery - communication, history, technology CT200 Māori New Year - culture, expressing ideas, planting, creating meaning through connecting with objects
Transdisciplinary Theme - How We Organise Ourselves
An inquiry into the interconnectedness of human-made systems and communities; the structure and function of organisations; societal decision-making; economic activities and their impact on humankind and the environment.	DR2 Museum Mystery - communication, history, technology DR3 Numbers through time - number systems, history
Transdisciplinary Theme - How the World Works
An inquiry into the natural world and its laws; the interaction between the natural world (physical and biological) and human societies; how humans use their understanding of scientific principles; the impact of scientific and technological advances on society and on the environment.	CT1 Camping Adventure - patterns, using technology, directions, maps, light pollution, astronomy. CT2 Creature Feature Zoo - maps, nodes, directions, ordering, logic, biology, genetics
Transdisciplinary Theme - How We Express Ourselves
An inquiry into the ways in which we discover and express ideas, feelings, nature, culture, beliefs and values; the ways in which we reflect on, extend and enjoy our creativity; our appreciation of the aesthetic.	PR1 A Stormy Day - sequence, biology, story telling, directions CT200 Māori New Year - culture, expressing ideas, planting, creating meaning through connecting with objects PR3 Larsson Castle Mystery - programming, app design, animation, story telling, shield blazonry

Middle Years Programme (MYP)

Code Avengers can support Digital Design students in gaining skills towards the assessment objective, Objective C: Creating the solution.

Students can choose a course listed that will help them gain the skills to create their solution for their design challenges and problems.

Code Avengers Intro Courses

Topic	CA link
Make a basic program	Intro to Python (PY0) or select lessons in Python Level 1 (PY1)
Make a basic program (Create a Quiz)	Intro to JavaScript (JS0) or select lessons in JavaScript Level 1 (JS1)
Make a basic website	Intro to webpages HTML/CSS (HT0) or select lessons in HTML/CSS level 1 (HT1)
Make 3 basic apps (Quiz, interactive xylophone, simple ringer app)	Intro to Web Development (WD0) or select lessons in Web Development level 1 (WD1)
Design courses Typography and Color Theory courses can support design project.	Typography (DE1) or Color Theory (DE2)

Computer Science for Diploma Programme (DP) or Career Related Programme (CP)

Code Avengers is more focused on creating digital outcomes whereas IB is more focused on theory.
We would recommend our Level 1 Computer Science courses as a independent learning resource for students, especially those who need bridging material or a place to start with some of the general topics.

Quick overview of CA supported topics

Topic	CA courses
1.2 – System Design basics	Human interaction with the system HCI Level 1
2.1 – Computer organization	Binary part - Data Representation Level 3 (JR)/Programming Languages Level 1
3.1 – Networks	Digital Systems 1 - How the Web Works Will support learning in this area. Good intro if not aware of internet.
4.1 – General Principals	Algorithms Level 1, Software Engineering Level 1 - Program Planning, Programming Languages Level 1
4.2 – Connecting computational thinking and program design	Software Engineering Level 1 - Program planning
4.3 – Introduction to programming	To improve understanding of programming in general students could do... JavaScript Level 1- Introduction to programming Python Level 1- Introduction to programming
Paper 2 Topic A—Databases	CA Web Development/Databases courses will help support understanding but does not cover specific learning points: Web Development Level 1 - JavaScript Interactivity, buttons and forms(WD1) Web Development Level 2 - Building a basic database with Firebase (WD2) Web Development Level 3 - Building an advanced database with Firebase (WD3)
Paper 2 Topic C—Web Science	CA HTML/CSS courses will help support understanding but does not cover specific learning points: HTML/CSS Level 1 - JavaScript Interactivity, buttons and forms(HT1) HTML/CSS Level 2 - Building a basic database with Firebase (HT2) HTML/CSS Level 3 - Building an advanced database with Firebase (HT3)

DP: In detail lesson/topic objective alignment

Course AL1	Topic alignment
Algorithms Level 1 Human and Computer Interaction - Explore system usability and accessibility.	4.1 – General Principals Thinking procedurally 4.3 – Introduction to programming (HL & SL) Use of programming languages IB topic points this lesson supports:
1. Defining what an algorithm is.	4.1.1 - Identify the procedure appropriate to solving a problem
2. Building with sequential structures.	4.1.2 - Evaluate whether the order in which activities are undertaken will result in the required outcome
3. Exploring ways of communicating algorithms.	4.1.4 - Identify when decision-making is required in a specified situation
4. Building with simple conditional structures.	4.1.4 - Identify when decision-making is required in a specified situation
5. Building with chained conditional structures.	4.1.3 - Explain the role of sub-procedures in solving a problem
6. Building with advanced conditional structures.	4.1.5 - Identify the decisions required for the solution to a specified problem 4.1.6 - Identify the condition associated with a given decision in a specified problem
7. Building with simple iterative structures.	4.3.9 - Construct algorithms using loops, branching
8. Building with repeat-while iterative structures.	4.3.9 - Construct algorithms using loops, branching
9. Building with combined structures.	4.3.9 - Construct algorithms using loops, branching
10. Building a complex algorithm.	4.3.9 - Construct algorithms using loops, branching

Course CT3	Topic alignment
Computational Thinking 3 JR Covers logical thinking and algorithm efficiency and cost.	4.2 – Connect CT & program design IB topic points this lesson supports:
4. Logic and Problem Solving	4.2.8 - Deduce the efficiency of an algorithm in the context of its use
5. Iteration and Patterns	4.2.9 - Determine the number of times a step in an algorithm will be performed for given input data

Course DR3	Topic alignment
Data Representation 3 JR Cover place value and other fundamentals of common number systems.	2.1 – Computer organization Binary Representation IB topic points this lesson supports:
3. Decimal - Base 10 and Hexadecimal - Base 16	2.1.9 - Define the terms: bit, byte, binary, denary/decimal, hexadecimal
5. Binary - Base 2	2.1.9 - Define the terms: bit, byte, binary, denary/decimal, hexadecimal

Course HCI1	Topic alignment
HCI Level 1 Human and Computer Interaction - Explore system usability and accessibility.	1.2 – System Design basics Human interaction with the system IB topic points this lesson supports:
1. Understanding what user-interfaces are.	1.2.16 - Discuss the moral, ethical, social, economic and environmental implications of the interaction between humans and machines
2 Understanding how humans are different to computers.	1.2.16 - Discuss the moral, ethical, social, economic and environmental implications of the interaction between humans and machines
2. Understanding what usability is.	1.2.12 - Define the term usability
4. Accessibility: Recognising that different people have different needs.	1.2.14 - Identify methods that can be used to improve the accessibility of systems
5. Heuristic: Match between the system and the real world	1.2.13 - Identify a range of usability problems with commonly used digital devices 1.2.15 - Identify a range of usability problems that can occur in a system
6. Heuristic: Visibility of the system status.	1.2.13 - Identify a range of usability problems with commonly used digital devices
7. Heuristic: User control and freedom.	1.2.13 - Identify a range of usability problems with commonly used digital devices 1.2.15 - Identify a range of usability problems that can occur in a system
8. Heuristic: Aesthetics and minimalist design.	1.2.13 - Identify a range of usability problems with commonly used digital devices 1.2.15 - Identify a range of usability problems that can occur in a system
9. Heuristics: Good error messages + Prevent errors.	1.2.13 - Identify a range of usability problems with commonly used digital devices 1.2.15 - Identify a range of usability problems that can occur in a system
10. Evaluating a user interface.	1.2.13 - Identify a range of usability problems with commonly used digital devices

Course PL1	Topic alignment
PROGRAMMING LANGUAGES 1 Explore features of programming languages and how to translate between high and low level languages.	2.1 – Computer organization Binary Representation 4.1 – General Principals Thinking procedurally 4.3 – Introduction to programming IB topic points this lesson supports:
1. Different ways of giving instructions: informal, algorithm, program	General support for 4.1 - "Thinking Procedurally"
2. Basic features; output, input, storing, & math	General support for 4.1 -"Thinking Procedurally" 4.3.3 - Explain the essential features of a computer language
3. Flow control in programming languages	General support for 4.1 "Thinking Procedurally" 4.3.3 - Explain the essential features of a computer language
4. Understanding the purpose of syntax	4.3.4 - Explain the need for higher level languages
5. Adding with circuits	2.1.10 - Outline the way in which data is represented in the computer. 4.3.1 - State the fundamental operations of a computer
6. Operators	2.1.10 - Outline the way in which data is represented in the computer. 4.3.1 - State the fundamental operations of a computer
7. Bit instructions in a machine language	2.1.10 - Outline the way in which data is represented in the computer. 4.3.1 - State the fundamental operations of a computer
8. Compilers	4.3.5 - Outline the need for a translation process from a higher level language to machine executable code
9. Translating with interpreters	4.3.5 - Outline the need for a translation process from a higher level language to machine executable code
10. Review programming languages	General support for 4.1 "Thinking Procedurally"

Course SE1	Topic alignment
Software Engineering 1 - Program Planning	4.1 – General Principals Thinking ahead 4.2 - Connect CT & program design IB topic points this lesson supports:
1. Introduction to Planning	4.1 - General Principals
2. Flowchart Symbols	4.1.9 Identify the inputs and outputs required in a solution 4.2.4 - Analyse an algorithm presented as a flow chart
3. Practice Building Flowcharts	4.2.4 - Analyse an algorithm presented as a flow chart
4 .Introduction to Pseudocode	4.2.5 - Analyse an algorithm presented as pseudocode
5. Practice Using Pseudocode	4.2.6 - Construct pseudocode to represent an algorithm
6. Planning Conditional Structures	4.2.5 - Analyse an algorithm presented as pseudocode
7. Iterative Structures and Robustness	4.1.10 - Identify pre-planning in a suggested problem and solution 4.1.11 - Explain the need for pre-conditions when executing an algorithm 4.1.12 - Outline the pre- and post-conditions to a specified problem 4.1.13 - Identify exceptions that need to be considered in a specified problem solution
8. Flexibility in Planning	4.1.10 - Identify pre-planning in a suggested problem and solution 4.1.11 - Explain the need for pre-conditions when executing an algorithm 4.1.12 - Outline the pre- and post-conditions to a specified problem 4.1.13 - Identify exceptions that need to be considered in a specified problem solution
9. Planning Functions, Classes and GUIs	4.1.10 - Identify pre-planning in a suggested problem and solution 4.1.11 - Explain the need for pre-conditions when executing an algorithm 4.1.12 - Outline the pre- and post-conditions to a specified problem 4.1.13 - Identify exceptions that need to be considered in a specified problem solution
10. Review What You Have Learned	4.1.10 - Identify pre-planning in a suggested problem and solution 4.1.11 - Explain the need for pre-conditions when executing an algorithm 4.1.12 - Outline the pre- and post-conditions to a specified problem 4.1.13 - Identify exceptions that need to be considered in a specified problem solution

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!