<!-- Q & A -->
<div class="js-anim js-questions questions">
<div class="fs-row">
<div class="fs-cell">
<div class="questions_inner">
<div class="questions_header">
<h2 class="questions_title">Important Questions and Answers</h2>
</div>
<div class="questions_body">
<div class="js-questions-category questions_category" id="questions_category_1">
<ul class="questions_list" aria-label="General">
<li class="js-question-item questions_item">
<div class="questions_item_inner">
<a class="js-swap js-questions-item-link questions_item_link" href="#questions_answer_1_1" data-swap-target="#questions_answer_1_1" data-swap-linked="questions_item_1_1" data-swap-group="questions">
<p class="questions_item_label">How flexible is this program? How can I work and study at the same time?</p>
<div class="questions_item_icon">
<svg class="icon icon_plus_stroke">
<use href="/images/icons.svg#plus_stroke" />
</svg>
</div>
</a>
</div>
</li>
<li class="js-question-item questions_item">
<div class="questions_item_inner">
<a class="js-swap js-questions-item-link questions_item_link" href="#questions_answer_1_2" data-swap-target="#questions_answer_1_2" data-swap-linked="questions_item_1_2" data-swap-group="questions">
<p class="questions_item_label">With all the challenges facing educators today, why should I consider becoming a teacher?</p>
<div class="questions_item_icon">
<svg class="icon icon_plus_stroke">
<use href="/images/icons.svg#plus_stroke" />
</svg>
</div>
</a>
</div>
</li>
<li class="js-question-item questions_item">
<div class="questions_item_inner">
<a class="js-swap js-questions-item-link questions_item_link" href="#questions_answer_1_3" data-swap-target="#questions_answer_1_3" data-swap-linked="questions_item_1_3" data-swap-group="questions">
<p class="questions_item_label">How does all the research you're doing apply to the program I'm interested in?</p>
<div class="questions_item_icon">
<svg class="icon icon_plus_stroke">
<use href="/images/icons.svg#plus_stroke" />
</svg>
</div>
</a>
</div>
</li>
<li class="js-question-item questions_item">
<div class="questions_item_inner">
<a class="js-swap js-questions-item-link questions_item_link" href="#questions_answer_1_4" data-swap-target="#questions_answer_1_4" data-swap-linked="questions_item_1_4" data-swap-group="questions">
<p class="questions_item_label">What if I have specific questions about the program I'm interested in?</p>
<div class="questions_item_icon">
<svg class="icon icon_plus_stroke">
<use href="/images/icons.svg#plus_stroke" />
</svg>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="js-questions-answers questions_answers">
<div class="questions_answers_category" id="questions_answers_category_1">
<div class="js-questions-answer questions_answer questions_answer_1_1" id="questions_answer_1_1" aria-label="How flexible is this program? How can I work and study at the same time?" tabindex="-1">
<div class="questions_answer_inner">
<div class="fs-row">
<div class="fs-cell">
<div class="js-questions-answer-canvas questions_answer_canvas">
<h3 class="questions_answer_title" tabindex="-1">How flexible is this program? How can I work and study at the same time?</h3>
<div class="questions_answer_detail">
<div class="questions_answer_detail_media">
<figure class="questions_answer_detail_figure">
<img class="questions_answer_detail_image" srcset="https://images.fastspot.com/jhusoe/1220x814/ 1220w, https://images.fastspot.com/jhusoe/980x654/ 980w, https://images.fastspot.com/jhusoe/740x494/ 740w, https://images.fastspot.com/jhusoe/500x334/ 500w, https://images.fastspot.com/jhusoe/300x200/ 300w" sizes="(min-width: 1394px) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/" alt="1" loading="lazy" width="300" height="200">
</figure>
</div>
<div class="questions_answer_detail_body">
<h4 class="questions_answer_detail_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<div class="questions_answer_detail_description">
<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor.</p>
</div>
<div class="questions_answer_detail_link_item">
<a class="questions_answer_detail_link" href="#">
<span class="questions_answer_detail_link_label">More About This</span>
</a>
</div>
</div>
</div>
<button class="js-swap js-questions-answer-close questions_answer_close" aria-label="Close" data-swap-target="#questions_answer_1" data-swap-linked="questions_item_1" data-swap-group="questions">
<span class="questions_answer_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="js-questions-answer questions_answer questions_answer_1_2" id="questions_answer_1_2" aria-label="With all the challenges facing educators today, why should I consider becoming a teacher?" tabindex="-1">
<div class="questions_answer_inner">
<div class="fs-row">
<div class="fs-cell">
<div class="js-questions-answer-canvas questions_answer_canvas">
<h3 class="questions_answer_title" tabindex="-1">With all the challenges facing educators today, why should I consider becoming a teacher?</h3>
<div class="questions_answer_video_wrapper">
<img class="questions_answer_video_image" srcset="https://images.fastspot.com/jhusoe/1440x810/1 1440w, https://images.fastspot.com/jhusoe/1220x686/1 1220w, https://images.fastspot.com/jhusoe/980x552/1 980w, https://images.fastspot.com/jhusoe/740x416/1 740w, https://images.fastspot.com/jhusoe/500x282/1 500w, https://images.fastspot.com/jhusoe/300x169/1 300w" sizes="(min-width: 1394px) 1038px, (min-width: 1220px) 890px, (min-width: 980px) 720px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x169/1" alt="" loading="lazy" width="300" height="169">
<div class="questions_answer_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Video Title","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Video Title">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<button class="js-swap js-questions-answer-close questions_answer_close" aria-label="Close" data-swap-target="#questions_answer_2" data-swap-linked="questions_item_2" data-swap-group="questions">
<span class="questions_answer_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="js-questions-answer questions_answer questions_answer_1_3" id="questions_answer_1_3" aria-label="How does all the research you're doing apply to the program I'm interested in?" tabindex="-1">
<div class="questions_answer_inner">
<div class="fs-row">
<div class="fs-cell">
<div class="js-questions-answer-canvas questions_answer_canvas">
<h3 class="questions_answer_title" tabindex="-1">How does all the research you're doing apply to the program I'm interested in?</h3>
<div class="questions_answer_video_wrapper">
<img class="questions_answer_video_image" srcset="https://images.fastspot.com/jhusoe/1440x810/11 1440w, https://images.fastspot.com/jhusoe/1220x686/11 1220w, https://images.fastspot.com/jhusoe/980x552/11 980w, https://images.fastspot.com/jhusoe/740x416/11 740w, https://images.fastspot.com/jhusoe/500x282/11 500w, https://images.fastspot.com/jhusoe/300x169/11 300w" sizes="(min-width: 1394px) 1038px, (min-width: 1220px) 890px, (min-width: 980px) 720px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x169/11" alt="" loading="lazy" width="300" height="169">
<div class="questions_answer_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Video Title","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Video Title">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<button class="js-swap js-questions-answer-close questions_answer_close" aria-label="Close" data-swap-target="#questions_answer_3" data-swap-linked="questions_item_3" data-swap-group="questions">
<span class="questions_answer_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="js-questions-answer questions_answer questions_answer_1_4" id="questions_answer_1_4" aria-label="What if I have specific questions about the program I'm interested in?" tabindex="-1">
<div class="questions_answer_inner">
<div class="fs-row">
<div class="fs-cell">
<div class="js-questions-answer-canvas questions_answer_canvas">
<h3 class="questions_answer_title" tabindex="-1">What if I have specific questions about the program I'm interested in?</h3>
<div class="questions_answer_detail">
<div class="questions_answer_detail_media">
<figure class="questions_answer_detail_figure">
<img class="questions_answer_detail_image" srcset="https://images.fastspot.com/jhusoe/1220x814/2 1220w, https://images.fastspot.com/jhusoe/980x654/2 980w, https://images.fastspot.com/jhusoe/740x494/2 740w, https://images.fastspot.com/jhusoe/500x334/2 500w, https://images.fastspot.com/jhusoe/300x200/2 300w" sizes="(min-width: 1394px) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
<div class="questions_answer_detail_body">
<h4 class="questions_answer_detail_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<div class="questions_answer_detail_description">
<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor.</p>
</div>
<div class="questions_answer_detail_link_item">
<a class="questions_answer_detail_link" href="#">
<span class="questions_answer_detail_link_label">More About This</span>
</a>
</div>
</div>
</div>
<button class="js-swap js-questions-answer-close questions_answer_close" aria-label="Close" data-swap-target="#questions_answer_4" data-swap-linked="questions_item_4" data-swap-group="questions">
<span class="questions_answer_close_icon">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Q & A -->
{#
{% include '@component-questions' with {
title: 'Title',
categories: [
{
label: 'Category Label',
items: [
{
question: 'Item Question',
answer_video: '',
answer_image: {
alt: '1',
src: ''
},
answer_title: 'Item Answer Title',
answer_description: 'Item Answer Description',
answer_link: {
label: 'Item Answer Link Label',
url: '#'
}
}
]
}
]
} %}
#}
<!-- Q & A -->
<div class="js-anim js-questions questions">
<div class="fs-row">
<div class="fs-cell">
<div class="questions_inner">
<div class="questions_header">
<h2 class="questions_title">{{ title }}</h2>
</div>
<div class="questions_body">
{% for category in categories %}
{% set category_count = loop.index %}
<div class="js-questions-category questions_category" id="questions_category_{{ loop.index }}">
<ul class="questions_list" aria-label="{{ category.label }}">
{% for item in category.items %}
<li class="js-question-item questions_item">
<div class="questions_item_inner">
<a class="js-swap js-questions-item-link questions_item_link" href="#questions_answer_{{ category_count }}_{{ loop.index }}" data-swap-target="#questions_answer_{{ category_count }}_{{ loop.index }}" data-swap-linked="questions_item_{{ category_count }}_{{ loop.index }}" data-swap-group="questions">
<p class="questions_item_label">{{ item.question }}</p>
<div class="questions_item_icon">{{ icon("plus_stroke") }}</div>
</a>
</div>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="js-questions-answers questions_answers">
{% for category in categories %}
{% set category_count = loop.index %}
<div class="questions_answers_category" id="questions_answers_category_{{ category_count }}">
{% for item in category.items %}
<div class="js-questions-answer questions_answer questions_answer_{{ category_count }}_{{ loop.index }}" id="questions_answer_{{ category_count }}_{{ loop.index }}" aria-label="{{ item.question }}" tabindex="-1">
<div class="questions_answer_inner">
<div class="fs-row">
<div class="fs-cell">
<div class="js-questions-answer-canvas questions_answer_canvas">
<h3 class="questions_answer_title" tabindex="-1">{{ item.question }}</h3>
{% if item.answer_video %}
<div class="questions_answer_video_wrapper">
{% include '@partial-image' with {
class: 'questions_answer_video',
alt: item.answer_image.alt,
image: item.answer_image.src,
loading: 'lazy',
sources: [
img.wide.xlrg,
img.wide.lrg,
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
],
sizes: [
'(min-width: 1394px) 1038px',
'(min-width: 1220px) 890px',
'(min-width: 980px) 720px',
'(min-width: 740px) 640px',
'90vw'
]
} %}
{% include "@partial-lazy-video" with {
class: 'questions_answer',
id: item.answer_video.id,
type: 'youtube',
title: 'Video Title',
display: "inline",
autoplay: false,
playerVars: {}
} %}
</div>
{% else %}
<div class="questions_answer_detail">
<div class="questions_answer_detail_media">
<figure class="questions_answer_detail_figure">
{% include '@partial-image' with {
class: 'questions_answer_detail',
alt: item.answer_image.alt,
image: item.answer_image.src,
loading: 'lazy',
sources: [
img.classic.lrg,
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
'(min-width: 1394px) 648px',
'(min-width: 1220px) 568px',
'(min-width: 980px) 454px',
'(min-width: 740px) 640px',
'90vw'
]
} %}
</figure>
</div>
<div class="questions_answer_detail_body">
{% if item.answer_title %}
<h4 class="questions_answer_detail_title">{{ item.answer_title }}</h4>
{% endif %}
{% if item.answer_description %}
<div class="questions_answer_detail_description">
<p>{{ item.answer_description }}</p>
</div>
{% endif %}
{% if item.answer_link %}
<div class="questions_answer_detail_link_item">
<a class="questions_answer_detail_link" href="{{ item.answer_link.url }}">
<span class="questions_answer_detail_link_label">{{ item.answer_link.label }}</span>
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
<button class="js-swap js-questions-answer-close questions_answer_close" aria-label="Close" data-swap-target="#questions_answer_{{ loop.index }}" data-swap-linked="questions_item_{{ loop.index }}" data-swap-group="questions">
<span class="questions_answer_close_icon">{{ icon("close") }}</span>
</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<!-- END: Q & A -->
No notes defined.