{{ $t('Shared', 'Subscribe') }}
{{ $t('Shared', 'Login') }}
{{ $t('Shared', 'StartButton') }}
{{ points }}
{{ unreadCount > 99 ? '99+' : unreadCount }}
${param.title}
{{ model.achievement.text }}
{{ model.achievement.points }} {{ $t('Shared','Points') }}
Select a Task
1
2
3
4
5
Points:
Time:
my app
solution app
codeavengers.com files
Video
Guide
Notes
Review Quiz
Start Quiz
Next
Check
Reset
Hint
Solution
run
check
next
reset
solution
video
download
share
share
code
Image
new
delete
editor
run
min
example code
Usage
Parameters
Congratulations, you have completed the first 2 lessons! Feel free to share your progress with your friends.
Tweet
<div id="prompt-dialog"> <p class="message">{message}</p> <div class="input"> {input} </div> </div>
<select class="ui-dialog_input"><option></option>{selectOptions}</select>
<input type="{inputType}" {maxLength} {data} value="{defaultValue}" required spellcheck="false" class="ui-dialog_input">
Start Date <input type="date" {data} value="" required spellcheck="false" class="ui-dialog_input"> End Date <input type="date" {data} value="" required spellcheck="false" class="ui-dialog_input">
<div class="js comments_comment {{#if parentId}}-reply{{else}}-parent{{/if}}" data-comment-id="{{id}}" data-user-id="{{userId}}"> <div class="comments_comment-profile-pic-wrapper"> <img class="js comments_comment-profile-pic" src="{{profileImage}}"> </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-profile-points">{{points}}</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"> <img src="{{{image}}}" class="guiders-preview_image"> <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}}
<div class="guiders-preview"> <img src="/images/achievement-graphic.png" class="guiders-preview_image"> <div class="guiders-preview_content"> <h4 class="guiders-preview_subtitle">{{subtitle}}</h4> <h2 class="guiders-preview_title">{{title}}</h2> </div> </div>
<table class="js goals-table"> <tr class="js goals-table_headers"> <td class="goals-table_header js tooltip" title="{{week}}">{{week}} <td class="goals-table_header js tooltip" title="{{monday}}">{{monday}} <td class="goals-table_header js tooltip" title="{{tuesday}}">{{tuesday}} <td class="goals-table_header js tooltip" title="{{wednesday}}">{{tuesday}} <td class="goals-table_header js tooltip" title="{{thursday}}">{{wednesday}} <td class="goals-table_header js tooltip" title="{{friday}}">{{friday}} <td class="goals-table_header js tooltip" title="{{saturday}}">{{saturday}} <td class="goals-table_header js tooltip" title="{{sunday}}">{{sunday}} <td class="goals-table_header js tooltip" title="{{time}}"><i class="goals-table_time"></i> <tr /> </table>
<div class="popup-split-view"> <div class="popup-split-view_left"> <div class="js course-picker_buttons-container"></div> </div> <div class="popup-split-view_right"> <div class="js course-picker_content"> <h2 class="course-picker_header">{{{welcome}}}</h2> <h4 class="course-picker_subheader">{{{whatCourse}}}</h4> <div class="course-picker_course"> <div class="course-picker_course-left"> <div class="js course-picker_course-box"></div> <div class="js course-picker_course-info"></div> </div> <div class="course-picker_course-right"> <div class="course-picker_track"> <ul class="js course-picker_track-list"> </ul> </div> <button class="js course-picker_start-button">{{{coursesStart}}}</button> </div> </div> </div> </div> </div>
{{#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>
<div class="track-popup -{{theme}}"> <div class="track-popup_header"> <div class="track-popup_header-left"> <div class="track-popup_header-left-content"> <h2 class="track-popup_level"> {{#if logo}} <img src="{{{logo}}}" class="track-popup_logo"> {{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}}} <!--<button class="js track-popup_header-button -addTrack">{{addTrackButton}}</button>--> {{#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="popup-box"> <p class="popup-box_message">{{{message}}} <div class="popup-form"> {{#each buttons}} <button class="popup-form_button {{class}}" {{#if track}} data-track="{{track}}" {{/if}} {{#if course}} data-course="{{course}}" {{/if}}>{{{text}}}</button> {{/each}} </div> </div>
<h1><a href="{{url}}">{{{name}}}</a> ({{{time}}})</h1> <h2><strong>{{{description}}}</strong></h2> {{#if screenshot}}<img src="{{screenshot}}">{{/if}} {{#if details}}<p>{{{details}}}{{/if}}
<div class="backgrounds-popup"> {{#each this}} <div class="js backgrounds-popup_option {{this}}" data-class="{{this}}" data-analytic="{{this}}"></div> {{/each}} </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="competition-popup"> <img src="/images/harvey-norman-completed.png" style="width:100%"> </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>
<div class="js certifications_requirement"> <p class="js certifications_requirement-description">{{{description}}}</p> </div>
<div class="js profile_message"> <p class="js profile_message-header">{{{header}}}</p> <p class="js profile_message-text">{{{text}}}</p> </div>
<div class="js section-header"> <p class="js section-header_header">{{{header}}}</p> {{#if text}} <p class="js section-header_text">{{{text}}}</p> {{/if}} </div>
<div class="certificates-popup js-template"> <p class="js certificates-popup_message">Complete a course to get your first certificate.</p> {{#each this}} {{#if hasCertificate}} <div class="js certificates-popup_certificate"> <i class="icon-ca-badge"></i> <span class="certificates-popup_info"> <h2 class="certificates-popup_name">{{{getName}}}</h2> <p class="certificates-popup_date">{{{getSubtitle}}}</p> </span> <button class="js certificates-popup_button" data-course="{{getCode}}">View</button> </div> {{/if}} {{/each}} </div>
<div class="js badges-popup js-template"> {{{this}}} </div>
<!doctype html> <link rel="stylesheet" type="text/css" href="/css/presentation{min}.css?2.{id}"> <link rel="stylesheet" type="text/css" href="/css/styles{min}.css?2.{id}"> <script src="/js/presentation{min}.js?{id}"></script> <title>{title}</title> <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> <section class="_content"> <img class="filler-image" src="/image/guides/collection-2.png"> {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="chatbox" style="display: none"> <header><img src="/images/home/icon8.png"> CHAT<button class="_close-button icon-ca-close"></button></header> <section class="_conversation"></section> <footer><input class="_input" placeholder="Send a message..."></footer> </div>
<script src="/prettify/prettify.js?v=oSSkLQc1T4E8km_qFA1HiVwoBTjEnp65bvk0k_TTfzs"></script> <script src="/prettify/lang-css.js?v=p9a3gtuH6ouuqoeKjKfQfAnxWwRnGVtQfq897yiD3QM"></script> <link rel="stylesheet" href="/prettify/prettify.css"> <link rel="stylesheet" href="/css/pdf-generator.css?{{version}}"> <header class="pdf-header"> <img class="pdf-header_logo" src="/images/logo4.png" alt="Logo"> <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>
<script src="/prettify/prettify.js?v=oSSkLQc1T4E8km_qFA1HiVwoBTjEnp65bvk0k_TTfzs"></script> <script src="/prettify/lang-css.js?v=p9a3gtuH6ouuqoeKjKfQfAnxWwRnGVtQfq897yiD3QM"></script> <link rel="stylesheet" href="/prettify/prettify.css"> <link rel="stylesheet" href="/css/pdf-generator.css?{{version}}"> <header class="pdf-header"> <img class="pdf-header_logo" src="/images/logo4.png" alt="Logo"> <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>
<script src="/prettify/prettify.js?v=oSSkLQc1T4E8km_qFA1HiVwoBTjEnp65bvk0k_TTfzs"></script> <script src="/prettify/lang-css.js?v=p9a3gtuH6ouuqoeKjKfQfAnxWwRnGVtQfq897yiD3QM"></script> <link rel="stylesheet" href="/prettify/prettify.css"> <link rel="stylesheet" href="/css/pdf-generator.css?{{version}}"> <header class="pdf-header"> <img class="pdf-header_logo" src="/images/logo4.png" alt="Logo"> <div class="pdf-header_title">{{name}} References</div> </header> <section class="pdf-section"> {{#each references}} <div class="pdf-section_task"> <div class="pdf-section_lesson-title">{{title}}</div> <p>{{{description}}} <p>Example code:<br> <pre class="prettyprint pdf-section_code">{{{example}}}</pre> </div> {{/each}} </section> <script>addEventListener("load", function (event) { prettyPrint() }, false);</script>
<tr class="js challenge-scoreboard_challenges"> <th><a href="/"><i class="challenge-scoreboard_logo icon-ca-ca-logo"></i></a></th> {{#each this}} <th class="challenge-scoreboard_task" data-sortBy="nosort" data-points="{{points}}"> <span class="challenge-scoreboard_task-name">{{abrv}}</span> <div class="challenge-scoreboard_task-points">{{points}}</div> </th> {{/each}} <th class="js challenge-scoreboard_points" data-sortBy="numeric"></th> </tr>
<tr class="js challenge-scoreboard_team" data-team="{{this}}"> <td class="js challenge-scoreboard_team-name">{{this}}</td> <td class="js challenge-scoreboard_score">0</td> </tr>
<div class="paperscript-dialog_slider-container"> <span class="paperscript-dialog_slider-label-container"> <span class="paperscript-dialog_slider-label">{canvasSolution}</span> <span class="paperscript-dialog_slider-label">{canvasMy}</span> </span> <div class="js paperscript-dialog_slider"></div> </div> <div class="button-container toolbar output_toolbar code-toolbar"> <button id="myCanvas-button" data-canvas="myCanvas" class="myButton option">{myButtonText}</button> <button id="exampleCanvas-button" data-canvas="exampleCanvas" class="exampleButton option">{checkButtonText}</button> </div>
<div id="paperscript-dialog" class="output-ui canvas-ui"> <div id="canvas-container" class="canvas-container"> <canvas tabindex="1" id="paperscriptCanvas" class="canvas" width="{canvasWidth}" height="{canvasHeight}"></canvas> <canvas tabindex="2" id="paperscriptCanvas2" class="canvas" width="{canvasWidth}" height="{canvasHeight}"></canvas> <canvas tabindex="3" id="gridCanvas" class="canvas" width="{canvasWidth}" height="{canvasHeight}"></canvas> <canvas tabindex="4" id="errorCanvas" class="canvas" width="{canvasWidth}" height="{canvasHeight}"></canvas> </div> <script type="text/paperscript" canvas="gridCanvas" class="paperscriptCode3"></script> <script type="text/paperscript" canvas="paperscriptCanvas2" class="paperscriptCode2"></script> <script type="text/paperscript" canvas="paperscriptCanvas" class="paperscriptCode"></script> </div>
<div class="js feedback"> <div class="feedback_questions"> {{#each this}} <div class="js feedback_question-wrapper {{#if active}}is-active{{/if}}"> <p class="js feedback_question" data-audio="{{audio}}">{{question}} <div class="js feedback_buttons"> {{#each buttons}} <div class="feedback_button-wrapper"> <div class="js feedback_button" data-value="{{value}}"> <i class="feedback_button-icon icon-ca-{{icon}}"></i> </div> <div class="feedback_button-text"> {{text}} </div> </div> {{/each}} </div> </div> {{/each}} </div> </div>
{{#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> <script src="/js/main/-plugins.js?v=h9lC-ionm8J1_a72sQ-bAGii_unBJwxOHfH1kH2Bh2M"></script> <script src="/dist/bundle.min.js?v=qMDLzAd39TerPKZwrno9zFBqFKPD8giJ1_aDcCOmXAY"></script> <script src="/dist/site.bundle.js?v=Jfsmo5956kZOuPS-anXxd8WzckSKVQCTI9lectDGKO4"></script> <script src="/dist/junior-platform.bundle.js?v=4MIB6Qhjyyr7i8GlRPZHILPMRSkBYdz_TlavHpplWw4"></script> <div class="js t-quiz ca-content" style="margin-left: 30px;"></div> <script class="js markup-code" type="text/markup"> {{{code}}} </script> <script type="text/javascript"> $(function () { ai.fullMarkup($('.js.markup-code').text(), 1, '.js.t-quiz'); }); </script>
@Html.Raw("~/handlebars-templates/tkinter-window.html")
<!doctype html> <title>{title}</title> <meta name="viewport" content="width=device-width"> <link href="{fonts}" rel="stylesheet"> <link rel="stylesheet" href="/css/app.css"> <section id="gui"></section> <script src="/js/app.js?v=_ATctMZSAnKzj5ikRVtMMHLxDhThHhWxK4qYFl3UBEY"></script> <script> { code } </script>
<!doctype html> <title>{title}</title> <meta name="viewport" content="width=device-width"> <link href="{fonts}" rel="stylesheet"> <style> body { font-family: "Open Sans", sans-serif; color: white; background-color: black; margin: -1px 0 0 -1px; text-align: center; font-size: 14px; } 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> <!--<br>Share this app: <a class="social-share" href="http://facebook.com/CodeAvengers"><img src="{protocol}//{domain}/image/facebook.png"></a> <a class="social-share" href="http://twitter.com/CodeAvengers"><img src="{protocol}//{domain}/image/twitter.png"></a> <a class="social-share" href="https://plus.google.com/105827980034533177298"><img src="{protocol}//{domain}/image/google.png"></a> --> <table onclick="this.style.display='none';displayApp()"> <tr> <td> <h2>Instructions</h2> <p>{instructions} <p> <b>Click to start</b> </table> <script> function displayApp() { var previewFrame = document.getElementById('myApp'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(document.querySelector('#code textarea').value); preview.close(); } </script> <div id="code"> {content} </div>
<!doctype html> <title>{title}</title> <meta name="viewport" content="width=device-width"> <link href="{fonts}" rel="stylesheet"> <style> body { font-family: "Open Sans", sans-serif; color: white; background-color: black; margin: -1px 0 0 -1px; text-align: center; font-size: 14px; } 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; } .fullscreen footer, .fullscreen header { display: none; } .fullscreen table { top: 170px; } </style> <script src="{protocol}//{domain}/js/paper.min.js"></script> <script type="text/paperscript" canvas="paperscriptCanvas"> view.pause(); {code} </script> <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> <!--tabindex is needed to give the canvas the focus--> <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> <!-- <br>Share this app: <a class="social-share" href="http://facebook.com/CodeAvengers"><img src="{protocol}//{domain}/image/facebook.png"></a> <a class="social-share" href="http://twitter.com/CodeAvengers"><img src="{protocol}//{domain}/image/twitter.png"></a> <a class="social-share" href="https://plus.google.com/105827980034533177298"><img src="{protocol}//{domain}/image/google.png"></a> --> <table onclick="this.style.display='none';window.paper.view.play(); paperscriptCanvas.focus()"> <tr> <td> <h2>Instructions</h2> <p>{instructions} <p> <b>Click to start</b> </table> <script> if (location.search.indexOf('fullscreen') > 0) { document.body.className = 'fullscreen'; } </script>
<title>Code Avengers Profile</title> <meta name="viewport" content="width=device-width"> <meta name="description" content="Learn essential computer skills with Code Avengers"> <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 href="http://gas2.org/2010/10/21/meet-the-contenders-for-the-1000-pound-car/" target="_blank" title="My Car"> <img src="/images/car.jpg" width="100"> </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! </section><footer>Created by Mike ©2015</footer>