<div class="js live-chat_message {{#if responder}}-response{{/if}}" data-id="{{id}}"> <i class="live-chat_message-icon"> {{#if responder}}{{else}}<span class="live-chat_message-icon-letter">{{letter}}</span>{{/if}} </i> <div class="live-chat_message-container"> <p class="live-chat_message-name">{{#if responder}}{{responder}}{{else}}{{name}}{{/if}} {{#if timestamp}}<span class="live-chat_message-timestamp">{{timestamp}}</span>{{/if}} {{#if admin}} {{#if responder}}{{else}} {{#if url}}<p><a href="{{base}}{{codeUrl}}" target="_blank" class="live-chat_message-link">{{url}}</a>{{/if}} {{/if}} {{/if}} <p class="js live-chat_message-text" data-id="{{id}}">{{{message}}} </div> </div> <div class="js live-support_user" data-user="{{id}}" data-name="{{name}}" data-email="{{email}}"> {{name}} {{#if url}}<a href="{{base}}{{url}}" target="_blank" class="js live-support_user-link">{{url}}</a>{{/if}} {{#if teacher}}<span class="live-support_user-pill">Teacher</span>{{/if}} {{#if guest}}<span class="live-support_user-pill">Guest</span>{{/if}} {{#if responded}}{{else}}<i class="live-support_new-indicator"></i>{{/if}} </div> {{#*inline "comment"}} <div class="comments_comment {{#if reply}}-reply{{/if}}"> <div class="comments_comment-profile-pic-wrapper"> <img class="js comments_comment-profile-pic" src="{{image}}"> </div> <div class="comments_comment-content"> <div class="comments_comment-profile-info"> <span class="js comments_comment-profile-name">{{name}}</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">{{text}} <div class="comments_comment-buttons"> {{#if replyCount}}<span class="js comments_comment-replies-count{{-show-count}}">{{replyCount}}</span>{{/if}} <button class="js comments_comment-up-vote"></button> <button class="js comments_comment-reply"></button> </div> </div> </div> {{/inline}} <div class="comments"> <div class="js comments_login"> <h4 class="comments_login-header">Sign in and join the conversation</h4> <button class="comments_login-button" data-popup="login">Log In</button> </div> <div class="js comments_comment-form"> <button class="comments_comment-form-button">Post Comment</button> </div> <div class="js comments_container"> {{#each this}} {{> comment}} <div class="js comments_comment-replies"> {{#each replies}} {{> comment}} {{/each}} </div> {{/each}} </div> </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}} <p class="guiders-preview_description">{{{message}}} {{/if}} {{#if complete}} <div class="guiders-preview_social-buttons"> <a href="{{{twitterUrl}}}" target="_blank" onclick="ai.publish(true);" class="js guiders-preview_social-button -twitter"><i class="guiders-preview_social-icon icon-twitter"></i> {{{twitter}}}</a> <button class="js guiders-preview_social-button -facebook" onclick="ai.share.facebook();ai.publish(true);"><i class="guiders-preview_social-icon icon-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"> <select name="country" class="js- pricing_country"> {{#each locations}} {{#unless alias}}<option value="{{@key}}">{{name}}{{/unless}} {{/each}} </select> {{{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> </div> {{/each}} </div> <button class="pricing_button js-quote-button">{{button}}</button> </div> </div> {{/with}} <div id="quote" class="js quote"> <div class="pricing"> <h3 class="pricing_header">{{{header}}}</h3> <p class="pricing_info">{{{text}}} <div class="js pricing_sections"> {{#each inputs}} <div class="pricing_input-wrapper {{size}}"> <label class="pricing_label">{{placeholder}}</label> <input required type="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{name}}" placeholder="{{placeholder}}" class="js pricing_input" value="{{value}}"> </div> {{/each}} </div> <button class="js-teacher-quote pricing_button">{{{button}}}</button> </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-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-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-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-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-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="certificates-popup js-template"> <p class="js certificates-popup_message">Complete a course to get your first certificate.</p> {{#each this}} {{#each courses}} {{#if certificate}} <div class="js certificates-popup_certificate"> <i class="icon-badge"></i> <span class="certificates-popup_info"> <h2 class="certificates-popup_name">{{#compare level '!=' 'Intro'}}{{{level}}}{{/compare}}</h2> <p class="certificates-popup_date">{{{name}}}</p> </span> <button class="js certificates-popup_button" data-course="{{id}}">View</button> </div> {{/if}} {{/each}} {{/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-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-left-arrow -double"></i><i class="slide_controls-icon icon-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-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-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-right-arrow -double"></i><i class="slide_controls-icon icon-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-close"></button></header> <section class="_conversation"></section> <footer><input class="_input" placeholder="Send a message..."></footer> </div> <script src="/prettify/prettify.js"></script> <script src="/prettify/lang-css.js"></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"></script> <script src="/prettify/lang-css.js"></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 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"></script> <script src="/prettify/lang-css.js"></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> <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 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> {{#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-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-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-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-star course-box_percentage-star"></i> <i class="icon-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i> </div> </div> {{/each}}