<div class="enrol-smooth-transitions-container" data-isstorybook=true data-sessionselector=false data-version="v3" data-finalscreen="false">
<div class="nav-row">
<nav data-visible="true" class="enrol-nav">
<div class="enrol-nav-wrapper">
<div class="banner-section">
<img src="/assets/example-content/my-learning-logo-nav.svg" alt="Background" class="nav-image" />
</div>
<div id="nav1" class="nav-item">
<span class="circle-num">1</span>
<span class="label-text">
Find a Course
</span>
</div>
<div class="progress-bar" id="bar1"></div>
<div id="nav2" class="nav-item">
<span class="circle-num">2</span>
<span class="label-text">
Eligibility Check
</span>
</div>
<div class="progress-bar" id="bar2"></div>
<div id="nav3" class="nav-item">
<span class="circle-num">3</span>
<span class="label-text">
Emergency contact info
</span>
</div>
</div>
</nav>
</div>
<section id="section1" class="enrol-section">
<div class="top-container">
<div class="left-wrapper">
<img src="/assets/example-content/downarrow.svg" class="downarrow-icon" id="closeBtn" />
<div class="content-box">
<h2 class="heading_text">Find a UEFA C course near you</h2>
<p class="sub_heading_text">Enter your postcode or town to see all available courses, ordered from nearest to furthest</p>
<div class="form-controls">
<div class="left-input-wrapper">
<div class="left-input--inner-wrapper">
<input type="text" id="postcodeInput" class="left-input-box" placeholder="Enter postcode or town" autocomplete="off" />
<img src="/assets/example-content/edit-icon.svg" class="edit-icon" alt="edit" />
<img src="/assets/example-content/clearicon.svg" class="clear-icon" alt="clear" />
</div>
<button class="left-search-btn disabled" disabled="true" id="searchBtn">Search</button>
</div>
</div>
</div>
</div>
<div class="right-wrapper" id="rightWrapper">
<div id="holdingScreen" class="holdingScreen ">
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo" />
<div class="right-center-content">Take Your Coaching Further</div>
<div class="right-below-content">
<div id="content1" class="content-item">
<span class="bold-text">Flexible learning</span>
<span class="normal-text">- Online & in-person sessions</span>
</div>
<div id="content2" class="content-item">
<span class="bold-text">Expert Support</span>
<span class="normal-text">- Learn from top Coach Developers</span>
</div>
<div id="content3" class="content-item">
<span class="bold-text">Hands-on Experience</span>
<span class="normal-text">- Apply skills with your team</span>
</div>
</div>
</div>
</div>
<div id="loadingScreen" class="loadingScreen">
<div class="loading-inner">
<canvas class="loading-screen-canvas"></canvas>
<div class="loading"></div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
<label class="searching-text">Searching</label>
</div>
<input type="hidden" id="courseId" value="142" />
<input type="hidden" id="courseType" value="ILT" />
<input type="hidden" id="courseName" value="UEFA C" />
<div id="courseListScreen" class="courseListScreen hidden">
</div>
</div>
</div>
</div>
<!-- Desktop-only button -->
<div id="bottomButtonContainer" class="bottom-button-container desktop-only hidden">
<div class="button-wrapper">
<button class="cohort-button" data-redirect-url="">Apply for this cohort</button>
</div>
</div>
<!-- mobile-only button -->
<div id="mobileCourseActions" class="mobile-course-actions hidden">
<div class="expand-row" id="expandBtn">
<div class="left-label-group">
<img src="/assets/example-content/arrow_forward_ios.svg" class="arrow-forward" />
<span class="left-label">Expand Search</span>
</div>
<div class="right-label-group">
<span class="result-label">Showing <span id="mobileResultCount"></span> results</span>
<span class="result-label-code" id="selectedPostcode"></span>
</div>
</div>
<div class="button-wrapper">
<button class="cohort-button" data-redirect-url="">Apply for this cohort</button>
</div>
</div>
</section>
<section id="section2" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
<div class="prerequisites-inline">
<img src="/assets/example-content/info.svg" class="info-image" />
<div class="Prerequisites">Prerequisites not satisfied</div>
</div>
<h2 class="heading_text">Checking Your qualifications</h2>
<p class="sub_heading_text">We are currently checking that you have the required qualifications, safeguarding certificates, and are able to participate in football, in order to complete a UEFA C course</p>
</div>
<div class="right-content">
<p></p>
<section id="AgeCheck" class="eligibility-section">
<p class="eligiblity-header-title">Age check</p>
<ul class="eligibility-list">
<li id="agecheck_1" class="eligiblity-header-subtext-checked agechecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Checking if you are over 18 years age</span>
<span class="successText">You have passed our age check</span>
<span class="failureText">Sorry you have not passed our restrictions check</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our age terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
<section id="Qualifications" class="eligibility-section">
<p class="eligiblity-header-title">Course pre-requisites</p>
<ul class="eligibility-list">
<li id="qualificationcheck_1" class="eligiblity-header-subtext-checked qualificationchecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">You must be physically fit to participate</span>
<span class="successText">You are physically fit to participate</span>
<span class="failureText">Sorry you are not physically fit to participate</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our qualifications terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
<li id="qualificationcheck_2" class="eligiblity-header-subtext-checked qualificationchecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Introduction into first aid in football</span>
<span class="successText">Introduction into first aid in football</span>
<span class="failureText">Sorry you are not physically fit to participate</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our qualifications terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
<section id="Restrictions" class="eligibility-section">
<p class="eligiblity-header-title">Restrictions</p>
<ul class="eligibility-list">
<li id="restrictionscheck_1" class="eligiblity-header-subtext-checked restrictionschecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Checking if meet all the necessary restrictions</span>
<span class="successText">You have passed our restrictions check</span>
<span class="failureText">Sorry you have not passed our restrictions check</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our restrictions terms and conditions </p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</button>
</div>
</div>
</section>
<section id="section4" class="final-section enrol-section" data-page="sorry">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Sorry</h2>
<p class="sub_heading_text_final_section">You recently didn't meet requirements for this course. Don't worry, you will be able to re-apply <b> 1 hour after your initial application.</b></p>
<a href="" class="submit-returnlearning">Return to course page</a>
</div>
</div>
</section>
<section id="section4-oops" class="final-section enrol-section hidden" data-page="oops">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Oops!</h2>
<p class="sub_heading_text_final_section">There seems to be a problem with our enrolment tool at the moment. Please go back to the course page and try again. If you keep seeing this error, feel free to reach out to <a href=''>customer support</a>.</p>
<a href="" class="submit-returnlearning">Return to course page</a>
</div>
</div>
</section>
</div>
No notes defined.
{
"navigationvisible": true,
"version": "v3",
"bingmapkey": "AuKIeCnpcLc3NMNJwnAQiVgk7_yVBU02azsFGs9iFEtoz83LYUscGBA5Fsvg-4cS",
"sessionselector": false,
"sessionselectorcontents": [
{
"sessiontexts": {
"title": "Start Your Coaching Journey",
"contents": [
{
"id": "1",
"text": "Check your eligibility and book your place on the Introduction to Coaching Football course."
},
{
"id": "2",
"text": "If you’re 14 or over, you can enrol today. We’ll confirm your eligibility, explain any funding options, and help you choose your preferred webinar date."
}
]
}
}
],
"steps": [
{
"id": "nav1",
"number": "1",
"label": "Find a Course",
"barId": "bar1",
"sectionId": "section1",
"leftContent": {
"title": "Find a UEFA C course near you",
"text": "Enter your postcode or town to see all available courses, ordered from nearest to furthest",
"showInput": true
},
"courseselect": true,
"rightcentercontent": "Take Your Coaching Further",
"rightbelowcontent": [
{
"id": "content1",
"boldtext": "Flexible learning",
"normaltext": "- Online & in-person sessions"
},
{
"id": "content2",
"boldtext": "Expert Support",
"normaltext": "- Learn from top Coach Developers"
},
{
"id": "content3",
"boldtext": "Hands-on Experience",
"normaltext": "- Apply skills with your team"
}
],
"nav1RightContent": {
"bgImage": "/assets/example-content/Background-enrolment.png"
}
},
{
"id": "nav2",
"number": "2",
"label": "Eligibility Check",
"barId": "bar2",
"sectionId": "section2",
"leftContent": {
"title": "Checking Your qualifications",
"text": "We are currently checking that you have the required qualifications, safeguarding certificates, and are able to participate in football, in order to complete a UEFA C course",
"ErrorLabel": "Prerequisites not satisfied",
"InfoIcon": "/assets/example-content/info.svg"
},
"rightContent": {
"title": "",
"text": ""
},
"eligiblityheader": [
{
"eligiblityheadertitle": "Age check",
"eligiblityheaderid": "AgeCheck",
"eligiblityheadersubtext": [
{
"id": "agecheck_1",
"group": "agechecks",
"state": "loadingstate",
"text": "Checking if you are over 18 years age",
"successtext": "You have passed our age check",
"failuretext": "Sorry you have not passed our restrictions check",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our age terms and conditions"
}
]
},
{
"eligiblityheadertitle": "Course pre-requisites",
"eligiblityheaderid": "Qualifications",
"eligiblityheadersubtext": [
{
"id": "qualificationcheck_1",
"group": "qualificationchecks",
"state": "loadingstate",
"text": "You must be physically fit to participate",
"successtext": "You are physically fit to participate",
"failuretext": "Sorry you are not physically fit to participate",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our qualifications terms and conditions"
},
{
"id": "qualificationcheck_2",
"group": "qualificationchecks",
"state": "loadingstate",
"text": "Introduction into first aid in football",
"successtext": "Introduction into first aid in football",
"failuretext": "Sorry you are not physically fit to participate",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our qualifications terms and conditions"
}
]
},
{
"eligiblityheadertitle": "Restrictions",
"eligiblityheaderid": "Restrictions",
"eligiblityheadersubtext": [
{
"id": "restrictionscheck_1",
"group": "restrictionschecks",
"state": "loadingstate",
"text": "Checking if meet all the necessary restrictions",
"successtext": "You have passed our restrictions check",
"failuretext": "Sorry you have not passed our restrictions check",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our restrictions terms and conditions "
}
]
}
]
},
{
"id": "nav3",
"number": "3",
"label": "Emergency contact info",
"barId": null,
"pages": {
"congratulations": {
"pageType": "congratulations",
"sectionId": "section4",
"headertext": {
"title": "Congratulations you’ve been accepted on the UEFA C course",
"subtext": "What happens next:",
"subtextsubpoints": [
{
"id": "subtextsubpoints1",
"text": "We’ll redirect you to My Learning"
},
{
"id": "subtextsubpoints2",
"text": "You can begin your learning!"
}
],
"submitbutton": "Return to My Learning",
"submitbuttonlink": ""
}
},
"courseacceptance": {
"pageType": "courseacceptance",
"sectionId": "section4",
"headertext": {
"title": "Congratulations!",
"subtext": "You can now complete your enrolment. To get started:",
"subtextsubpoints": [
{
"id": "subtextsubpoints1",
"text": "select the ‘Continue’ button below"
},
{
"id": "subtextsubpoints2",
"text": "add the learning to your basket"
}
],
"infobox": {
"id": "infobox1",
"image": "/assets/example-content/Alert-info.svg",
"text": "Complete payment within one hour."
},
"submitbutton": "Continue",
"submitbuttonlink": ""
}
},
"oops": {
"pageType": "oops",
"sectionId": "section4",
"headertext": {
"title": "Oops!",
"subtext": "There seems to be a problem with our enrolment tool at the moment. Please go back to the course page and try again. If you keep seeing this error, feel free to reach out to <a href=''>customer support</a>.",
"submitbutton": "Return to course page",
"submitbuttonlink": ""
}
},
"sorry": {
"pageType": "sorry",
"sectionId": "section4",
"headertext": {
"title": "Sorry",
"subtext": "You recently didn't meet requirements for this course. Don't worry, you will be able to re-apply <b> 1 hour after your initial application.</b>",
"submitbutton": "Return to course page",
"submitbuttonlink": ""
}
},
"alreadyeligible": {
"pageType": "alreadyeligible",
"sectionId": "section4",
"headertext": {
"title": "You’re already eligible",
"subtext": "You’ve already been qualified as eligible for this course. You may be seeing this because you haven’t paid for the course yet, or simply that you are in the wrong place.",
"submitbutton": "Return to course page",
"submitbuttonlink": ""
}
},
"alreadyenrolled": {
"pageType": "alreadyenrolled",
"sectionId": "section4",
"headertext": {
"title": "You’re already enrolled in this course",
"subtext": "You’re already enrolled in this course. Return to the course page to begin learning.",
"submitbutton": "Return to course page",
"submitbuttonlink": ""
}
}
}
}
],
"mylearningmobile": "/assets/example-content/my-learning-logo-nav.svg",
"isstorybook": true
}
<div class="enrol-smooth-transitions-container" data-isstorybook={{isstorybook}} data-sessionselector={{sessionselector}} data-version="v3" data-finalscreen="false">
<div class="nav-row">
<nav data-visible="{{navigationvisible}}" class="enrol-nav">
<div class="enrol-nav-wrapper">
<div class="banner-section">
<img src="{{mylearningmobile}}" alt="Background" class="nav-image" />
</div>
{{#each steps}}
<div id="{{id}}" class="nav-item">
<span class="circle-num">{{number}}</span>
<span class="label-text">
{{label}}
</span>
</div>
{{#if barId}}
<div class="progress-bar" id="{{barId}}"></div>
{{/if}}
{{/each}}
</div>
</nav>
</div>
{{#each steps}}
{{#if @last}}
{{!-- Last screen emergency contact info --}}
{{#with pages.[sorry]}}
<section id="{{sectionId}}" class="final-section enrol-section" data-page="{{pageType}}">
{{#with headertext}}
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">{{title}}</h2>
<p class="sub_heading_text_final_section">{{{subtext}}}</p>
{{#if subtextsubpoints}}
<ul class="subpoints-list">
{{#each subtextsubpoints}}
<li id="{{id}}">{{{text}}}</li>
{{/each}}
</ul>
{{/if}}
{{#if infobox}}
<div id="{{infobox.id}}" class="info-box">
<div class="info-box-inner">
<div class="info-box-image"> <img src="{{infobox.image}}" alt="Info icon"> </div>
<div class="info-box-divider"></div>
<div class="info-box-text"> {{{infobox.text}}} </div>
</div>
</div>
{{/if}}
<a href="{{submitbuttonlink}}" class="submit-returnlearning">{{submitbutton}}</a>
</div>
</div>
{{/with}}
</section>
{{/with}}
<section id="section4-oops" class="final-section enrol-section hidden" data-page="oops">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Oops!</h2>
<p class="sub_heading_text_final_section">There seems to be a problem with our enrolment tool at the moment. Please go back to the course page and try again. If you keep seeing this error, feel free to reach out to <a href=''>customer support</a>.</p>
<a href="" class="submit-returnlearning">Return to course page</a>
</div>
</div>
</section>
{{else}}
{{#if courseselect}}
<section id="{{sectionId}}" class="enrol-section">
<div class="top-container">
<div class="left-wrapper">
<img src="/assets/example-content/downarrow.svg" class="downarrow-icon" id="closeBtn" />
<div class="content-box">
{{!-- Session selector block --}}
{{#if ../sessionselector}}
{{#each ../sessionselectorcontents}}
<h2 class="heading_text">{{sessiontexts.title}}</h2>
{{#each sessiontexts.contents}}
<p id="sessioncontent{{id}}" class="sub_heading_text">{{text}}</p>
{{/each}}
{{/each}}
{{else}}
<h2 class="heading_text">{{leftContent.title}}</h2>
<p class="sub_heading_text">{{leftContent.text}}</p>
<div class="form-controls">
<div class="left-input-wrapper">
<div class="left-input--inner-wrapper">
<input type="text" id="postcodeInput" class="left-input-box" placeholder="Enter postcode or town" autocomplete="off"/>
<img src="/assets/example-content/edit-icon.svg" class="edit-icon" alt="edit"/>
<img src="/assets/example-content/clearicon.svg" class="clear-icon" alt="clear"/>
</div>
<button class="left-search-btn disabled" disabled="true" id="searchBtn">Search</button>
</div>
</div>
{{/if}}
</div>
</div>
<div class="right-wrapper" id="rightWrapper">
<div id="holdingScreen" class="holdingScreen {{#if sessionselector}}hidden{{/if}}">
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo"/>
<div class="right-center-content">{{rightcentercontent}}</div>
<div class="right-below-content">
{{#each rightbelowcontent}}
<div id="{{id}}" class="content-item">
<span class="bold-text">{{boldtext}}</span>
<span class="normal-text">{{normaltext}}</span>
</div>
{{/each}}
</div>
</div>
</div>
<div id="loadingScreen" class="loadingScreen">
<div class="loading-inner">
<canvas class="loading-screen-canvas"></canvas>
{{!-- <div class="loadingcircle"></div> --}}
<div class="loading"></div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
<label class="searching-text">Searching</label>
</div>
<input type="hidden" id="courseId" value="142" />
<input type="hidden" id="courseType" value="ILT" />
<input type="hidden" id="courseName" value="UEFA C" />
<div id="courseListScreen" class="courseListScreen hidden">
</div>
</div>
</div>
</div>
<!-- Desktop-only button -->
<div id="bottomButtonContainer" class="bottom-button-container desktop-only hidden">
<div class="button-wrapper">
<button class="cohort-button" data-redirect-url="">Apply for this cohort</button>
</div>
</div>
<!-- mobile-only button -->
<div id="mobileCourseActions" class="mobile-course-actions hidden">
<div class="expand-row" id="expandBtn">
<div class="left-label-group">
<img src="/assets/example-content/arrow_forward_ios.svg" class="arrow-forward"/>
<span class="left-label">Expand Search</span>
</div>
<div class="right-label-group">
<span class="result-label">Showing <span id="mobileResultCount"></span> results</span>
<span class="result-label-code" id="selectedPostcode"></span>
</div>
</div>
<div class="button-wrapper">
<button class="cohort-button" data-redirect-url="">Apply for this cohort</button>
</div>
</div>
</section>
{{else}}
<section id="{{sectionId}}" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
{{#with leftContent}}
{{#if ErrorLabel}}
<div class="prerequisites-inline">
<img src="{{InfoIcon}}" class="info-image" />
<div class="Prerequisites">{{ErrorLabel}}</div>
</div>
{{/if}}
<h2 class="heading_text">{{title}}</h2>
<p class="sub_heading_text">{{text}}</p>
{{#if showInput}}
<div class="form-controls">
<div class="left-input-wrapper">
<input type="text" class="left-input-box" placeholder="Enter postcode or town" />
<button class="left-search-btn" id="searchBtn">Search</button>
</div>
</div>
{{/if}}
{{/with}}
</div>
<div class="right-content">
{{#with rightContent}}
<p>{{text}}</p>
{{/with}}
{{!-- first screen Course select --}}
{{#with courseselect}}
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo"/>
<div class="right-center-content">Take Your Coaching Further</div>
<div class="right-below-content">Flexible learning -- Online & in-person sessions</div>
</div>
{{/with}}
{{!-- second screen Eligiblity check --}}
{{#each eligiblityheader}}
<section id="{{eligiblityheaderid}}" class="eligibility-section">
<p class="eligiblity-header-title">{{eligiblityheadertitle}}</p>
<ul class="eligibility-list">
{{#each eligiblityheadersubtext}}
<li id="{{id}}" class="eligiblity-header-subtext-checked {{group}} {{state}}">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">{{text}}</span>
<span class="successText">{{successtext}}</span>
<span class="failureText">{{failuretext}}</span>
<span class="warningtext">{{warningtext}}</span>
</div>
<p class="wrongstateerror">{{{wrongstateerror}}}</p>
<p class="warningmessage">{{{warningmessage}}}</p>
</li>
{{/each}}
</ul>
</section>
{{/each}}
{{#if terms}}
{{!-- Third screen Terms and conditions --}}
<div class="terms-and-conditions">
{{#each terms}}
<div class="term-box">
<h3 class="terms-heading">{{heading}}</h3>
<p class="terms-subtext">{{{subtext}}}</p>
<label class="custom-checkbox">
<input type="checkbox" id="{{checkboxId}}" />
<span class="checkmark"></span>
{{{checkboxLabel}}}
</label>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
{{!-- next button --}}
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</button>
</div>
</div>
</section>
{{/if}}
{{/if}}
{{/each}}
</div>