<div class="enrol-smooth-transitions-container" data-isstorybook=true>
<div class="nav-row">
<nav data-visible="false" class="enrol-nav">
<img src="/assets/example-content/my-learning-logo-nav.svg" alt="Background" class="nav-image" />
<button id="nav1">
<span class="circle-num">1</span>
<span class="label-text">Find a Course</span>
</button>
<div class="progress-bar" id="bar1"></div>
<button id="nav2">
<span class="circle-num">2</span>
<span class="label-text">Eligibility Check</span>
</button>
<div class="progress-bar" id="bar2"></div>
<button id="nav3">
<span class="circle-num">3</span>
<span class="label-text">Emergency contact info</span>
</button>
</nav>
</div>
<section id="section1" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
<div class="prerequisites-inline">
<img src="" class="info-image" />
<div class="Prerequisites"></div>
</div>
<h2 class="heading_text"></h2>
<p class="sub_heading_text"></p>
</div>
<div class="right-content">
<p></p>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</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="congratulations">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Congratulations you’ve been accepted on the UEFA C course</h2>
<p class="sub_heading_text_final_section">What happens next:</p>
<ul class="subpoints-list">
<li id="subtextsubpoints1">We’ll redirect you to My Learning</li>
<li id="subtextsubpoints2">You can begin your learning!</li>
</ul>
<a href="" class="submit-returnlearning">Return to My Learning</a>
</div>
</div>
</section>
</div>
No notes defined.
{
"navigationvisible": false,
"steps": [
{
"id": "nav1",
"number": "1",
"label": "Find a Course",
"barId": "bar1",
"sectionId": "section1",
"leftContent": {
"title": "",
"text": ""
},
"rightContent": {
"text": ""
}
},
{
"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 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": "Add the course to your basket"
},
{
"id": "subtextsubpoints3",
"text": "Pay for your course to confirm enrolment"
},
{
"id": "subtextsubpoints4",
"text": "<b> You have 2 hours to pay for this course before you have to apply again </b>"
},
{
"id": "subtextsubpoints5",
"text": "You can begin your course!"
}
],
"submitbutton": "Return to My Learning",
"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}}>
<div class="nav-row">
<nav data-visible="{{navigationvisible}}" class="enrol-nav">
<img src="{{mylearningmobile}}" alt="Background" class="nav-image" />
{{#each steps}}
<button id="{{id}}">
<span class="circle-num">{{number}}</span>
<span class="label-text">{{label}}</span>
</button>
{{#if barId}}
<div class="progress-bar" id="{{barId}}"></div>
{{/if}}
{{/each}}
</nav>
</div>
{{#each steps}}
{{#if @last}}
{{!-- Last screen emergency contact info --}}
{{#with pages.[congratulations]}}
<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}}
<a href="{{submitbuttonlink}}" class="submit-returnlearning">{{submitbutton}}</a>
</div>
</div>
{{/with}}
</section>
{{/with}}
{{else}}
<section id="{{sectionId}}" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
{{#with leftContent}}
<div class="prerequisites-inline">
<img src="{{InfoIcon}}" class="info-image" />
<div class="Prerequisites">{{ErrorLabel}}</div>
</div>
<h2 class="heading_text">{{title}}</h2>
<p class="sub_heading_text">{{text}}</p>
{{/with}}
</div>
<div class="right-content">
{{#with rightContent}}
<p>{{text}}</p>
{{/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}}
{{/each}}
</div>