`;
quiz.options.forEach((opt, j) => {
r += `
`;
});
r += `
`;
});
return r;
}
const SB_029DM = {
init: function () {
this.mainCSS();
this.mainJS();
this.goalJS();
},
mainCSS: function () {
let styles = document.createElement('style');
styles.setAttribute('type', 'text/css');
document.head.appendChild(styles).textContent = `
.r-hero-main, #home-hero-fw {
display: none ;
}
.r-embed-quiz {
background-image: url(https://splitbase.s3.ca-central-1.amazonaws.com/Leaf-Top-Left.png), url(https://splitbase.s3.ca-central-1.amazonaws.com/Top-Curve-Image.png), url(https://pass-your-test.s3.amazonaws.com/spoonful+of+brown+pills+1.png), url(https://pass-your-test.s3.amazonaws.com/LeafLeftCenter.png);
background-position: right bottom, left top, left bottom, left 120px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 375px auto, 100% 220px, 280px auto, 365px auto;
padding-bottom: 80px; padding-top: 55px; width: 100%;
}
.r-eq-head { margin-bottom: 55px; font-family: Source Sans Pro; font-weight: 600; font-size: 34px; line-height: 130%; text-align: center; text-transform: uppercase; color: #FFFFFF; text-shadow: 0px 0px 20px rgb(0 0 0 / 60%); }
.r-eq-body { width: 800px; height: auto; margin: 0 auto; display: none; animation: fade-out 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }
.r-eqb-q-container { width: 100%; display: flex; flex-direction: column; align-items: center; background: #FFFFFF; border: 1px solid #DEE7D7; border-radius: 4px; padding-bottom: 20px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08); }
.r-eqb-q-no { height: 50px; background: #78AF49; border-radius: 40px; font-family: Source Sans Pro; font-weight: normal; font-size: 24px; line-height: 120%; display: flex; align-items: center; color: #FAFAFA; justify-content: center; padding: 0 35px; margin-top: -25px; }
.r-eqb-question { font-family: Source Sans Pro; font-weight: normal; font-size: 20px; line-height: 120%; letter-spacing: 0.25px; color: #78AF49; text-align: center; margin-top: 20px; }
.r-eqb-discount { background: #EFF9E8; border: 2px dashed #78AF49; box-sizing: border-box; padding: 5px 20px; font-family: Source Sans Pro; font-weight: bold; font-size: 24px; line-height: 120%; text-align: center; letter-spacing: 1px; color: #78AF49; margin-top: 15px; margin-bottom: 10px; }
.r-eqb-o-container { display: flex; flex-wrap: wrap; justify-content: space-between; }
.r-eqb-options { width: 390px; height: 48px; background: #FFFFFF; border: 1px solid #DEE7D7; box-sizing: border-box; border-radius: 4px; display: flex; align-items: center; margin-top: 20px; cursor: pointer; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08); }
.r-eqb-o-img { width: 18px; height: 18px; margin: 15px 0 15px 15px; }
.r-eqb-o-text { font-family: Source Sans Pro; font-weight: normal; font-size: 18px; line-height: 120%; color: #3A3A3A; margin: 0px 10px; }
.r-eqb-email { width: 60% ; height: 48px ; background: #FFFFFF ; color: #78AF49 ; border: 2px solid #DEE7D7 ; box-sizing: border-box ; border-radius: 4px ; display: flex; align-items: center; margin-top: 20px; padding: 15px ; }
.r-eqb-email::placeholder { font-family: Source Sans Pro; font-weight: normal; font-size: 18px; line-height: 120%; color: rgba(120, 175, 73, 0.5); }
.r-eqb-email:focus-visible { border: 2px solid #78AF49 ; outline: unset; }
.r-eqb-btn-main { width: 100%; display: flex; justify-content: center; }
.r-eqb-btn { margin: 30px 0 0 0; width: 300px; height: 48px; font-size: 18px ; border-radius: 4px ; }
.reqb-add-email { margin: 20px 0 0 0; }
.r-eqbi-u, .r-eqb-options:hover .r-eqbi-s, .r-eqb-options.r-active .r-eqbi-s { display: none; }
.r-eqb-options:hover { background: #78AF49; border: 1px solid #67A036; }
.r-eqb-options:hover .r-eqb-o-text { color: #FAFAFA; }
.r-eqb-options:hover .r-eqbi-u { display: block; }
.r-eqb-options.r-active { background: #78AF49; border: 1px solid #67A036; }
.r-eqb-options.r-active .r-eqb-o-text { color: #FAFAFA; }
.r-eqb-options.r-active .r-eqbi-u { display: block; }
.r-eqq-active { display: block; animation: fade-in 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }
.req-hd { display: block; }
.req-hm { display: none; }
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
.r-eqb-b-container { margin-top: 25px; display: flex; }
.r-eqb-bottom-btn { width: 120px; height: 48px; border-radius: 2px; font-weight: 600; font-size: 18px; line-height: 120%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.r-eqb-b-btn-next { background: #78AF49; color: #FFFFFF; margin-left: auto; }
.r-unselected .r-eqb-b-btn-next { opacity: 0.6; cursor: unset; }
.r-eqb-b-btn-back { border: 1px solid #78AF49; background: #FFFFFF; color: #78AF49; margin-right: auto; }
.r-eqb-b-btn-next .r-eqb-b-text { margin-right: 10px; }
.r-eqb-b-btn-back .r-eqb-b-text { margin-left: 10px; }
.r-eqb-bottom-btn:hover { opacity: .9; }
.r-unselected .r-eqb-bottom-btn:hover { opacity: 0.6; }
.r-eqb-link { font-size: 18px; line-height: 120%; text-decoration-line: underline; color: #78AF49; margin-top: 20px; cursor: pointer; text-align: center; }
@media screen and (max-width: 767px) {
.r-embed-quiz {
background-image: url(https://splitbase.s3.ca-central-1.amazonaws.com/Top-Curve-Image-mobile.png), url(https://splitbase.s3.ca-central-1.amazonaws.com/pyt-mobile-back.png);
background-position: left top, left bottom;
background-repeat: no-repeat, no-repeat;
background-size: 100% 120px, 100% auto;
padding-bottom: 40px; padding-top: 20px;
}
.r-eq-head { width: 90%; margin: 0 auto; margin-bottom: 40px; font-size: 18px; }
.r-eq-body { width: 100%; }
.r-eqb-q-no { font-size: 18px; padding: 0 22px; height: 34px; }
.r-eqb-q-container { width: 90%; margin: 0 auto; padding-bottom: 13px; margin-bottom: 10px; }
.r-eqb-question { font-size: 16px; margin: 10px 20px 0 20px; }
.r-eqb-o-container { flex-wrap: nowrap; flex-direction: column; }
.r-eqb-options { width: 90%; margin: 10px auto; margin-bottom: 0; height: 43px; }
.r-eqb-o-img { height: 15px; width: 15px; }
.r-eqb-o-text { font-size: 16px; }
.r-eqb-email { width: 90% ; height: 43px ; margin: 0 auto ; margin-top: 20px ; }
.r-eqb-email::placeholder { font-size: 18px ; }
.r-eqb-btn { width: 90% ; height: 43px ; }
.req-hd { display: none; }
.req-hm { display: block; }
.r-eqb-b-container { margin-left: 20px; margin-right: 20px; }
.r-eqb-b-img { width: 14px ; height: 12px ; }
.r-eqb-b-text { font-size: 16px; }
.r-eqb-bottom-btn { height: 40px; border-radius: 20px; width: calc(50% - 10px); }
.reqb-add-email { margin: 15px 0 0 20px; }
.r-eqb-link { font-size: 16px; }
}
@media screen and (max-width: 700px) {
.r-embed-quiz { background-size: 100% 145px, 100% auto; }
}
@media screen and (max-width: 360px) {
.r-embed-quiz { background-size: 100% 170px, 100% auto; }
}
`;
},
mainJS: function () {
if(!document.querySelector('.r-embed-quiz')){
let ql = quizArr.length+1;
document.querySelector('#as-seen-on-wrap').insertAdjacentHTML("beforeBegin", `
FIND THE PRODUCT THAT'S BEST FOR YOU AND UNLOCK 20% OFF YOUR ORDER.
`+quizHtml()+`
Question `+ql+` of `+ql+`
Enter your email to unlock your
recommended product and get 20% off.
Thanks for taking part!
As a token of appreciation, please use
the following discount
code at
checkout to get 20% off your order:
CLEAN20
`);
document.querySelectorAll('.r-eqb-options').forEach(el => el.addEventListener("click", function(){
this.closest(".r-eq-body").querySelectorAll('.r-active').forEach(i => i.classList.remove('r-active'));
this.classList.add('r-active');
this.closest('.r-unselected').classList.remove('r-unselected');
}));
document.querySelectorAll('.r-eqb-b-btn-next').forEach(el => el.addEventListener("click", function(){
if(!this.closest(".r-unselected")){
let selIndex = this.closest('.r-eq-body').querySelector('.r-active').getAttribute('data-index');
let pEl = this.closest(".r-eq-body");
let curIndex = parseInt(pEl.id.substr(pEl.id.length - 1));
let nextID = 'r-act-q-'+(curIndex+1);
let nextEl = document.getElementById(nextID);
document.querySelector('.form_quiz #PYTWidget_form #option'+curIndex).options.selectedIndex = selIndex;
pEl.classList.remove("r-eqq-active");
nextEl.classList.add("r-eqq-active");
}
}));
document.querySelectorAll('.r-eqb-b-btn-back').forEach(el => el.addEventListener("click", function(){
let pEl = this.closest(".r-eq-body");
let curIndex = parseInt(pEl.id.substr(pEl.id.length - 1));
let prevID = 'r-act-q-'+(curIndex-1);
let prevEl = document.getElementById(prevID);
pEl.classList.remove("r-eqq-active");
prevEl.classList.add("r-eqq-active");
}));
document.getElementById('r-eq-form').onsubmit = function() {
document.querySelector('.form_quiz #PYTWidget_form #PYT_form_email').value = document.querySelector('.r-eqb-email').value;
let pEl = this.closest(".r-eq-body");
let curIndex = parseInt(pEl.id.substr(pEl.id.length - 1));
let nextID = 'r-act-q-'+(curIndex+1);
let nextEl = document.getElementById(nextID);
pEl.classList.remove("r-eqq-active");
nextEl.classList.add("r-eqq-active");
return false;
};
document.querySelector('.reqb-view-result').addEventListener("click", function(){
document.querySelector('.form_quiz #PYTWidget_form #PYTWidget_form_btn').click();
});
document.querySelector('.r-eqb-link').addEventListener("click", function(){
document.querySelector('.form_quiz #PYTWidget_form #PYTWidget_form_btn').click();
});
}
},
goalJS: function () {
(function pollForHotjar() {
if (window.hj !== undefined) {
hj('trigger', 'sb029dmVariation');
} else {
setTimeout(pollForHotjar, 25);
}
})();
}
};
let SB_029DMPollBreak = 0;
(function SB_029DMPollFor() {
if (document.querySelector('#as-seen-on-wrap')) {
try {
console.log("======= START =======");
console.log("SB_029DM - Embed Quiz on Homepage");
SB_029DM.init();
console.log("======= END =======");
} catch (error) {
console.log("%c " + error, "background: #FFFF00; color: #F62817; font-weight: 600;");
console.log("%c SB_029DM x x x Failed", "background: #FFFF00; color: #F62817; font-weight: 600;");
}
} else if (++SB_029DMPollBreak