{{ var sprite_1by1 = 'https://dmn92m25mtw4z.cloudfront.net/img_set/sprite/v1/sprite-1w.png'; }} {{ var sprite_4by3 = 'https://dmn92m25mtw4z.cloudfront.net/img_set/sprite-4by3/v1/sprite-4by3-4w.png'; }} {{ var sprite_16by9 = 'https://dmn92m25mtw4z.cloudfront.net/img_set/sprite-16by9/v1/sprite-16by9-16w.png'; }} {{ var spritesheet = '/img/uploads/freemium-core-sprites.svg'; }} {{? it.markup }} {{= it.markup }} {{?? it.page_controls__left }} {{# def.page_controls__left }} {{?? it.page_controls__right }} {{# def.page_controls__right }} {{?? it.page_markup }} {{# def.page_markup }} {{?? it.preview__topic }} {{# def.preview__topic }} {{?? it.preview__topic__body }} {{# def.preview__topic__body }} {{?? it.preview__topic__bullets }} {{# def.preview__topic__bullets }} {{?? it.tooltip__sidebar }} {{# def.tooltip__sidebar }} {{?? it.upsell__dashboard }} {{# def.upsell__dashboard }} {{?? it.widget__last }} {{# def.widget__last }} {{?? it.widget__last__new }} {{# def.widget__last__new }} {{?? it.widget__practice }} {{# def.widget__practice }} {{?? it.widget__practice__new }} {{# def.widget__practice__new }} {{?? it.widget__suggestions }} {{# def.widget__suggestions }} {{?}} /* PUBLIC DEFS */ {{## def.page_controls__left: {{ var self = it.page_controls__left; }} {{= self.label }} {{# def.icon :'svg-caret-down' }} #}} {{## def.page_controls__right: {{ var self = it.page_controls__right; }} {{? self.my_courses.length > 1 }} {{= self.label }} {{# def.icon :'svg-caret-down' }} {{?}} #}} {{## def.page_markup: {{ var self = it.page_markup; }} {{ var add_classes = self.is_registered ? 'is-registered': 'is-guest show-hints'; }} {{ var inline_course_color = 'style="background-color:' + self.course_color + '"'; }} {{ var is_small = !self.is_registered ? 'is-small' : ''; }}
{{= self.page_header }} {{? self.new_test }} {{= self.new_test }} {{?}} {{# def.upgrade_pitch }}
{{? self.is_student }} {{? self.is_registered }} {{# def.course__dashboard }} {{??}} {{# def.course__intro }} {{?}} {{?}} {{? self.is_parent && self.is_subscribed }} {{= self.action_bar }} {{?}}
{{# def.signup_pitch }}
{{# def.course__chapters }} {{# def.course__sidebar }}
{{? !self.is_registered }} {{= self.course_wall }} {{?}} {{= self.signup_footer }} {{= self.page_share || '' }} {{= self.page_footer }}
#}} {{## def.preview__topic: {{ var self = it.preview__topic; }} {{ var sprite_id = 'svg-topic-component-' + self.component_id; }}
{{# def.icon :sprite_id }}
{{= self.title }}
    #}} {{## def.preview__topic__body: {{ var self = self || it.preview__topic__body; }} {{ var item = self.active_item; }} {{? item.poster }} {{??}} {{# def.preview__image__placeholder }} {{?}} {{? item.primary_str || item.secondary_str }}
    {{? item.lesson_num }} {{= item.lesson_num }} {{?}}
    {{= item.primary_str || '' }}
    {{? item.secondary_str }}
    {{= item.secondary_str }}
    {{?}}
    {{?}} {{? item.cta_str }}
    {{= item.cta_str || '' }}
    {{?}} #}} {{## def.preview__image__placeholder: {{= self.missing_preview_string }} {{= item.question_key || '' }} #}} {{## def.preview__topic__bullets: {{ var self = it.preview__topic__bullets; }}
      {{~ self.items :item:index }} {{ var is_active = index === self.active_index ? 'is-active' : ''; }}
    1. {{~}}
    #}} {{## def.tooltip__sidebar:
    {{= it.tooltip__sidebar.str }}
    #}} {{## def.upsell__dashboard: {{ var self = it.upsell__dashboard; }}

    {{= self.body_msg }}

    {{= self.signup_label }}
    #}} {{## def.widget__last: {{ var self = it.widget__last; }}
    {{? self.topic_name }} {{ var count = 0; }} {{? self.progress.intro }} {{ count++ }} {{?}} {{? self.progress.examples }} {{ count++ }} {{?}} {{? self.progress.practice }} {{ count++ }} {{?}} {{?? self.get_started }} /* none, provide user direction */

    {{= self.get_started }}

    {{?}}
    #}} {{## def.widget__last__new: {{ var self = it.widget__last__new; }} {{ var delay = 1; }} {{ var duration = 1; }} {{ var increment = 0.5; }}
    {{? self.topic_name }}
    {{= self.topic_name }}
    {{?}} {{? self.get_started }} {{?}}
    #}} {{## def.widget__last__progress :component_id: {{ var fill_width = 0; }} {{ var inline_style = 'style="animation-delay:' + (delay + duration) + 's"'; }} {{ var mask_id = 'progress-bar-mask-' + component_id; }} {{ var progress = self.progress[component_id]; }} {{ var sprite_id = 'svg-topic-component-' + component_id; }} {{ var tooltip_str = ''; }} {{ var topic_url = self.topic_urls[component_id]; }} {{? component_id === 'practice' }} {{ tooltip_str = self.strings.tooltip.practice; }} {{??}} {{ tooltip_str = self.strings.tooltip.watch; }} {{?}} {{? progress }} {{? component_id === 'practice' && progress.score !== undefined }} {{? progress.score }} {{ fill_width = Math.ceil(progress.score/100*250); }} {{ tooltip_str = self.strings.tooltip.practice_continue; }} {{?}} {{?? progress.total }} {{? progress.watched }} {{ fill_width = Math.ceil(progress.watched/progress.total*250); }} {{ tooltip_str = self.strings.tooltip.watch_continue; }} {{?}} {{??}} /* No prorgress data */ {{ fill_width = 250; }} {{?}}
  1. {{? !self.get_started }} {{# def.icon :sprite_id }} {{??}} {{# def.icon :sprite_id }} {{?}} {{? fill_width }} {{??}} {{?}} {{? !self.get_started }}
    {{? component_id === 'practice' }} {{= (progress.score || 0) + '%' }} {{??}} {{= (progress.watched || 0) + '/' + (progress.total || 0) }} {{?}}
    {{?}}
    2. {{ delay += increment; }} {{?}} #}} {{## def.widget__practice: {{ var self = it.widget__practice; }} {{ var settings = self.settings; }} {{ var tooltip_width = settings.tooltip[0]; }} {{ var tooltip_height = settings.tooltip[1]; }} {{ var xMax = settings.graph[0]; }} {{ var yMax = settings.graph[1]; }} {{ var xOffset = xMax / ((self.xAxis.labels.length - 1) || 1); }} {{ var yOffset = yMax / ((self.yAxis.labels.length - 1) || 1); }} {{ var attr = ''; }} {{ var d1 = ''; }} {{ var d2 = ''; }} {{ var x1 = 0; }} {{ var y1 = 0; }} {{ y1 = 0; }} {{~ self.xAxis.labels :label:index }} {{ x1 = index * xOffset; }} {{ d1 = 'M' + x1 + ' ' + y1 + 'v' + yMax; }} {{ attr = !index ? 'var(--x-major-color, #333)' : 'var(--x-minor-color, #ccc)'; }} {{? label }} {{= label }} {{?}} {{~}} {{ x1 = 0; }} {{~ self.yAxis.labels :label:index }} {{ y1 = yMax - (index * yOffset); }} {{ d1 = 'M' + x1 + ' ' + y1 + 'h' + xMax; }} {{ attr = !index ? 'var(--y-major-color, #333)' : 'var(--y-minor-color, #ccc)'; }} {{? !index }} {{??}} {{?}} {{? label }} {{= label }} {{?}} {{~}} {{ attr = 'var(--pt-color, #05a7cf)'; }} {{? self.dataset.length }} {{~ self.dataset :pt:index }} {{ var percent = Math.round(pt.correct/pt.attempted*100); }} {{ var cx = xOffset * index; }} {{ var cy = (100-percent)/100*yMax; }} {{ var ty = cy - tooltip_height * 1.25; }} {{= pt.correct + '/' + pt.attempted }} {{? !index }} {{ d2 = 'M' + cx + ' ' + cy; }} {{??}} {{ d2 += 'L' + cx + ' ' + cy; }} {{?}} {{~}} {{?}} #}} {{## def.widget__practice__new: {{ var self = it.widget__practice__new; }} {{ var settings = self.settings; }} {{ var tooltip_width = settings.tooltip[0]; }} {{ var tooltip_height = settings.tooltip[1]; }} {{ var xMax = settings.graph[0]; }} {{ var yMax = settings.graph[1]; }} {{ var xOffset = xMax / ((self.xAxis.labels.length - 1) || 1); }} {{ var yOffset = yMax / ((self.yAxis.labels.length - 1) || 1); }} {{ var attr = ''; }} {{ var d1 = ''; }} {{ var d2 = ''; }} {{ var d3 = ''; }} {{ var x1 = 0; }} {{ var y1 = 0; }} {{ var delay = 0; }} {{ var duration = 1; }} {{ var increment = 1; }} /* Generate full d2 path */ {{? self.dataset.length }} {{ var cx, cy, percent; }} {{~ self.dataset :pt:index }} {{ percent = Math.round(pt.correct/pt.attempted*100); }} {{ cx = xOffset * index; }} {{ cy = (100-percent)/100*yMax; }} {{? !index }} {{ d2 = 'M' + cx + ' ' + cy; }} {{??}} {{ d2 += 'L' + cx + ' ' + cy; }} {{?}} {{~}} {{ d3 = d2; }} {{? cy !== yMax }} {{ d3 += 'L' + cx + ' ' + yMax; }} {{?}} {{ d3 += 'L' + 0 + ' ' + yMax + ' Z'; }} {{?}} {{ y1 = 0; }} {{~ self.xAxis.labels :label:index }} {{ x1 = index * xOffset; }} {{ d1 = 'M' + x1 + ' ' + y1 + 'v' + yMax; }} {{ attr = !index ? 'var(--x-major-color, #333)' : 'var(--x-minor-color, #ccc)'; }} {{? !index }} {{?}} {{? label }} {{? self.demo_mode }} {{= label }} {{??}} {{= label }} {{?}} {{?}} {{~}} {{ x1 = 0; }} {{~ self.yAxis.labels :label:index }} {{ y1 = yMax - (index * yOffset); }} {{ d1 = 'M' + x1 + ' ' + y1 + 'h' + xMax; }} {{ attr = !index ? 'var(--y-major-color, #333)' : 'var(--y-minor-color, #ccc)'; }} {{? !index }} {{??}} {{?}} {{? label }} {{= label }} {{?}} {{~}} {{ attr = 'var(--pt-color, #05a7cf)'; }} {{? self.demo_mode }} {{= self.strings.start_practicing_2_1 }} {{= self.strings.start_practicing_2_2 }} {{??}} {{?}} {{? self.dataset.length }} {{~ self.dataset :pt:index }} {{ var percent = Math.round(pt.correct/pt.attempted*100); }} {{ var cx = xOffset * index; }} {{ var cy = (100-percent)/100*yMax; }} {{ var ty = cy - tooltip_height * 1.25; }} {{? self.demo_mode }} {{ delay++; }} {{??}} {{?}} {{? ty < -30 }} {{ ty = cy + 12; }} {{?}} {{= pt.correct + '/' + pt.attempted }} {{~}} {{?}}
    {{? self.last_practiced && self.last_practiced.topic_name }} {{ var topic_name = self.katexify(self.last_practiced); }} {{ var topic_url = self.getTopicURL(self.last_practiced); }}
    {{= topic_name }}
    {{# def.icon :'svg-topic-component-practice' }} {{??}}
    {{= self.strings.start_practicing }}
    {{# def.icon :'svg-icon-arrowhead-down' }} {{?}}
    #}} {{## def.widget__suggestions: {{ var self = it.widget__suggestions; }} {{ var is_completed; }} {{ var task; }} {{ var task_description; }}
      {{~ self.course_suggestions.task_ids :task_id:index }} {{ task = self.course_suggestions.tasks[task_id]; }} {{? task_id.includes('sg_') }} {{ is_completed = self.course_suggestions.tasks[task_id]; }} {{ task_description = self.task_descriptions[task_id]; }} {{??}} {{ is_completed = task.is_completed; }} {{ task_description = self.getString(task); }} {{?}}
    1. {{? is_completed }} {{# def.icon :"svg-icon-checkbox-checked" }} {{??}} {{# def.icon :"svg-icon-checkbox" }} {{?}} {{= task_description || '' }} {{? task.subtask_ids && task.subtask_ids.length && !task.is_completed }} /* NOTE: Hide subtasks if the task is completed */
        {{~ task.subtask_ids :subtask_id }} {{ var subtask = task.subtasks[subtask_id]; }} {{ is_completed = subtask.is_completed; }} {{ task_description = self.getString(subtask); }}
      1. {{? is_completed }} {{# def.icon :"svg-icon-checkbox-checked" }} {{??}} {{# def.icon :"svg-icon-checkbox" }} {{?}} {{= task_description || '' }}
        2. {{~}}
      {{?}}
      2. {{~}}
    #}} /* PRIVATE DEFS */ {{## def.course__chapters:
    {{? !self.is_registered }} {{# def.course__dashboard }} {{?}}
      {{~ self.course.chapter_ids :chapter_id:index }} {{ var chapter = self.course.chapters[chapter_id]; }} {{ var chapter_num = index + 1; }} {{ var tooltip_id = 'course-tip-chapter'; }}
    1. {{= chapter_num }} {{= self.katexify(chapter.name) }} {{? !index }} {{= self.getHelpHintMarkup(tooltip_id) }} {{?}}
        {{~ chapter.topic_ids :topic_id:topic_index }} {{ var topic = chapter.topics[topic_id]; }} {{ var topic_key = topic.topic_key; }} {{ var topic_num = topic_index + 1; }} {{? !self.is_canon }} {{ var topic_progress = self.topicProgress(chapter_id, topic_id); }} {{ var score, offset, inline_styles; }} {{?}}
      1. {{= chapter_num + '.' + topic_num }} {{= self.katexify(topic.name) }}
        • {{? !self.is_canon && topic.num_intro_vids }} {{ score = topic_progress.intro.score ; }} {{ offset = 106.76 - (106.76 * (score/100)); }} {{ inline_styles = 'style="--stroke-dashoffset:' + offset + '"'; }} {{ sprite_id = 'svg-topic-progress-ring'; }} {{# def.icon :sprite_id }} {{?}} {{? topic.num_intro_vids }} {{# def.icon :'svg-topic-component-intro' }} {{?}}
        • {{? !self.is_canon && topic.has_vids }} {{ score = topic_progress.examples.score ; }} {{ offset = 106.76 - (106.76 * (score/100)); }} {{ inline_styles = 'style="--stroke-dashoffset:' + offset + '"'; }} {{ sprite_id = 'svg-topic-progress-ring'; }} {{# def.icon :sprite_id }} {{?}} {{? topic.has_vids }} {{# def.icon :'svg-topic-component-examples' }} {{?}}
        • {{? !self.is_canon && topic.has_practice }} /* IMPORTANT! */ /* The score must be reset since a topic can have more than one component. */ /* Otherwise, the previous score can bleed into practice. */ {{ score = 0; }} /* Need to determine the practice type to properly set the score */ {{? topic.num_qb }} {{ var corr = 0; }} {{ var total = topic.num_qb; }} {{ var question_keys = Object.keys(topic.questions); }} {{~ question_keys :question_key }} {{ var question = topic.questions[question_key]; }} {{? question && question.application === 'qb' && question.was_correct }} {{ corr++; }} {{?}} {{~}} {{ score = Math.round(corr/total*100); }} {{?? topic.num_qe && topic.qe_score }} /* {{ score = topic_progress.practice.qe_score; }} */ {{ score = topic.qe_score; }} {{?}} {{ offset = 106.76 - (106.76 * (score/100)); }} {{ inline_styles = 'style="--stroke-dashoffset:' + offset + '"'; }} {{ sprite_id = 'svg-topic-progress-ring'; }} {{# def.icon :sprite_id }} {{?}} {{? topic.has_practice }} {{# def.icon :'svg-topic-component-practice' }} {{?}}
        2. {{~}}
      2. {{~}}
    {{? self.premium_pitch }} {{= self.premium_pitch }} {{?}}
    #}} {{## def.course__dashboard: {{? !self.is_canon }}
    {{~ self.widget_ids :widget_id }} {{ var widget = self.widgets[widget_id]; }}
    {{= widget.title }}
    {{= self.getHelpHintMarkup(widget.tooltip_id) }}
    {{? self.is_registered }}
    {{??}} {{= self.widgets_upsell }} {{?}}
    {{~}}
    {{?}} #}} {{## def.course__desc: {{? self.course_desc }} {{ var section_id = 'course-desc'; }} {{ var tooltip_id = 'course-tip-desc'; }}
    {{# def.course__sidebar__ribbon :section_id }}
    {{= self.katexify(self.course_desc) }}
    {{?}} #}} {{## def.course__faqs: {{ var items = self.course.faqs || []; }} {{ var section_id = 'course-faqs'; }} {{ var tooltip_id = 'course-tip-faqs'; }} {{? items.length }}
    {{# def.course__sidebar__ribbon :section_id }}
    {{?}} #}} {{## def.course__intro: {{ var inline_styles = 'style="color:' + self.course_contrast_color + ';"'; }}

    {{= self.course_title }}

    {{? self.course_intro }}
    {{= self.course_intro }}
    {{??}}
    {{= self.course_intro }}
    {{?}}
    #}} {{## def.course__reviews: {{ var items = self.course.reviews || []; }} {{ var section_id = 'course-reviews'; }} {{ var stars = new Array(5); }} {{ var tooltip_id = 'course-tip-reviews'; }} {{? items.length }}
    {{# def.course__sidebar__ribbon :section_id }}

    {{= self.course_rating }}

    {{?}} #}} {{## def.course__sidebar: {{ var str1 = self.strings.tooltip.collapse; }} {{ var str2 = self.strings.tooltip.expand; }}
    {{# def.course__desc }} {{# def.course__faqs }} {{# def.course__reviews }} {{# def.course__testimonials }}
    #}} {{## def.course__sidebar__icon :section_id: {{ var sprite_id = self.sprite_ids[section_id]; }} {{ var str = self.strings.sidebar_labels[section_id]; }} {{# def.icon :sprite_id }} #}} {{## def.course__sidebar__ribbon :section_id: {{ var sprite_id = self.sprite_ids[section_id]; }}
    {{# def.icon :sprite_id }} {{# def.icon :'svg-topic-ribbon-end' }} {{= self.getHelpHintMarkup(tooltip_id) }}
    {{= self.strings.sidebar_labels[section_id] }}
    #}} {{## def.course__testimonials: {{ var section_id = 'course-testimonials'; }} {{ var tooltip_id = 'course-tip-testimonials'; }}
    {{# def.course__sidebar__ribbon :section_id }} {{= self.testimonials }}
    #}} {{## def.icon :sprite_id: {{ var url = spritesheet + '#' + sprite_id; }} #}} {{## def.signup_pitch: {{? !self.is_registered }} {{ var inline_styles = 'style="background-color:' + self.course_color + ';color:' + self.course_contrast_color + ';"'; }}
    {{~ self.sell_points :pt }} {{~}}

    {{= pt.heading }}

    {{= pt.desc }}
    {{~ self.product_shots :img }} {{ var sizes = '(max-width: 767px) 380px, 100vw'; }} {{ var srcset = ''; }} {{~ img.sizes :image:index }} {{ srcset += (index ? ', ' : '') + image.filename + ' ' + image.width + 'w'; }} {{~}} {{~}}
    {{= img.alt_text }}
    {{?}} #}} {{## def.upgrade_pitch: {{? self.is_registered && !self.is_subscribed && false }} /* disabled pitch bar */ {{ var inline_styles = 'style="background-color:' + self.course_color + ';color:' + self.course_contrast_color + ';"'; }}

    {{= self.upgrade.title }}

    {{= self.upgrade.subtitle }}

    {{~ self.upgrade.points :pt }} {{~}}

    {{= pt.heading }}

    {{= pt.desc }}
    {{? self.is_canon }} {{ inline_styles = 'style="padding-bottom:15px"'; }} {{??}} {{ inline_styles = ''; }} {{?}}
    {{= self.upgrade.cta }}
    {{?}} #}}