Untitled
(function(){ var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode(' @import url(\'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap\');.cv-course-work { padding: 100px 32px 135px;}.accordian-container { display: flex; max-width: 1080px; margin: 0 auto;}.accordian-container > div { width: 50%;}.cv-course-work .course-heading { margin-bottom: 111px; text-align: center; color: #1D1D1B !important; font-size: 50px; font-style: normal; font-weight: 600; line-height: 85px; letter-spacing: -1px;}.cv-course-work .middle-line { width: 4px !important; height: auto; border-radius: 48px; background: #3A9BFE; margin-left: 32px; margin-right: 32px;}.cv-course-work .accordian-content > div:not(.active) { display: none;}.cv-course-work .option-list .title { display: flex; padding: 38px 30px; align-items: center; gap: 28px; flex: 1 0 0; align-self: stretch; cursor: pointer; color: #93989A !important; font-family: Noto Sans; font-size: 30px; font-style: normal; font-weight: 500; line-height: 24px; /* 80% */}.cv-course-work .option-list .option-box.active .title { border-right: 4px solid #3A9BFE; background: #F5F7FF; color: #3A9BFE !important;}.cv-course-work .content-heading { color: #1D1D1B !important; font-family: \'Inter\', sans-serif; font-size: 32px; font-style: normal; font-weight: 500; line-height: 185.523%; /* 59.367px */}.cv-course-work .content-para { margin-top: 15px; margin-bottom: 32px; color: #6D6D6D; font-family: \'Inter\', sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 180%; /* 43.2px */}.cv-course-work .content-list li { color: #6D6D6D; font-family: \'Inter\', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 180%; position: relative; padding-left: 46px;}.cv-course-work .content-list li:before { width: 30px; height: 30px; background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/tick.svg\'); left: 0px; top: 4px; content: \'\'; position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;}.cv-course-work .content-button { display: flex; width: 300px; height: 60px; padding: 10px 16px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; background: #F12B3E; margin-top: 32px; color: #FFF; font-family: Noto Sans; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.5px;}.cv-course-work .content-list li:not(:last-child) { margin-bottom: 16px;}.cv-course-work .option-list .title .image { width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat;}.cv-course-work .option-list .option-box.active[data-id="option-1"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/introduction-blue.svg\');}.cv-course-work .option-list .option-box[data-id="option-1"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/introduction-gray.svg\');}.cv-course-work .option-list .option-box.active[data-id="option-2"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/course-content-blue.svg\');}.cv-course-work .option-list .option-box[data-id="option-2"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/course-content-gray.svg\');}.cv-course-work .option-list .option-box.active[data-id="option-3"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/tailored-learning-blue.svg\');}.cv-course-work .option-list .option-box[data-id="option-3"] .title .image{ background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/elemis/tailored-learning-gray.svg\');}@media screen and (max-width: 767px) { html body .cv-course-work{ display: none; }}'));document.head.appendChild(style); (function() { var debug = 0; var variation_name = ""; try { function waitForElement(selector, trigger, delayInterval, delayTimeout) { var interval = setInterval(function() { if ( document && document.querySelector(selector) && document.querySelectorAll(selector).length > 0 ) { clearInterval(interval); trigger(); } }, delayInterval); setTimeout(function() { clearInterval(interval); }, delayTimeout); } var introduction = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewoption-box="0 0 28 28" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8004 5.04004H4.20039C2.65384 5.04004 1.40039 6.29349 1.40039 7.84004V19.04C1.40039 20.5866 2.65384 21.84 4.20039 21.84H7.08467L10.3604 24.36L13.6361 21.84H23.8004C25.3469 21.84 26.6004 20.5866 26.6004 19.04V7.84004C26.6004 6.29349 25.3469 5.04004 23.8004 5.04004ZM6.44039 10.92H14.8404V12.32H6.44039V10.92ZM21.5604 15.96H6.44039V14.56H21.5604V15.96Z" fill="#93989A"/> </svg>`; var courseWork = `<div class="cv-course-work"> <div class="container"> <h2 class="course-heading">How does this course work?</h2> <div class="accordian-container"> <div class="accordian-option"> <ul class="option-list"> <li class="option-box active" data-id="option-1"> <p class="title"><span class="image"></span> Introduction</p> </li> <li class="option-box" data-id="option-2"> <p class="title"><span class="image"></span> Course contents</p> </li> <li class="option-box" data-id="option-3"> <p class="title"><span class="image"></span> Tailored learning</p> </li> </ul> </div> <div class="middle-line"></div> <div class="accordian-content"> <div class="option-1 active"> <h2 class="content-heading">Introduction</h2> <p class="content-para">All of our courses are expertly tailored to your learning preferences and schedule by your Study Advisor.</p> <ul class="content-list"> <li>You will learn one-to-one or in small group</li> <li>Courses last anywhere from 10 sessions to 100</li> <li>Courses last between 2 to 10 weeks</li> <li>Courses start from £500</li> </ul> <a class="content-button">Request information</a> </div> <div class="option-2"> <h2 class="content-heading">Course contents</h2> <p class="content-para">The course length and frequency is up to you! However, all of our courses are made up of several key learning streams.</p> <ul class="content-list"> <li>Master English naturally with our 'Watch and Learn' sessions.</li> <li>Enhance vocabulary and pronunciation through our 'Practice and Speak' sessions.</li> <li>Get certified through our check-ins, showcasing your practice and progress without big exams.</li> </ul> <a class="content-button">Request information</a> </div> <div class="option-3"> <h2 class="content-heading">Tailored learning </h2> <p class="content-para">We understand everyone has unique schedules, budgets, and preferences for learning. Ensuring our courses are tailored to your needs is our top priority. Contact our advisors through the link below to discover the best course for you!</p> <ul class="content-list"> <li>Tailor learning to your schedule, budget, and preferences.</li> <li>Personalised approach, your needs come first.</li> <li>Expert guidance, connect with advisors to find the ideal course for your needs.</li> </ul> <a class="content-button">Request information</a> </div> </div> </div> </div> </div>`; /* Variation Init */ function init() { document.querySelector('#main-root > .container.page-components').insertAdjacentHTML('beforebegin', courseWork); var questions = document.querySelectorAll('.accordian-container .title'); // Add a click event listener to each 'question' element questions.forEach(function (question) { question.addEventListener('click', function () { // Remove 'active' class from all 'question' elements var activeQuestion = document.querySelector('.accordian-container .active'); if (activeQuestion) { activeQuestion.classList.remove('active'); } this.parentNode.classList.add('active'); // Use add instead of toggle var id = this.parentNode.getAttribute('data-id'); console.log(id); var activeImage = document.querySelector('.accordian-content .active'); if (activeImage) { activeImage.classList.remove('active'); } document.querySelector('.accordian-content .' + id).classList.add('active'); }); }); document.querySelectorAll('.cv-course-work .accordian-content .content-button').forEach(function(val){ val.addEventListener('click',function(){ document.querySelector('#wse-regions-form-container').scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); }); }); } waitForElement("#main-root > .container.page-components", init, 50, 25000); } catch (e) { if (debug) console.log(e, "error in Test" + variation_name); } })(); })();
Leave a Comment