<div class="page-wrapper efl-quiz-result-page">
<section class="efl-bundle-quiz-hero-banner" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/bl-quiz-results-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/bl-quiz-results-desk.jpg">
<img src="/assets/example-content/bl-quiz-results-desk.jpg" alt="">
</picture>
<div class="efl-bundle-quiz-hero-banner__overlay">
<div class="efl-bundle-quiz-hero-banner__content" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__content--quizresult">
<div class="efl-bundle-quiz-hero-banner__content--quizresult__progress">
<div class="progress" data-quiz-completed="1" data-quiz-total="3">
<canvas class="progress-circle" width="104px" height="104px"></canvas>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__content--quizresult__title">
<h1>Good effort!</h1>
<p>You correctly answered 1 out of 3 questions.<br> Keep up the good work!</p>
</div>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__close">
<a class="close-quiz-results" aria-label="Close Quiz Results" tabindex="0"></a>
</div>
</div>
</div>
</section>
<div class="efl-page-content">
<div class="efl-page-content__tray">
<section class="efl-bundle-quiz-completion" data-fan-id="4354" data-bundle-id="7867678" data-behavior="efl-bundle-quiz-completion">
<div class="efl-bundle-quiz-completion__wrapper ">
<div class="efl-bundle-quiz-completion__wrapper--img">
<img src="/assets/example-content/bundle-trophy.svg" alt="">
</div>
<div class="efl-bundle-quiz-completion__wrapper--info">
<div class="heading">Nearly there!</div>
<p>Read the final <two> articles in the bundle to earn a trophy.</p>
</div>
</div>
</section>
<section class="efl-bundle-article" data-behavior="efl-bundle-article">
<div class="efl-bundle-article--header">
<h2>Quizzes in this bundle</h2>
</div>
<div class="efl-bundle-article__section">
<a href="#" class="efl-bundle-article__card ">
<div class="efl-bundle-article--img">
<img src="/assets/example-content/bundle-article/article-1.jpg" alt="">
</div>
<div class="efl-bundle-article--info">
<div class="title">article</div>
<div class="description">How to build trust with your players</div>
</div>
</a>
<a href="#" class="efl-bundle-article__card ">
<div class="efl-bundle-article--img">
<img src="/assets/example-content/bundle-article/article-2.jpg" alt="">
</div>
<div class="efl-bundle-article--info">
<div class="title">article</div>
<div class="description">The relationship of trust when working with under-18s</div>
</div>
</a>
<a href="#" class="efl-bundle-article__card efl-bundle-article__card--completed">
<div class="efl-bundle-article--img">
<canvas class="completed-bundle-rive" width="60px" height="60px"></canvas>
<img src="/assets/example-content/bundle-article/article-3.jpg" alt="">
</div>
<div class="efl-bundle-article--info">
<div class="title">article</div>
<div class="description">How to create a great matchday experience</div>
</div>
</a>
</div>
</section>
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="full-width-tag-cloud efl-grey">
<h2 class="efl-heading-2">The Safeguarding Bundle covers</h2>
<div aria-controls="" class="full-width-tag-cloud__inner">
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
Coaching
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
Safeguarding
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
articles
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
Communications and relationships
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
Safeguarding
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
matchday
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
medical
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
resources
</a>
<a class="tag" data-is-new=false aria-selected="false" data-type=course data-color=#004F9F href="#">
disability football
</a>
</div>
</section>
<section class="efl-full-width-carousel efl-full-width-carousel--other-bundles">
<h2>Why not try these other bundles</h2>
<div class="carousel" data-behavior="full-width-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
</ul>
</div>
<div class="full-width-carousel-nav-block">
<div class="full-width-carousel-nav-wrapper">
<div class="full-width-carousel-navigation" data-glide-el="controls">
</div>
</div>
</div>
<button aria-label="Previous" class="full-width-carousel__cta full-width-carousel__prev"><span class="visually-hidden">Previous
page</span>
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.36326 10.0377L1.06884 10.8172L8.70084 19.2327L10.6387 17.6736L3.71231 10.0378L10.6387 2.40189L8.70084 0.842773L1.06884 9.25827L0.36326 10.0377Z" fill="white" />
</svg></button>
<button aria-label="Next" class="full-width-carousel__cta full-width-carousel__next"><span class="visually-hidden">Next
page</span><svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8471 9.41443L9.18146 8.63462L1.98146 0.216612L0.153321 1.7762L6.68762 9.41434L0.15332 17.0525L1.98146 18.6121L9.18146 10.1941L9.8471 9.41443Z" fill="white" />
</svg></button>
</div>
<a href="#" class="view-all-bundles">View All Bundles</a>
</section>
</div>
</div>
</div>
No notes defined.
{
"tagcloud": {
"title": "The Safeguarding Bundle covers",
"tags": [
{
"copy": "Coaching",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "Safeguarding",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "articles",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "Communications and relationships",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "Safeguarding",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "matchday",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "medical",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "resources",
"type": "course",
"isNew": false,
"color": "#004F9F"
},
{
"copy": "disability football",
"type": "course",
"isNew": false,
"color": "#004F9F"
}
],
"rollover": false
}
}
<div class="page-wrapper efl-quiz-result-page">
{{render '@efl-bundle-quiz-hero-banner' hero-completed merge="true"}}
<div class="efl-page-content">
<div class="efl-page-content__tray">
{{render '@efl-bundle-quiz-completion' quiz-completed merge="true"}}
{{render '@efl-bundle-article'}}
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@full-width-tag-cloud--efl-grey' tagcloud merge='true'}}
{{render '@efl-full-width-carousel--other-bundles'}}
</div>
</div>
</div>