<section class="questionnaire" data-behavior="end-to-end" data-fanid="" data-destination="" data-iscontinuebutton=false>
<div class="questionnaire__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/mobilebackground.svg">
<source media="(min-width: 820px)" srcset="/assets/example-content/background.svg">
<img src="/assets/example-content/background.svg" class="promo-background" alt="">
</picture>
<div class="questionnaire__overlay">
<div class="questionnaire__overlay--wrapper">
<img src="/assets/example-content/my-learning-logo-desktop.svg" alt="" class="questionnaire__logo">
<img src="/assets/example-content/my-learning-logo-mobile.svg" alt="" class="questionnaire__logo-mobile">
<h2 class="title-text" data-inprogress-title="Continue editing to personalise your learning experience" data-completed-title="Your answers have been saved!">Welcome to My Learning
</h2>
<p class="register-text">Thanks for signing up</p>
<p class="register-subtext">To personalise your platform,<br class="line-break" />
take three minutes to complete the questions below</p>
<button class="cta cta--efl " id="edit-profile-preference" data-edit-cta="EDIT answers" aria-label="start now to personalize your answers">Start questions</button>
</div>
</div>
<div class="questionnaire__questions" role="dialog" aria-modal="true">
<div class="questionnaire__questions--container">
<progress value="1" class="progress-bar-line"></progress>
<button class="close-btn iscloseInvisible" tabindex="-1" aria-label="close the profile preferences">
<span class="visually-hidden">Close dialog</span>
</button>
<div class="questionnaire__questions--list">
<div class="all-questions">
<div class="all-questions__single" data-questions-type="CountryOfBirth">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-1">
What's your country of birth?</div>
<p class="register-subtext info answerTip">Select from dropdown list of countries</p>
<p class="register-subtext info additionalInfo">This should match the country of birth as shown on your passport and will be used for UEFA requirements</p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="questionnaire__dropdownContainer">
<button class="questionnaire__dropdownButton" aria-haspopup="true" aria-expanded="false">
Select your country
<img src="/assets/example-content/downarrow.svg" alt="arrow" class="arrowIcon" />
</button>
<ul class="questionnaire__dropdownList" role="menu">
<li id="ans-1-option-1" name="question-1" data-option-id="ans-1-option-1" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
England
</li>
<li id="ans-1-option-2" name="question-1" data-option-id="ans-1-option-2" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Spain
</li>
<li id="ans-1-option-3" name="question-1" data-option-id="ans-1-option-3" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Germany
</li>
<li id="ans-1-option-4" name="question-1" data-option-id="ans-1-option-4" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Italy
</li>
<li id="ans-1-option-5" name="question-1" data-option-id="ans-1-option-5" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
France
</li>
<li id="ans-1-option-6" name="question-1" data-option-id="ans-1-option-6" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Portugal
</li>
<li id="ans-1-option-7" name="question-1" data-option-id="ans-1-option-7" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Netherlands
</li>
<li id="ans-1-option-8" name="question-1" data-option-id="ans-1-option-8" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Poland
</li>
<li id="ans-1-option-9" name="question-1" data-option-id="ans-1-option-9" data-skip-to="" class="dropdownItem" role="menuitem" tabindex="-1">
Scotland
</li>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="TownOfBirth">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-2">
Enter your city/town of birth</div>
<p class="register-subtext info answerTip">Type your birth town or city.</p>
<p class="register-subtext info additionalInfo">This should match the city of birth as shown on your passport and will be used for UEFA requirements</p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="community-team-input">
<input type="text" id="community-input" class="community-input" placeholder="Enter town name" />
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="DomainOfFootball">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-3">
What domain of football do you primarily work in?</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-3-option-1">
<input name="question-3" data-skip-to="" type="radio" class="single-answer" id="ans-3-option-1" value="Grassroots" tabindex="-1">
<label for="ans-3-option-1" class="outsideborder">Grassroots</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-3-option-2">
<input name="question-3" data-skip-to="" type="radio" class="single-answer" id="ans-3-option-2" value="National league system" tabindex="-1">
<label for="ans-3-option-2" class="outsideborder">National league system</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-3-option-3">
<input name="question-3" data-skip-to="" type="radio" class="single-answer" id="ans-3-option-3" value="Talent identification" tabindex="-1">
<label for="ans-3-option-3" class="outsideborder">Talent identification</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-3-option-4">
<input name="question-3" data-skip-to="" type="radio" class="single-answer" id="ans-3-option-4" value="Senior game" tabindex="-1">
<label for="ans-3-option-4" class="outsideborder">Senior game</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="RoleInFootball">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-4">
What's your main role in football?</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-4-option-1">
<input name="question-4" data-skip-to="" type="radio" class="single-answer" id="ans-4-option-1" value="Coach" tabindex="-1">
<label for="ans-4-option-1" class="outsideborder">Coach</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-2">
<input name="question-4" data-skip-to="" type="radio" class="single-answer" id="ans-4-option-2" value="Goalkeeping coach" tabindex="-1">
<label for="ans-4-option-2" class="outsideborder">Goalkeeping coach</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-3">
<input name="question-4" data-skip-to="" type="radio" class="single-answer" id="ans-4-option-3" value="Futsal coach" tabindex="-1">
<label for="ans-4-option-3" class="outsideborder">Futsal coach</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-4">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-4" value="Disability" tabindex="-1">
<label for="ans-4-option-4" class="outsideborder">Disability</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-5">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-5" value="Medicine" tabindex="-1">
<label for="ans-4-option-5" class="outsideborder">Medicine</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-6">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-6" value="Safeguarding" tabindex="-1">
<label for="ans-4-option-6" class="outsideborder">Safeguarding</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-7">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-7" value="Talent ID" tabindex="-1">
<label for="ans-4-option-7" class="outsideborder">Talent ID</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-8">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-8" value="Referee" tabindex="-1">
<label for="ans-4-option-8" class="outsideborder">Referee</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-9">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-9" value="Club admin" tabindex="-1">
<label for="ans-4-option-9" class="outsideborder">Club admin</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-10">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-10" value="Parent / guardian" tabindex="-1">
<label for="ans-4-option-10" class="outsideborder">Parent / guardian</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-4-option-11">
<input name="question-4" data-skip-to="8" type="radio" class="single-answer" id="ans-4-option-11" value="Performance" tabindex="-1">
<label for="ans-4-option-11" class="outsideborder">Performance</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="AgeGroup">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-5">
What age group do you primarily work with?</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-5-option-1">
<input name="question-5" data-skip-to="" type="radio" class="single-answer" id="ans-5-option-1" value="Ages 4-11" tabindex="-1">
<label for="ans-5-option-1" class="outsideborder">Ages 4-11</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-5-option-2">
<input name="question-5" data-skip-to="" type="radio" class="single-answer" id="ans-5-option-2" value="Ages 12-16" tabindex="-1">
<label for="ans-5-option-2" class="outsideborder">Ages 12-16</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-5-option-3">
<input name="question-5" data-skip-to="" type="radio" class="single-answer" id="ans-5-option-3" value="Ages 17-21" tabindex="-1">
<label for="ans-5-option-3" class="outsideborder">Ages 17-21</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-5-option-4">
<input name="question-5" data-skip-to="" type="radio" class="single-answer" id="ans-5-option-4" value="Ages 22+" tabindex="-1">
<label for="ans-5-option-4" class="outsideborder">Ages 22+</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="WorkGender">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-6">
Who do you primarily work with?</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-6-option-1">
<input name="question-6" data-skip-to="" type="radio" class="single-answer" id="ans-6-option-1" value="Male teams" tabindex="-1">
<label for="ans-6-option-1" class="outsideborder">Male teams</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-6-option-2">
<input name="question-6" data-skip-to="" type="radio" class="single-answer" id="ans-6-option-2" value="Female teams" tabindex="-1">
<label for="ans-6-option-2" class="outsideborder">Female teams</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-6-option-3">
<input name="question-6" data-skip-to="" type="radio" class="single-answer" id="ans-6-option-3" value="Mixed teams" tabindex="-1">
<label for="ans-6-option-3" class="outsideborder">Mixed teams</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="WorkWithDisability">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-7">
Do you work with pan-disability or impairment- specific formats?</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-7-option-1">
<input name="question-7" data-skip-to="" type="radio" class="single-answer" id="ans-7-option-1" value="Disability football" tabindex="-1">
<label for="ans-7-option-1" class="outsideborder">Disability football</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-7-option-2">
<input name="question-7" data-skip-to="" type="radio" class="single-answer" id="ans-7-option-2" value="Impairment-specific formats" tabindex="-1">
<label for="ans-7-option-2" class="outsideborder">Impairment-specific formats</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-7-option-3">
<input name="question-7" data-skip-to="" type="radio" class="single-answer" id="ans-7-option-3" value="Not applicable" tabindex="-1">
<label for="ans-7-option-3" class="outsideborder">Not applicable</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="TopicsToLearn">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-8">
What topics would you like to learn about?</div>
<p class="register-subtext info answerTip">Select all that apply</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-8-option-1">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-1" value="Coaching" tabindex="-1">
<label for="ans-8-option-1" class="outsideborder">Coaching</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-2">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-2" value="Goalkeeper coaching" tabindex="-1">
<label for="ans-8-option-2" class="outsideborder">Goalkeeper coaching</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-3">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-3" value="Futsal coaching" tabindex="-1">
<label for="ans-8-option-3" class="outsideborder">Futsal coaching</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-4">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-4" value="Disability football" tabindex="-1">
<label for="ans-8-option-4" class="outsideborder">Disability football</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-5">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-5" value="Medicine in football" tabindex="-1">
<label for="ans-8-option-5" class="outsideborder">Medicine in football</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-6">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-6" value="Safeguarding" tabindex="-1">
<label for="ans-8-option-6" class="outsideborder">Safeguarding</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-7">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-7" value="Talent ID" tabindex="-1">
<label for="ans-8-option-7" class="outsideborder">Talent ID</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-9">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-9" value="Refereeing" tabindex="-1">
<label for="ans-8-option-9" class="outsideborder">Refereeing</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-10">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-10" value="Club administration" tabindex="-1">
<label for="ans-8-option-10" class="outsideborder">Club administration</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-11">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-11" value="Parent & guarding topics" tabindex="-1">
<label for="ans-8-option-11" class="outsideborder">Parent & guarding topics</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-8-option-12">
<input name="question-8" data-skip-to="" type="checkbox" class="multi-answer" id="ans-8-option-12" value="Performance" tabindex="-1">
<label for="ans-8-option-12" class="outsideborder">Performance</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="InvolvedIn">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo"></p>
<div class="question" data-question-id="question-9">
Why are you involved in football?</div>
<p class="register-subtext info answerTip">Select all that apply</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-9-option-1">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-1" value="Making the game more diverse" tabindex="-1">
<label for="ans-9-option-1" class="outsideborder">Making the game more diverse</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-2">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-2" value="A professional career in coaching" tabindex="-1">
<label for="ans-9-option-2" class="outsideborder">A professional career in coaching</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-3">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-3" value="Passionate about football and love the game" tabindex="-1">
<label for="ans-9-option-3" class="outsideborder">Passionate about football and love the game</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-4">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-4" value="To create a team that my child/ friends want to play in" tabindex="-1">
<label for="ans-9-option-4" class="outsideborder">To create a team that my child/ friends want to play in</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-5">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-5" value="Develop Pan-disability / impairment-specific football" tabindex="-1">
<label for="ans-9-option-5" class="outsideborder">Develop Pan-disability / impairment-specific football</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-6">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-6" value="It is my career" tabindex="-1">
<label for="ans-9-option-6" class="outsideborder">It is my career</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-7">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-7" value="To win trophies, cups or leagues" tabindex="-1">
<label for="ans-9-option-7" class="outsideborder">To win trophies, cups or leagues</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-8">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-8" value="To stay in football after playing" tabindex="-1">
<label for="ans-9-option-8" class="outsideborder">To stay in football after playing</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-9">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-9" value="Support players with disabilities" tabindex="-1">
<label for="ans-9-option-9" class="outsideborder">Support players with disabilities</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-10">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-10" value="To help with my studies" tabindex="-1">
<label for="ans-9-option-10" class="outsideborder">To help with my studies</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-11">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-11" value="Help develop players" tabindex="-1">
<label for="ans-9-option-11" class="outsideborder">Help develop players</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-12">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-12" value="Other" tabindex="-1">
<label for="ans-9-option-12" class="outsideborder">Other</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-13">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-13" value="Help out my local team in the short-term" tabindex="-1">
<label for="ans-9-option-13" class="outsideborder">Help out my local team in the short-term</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-14">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-14" value="To give back to my local community" tabindex="-1">
<label for="ans-9-option-14" class="outsideborder">To give back to my local community</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-9-option-15">
<input name="question-9" data-skip-to="" type="checkbox" class="multi-answer" id="ans-9-option-15" value="Gain transferrable skills" tabindex="-1">
<label for="ans-9-option-15" class="outsideborder">Gain transferrable skills</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="DevelopSkills">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo">How much do you agree with the following statement:</p>
<div class="question" data-question-id="question-10">
“I want to develop skills and knowledge for my role in football”</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-10-option-1">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-1" value="Agree very strongly" tabindex="-1">
<label for="ans-10-option-1" class="outsideborder">Agree very strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-2">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-2" value="Agree strongly" tabindex="-1">
<label for="ans-10-option-2" class="outsideborder">Agree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-3">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-3" value="Agree" tabindex="-1">
<label for="ans-10-option-3" class="outsideborder">Agree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-4">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-4" value="Neither agree no disagree" tabindex="-1">
<label for="ans-10-option-4" class="outsideborder">Neither agree no disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-5">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-5" value="Disagree" tabindex="-1">
<label for="ans-10-option-5" class="outsideborder">Disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-6">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-6" value="Disagree strongly" tabindex="-1">
<label for="ans-10-option-6" class="outsideborder">Disagree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-10-option-7">
<input name="question-10" data-skip-to="" type="radio" class="single-answer" id="ans-10-option-7" value="Disagree very strongly" tabindex="-1">
<label for="ans-10-option-7" class="outsideborder">Disagree very strongly</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="OngoingLearning">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo">How much do you agree with the following statement:</p>
<div class="question" data-question-id="question-11">
“Ongoing learning is something I want to do”</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-11-option-1">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-1" value="Agree very strongly" tabindex="-1">
<label for="ans-11-option-1" class="outsideborder">Agree very strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-2">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-2" value="Agree strongly" tabindex="-1">
<label for="ans-11-option-2" class="outsideborder">Agree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-3">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-3" value="Agree" tabindex="-1">
<label for="ans-11-option-3" class="outsideborder">Agree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-4">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-4" value="Neither agree no disagree" tabindex="-1">
<label for="ans-11-option-4" class="outsideborder">Neither agree no disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-5">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-5" value="Disagree" tabindex="-1">
<label for="ans-11-option-5" class="outsideborder">Disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-6">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-6" value="Disagree strongly" tabindex="-1">
<label for="ans-11-option-6" class="outsideborder">Disagree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-11-option-7">
<input name="question-11" data-skip-to="" type="radio" class="single-answer" id="ans-11-option-7" value="Disagree very strongly" tabindex="-1">
<label for="ans-11-option-7" class="outsideborder">Disagree very strongly</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="all-questions__single" data-questions-type="ForMyRole">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo">How much do you agree with the following statement:</p>
<div class="question" data-question-id="question-12">
“I only want to do the learning that's essential for my role”</div>
<p class="register-subtext info answerTip">Select one option</p>
<p class="register-subtext info additionalInfo"></p>
<div class="all-questions__single--alert" role="alert">Please provide answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
<div class="all-questions__single--boxes" data-option-id="ans-12-option-1">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-1" value="Agree very strongly" tabindex="-1">
<label for="ans-12-option-1" class="outsideborder">Agree very strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-2">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-2" value="Agree strongly" tabindex="-1">
<label for="ans-12-option-2" class="outsideborder">Agree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-3">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-3" value="Agree" tabindex="-1">
<label for="ans-12-option-3" class="outsideborder">Agree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-4">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-4" value="Neither agree no disagree" tabindex="-1">
<label for="ans-12-option-4" class="outsideborder">Neither agree no disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-5">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-5" value="Disagree" tabindex="-1">
<label for="ans-12-option-5" class="outsideborder">Disagree</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-6">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-6" value="Disagree strongly" tabindex="-1">
<label for="ans-12-option-6" class="outsideborder">Disagree strongly</label>
</div>
<div class="all-questions__single--boxes" data-option-id="ans-12-option-7">
<input name="question-12" data-skip-to="" type="radio" class="single-answer" id="ans-12-option-7" value="Disagree very strongly" tabindex="-1">
<label for="ans-12-option-7" class="outsideborder">Disagree very strongly</label>
</div>
</ul>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation isInvisible">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
<div class="questionnaire__sign-in benefits">
<div class="questionnaire__sign-in--inner benefits">
<div class="thankyou_wrapper">
<div class="content-area">
<div class="title-text">Thank you!</div>
<div class="register-subtext-thankyou">
Using the answers you provided<br class="line-break" />
we are setting up your personalised dashboard
</div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"startText": "Start questions",
"smallimage": "/assets/example-content/mobilebackground.svg",
"bigimage": "/assets/example-content/background.svg",
"mylearning": "/assets/example-content/my-learning-logo-desktop.svg",
"mylearningmobile": "/assets/example-content/my-learning-logo-mobile.svg",
"title": "Welcome to My Learning",
"completed-title": "Your answers have been saved!",
"inprogress-title": "Continue editing to personalise your learning experience",
"copy": "To personalise your platform, take three minutes to complete the questions below.",
"signuptext": "Thanks for signing up",
"questionsEnabled": true,
"alert-message": "Please provide answer",
"userName": "Andrew Mullet",
"fanid": "",
"destinationurl": "",
"iscontinuebuttonvisible": false,
"isCloseButtonsVisible": false,
"isNavigationsButtonsVisible": false,
"continuebtntext": "Continue",
"edit-preference-cta": {
"copy": "EDIT preferences",
"modifier": "efl",
"id": "edit-profile-preference",
"href": ""
},
"next-cta": {
"copy": "Next",
"modifier": "efl",
"additionalClass": "personalisationNext",
"id": "next-cta",
"href": ""
},
"sign-up-cta": {
"copy": "Sign Up",
"additionalClass": "sign-up-cta"
},
"sign-in-cta": {
"copy": "Sign In",
"additionalClass": "sign-in-cta"
},
"thankyou_content1": "Using the answers you provided",
"thankyou_content2": "we are setting up your personalised dashboard",
"thankyou_text": "Thank you!",
"thankyou_backgroundImage": "/assets/example-content/background.svg",
"thankyou_mobilebackgroundimage": "/assets/example-content/mobilebackground.svg",
"thankyou_ballicon": "/assets/example-content/ball-icon.svg",
"thankyou_loadingbar": "/assets/example-content/loading-bar.svg",
"questions-list": [
{
"number": 1,
"id": "question-1",
"question": "What's your country of birth?",
"question-type": "CountryOfBirth",
"info": "",
"additinal-info": "This should match the country of birth as shown on your passport and will be used for UEFA requirements",
"answer-tip": "Select from dropdown list of countries",
"dropdownButtonText": "Select your country",
"answers": [
{
"name": "question-1",
"value": "England",
"id": "ans-1-option-1"
},
{
"name": "question-1",
"value": "Spain",
"id": "ans-1-option-2"
},
{
"name": "question-1",
"value": "Germany",
"id": "ans-1-option-3"
},
{
"name": "question-1",
"value": "Italy",
"id": "ans-1-option-4"
},
{
"name": "question-1",
"value": "France",
"id": "ans-1-option-5"
},
{
"name": "question-1",
"value": "Portugal",
"id": "ans-1-option-6"
},
{
"name": "question-1",
"value": "Netherlands",
"id": "ans-1-option-7"
},
{
"name": "question-1",
"value": "Poland",
"id": "ans-1-option-8"
},
{
"name": "question-1",
"value": "Scotland",
"id": "ans-1-option-9"
}
],
"answer-type": {
"radio": false,
"checkbox": false,
"text": false,
"select": true
}
},
{
"number": 2,
"id": "question-2",
"question": "Enter your city/town of birth",
"question-type": "TownOfBirth",
"info": "",
"additinal-info": "This should match the city of birth as shown on your passport and will be used for UEFA requirements",
"answer-tip": "Type your birth town or city.",
"answers": "",
"multi-answer": false,
"answer-type": {
"radio": false,
"checkbox": false,
"text": true,
"select": false
}
},
{
"number": 3,
"id": "question-3",
"question": "What domain of football do you primarily work in?",
"question-type": "DomainOfFootball",
"info": "",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-3",
"value": "Grassroots",
"id": "ans-3-option-1"
},
{
"name": "question-3",
"value": "National league system",
"id": "ans-3-option-2"
},
{
"name": "question-3",
"value": "Talent identification",
"id": "ans-3-option-3"
},
{
"name": "question-3",
"value": "Senior game",
"id": "ans-3-option-4"
}
],
"multi-answer": true,
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 4,
"id": "question-4",
"question": "What's your main role in football?",
"question-type": "RoleInFootball",
"info": "",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-4",
"value": "Coach",
"id": "ans-4-option-1"
},
{
"name": "question-4",
"value": "Goalkeeping coach",
"id": "ans-4-option-2"
},
{
"name": "question-4",
"value": "Futsal coach",
"id": "ans-4-option-3"
},
{
"name": "question-4",
"value": "Disability",
"id": "ans-4-option-4",
"skipTo": 8
},
{
"name": "question-4",
"value": "Medicine",
"id": "ans-4-option-5",
"skipTo": 8
},
{
"name": "question-4",
"value": "Safeguarding",
"id": "ans-4-option-6",
"skipTo": 8
},
{
"name": "question-4",
"value": "Talent ID",
"id": "ans-4-option-7",
"skipTo": 8
},
{
"name": "question-4",
"value": "Referee",
"id": "ans-4-option-8",
"skipTo": 8
},
{
"name": "question-4",
"value": "Club admin",
"id": "ans-4-option-9",
"skipTo": 8
},
{
"name": "question-4",
"value": "Parent / guardian",
"id": "ans-4-option-10",
"skipTo": 8
},
{
"name": "question-4",
"value": "Performance",
"id": "ans-4-option-11",
"skipTo": 8
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 5,
"id": "question-5",
"question": "What age group do you primarily work with?",
"question-type": "AgeGroup",
"info": "",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-5",
"value": "Ages 4-11",
"id": "ans-5-option-1"
},
{
"name": "question-5",
"value": "Ages 12-16",
"id": "ans-5-option-2"
},
{
"name": "question-5",
"value": "Ages 17-21",
"id": "ans-5-option-3"
},
{
"name": "question-5",
"value": "Ages 22+",
"id": "ans-5-option-4"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 6,
"id": "question-6",
"question": "Who do you primarily work with?",
"question-type": "WorkGender",
"info": "",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-6",
"value": "Male teams",
"id": "ans-6-option-1"
},
{
"name": "question-6",
"value": "Female teams",
"id": "ans-6-option-2"
},
{
"name": "question-6",
"value": "Mixed teams",
"id": "ans-6-option-3"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 7,
"id": "question-7",
"question": "Do you work with pan-disability or impairment- specific formats?",
"question-type": "WorkWithDisability",
"info": "",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-7",
"value": "Disability football",
"id": "ans-7-option-1"
},
{
"name": "question-7",
"value": "Impairment-specific formats",
"id": "ans-7-option-2"
},
{
"name": "question-7",
"value": "Not applicable",
"id": "ans-7-option-3"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 8,
"id": "question-8",
"question": "What topics would you like to learn about?",
"question-type": "TopicsToLearn",
"info": "",
"answer-tip": "Select all that apply",
"additinal-info": "",
"answers": [
{
"name": "question-8",
"value": "Coaching",
"id": "ans-8-option-1"
},
{
"name": "question-8",
"value": "Goalkeeper coaching",
"id": "ans-8-option-2"
},
{
"name": "question-8",
"value": "Futsal coaching",
"id": "ans-8-option-3"
},
{
"name": "question-8",
"value": "Disability football",
"id": "ans-8-option-4"
},
{
"name": "question-8",
"value": "Medicine in football",
"id": "ans-8-option-5"
},
{
"name": "question-8",
"value": "Safeguarding",
"id": "ans-8-option-6"
},
{
"name": "question-8",
"value": "Talent ID",
"id": "ans-8-option-7"
},
{
"name": "question-8",
"value": "Refereeing",
"id": "ans-8-option-9"
},
{
"name": "question-8",
"value": "Club administration",
"id": "ans-8-option-10"
},
{
"name": "question-8",
"value": "Parent & guarding topics",
"id": "ans-8-option-11"
},
{
"name": "question-8",
"value": "Performance",
"id": "ans-8-option-12"
}
],
"answer-type": {
"radio": false,
"checkbox": true,
"text": false,
"select": false
}
},
{
"number": 9,
"id": "question-9",
"question": "Why are you involved in football?",
"question-type": "InvolvedIn",
"info": "",
"answer-tip": "Select all that apply",
"additinal-info": "",
"answers": [
{
"name": "question-9",
"value": "Making the game more diverse",
"id": "ans-9-option-1"
},
{
"name": "question-9",
"value": "A professional career in coaching",
"id": "ans-9-option-2"
},
{
"name": "question-9",
"value": "Passionate about football and love the game",
"id": "ans-9-option-3"
},
{
"name": "question-9",
"value": "To create a team that my child/ friends want to play in",
"id": "ans-9-option-4"
},
{
"name": "question-9",
"value": "Develop Pan-disability / impairment-specific football",
"id": "ans-9-option-5"
},
{
"name": "question-9",
"value": "It is my career",
"id": "ans-9-option-6"
},
{
"name": "question-9",
"value": "To win trophies, cups or leagues",
"id": "ans-9-option-7"
},
{
"name": "question-9",
"value": "To stay in football after playing",
"id": "ans-9-option-8"
},
{
"name": "question-9",
"value": "Support players with disabilities",
"id": "ans-9-option-9"
},
{
"name": "question-9",
"value": "To help with my studies",
"id": "ans-9-option-10"
},
{
"name": "question-9",
"value": "Help develop players",
"id": "ans-9-option-11"
},
{
"name": "question-9",
"value": "Other",
"id": "ans-9-option-12"
},
{
"name": "question-9",
"value": "Help out my local team in the short-term",
"id": "ans-9-option-13"
},
{
"name": "question-9",
"value": "To give back to my local community",
"id": "ans-9-option-14"
},
{
"name": "question-9",
"value": "Gain transferrable skills",
"id": "ans-9-option-15"
}
],
"answer-type": {
"radio": false,
"checkbox": true,
"text": false,
"select": false
}
},
{
"number": 10,
"id": "question-10",
"question": "“I want to develop skills and knowledge for my role in football”",
"question-type": "DevelopSkills",
"info": "How much do you agree with the following statement:",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-10",
"value": "Agree very strongly",
"id": "ans-10-option-1"
},
{
"name": "question-10",
"value": "Agree strongly",
"id": "ans-10-option-2"
},
{
"name": "question-10",
"value": "Agree",
"id": "ans-10-option-3"
},
{
"name": "question-10",
"value": "Neither agree no disagree",
"id": "ans-10-option-4"
},
{
"name": "question-10",
"value": "Disagree",
"id": "ans-10-option-5"
},
{
"name": "question-10",
"value": "Disagree strongly",
"id": "ans-10-option-6"
},
{
"name": "question-10",
"value": "Disagree very strongly",
"id": "ans-10-option-7"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 11,
"id": "question-11",
"question": "“Ongoing learning is something I want to do”",
"question-type": "OngoingLearning",
"info": "How much do you agree with the following statement:",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-11",
"value": "Agree very strongly",
"id": "ans-11-option-1"
},
{
"name": "question-11",
"value": "Agree strongly",
"id": "ans-11-option-2"
},
{
"name": "question-11",
"value": "Agree",
"id": "ans-11-option-3"
},
{
"name": "question-11",
"value": "Neither agree no disagree",
"id": "ans-11-option-4"
},
{
"name": "question-11",
"value": "Disagree",
"id": "ans-11-option-5"
},
{
"name": "question-11",
"value": "Disagree strongly",
"id": "ans-11-option-6"
},
{
"name": "question-11",
"value": "Disagree very strongly",
"id": "ans-11-option-7"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
},
{
"number": 12,
"id": "question-12",
"question": "“I only want to do the learning that's essential for my role”",
"question-type": "ForMyRole",
"info": "How much do you agree with the following statement:",
"answer-tip": "Select one option",
"additinal-info": "",
"answers": [
{
"name": "question-12",
"value": "Agree very strongly",
"id": "ans-12-option-1"
},
{
"name": "question-12",
"value": "Agree strongly",
"id": "ans-12-option-2"
},
{
"name": "question-12",
"value": "Agree",
"id": "ans-12-option-3"
},
{
"name": "question-12",
"value": "Neither agree no disagree",
"id": "ans-12-option-4"
},
{
"name": "question-12",
"value": "Disagree",
"id": "ans-12-option-5"
},
{
"name": "question-12",
"value": "Disagree strongly",
"id": "ans-12-option-6"
},
{
"name": "question-12",
"value": "Disagree very strongly",
"id": "ans-12-option-7"
}
],
"answer-type": {
"radio": true,
"checkbox": false,
"text": false,
"select": false
}
}
]
}
/* stylelint-disable */
import { gsap } from 'gsap';
export default parentElement => {
// const MOBILE_BREAKPOINT = 820;
const editPreference = parentElement.querySelector(
'#edit-profile-preference'
);
const { editCta } = editPreference.dataset;
const closeBtns = parentElement.querySelector(
'.questionnaire__questions--container .close-btn'
);
const wrapper = parentElement.querySelector('.questionnaire__wrapper');
const bannerOverlay = parentElement.querySelector('.questionnaire__overlay');
const questionsList = parentElement.querySelector(
'.questionnaire__questions--list'
);
const progressBar = parentElement.querySelector('.progress-bar-line');
const successDiv = parentElement.querySelector(
'.questionnaire__sign-in.benefits'
);
const questionsContainer = parentElement.querySelector('.all-questions');
const allQuestionsItem = parentElement.querySelectorAll('.all-questions > *');
const questions = parentElement.querySelectorAll('.all-questions__single');
const { fanid, destination, iscontinuebutton } = parentElement.dataset;
const navigation = parentElement.querySelector(
'.questionnaire__questions--list__navigation'
);
const signinSignupPrev = parentElement.querySelector('.signin-signup-prev');
const { inprogressTitle, completedTitle } = bannerOverlay.querySelector(
'h2'
).dataset;
const { editCopy } = bannerOverlay.querySelector('p').dataset;
let answeredQuestions = 0;
let isSkipped = false;
// Accessibility
const updateQuestionnaireTabIndex = activeItem => {
allQuestionsItem.forEach(item => {
const allInputs = item.querySelectorAll('input, a, button');
allInputs.forEach(element => {
// eslint-disable-next-line no-param-reassign
element.tabIndex = '-1';
if (element.type === 'checkbox') {
// eslint-disable-next-line no-param-reassign
element.tabIndex = '-1';
} else if (element.type === 'radio') {
// eslint-disable-next-line no-param-reassign
element.nextElementSibling.tabIndex = '-1';
// eslint-disable-next-line no-param-reassign
element.tabIndex = '-1';
}
});
});
if (activeItem) {
const activeItemEle = activeItem.querySelectorAll('input, a, button');
activeItemEle.forEach(element => {
// eslint-disable-next-line no-param-reassign
element.tabIndex = '0';
if (element.type === 'checkbox') {
// eslint-disable-next-line no-param-reassign
element.tabIndex = '0';
} else if (element.type === 'radio') {
// eslint-disable-next-line no-param-reassign
element.nextElementSibling.tabIndex = '0';
// eslint-disable-next-line no-param-reassign
element.tabIndex = '-1';
}
});
}
};
const checkQuestionnaireAnsweredData = () => {
answeredQuestions = 0;
questions.forEach(question => {
const answerNo = question.querySelectorAll('input:checked').length;
const inputType = question.querySelector('input');
const parentnextBtn = question.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const parentnextCta = question.querySelector(
'.cta.cta--efl.personalisationNext'
);
// const { ctaText } = parentnextCta.dataset;
if (inputType.type === 'checkbox' || inputType.type === 'radio') {
if (answerNo) {
question.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
editPreference.innerHTML = editCta;
editPreference.setAttribute(
'aria-label',
'edit the profile preferences'
);
answeredQuestions += 1;
}
}
});
};
const updateQuestionnaireIndexCardData = () => {
if (answeredQuestions && answeredQuestions === questions.length) {
if (completedTitle) {
bannerOverlay.querySelector('h2').innerHTML = completedTitle;
bannerOverlay.querySelector('p').innerHTML = editCopy;
bannerOverlay.querySelector('p').classList.remove('hidden');
}
} else if (answeredQuestions) {
if (inprogressTitle) {
bannerOverlay.querySelector('h2').innerHTML = inprogressTitle;
bannerOverlay.querySelector('p').innerHTML = editCopy;
bannerOverlay.querySelector('p').classList.add('hidden');
}
}
};
function setAnsweredScreen() {
const resgisterSubtext = parentElement.querySelector('.register-subtext');
editPreference.style.display = 'none';
resgisterSubtext.textContent =
'Your responses are already recorded. You will be redirected to Docebo application.';
}
function redirectPage(url) {
window.location.replace(url);
}
async function getUserAnswered() {
const url = `/Onboarding/IsAnswered?fanid=${fanid}`;
fetch(url)
.then(response => {
return response.json();
})
.then(data => {
if (data !== null && data !== undefined) {
if (data.isAnswered === true) {
setAnsweredScreen();
setTimeout(() => {
redirectPage(destination);
}, 2000);
}
}
})
.catch(error => console.log('GET error in IsAnswered-', error));
}
async function updateQuestionnaireDataCallback(questionnaireData) {
const url = `/Onboarding/UpdateOnboardedUserDetails`;
// eslint-disable-next-line compat/compat
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '0',
},
body: questionnaireData,
}).then(() => {
if (iscontinuebutton === 'false' && destination !== '') {
setTimeout(() => {
redirectPage(destination);
}, 3000);
}
});
return response.json();
}
function updateQuestionnaireData(questionnaireData) {
try {
updateQuestionnaireDataCallback(questionnaireData).then(response => {
if (response) {
editPreference.innerHTML = editCta;
editPreference.setAttribute(
'aria-label',
'edit the profile preferences'
);
checkQuestionnaireAnsweredData();
updateQuestionnaireIndexCardData();
}
});
} catch (e) {
throw new Error('Unable to update personalisation data ::', e);
}
}
function capitalizeFirstLetter(str) {
if (str.length === 0) {
return '';
}
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
const generateQuestionnaireData = currentScreenIndex => {
const questionnaireArray = [];
questions.forEach((question, index) => {
const questionElment = question.querySelector('.question');
const { questionsType } = question.dataset;
const { questionId } = questionElment.dataset;
const questionText = questionElment.innerText;
const answerDetails = [];
const answerOptions = question.querySelectorAll('input,button');
let inc = 0;
answerOptions.forEach(option => {
if (option.type === 'text') {
const answer = `{
"answer": "${capitalizeFirstLetter(option.value)}",
"answerId": ""
}`;
answerDetails[inc] = JSON.parse(answer);
} else if (option.className === 'questionnaire__dropdownButton') {
const { selectedId } = option.dataset;
const answer = `{
"answer": "${option.innerText.trim()}",
"answerId": "${selectedId}"
}`;
answerDetails[inc] = JSON.parse(answer);
} else if (option.checked) {
const { optionId } = option.closest(
'.all-questions__single--boxes'
).dataset;
const answer = `{
"answer": "${option.value}",
"answerId": "${optionId}"
}`;
const skipTo = option.getAttribute('data-skip-to');
if (skipTo !== '' && isSkipped === false) {
// eslint-disable-next-line radix
progressBar.value = parseInt(skipTo) - 1;
isSkipped = true;
sessionStorage.setItem('skippedFrom', currentScreenIndex);
// eslint-disable-next-line radix
sessionStorage.setItem('skippedTo', parseInt(skipTo));
} else if (
progressBar.value ===
// eslint-disable-next-line radix
parseInt(sessionStorage.getItem('skippedFrom'))
) {
sessionStorage.removeItem('skippedFrom');
sessionStorage.removeItem('skippedTo');
}
answerDetails[inc] = JSON.parse(answer);
}
inc += 1;
});
const questionDetails = `{
"question": "${questionText}",
"questionId": "${questionId}",
"questionTag": "${questionsType}",
"answerDetails": ${JSON.stringify(
answerDetails.filter(item => item != null)
)}
}`;
questionnaireArray[index] = JSON.parse(questionDetails);
});
const personalisationData = `{
"FanId": "${fanid}",
"OnboardingQuestionnaire": ${JSON.stringify(questionnaireArray)}
}`;
return personalisationData;
};
window.addEventListener('DOMContentLoaded', () => {
progressBar.setAttribute('max', questions.length);
});
document.addEventListener('DOMContentLoaded', function() {
if (
fanid !== null &&
fanid !== undefined &&
fanid !== '' &&
destination !== null &&
destination !== undefined &&
destination !== ''
) {
getUserAnswered();
}
});
// functions
questions.forEach((question, index) => {
const text = question.querySelector('.all-questions__single__index');
const currentnextBtn = question.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const currentprevBtn = question.querySelector(
'.questionnaire__questions--list__navigation--up-down .previous'
);
const nextCta = question.querySelector('.cta.cta--efl.personalisationNext');
const signinprevBtn = parentElement.querySelector(
'.questionnaire__sign-in .previous'
);
const currentIndex = index < 9 ? `0${index + 1}` : index + 1;
const totalQuestions =
questions.length < 9 ? `0${questions.length}` : questions.length;
text.innerHTML = `Question ${currentIndex}/${totalQuestions}`;
const answerNo = question.querySelectorAll('input:checked').length;
const inputType = question.querySelector('input');
const parentnextBtn = question.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const parentnextCta = question.querySelector(
'.cta.cta--efl.personalisationNext'
);
// const { ctaText } = parentnextCta.dataset;
if (
inputType &&
(inputType.type === 'checkbox' || inputType.type === 'radio')
) {
if (answerNo) {
question.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
editPreference.innerHTML = editCta;
editPreference.setAttribute(
'aria-label',
'edit the profile preferences'
);
answeredQuestions += 1;
}
}
// previous question
const moveToPrevQuestion = () => {
let prevQuestion = questions[progressBar.value - 2];
const prevBtn = prevQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .previous'
);
const nextBtn = prevQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const prevnextCta = prevQuestion.querySelector(
'.cta.cta--efl.personalisationNext'
);
if (!prevQuestion) {
currentprevBtn.setAttribute('aria-disabled', 'false');
return;
}
const questionHeight = prevQuestion.clientHeight;
questionsContainer.style.minHeight = `${questionHeight}px`;
if (progressBar.value <= 1) {
progressBar.value -= 1;
prevBtn.setAttribute('aria-disabled', 'true');
} else if (
// eslint-disable-next-line radix
parseInt(sessionStorage.getItem('skippedTo')) === progressBar.value
) {
// eslint-disable-next-line radix
progressBar.value = parseInt(sessionStorage.getItem('skippedFrom'));
prevQuestion = questions[progressBar.value - 1];
isSkipped = false;
} else {
progressBar.value -= 1;
}
if (prevQuestion.getAttribute('data-answered') === 'true') {
prevnextCta.setAttribute('aria-disabled', 'false');
nextBtn.setAttribute('aria-disabled', 'false');
} else {
prevnextCta.setAttribute('aria-disabled', 'true');
nextBtn.setAttribute('aria-disabled', 'true');
}
updateQuestionnaireTabIndex(prevQuestion);
gsap.to(questionsContainer, {
transform: `translateY(-${prevQuestion.offsetTop}px)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
};
// next question
const moveToNextQuestion = () => {
const questionnaireData = generateQuestionnaireData(progressBar.value);
if (progressBar.value === progressBar.max) {
updateQuestionnaireData(questionnaireData);
questionsContainer.classList.add('sign-in');
questionsContainer.style.minHeight = `${successDiv.clientHeight}px`;
closeBtns.style.display = 'none';
updateQuestionnaireTabIndex(successDiv);
gsap.to(questionsContainer, {
transform: `translateY(-${successDiv.offsetTop}px)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
}
if (progressBar.value === progressBar.max) {
return;
}
const nextQuestion = questions[progressBar.value];
const prevBtn = nextQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .previous'
);
const nextBtn = nextQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const nextQuestionCta = nextQuestion.querySelector(
'.cta.cta--efl.personalisationNext'
);
const questionHeight = nextQuestion.clientHeight;
questionsContainer.style.minHeight = `${questionHeight}px`;
if (progressBar.value < progressBar.max - 1) {
progressBar.value += 1;
} else {
progressBar.value += 1;
// nextBtn.setAttribute('aria-disabled', 'true');
}
if (progressBar.value >= 2) {
prevBtn.setAttribute('aria-disabled', 'false');
}
if (nextQuestion.getAttribute('data-answered') === 'true') {
nextQuestionCta.setAttribute('aria-disabled', 'false');
nextBtn.setAttribute('aria-disabled', 'false');
} else {
nextQuestionCta.setAttribute('aria-disabled', 'true');
nextBtn.setAttribute('aria-disabled', 'true');
}
updateQuestionnaireTabIndex(nextQuestion);
gsap.to(questionsContainer, {
transform: `translateY(-${nextQuestion.offsetTop}px)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
};
// Alert
const openQuestionnaireAlert = () => {
const alert = questions[progressBar.value - 1].querySelector(
'.all-questions__single--alert'
);
alert.classList.add('active');
};
nextCta.addEventListener('click', e => {
e.preventDefault();
if (nextCta.getAttribute('aria-disabled') === 'true') {
openQuestionnaireAlert();
const currentQuestion = questions[progressBar.value - 1];
const questionHeight = currentQuestion.clientHeight;
questionsContainer.style.minHeight = `${questionHeight}px`;
return;
}
moveToNextQuestion();
setTimeout(() => {
closeBtns.focus();
}, 100);
});
nextCta.addEventListener('keydown', e => {
if (e.keyCode === 13) {
nextCta.click();
nextCta.blur();
} else {
e.preventDefault();
closeBtns.focus();
}
});
currentnextBtn.addEventListener('click', e => {
e.preventDefault();
if (currentnextBtn.getAttribute('aria-disabled') === 'true') {
return;
}
moveToNextQuestion();
closeBtns.focus();
});
currentnextBtn.addEventListener('keydown', e => {
if (e.keyCode === 13) {
e.preventDefault();
currentnextBtn.click();
}
});
currentprevBtn.addEventListener('click', e => {
e.preventDefault();
if (currentprevBtn.getAttribute('aria-disabled') === 'true') {
return;
}
moveToPrevQuestion();
closeBtns.focus();
});
currentprevBtn.addEventListener('keydown', e => {
if (e.keyCode === 13) {
e.preventDefault();
currentprevBtn.click();
}
});
// sign in functions
if (signinprevBtn) {
signinprevBtn.addEventListener('click', e => {
e.preventDefault();
if (currentprevBtn.getAttribute('aria-disabled') === 'true') {
return;
}
const prevQuestion = questions[progressBar.value - 2];
const prevBtn = prevQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .previous'
);
const nextBtn = prevQuestion.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
// at sign in section
if (questionsContainer.classList.contains('sign-in')) {
const lastQuestion = questions[progressBar.value - 1];
if (lastQuestion.getAttribute('data-answered') === 'true') {
nextBtn.setAttribute('aria-disabled', 'false');
} else {
nextBtn.setAttribute('aria-disabled', 'true');
}
if (progressBar.value < 2) {
prevBtn.setAttribute('aria-disabled', 'true');
}
questionsContainer.style.minHeight = `${lastQuestion.clientHeight}px`;
questionsContainer.classList.remove('sign-in');
updateQuestionnaireTabIndex(lastQuestion);
gsap.to(questionsContainer, {
transform: `translateY(-${lastQuestion.offsetTop}px)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
}
});
signinprevBtn.addEventListener('keydown', e => {
if (e.keyCode === 13) {
e.preventDefault();
signinprevBtn.click();
}
});
}
// Accessibility
const updateQuestionnaireOptLabel = () => {
const questionElement = question.querySelector('.question');
const questionText = questionElement.innerText;
const answerOptions = question.querySelectorAll('input');
const firstOpt = answerOptions[0];
let optLabel;
let optText;
if (firstOpt) {
optLabel = firstOpt.nextElementSibling;
}
if (optLabel) {
optText = optLabel.innerText;
}
if (firstOpt && firstOpt.type === 'checkbox') {
firstOpt.setAttribute('aria-label', `${questionText} ${optText}`);
} else if (firstOpt && firstOpt.type === 'radio') {
const firstoptLabel = document.createElement('div');
firstoptLabel.className = 'visually-hidden';
firstoptLabel.innerText = `${questionText}`;
optLabel.prepend(firstoptLabel);
}
};
updateQuestionnaireOptLabel();
});
updateQuestionnaireIndexCardData();
// Close Question Modal
if (closeBtns) {
closeBtns.addEventListener('click', e => {
e.preventDefault();
document.body.style.overflow = null;
wrapper.classList.remove('enlarged-image');
/* eslint-disable no-param-reassign */
parentElement.classList.remove('expanded');
parentElement.style.marginTop = ``;
/* eslint-disable no-param-reassign */
bannerOverlay.classList.remove('overlay-hidden');
setTimeout(() => {
questionsList.classList.remove('expanded');
}, 10);
closeBtns.blur();
closeBtns.tabIndex = '-1';
editPreference.focus();
updateQuestionnaireTabIndex();
});
closeBtns.addEventListener('keydown', e => {
if (e.keyCode === 13) {
closeBtns.click();
} else if (e.shiftKey && e.keyCode === 9) {
e.preventDefault();
} else {
// empty
}
});
}
// eslint-disable-next-line complexity
function clickedAndUpdated(event) {
const clickedElement = event.target;
if (clickedElement.tagName === 'INPUT' || clickedElement.tagName === 'LI') {
const questionsContainerParent = clickedElement.closest(
'.all-questions__single'
);
const progressiveProfile = clickedElement.closest('.questionnaire');
if (!questionsContainerParent || !progressiveProfile) {
return;
}
const alert = questionsContainerParent.querySelector(
'.all-questions__single--alert'
);
const inputs = questionsContainerParent.querySelectorAll('input');
const parentnextBtn = questionsContainerParent.querySelector(
'.questionnaire__questions--list__navigation--up-down .next'
);
const parentnextCta = questionsContainerParent.querySelector(
'.cta.cta--efl.personalisationNext'
);
if (clickedElement.type === 'checkbox') {
let answered = false;
inputs.forEach(element => {
if (element.checked) {
answered = true;
}
});
if (answered === true) {
questionsContainerParent.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// if alert is active, remove it
alert.classList.remove('active');
const currentQuestion = questions[progressBar.value - 1];
const questionHeight = currentQuestion.clientHeight;
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
questionsContainer.style.minHeight = `${questionHeight}px`;
} else {
questionsContainerParent.setAttribute('data-answered', 'false');
parentnextCta.setAttribute('aria-disabled', 'true');
parentnextBtn.setAttribute('aria-disabled', 'true');
// parentnextCta.innerHTML = `${ctaText}`;
}
} else if (clickedElement.type === 'radio') {
questionsContainerParent.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
alert.classList.remove('active');
const currentQuestion = questions[progressBar.value - 1];
const questionHeight = currentQuestion.clientHeight;
questionsContainer.style.minHeight = `${questionHeight}px`;
} else if (clickedElement.type === 'text') {
if (clickedElement.value.length > 0) {
questionsContainerParent.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// if alert is active, remove it
alert.classList.remove('active');
const currentQuestion = questions[progressBar.value - 1];
const questionHeight = currentQuestion.clientHeight;
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
questionsContainer.style.minHeight = `${questionHeight}px`;
} else {
questionsContainerParent.setAttribute('data-answered', 'false');
parentnextCta.setAttribute('aria-disabled', 'true');
parentnextBtn.setAttribute('aria-disabled', 'true');
// parentnextCta.innerHTML = `${ctaText}`;
}
} else if (clickedElement.className === 'dropdownItem') {
const dropdownContainer = clickedElement.closest(
'.questionnaire__dropdownContainer'
);
const dropdownButton = dropdownContainer.querySelector(
'.questionnaire__dropdownButton'
);
const { optionId } = clickedElement.dataset;
const value = clickedElement.innerText;
dropdownButton.firstChild.textContent = value;
dropdownButton.setAttribute('data-selected-id', optionId);
dropdownButton.setAttribute('aria-expanded', 'false');
dropdownContainer.classList.remove('active');
questionsContainerParent.setAttribute('data-answered', 'true');
parentnextCta.setAttribute('aria-disabled', 'false');
parentnextBtn.setAttribute('aria-disabled', 'false');
// parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
alert.classList.remove('active');
const currentQuestion = questions[progressBar.value - 1];
const questionHeight = currentQuestion.clientHeight;
questionsContainer.style.minHeight = `${questionHeight}px`;
}
} else if (clickedElement.id === 'continueBtn' && destination !== '') {
redirectPage(destination);
} else if (clickedElement.className !== 'questionnaire__dropdownButton') {
const allDropdownFields = document.querySelectorAll(
'.questionnaire__dropdownContainer'
);
allDropdownFields.forEach(function(dropdown) {
const dropdownContainer = dropdown;
const dropdownButton = dropdownContainer.querySelector(
'.questionnaire__dropdownButton'
);
if (dropdownButton !== null && dropdownButton !== undefined) {
dropdownButton.setAttribute('aria-expanded', 'false');
dropdownContainer.classList.remove('active');
}
});
}
}
window.addEventListener('click', e => {
clickedAndUpdated(e);
});
window.addEventListener('focusin', e => {
clickedAndUpdated(e);
});
window.addEventListener('keyup', e => {
clickedAndUpdated(e);
});
window.addEventListener('keydown', event => {
if ((event.keyCode === 13 || event.keyCode === 32) && parentElement) {
const { target } = event;
const progressiveProfile = target.closest('.questionnaire');
if (!progressiveProfile) {
return;
}
if (target.previousElementSibling) {
if (target.previousElementSibling.type === 'radio') {
target.click();
target.focus();
}
} else if (target.type === 'checkbox') {
target.click();
target.focus();
}
}
});
if (signinSignupPrev) {
signinSignupPrev.addEventListener('click', e => {
e.preventDefault();
updateQuestionnaireTabIndex(allQuestionsItem[0]);
gsap.to(questionsContainer, {
transform: `translateY(0)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
});
signinSignupPrev.addEventListener('keydown', e => {
if (e.keyCode === 13) {
e.preventDefault();
signinSignupPrev.click();
}
});
}
// Open Questions Component
editPreference.addEventListener('click', e => {
e.preventDefault();
document.body.style.overflow = 'hidden';
wrapper.classList.add('enlarged-image');
/* eslint-disable no-param-reassign */
parentElement.classList.add('expanded');
parentElement.style.marginTop = `${-(
parentElement.offsetTop - window.scrollY
)}px`;
/* eslint-disable no-param-reassign */
bannerOverlay.classList.add('overlay-hidden');
navigation.classList.remove('hidden');
progressBar.value = 1;
updateQuestionnaireTabIndex(allQuestionsItem[0]);
closeBtns.tabIndex = '0';
closeBtns.focus();
gsap.to(questionsContainer, {
transform: `translateY(0px)`,
ease: 'power2',
scrub: true,
yoyo: 'true',
});
setTimeout(() => {
questionsList.classList.add('expanded');
}, 10);
});
editPreference.addEventListener('keydown', e => {
if (e.keyCode === 13) {
e.preventDefault();
editPreference.click();
}
});
updateQuestionnaireTabIndex();
};
document.addEventListener('DOMContentLoaded', function() {
const allQuestions = document.querySelectorAll('.all-questions__single');
allQuestions.forEach(function(question) {
const optionsContainer = question.querySelector(
'.all-questions__single--questionaire-outerscroll'
);
const parentContainerscroll = question.querySelector('.parentcontainer');
if (optionsContainer && parentContainerscroll) {
const updateMask = function() {
const hasScrollbar =
optionsContainer.scrollHeight > optionsContainer.clientHeight;
let maskImage = 'none';
if (hasScrollbar) {
const ScrolledToBottom =
optionsContainer.scrollHeight - optionsContainer.scrollTop <=
optionsContainer.clientHeight;
const ScrolledToTop = optionsContainer.scrollTop > 0;
if (
!ScrolledToBottom &&
optionsContainer.scrollHeight > optionsContainer.clientHeight
) {
maskImage =
'linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%)';
}
if (ScrolledToTop && !ScrolledToBottom) {
maskImage =
'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%)';
}
if (ScrolledToBottom) {
maskImage =
'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%)';
}
}
parentContainerscroll.style.maskImage = maskImage;
};
updateMask();
window.addEventListener('resize', updateMask);
optionsContainer.addEventListener('scroll', updateMask);
new MutationObserver(updateMask).observe(optionsContainer, {
childList: true,
subtree: true,
});
}
const topInfoText = question.querySelector('.topInfo');
if (topInfoText && topInfoText.textContent) {
if (topInfoText.textContent.trim().length > 0) {
topInfoText.style.display = 'block';
} else {
topInfoText.style.display = 'none';
}
}
});
const dropdowns = document.querySelectorAll(
'.questionnaire__dropdownContainer'
);
dropdowns.forEach(dropdown => {
const dropdownButton = dropdown.querySelector(
'.questionnaire__dropdownButton'
);
dropdownButton.addEventListener('click', () => {
const isExpanded =
dropdownButton.getAttribute('aria-expanded') === 'true';
dropdownButton.setAttribute('aria-expanded', !isExpanded);
if (isExpanded) {
dropdown.classList.remove('active');
} else {
dropdown.classList.add('active');
}
});
});
});
document.addEventListener('DOMContentLoaded', function() {
const loadingBar = document.querySelector('.loading-bar');
const thankyouSection = document.querySelector('.thankyou_wrapper');
if (thankyouSection) {
const observer = new IntersectionObserver(
entries => {
if (entries[0].isIntersecting) {
loadingBar.style.width = '100%';
observer.disconnect();
}
},
{ threshold: 0.5 }
);
observer.observe(thankyouSection);
}
});
@import 'node_modules/@glidejs/glide/src/assets/sass/glide.core';
/* stylelint-disable*/
.questionnaire {
width: 100%;
//min-height: 57rem;
overflow: hidden;
justify-content: center;
margin: 0 auto;
position: relative;
transition: margin-top 0.8s cubic-bezier(0.83, 0, 0.17, 1);
&.inline-component {
border-radius: 8px;
}
&.expanded {
z-index: 220;
}
.community-input{
font-size: 20px;
}
.register-text {
font-family: 'FS Dillon';
font-size: 21.6px;
font-weight: 700;
line-height: var(--fontHeadlineXSLineHeight);
letter-spacing: 0.0011em;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
}
.register-subtext {
font-family: FS Dillon;
color: #E9EBF1 !important;
text-align: center;
font-size: 18px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 24px !important;
letter-spacing: 0.049px !important;
}
.all-questions__single:nth-child(-n+2) .register-subtext.info.answerTip {
border-bottom: 1px solid #1E438E;
padding-bottom: 3%;
}
.all-questions__single:nth-child(n+3) .register-subtext.info.answerTip {
border-bottom: none;
}
.register-subtext-thankyou{
font-family: FS Dillon;
color: #E9EBF1 !important;
font-size: 21.6px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 24px !important;
letter-spacing: 0.049px !important;
margin-top: 8px;
width: 67%;
}
.register-subtext.info.additionalInfo{
font-size: 16px !important;
line-height: 20px !important;
letter-spacing: 0.029px !important;
}
.loading-bar-container {
position: relative;
width: 192px;
height: 5px;
background-color: #FFFFFF;
margin-top: 16px;
border-radius: 4px;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
}
.loading-bar {
width: 0;
height: 100%;
background-color: #E1261C;
transition: width 3s ease-out;
}
.iscloseVisible{
display: block !important;
}
.iscloseInvisible{
display: none !important;
}
.isVisible{
display: flex !important;
}
.isInvisible{
display: none !important;
}
.continueLink{
@extend .register-subtext;
border: 2px solid #E9EBF1;
min-width: 50%;
max-width: 100%;
text-decoration: none;
border-radius: 4px;
padding: 2px 8px;
margin-top: 0.5rem;
background: none;
cursor: pointer;
}
.line-break{
display: none;
}
.overlay-hidden {
opacity: 0;
transform: translateY(-100%);
transition: all 0.8s linear;
display: none;
}
.questionNumbers{
position: relative;
}
.icon-smalldash{
position: absolute;
left: -28px;
top: 0;
width: 20px;
height: 20px;
object-fit: contain;
display: none;
}
.mobileBtnNext{
display: block;
}
.desktopBtnNext{
display: none;
}
.cta--efl {
text-transform: unset;
font-family: 'FS Dillon';
font-size: 1.6rem;
background-color: #DD221A;
color: #FFFFFF;
}
&__wrapper {
//height: 57rem;
height: 100vh;
display:flex;
align-items: center;
justify-content: center;
transition: height 0.8s cubic-bezier(0.83, 0, 0.17, 1);
overflow: hidden;
&.enlarged-image {
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 110;
&::before {
transform: translateY(-100%);
transition: transform 0.8s linear;
}
&::after {
transform: translateY(100%);
transition: transform 0.8s linear;
}
.promo-background {
filter: blur(1px);
}
.progress-bar-line {
opacity: 1;
transition: opacity 0.8s;
transition-delay: 1.5s;
}
.close-btn {
opacity: 1;
transition: opacity 0.8s;
transition-delay: 1.5s;
}
}
#edit-profile-preference{
text-transform: unset;
font-family: 'FS Dillon';
font-size: 1.6rem;
background-color: #DD221A;
color: #FFFFFF;
&:hover {
background-color: $white;
color: $blue;
}
}
picture {
.promo-background {
position: absolute;
height: 100%;
z-index: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
object-fit: cover;
}
}
}
&__overlay {
width: 100%;
position: relative;
display: flex;
margin: 0 auto;
z-index: 2;
//height: 57rem;
opacity: 1;
transform: translateY(0);
transition: all 0.8s linear;
&--wrapper {
display: flex;
align-items: center;
flex-direction: column;
margin: auto auto;
position: initial;
z-index: 2;
color: $white;
text-align: center;
gap:1rem;
width: 90%;
// img {
// margin-bottom: 1.6rem;
// width: 4rem;
// height: 4.8rem;
// }
// h2 {
// @extend .efl-heading-1-hp;
// @include text-limit(2);
// margin-bottom: 0.8rem;
// max-width: 31.7rem;
// }
.title-text {
font-family: 'FS Dillon';
font-size: 37.3px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.082px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
}
p {
@extend .efl-p-large;
@include text-limit(3);
letter-spacing: 0.02em;
color: $light-blue;
}
.cta {
width: 100%;
max-width: 26.3rem;
border: none;
line-height: 1.8rem;
letter-spacing: 0.02em;
margin-top: 1.6rem;
&:hover {
background-color: $white;
color: $red;
}
}
}
}
button {
color: $white;
}
&__container {
max-width: 124.4rem;
margin: 0 auto;
padding-bottom: 5rem;
}
&__sign-in {
@include rte();
background-size: cover;
background-position: left bottom;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
&__content {
h2,
h3,
p {
max-width: 46.3rem;
}
p {
font-size: 1.8rem !important;
line-height: 2.4rem !important;
}
ul {
padding-left: 0;
}
ul li {
display: flex;
gap: 2rem;
align-items: center;
&::marker {
content: '';
}
&::before {
content: '';
display: block;
background-image: url('./assets/images/Tick.svg');
background-repeat: no-repeat;
background-size: cover;
width: 3rem;
height: 3rem;
}
}
.efl-category-title {
&--desktop {
display: none;
}
}
}
&--inner {
h1,
h2,
h3,
h4,
h5,
a,
li {
color: $white;
}
p {
color: $light-blue;
}
a:hover {
color: $white;
cursor: pointer;
}
margin: 0 auto;
grid-template-columns: 1fr 1fr;
justify-content: space-between;
align-items: center;
max-width: 100%;
&.benefits {
.progressive-profile__sign-in__content {
border-right: none;
&.thanks-screen {
padding: 0 3.2rem;
}
}
.not-today {
text-align: center;
color: $white;
opacity: 0.7;
}
}
}
&__cards {
display: flex;
overflow-x: scroll;
gap: 1.6rem;
height: 100%;
padding-left: 3.2rem;
.efl-carousel-card {
min-width: 20rem;
margin: 0;
}
&::-webkit-scrollbar {
width: 0.2rem;
}
.registration {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2rem;
}
}
&__registration {
display: flex;
justify-content: center;
flex-direction: column;
gap: 2rem;
&--links {
display: flex;
flex-direction: column;
gap: 2rem;
.cta {
width: 100%;
min-width: 22.8rem;
text-decoration: none;
max-width: none;
&:hover {
text-decoration: none;
}
}
.sign-in-cta {
border: 0.2rem solid $white;
background-color: rgba(255, 255, 255, 0.1);
&:hover {
background-color: $white;
color: $blue;
}
}
.sign-up-cta {
border: none;
&:hover {
color: $white;
}
}
}
}
&:not(.benefits) {
.progressive-profile__sign-in--inner {
padding: 0 3.2rem;
}
}
.progressive-profile__questions--list__navigation--up-down {
margin-top: 0;
margin-right: 3.2rem;
}
}
&__questions {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: $white;
overflow: hidden;
&--container {
position: relative;
.close-btn {
content: '';
cursor: pointer;
// display: block;
position: absolute;
width: 4rem;
height: 4rem;
top: 2.3rem;
right: 3.2rem;
background: url('./assets/images/close-onboard.svg') no-repeat;
background-size: cover;
border: none;
z-index: 2;
opacity: 0;
}
}
&--list {
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-position: left bottom;
opacity: 0;
transform: translateY(100%);
transition: all 0.8s linear;
&.expanded {
min-height: calc(100vh - 1.1rem);
opacity: 1;
transform: translateY(0);
transition: all 0.8s linear;
&::after {
filter: blur(2px);
}
}
.glide-carousel__pagination {
margin-top: 2.4rem;
padding-bottom: 3.2rem;
}
.all-questions {
position: relative;
max-height: 100vh;
.question {
color: $white;
display: flex;
align-items: center;
//@extend .efl-heading-3;
font-family: 'FS Dillon';
font-style: normal;
font-size: 31.1px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.048px;
span {
background: url('./assets/images/arrow-next-white.svg') no-repeat
center right;
display: inline-block;
padding-right: 2.4rem;
font-size: 1.8rem;
line-height: 1.6rem;
margin-right: 0.8rem;
}
}
.cta.personalisationNext {
height: 4.4rem;
max-width: none;
width: 100%;
border: none;
border-radius: 0.2rem;
@extend .efl-p-small;
&:hover {
background-color: $white;
color: $blue;
}
&:disabled,
&[aria-disabled='true'] {
background-color: rgba(236, 238, 243, 0.5);
color: $white;
cursor: default;
&:hover {
background-color: rgba(236, 238, 243, 0.5);
color: $white;
}
}
}
.info {
@extend .efl-p-small;
color: $light-blue;
margin-bottom: 1.6rem;
text-align: left !important;
}
&__question-wrap {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.8rem;
}
&__questions-sector {
display: flex;
flex-direction: column;
justify-content: center;
}
&__single {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
&__index {
font-family: 'FS Dillon';
font-size: 11.26px;
font-weight: 700;
line-height: 16px;
letter-spacing: 0.901px;
color: #E9EBF1;
margin-bottom: 2%;
display: flex;
align-items: center;
gap: 8px;
@extend .efl-category-title;
}
&--boxes {
position: relative;
display: flex;
align-items: center;
.outsideborder {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 4px;
border: 2px solid #aebde6;
padding: 10px 58px;
box-sizing: border-box;
margin-bottom: 12px;
transition: background-color 0.3s ease, border-color 0.3s ease;
font-family: FS Dillon;
font-weight: 400;
line-height: 24px;
text-align: left;
cursor: pointer;
&:hover {
background-color: #E9EBF1;
border-color: #FFFFFF;
color: #041C39;
}
}
input[type="checkbox"]:checked + .outsideborder,
input[type="radio"]:checked + .outsideborder {
background-color: #E9EBF1;
border-color: #FFFFFF;
color: #041C39;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
font-size: 2rem;
}
input[type="radio"] + label {
font-size: 1.8rem;
}
input[type="radio"],
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 24px;
height: 24px;
border: 2px solid #AAB0C0;
background-color: transparent;
transition: background-color 0.3s ease, border-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
transform: translate(20px, -5px);
position: absolute;
cursor: pointer;
&:hover {
background-color: #E9EBF1;
border-color: #041C39;
color: #041C39;
}
&:hover + .outsideborder {
background-color: #E9EBF1;
border-color: #FFFFFF;
color: #041C39;
}
}
input[type="radio"] {
border-radius: 50%;
}
input[type="checkbox"] {
border-radius: 4px;
}
input[type="checkbox"]:checked::before {
content: "";
display: block;
width: 5px;
height: 11px;
border: solid #041C39;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
margin-top: -2px;
}
input[type="checkbox"]:checked {
background-color: transparent;
border-color: #041C39;
}
input[type="radio"]:checked::before {
content: "";
width: 12px;
height: 12px;
background-color: #041C39;
border-radius: 50%;
}
input[type="radio"]:checked {
border-color: #041C39;
}
}
&--answers {
position: relative;
input[type='checkbox'] {
position: absolute;
width: 1.8rem;
height: 1.8rem;
top: 0.5rem;
left: 1.3rem;
border: 0.1rem solid $light-blue;
-webkit-appearance: none;
appearance: none;
}
input[type='checkbox']:checked {
background-image: url('./assets/images/bundle-tick-option-icon.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: none;
}
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
padding-left: 1.2rem;
}
label {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.4rem 1.2rem;
border: 0.2rem solid $white;
border-radius: 0.4rem;
margin-bottom: 0.8rem;
padding-left: 4rem;
transition: background-color 0.2s ease-in-out;
cursor: pointer;
@extend .efl-p-medium;
}
input:checked + label {
background-color: $white;
color: $blue;
}
}
&--options {
display: flex;
flex-direction: column;
width: auto;
max-width: none;
.cta.personalisationNext {
height: 4.4rem;
max-width: none;
width: 100%;
border: none;
border-radius: 0.2rem;
margin-top: 1.6rem;
@extend .efl-p-small;
&:hover {
background-color: $white;
color: $blue;
}
&:disabled,
&[aria-disabled='true'] {
background-color: rgba(236, 238, 243, 0.5);
color: $white;
cursor: default;
&:hover {
background-color: rgba(236, 238, 243, 0.5);
color: $white;
}
}
}
}
&--alert {
display: none;
align-items: center;
max-width: fit-content;
border-radius: 0.4rem;
padding: 0.6rem 2.3rem 0.6rem 1.6rem;
background-color: $white;
color: $blue;
line-height: 2.4rem;
letter-spacing: 0;
@extend .efl-heading-6;
&.active {
display: flex;
margin: 1.6rem 0 2.4rem 0;
}
&::before {
content: '';
display: block;
background: url('./assets/images/alert-icon.svg') no-repeat center;
width: 1.8rem;
height: 1.8rem;
margin-right: 1rem;
}
}
}
&__feedback {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 100%;
max-width: 50.1rem;
margin: 0 auto;
min-height: 100vh;
&--right-icon {
width: 9.6rem;
height: 9.6rem;
margin: 0 auto;
margin-bottom: 1.6rem;
}
&--wrong-icon {
width: 9.6rem;
height: 9.6rem;
margin: 0 auto;
margin-bottom: 1.6rem;
}
h3 {
color: #fff;
margin-bottom: 0.8rem;
@extend .efl-heading-2;
}
p {
color: #b7c5e9;
margin-bottom: 1.6rem;
@extend .efl-p-medium;
}
.feedbackNext {
margin: 0 auto;
width: 100%;
max-width: 31.1rem;
border: none;
&:hover {
color: $crest-blue;
background-color: $white;
}
}
}
&__video-wrap {
iframe {
width: 100%;
height: calc(56.25vw);
}
}
&__video-poster {
display: none;
}
&__player {
display: none;
}
&__video-thumbnail {
button {
display: block;
position: relative;
border: none;
background: transparent;
cursor: pointer;
width: 100%;
padding: 0;
&::after {
content: '';
background: url(./assets/images/bundled-play-button.svg) no-repeat
center;
display: block;
position: absolute;
left: 0;
width: 5.2rem;
height: 5.2rem;
bottom: 0;
border: 0;
border-radius: 0;
}
img {
width: 100%;
object-fit: cover;
}
}
}
.question-video {
.all-questions__single--section {
max-width: none;
}
.all-questions__questions-sector {
flex-direction: column;
}
.all-questions__question-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: none;
flex-direction: column;
justify-content: center;
gap:24px;
}
}
}
&__navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
margin-top: 1.2rem;
&--up-down {
position: initial;
display: flex;
margin-top: 0.2rem;
button {
height: 4.2rem;
width: 4.2rem;
border: 0.2rem solid $white;
border-radius: 0.4rem;
background-color: rgba(255, 255, 255, 0.1);
background-image: url('./assets/images/caret-white.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 1.1rem 0.6rem;
cursor: pointer;
&:hover {
background-color: rgba(183, 197, 233, 0.5);
}
&[aria-disabled='true'] {
border: none;
background-color: rgba($light-blue, 0.5);
cursor: default;
}
}
.previous {
margin-right: 0.8rem;
transform: rotate(180deg);
}
}
}
.all-questions,
.bundled-learning-promo__questions--list__navigation {
width: 100%;
z-index: 99;
.all-questions__single {
max-width: 87.5rem;
margin: 0 auto;
padding: 0 3.2rem;
}
.progressive-profile__sign-in {
max-width: 111.4rem;
margin: 0 auto;
}
}
}
}
.progress-bar-line {
width: 100%;
height: 0.5rem;
background-color: $grey-light;
border-radius: 1rem;
position: relative;
left: 0;
bottom: 0;
display: block;
opacity: 0;
span {
height: 0.2rem;
background-color: $red;
border-radius: 1rem;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
display: inline-block;
}
}
progress {
background-color: $grey-light;
&::-webkit-progress-bar {
background-color: $grey-light;
}
&::-webkit-progress-value {
background-color: $red;
transition: width ease-in 0.3s;
}
&::-moz-progress-bar {
background-color: $red;
transition: all ease-in 0.3s;
}
}
@media screen and (max-width: 1199px) {
&__questions {
&--list {
&__navigation {
&--up-down {
position: relative;
right: 0;
order: 1;
margin-top: 2.8rem;
justify-content: end;
}
}
}
}
// &__logo {
// display: block;
// }
// &__logo-mobile {
// display: none;
// }
}
// large-screen
@media screen and (min-width: $mq-large) {
&__overlay {
//height: 44rem;
max-width: 67.9rem;
&--wrapper {
h2 {
max-width: 100%;
}
p {
@include text-limit(2);
font-size: 2rem;
line-height: 3.2rem;
}
.cta {
width: 100%;
max-width: 27rem;
}
}
&--details {
p {
&:first-child {
padding-right: 2.4rem;
}
&:last-child {
padding-left: 2.4rem;
}
}
}
}
&__questions {
&--container {
.close-btn {
top: 5.9rem;
right: 5.6rem;
width: 5.1rem;
height: 5.1rem;
}
}
&--list {
&__navigation {
flex-direction: row;
button {
margin-left: auto;
}
.cta.personalisationNext {
max-width: 37.3rem;
}
}
}
}
&__sign-in {
grid-template-columns: 1fr 1fr;
&__content {
min-height: 33.9rem;
align-items: start;
justify-content: center;
display: flex;
flex-direction: column;
}
&__cards {
overflow-x: unset;
justify-content: center;
margin-right: 0;
.efl-carousel-card:hover::before {
margin-top: 2.3rem;
}
}
&--inner {
display: grid;
grid-template-columns: 46.3rem 1fr;
max-width: 113.2rem;
gap: 3.2rem;
}
&--inner.benefits {
min-height: 39.2rem;
max-height: initial;
overflow: initial;
> div:first-child {
border-bottom: none;
p {
font-size: 2rem !important;
line-height: 3.2rem !important;
}
}
> div:last-child {
display: flex;
flex-direction: row;
gap: 3.2rem;
padding: 0;
}
}
&__registration {
flex-direction: column;
gap: 2.6rem;
&--links {
gap: 2rem;
.cta {
min-width: 37.3rem;
}
}
}
.progressive-profile__questions--list__navigation--up-down {
margin-left: 3.6rem;
}
&:not(.benefits) {
.progressive-profile__sign-in--inner {
grid-template-columns: 43.6rem 1fr;
}
.progressive-profile__sign-in--inner h3 {
font-size: 4.2rem;
line-height: 4rem;
letter-spacing: -0.01em;
}
.progressive-profile__questions--list__navigation {
max-width: 90.2rem;
margin: 0 auto;
}
}
}
.all-questions {
.question {
font-weight: 700;
font-size: 47.4px;
line-height: 52px;
margin-bottom: 0.8rem;
letter-spacing: 0.074px;
}
.info {
font-size: 1.8rem;
letter-spacing: 0.02em;
}
&__questions-sector {
flex-direction: row;
}
&__question-wrap {
width: 100%;
max-width: 37.3rem;
align-items: flex-end;
display: flex;
flex-direction: column;
justify-content: center;
gap:1.8rem;
}
&__single {
max-width: 75% !important;
&__index {
font-size: 15px;
line-height: 20px;
letter-spacing: 1.2px;
color: #AEBDE6;
}
&--answers {
input[type='checkbox'] {
top: 1rem;
}
label {
font-size: 2rem;
line-height: 3.2rem;
}
}
&--options {
width: 100%;
max-width: 37.3rem;
.cta.personalisationNext {
max-width: 37.3rem;
}
}
&--section {
width: 100%;
max-width: 44.6rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.topInfo, .question{
border-bottom: 1px solid #1E438E;
padding-bottom: 16px;
margin-bottom: 18px;
}
.topInfo {
display: none;
}
}
&__video-wrap {
width: 46.1rem;
height: 27.2rem;
margin-right: 2rem;
iframe {
width: 46.1rem;
height: 27.2rem;
}
}
.question-video {
.all-questions__question-wrap {
flex-direction: row;
}
.bundled-learning-promo__questions--list__navigation {
margin-top: 3.8rem;
}
}
}
&__logo {
display: block !important;
}
&__logo-mobile {
display: none !important;
}
&__overlay--wrapper {
width:auto !important;
}
&__dropdownContainer,
.community-team-input {
margin-top: 9.6rem;
}
.title-text {
font-size: 63.2px !important;
line-height: 64px !important;
letter-spacing: 0.139px !important;
}
.register-text,.register-subtext {
font-size: 26.7px !important;
line-height: 36px !important;
letter-spacing: 0.029px !important;
}
.register-subtext-thankyou{
font-size: 26.7px !important;
line-height: 36px !important;
letter-spacing: 0.029px !important;
width: 100%;
}
.register-subtext.info.additionalInfo{
font-size: 20px !important;
line-height: 24px !important;
letter-spacing: 0.029px !important;
}
.all-questions__single--boxes input[type="radio"] + label {
font-size: 2rem !important;
}
.all-questions__single:nth-child(-n+2) .register-subtext.info.answerTip {
border-bottom: none;
}
.all-questions__questions-sector {
gap: 3.2rem;
}
.line-break{
display: block !important;
}
.mobileBtnNext{
display: none !important;
}
.desktopBtnNext{
display: block !important;
}
.icon-smalldash{
display: block !important;
}
.all-questions__single--questionaire-outerscroll {
max-height: 45rem !important;
}
}
&__logo {
display: none;
}
&__logo-mobile {
display: block;
}
.parentcontainer {
width: 100%;
}
.all-questions__single--questionaire-outerscroll {
max-height: 30rem;
overflow-y: auto;
padding-right: 2%;
}
.all-questions__single--questionaire-outerscroll::-webkit-scrollbar {
width: 3px;
padding-left: 20px;
}
.all-questions__single--questionaire-outerscroll::-webkit-scrollbar-thumb {
background: #aebde6;
cursor: pointer;
}
.all-questions__single--questionaire-outerscroll::-webkit-scrollbar-track {
-webkit-border-radius: 1rem;
border-radius: 1rem;
}
.questionnaire__dropdownContainer {
position: relative;
width: 100%;
.questionnaire__dropdownButton {
width: 100%;
height: 48px;
padding: 12px;
gap: 10px;
border-radius: 2px;
border: 2px solid #AEBDE6;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
font-size: 20px;
box-sizing: border-box;
color: #4F6074;
font-family: FS Dillon;
}
.arrowIcon {
width: 16px;
height: 16px;
margin-left: 100px;
}
.questionnaire__dropdownList {
display: none;
position: absolute;
left: 0;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
max-height: 185px;
overflow: scroll;
&::-webkit-scrollbar {
width: 6px;
border-radius: 1rem;
}
&::-webkit-scrollbar-thumb {
background: #aebde6;
cursor: pointer;
border-radius: 1rem;
}
&::-webkit-scrollbar-track {
border-radius: 1rem;
}
}
.dropdownItem {
padding: 10px;
font-size: 18px;
cursor: pointer;
font-family: FS Dillon;
color: #041C39;
font-size: 20px;
font-weight: 400;
line-height: 24px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
outline: none;
position: relative;
&:focus {
outline: none;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d1e7dd;
z-index: -1;
}
}
}
&.active{
.questionnaire__dropdownList{
display: block;
}
.arrowIcon {
transform: rotate(180deg);
}
}
}
.thankyou_wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
//position: relative;
flex-direction: column;
overflow: hidden;
.content-area {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
width: 90%;
max-width: 400px;
}
.ball-image,.line-image {
display: block;
}
.image-area {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1.5rem;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bg-image-mobile {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.title-text {
font-family: FS Dillon;
font-size: 37.3px;
font-weight: 700;
line-height: var(--fontHeadlineLLineHeight);
letter-spacing: 0.0022em;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
margin: -0.5rem;
}
.info-text {
font-family: FS Dillon;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.0027em;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #AEBDE6;
padding: 0;
}
@media (min-width: $mq-large) {
.wrapper {
flex-direction: row;
}
.content-area {
position: relative;
width: auto;
max-width: none;
}
.bg-image {
display: block;
}
.bg-image-mobile {
display: none;
}
.title-text {
font-size: 63.2px;
}
.register-text,.register-subtext {
font-size: 26.7px;
line-height: 36px !important;
letter-spacing: 0.029px !important;
}
.line-break{
display: block !important;
}
.info-text {
font-size: 26.7px;
}
}
}
}
/* Laptop Standard */
@media (min-width: 1600px) and (max-width: 1919px) {
.questionnaire .all-questions__single{
max-width: 65% !important;
}
}
/* Laptop Large */
@media (min-width: 1920px) {
.questionnaire .all-questions__single{
max-width: 57% !important;
}
}
<section class="questionnaire" data-behavior="end-to-end" data-fanid="{{fanid}}" data-destination="{{destinationurl}}" data-iscontinuebutton={{iscontinuebuttonvisible}}>
<div class="questionnaire__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="{{smallimage}}">
<source media="(min-width: 820px)" srcset="{{bigimage}}">
<img src="{{bigimage}}" class="promo-background" alt="">
</picture>
<div class="questionnaire__overlay">
<div class="questionnaire__overlay--wrapper">
<img src="{{mylearning}}" alt="" class="questionnaire__logo">
<img src="{{mylearningmobile}}" alt="" class="questionnaire__logo-mobile">
<h2 class="title-text" data-inprogress-title="{{inprogress-title}}" data-completed-title="{{completed-title}}">{{title}}
</h2>
<p class="register-text">{{signuptext}}</p>
<p class="register-subtext">To personalise your platform,<br class="line-break"/>
take three minutes to complete the questions below</p>
<button class="cta cta--efl " id="edit-profile-preference" data-edit-cta="EDIT answers" aria-label="start now to personalize your answers">{{startText}}</button>
</div>
</div>
<div class="questionnaire__questions" role="dialog" aria-modal="true">
<div class="questionnaire__questions--container">
<progress value="1" class="progress-bar-line"></progress>
<button class="close-btn {{#if isCloseButtonsVisible}}iscloseVisible{{else}}iscloseInvisible{{/if}}" tabindex="-1" aria-label="close the profile preferences">
<span class="visually-hidden">Close dialog</span>
</button>
<div class="questionnaire__questions--list">
<div class="all-questions">
{{#each questions-list}}
<div class="all-questions__single" data-questions-type="{{question-type}}">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="questionNumbers">
<svg class="icon-smalldash" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
</svg>
<div class="all-questions__single__index">
Question 01/02
</div>
</div>
<p class="register-subtext info topInfo">{{info}}</p>
<div class="question" data-question-id="{{id}}">
{{question}}</div>
<p class="register-subtext info answerTip">{{answer-tip}}</p>
<p class="register-subtext info additionalInfo">{{additinal-info}}</p>
<div class="all-questions__single--alert" role="alert">{{../alert-message}}</div>
</div>
<div class="all-questions__question-wrap">
{{#if answer-type.text}}
{{render '@input-container' }}
{{/if}}
{{#unless answer-type.text}}
{{#if answer-type.select}}
<div class="questionnaire__dropdownContainer">
<button class="questionnaire__dropdownButton" aria-haspopup="true" aria-expanded="false">
{{#if dropdownButtonText}}{{dropdownButtonText}}{{else}}Select an option{{/if}}
<img src="/assets/example-content/downarrow.svg" alt="arrow" class="arrowIcon" />
</button>
<ul class="questionnaire__dropdownList" role="menu">
{{#each answers}}
<li id="{{id}}" name="{{name}}" data-option-id="{{id}}" data-skip-to="{{skipTo}}" class="dropdownItem" role="menuitem" tabindex="-1">
{{value}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#unless answer-type.select}}
<div class="parentcontainer">
<ul class="all-questions__single--questionaire-outerscroll">
{{#each answers}}
<div class="all-questions__single--boxes"
data-option-id="{{id}}">
{{#if ../answer-type.checkbox}}
<input name="{{name}}" data-skip-to="{{skipTo}}" type="checkbox" class="multi-answer" id="{{id}}"
value="{{value}}" {{#if checked}}checked{{/if}} tabindex="-1">
{{/if}}
{{#if ../answer-type.radio}}
<input name="{{name}}" data-skip-to="{{skipTo}}" type="radio" class="single-answer" id="{{id}}"
value="{{value}}" {{#if checked}}checked{{/if}} tabindex="-1">
{{/if}}
<label for="{{id}}" class="outsideborder">{{value}}</label>
</div>
{{/each}}
</ul>
</div>
{{/unless}}
{{/unless}}
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true"
aria-label="next preference" data-cta-text="Next">Next</button>
</div>
</div>
<div class="questionnaire__questions--list__navigation {{#if ../isNavigationsButtonsVisible}}isVisible{{else}}isInvisible{{/if}}">
<div class="questionnaire__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous preference"></button>
<button aria-disabled="true" class="next" aria-label="next preference"></button>
</div>
</div>
</div>
{{/each}}
<div class="questionnaire__sign-in benefits">
<div class="questionnaire__sign-in--inner benefits">
<div class="thankyou_wrapper">
<div class="content-area">
<div class="title-text">{{thankyou_text}}</div>
<div class="register-subtext-thankyou">
Using the answers you provided<br class="line-break"/>
we are setting up your personalised dashboard
</div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
{{#if iscontinuebuttonvisible}}
<button id="continueBtn" class="continueLink">
{{continuebtntext}}
</button>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>