<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>
<a class="back-button" href="">Back to course page</a>
</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>
<a class="back-button" href="">Back to course page</a>
</div>
</div>
</section>
<section id="section4" class="final-section enrol-section" data-page="courseacceptance">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Congratulations!</h2>
<p class="sub_heading_text_final_section">You can now complete your enrolment. To get started:</p>
<ul class="subpoints-list">
<li id="subtextsubpoints1">select the ‘Continue’ button below</li>
<li id="subtextsubpoints2">add the learning to your basket</li>
</ul>
<div id="infobox1" class="info-box">
<div class="info-box-inner">
<div class="info-box-image"> <img src="/assets/example-content/Alert-info.svg" alt="Info icon"> </div>
<div class="info-box-divider"></div>
<div class="info-box-text"> Complete payment within one hour. </div>
</div>
</div>
<a href="" class="submit-returnlearning">Continue</a>
</div>
</div>
</section>
</div>
No notes defined.
{
"navigationvisible": false,
"backtocourse": "",
"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!",
"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}}>
<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.[courseacceptance]}}
<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}}
{{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>
<a class="back-button" href="{{../backtocourse}}">Back to course page</a>
</div>
</div>
</section>
{{/if}}
{{/each}}
</div>