// Weighting is based on number of results you will have
// Each answer can be weighted to multiple results

// Intro background image

const intro_bgimage_desktop = “https://www.refinery29.com/images/11799791.jpg”;
const intro_bgimage_mobile = “https://www.refinery29.com/images/11799790.jpg”;

// Intro headline & dek

const intro_headline = “

Take This Quiz To Discover
Your
Hair Personality

“;
const intro_dek = “

Are you the first to try a new hair trend? Or are you the type to stick to what you know and love? Either way, we’ve partnered with SheaMoisture to help you uncover your approach to hair care — and recommend the absolute best products tailored just for you.

Take our quiz to find out your hair personality.

“;

// Intro sponsor banner

const sponsor_logo_intro = “https://www.refinery29.com/images/11799483.png”;
const sponsor_alt_intro = “CREATED IN PARTNERSHIP WITH SHEA MOISTURE”;
const sponsor_intro = ““;

// Personas sponsor banner

const sponsor_logo_persona = “https://www.refinery29.com/images/11799483.png”;
const sponsor_alt_persona = “CREATED IN PARTNERSHIP WITH SHEA MOISTURE”;
const sponsor_persona = ““;

// Content 1 = Student, 2 = Naturalista, 3 = Scientist

const questions = [

[
‘How often do you switch up your hairstyle?’,
[
[‘Every week, I love trying new looks.’,[3]],
[‘Occasionally, when I see a new trend I like.’,[1]],
[‘Rarely, I prefer sticking to what works for me my natural texture.’,[2]]
],
[
‘https://www.refinery29.com/images/11799405.jpg’,
‘https://www.refinery29.com/images/11799404.jpg’
],
‘color’
],

[
‘How do you feel about heat styling?’,
[
[‘I use it often to try new styles.’,[3]],
[‘I’m learning how to use it properly for best results.’,[1]],
[‘I avoid exposing my hair to heat.’,[2]]
],
[
‘https://www.refinery29.com/images/11799403.jpg’,
‘https://www.refinery29.com/images/11799402.jpg’
],
‘color’
],

[
‘What’s your wash day routine like?’,
[
[‘It’s a time to test new products and techniques.’,[3]],
[‘I follow tutorials to make sure I’m doing it right.’,[1]],
[‘Simple and straightforward—cleanse, condition, and moisturize.’,[2]]
],
[
‘https://www.refinery29.com/images/11799401.jpg’,
‘https://www.refinery29.com/images/11799400.jpg’
],
‘color’
],

[
‘When shopping for hair products, what’s most important to you?’,
[
[‘Flexibility—products that let me create different looks.’,[3]],
[‘Reviews and advice from experts.’,[1]],
[‘Natural ingredients that work with my hair type.’,[2]]
],
[
‘https://www.refinery29.com/images/11799399.jpg’,
‘https://www.refinery29.com/images/11799398.jpg’
],
‘color’
],

[
‘What product type are you most interested in trying?’,
[
[‘Coconut & Hibiscus Curl Enhancing Smoothie’,[2]],
[‘Bond Repair Leave-In Conditioner’,[3]],
[‘Rosemary & Vegan Collagen Strengthening Scalp & Hair Oil’,[1]]
],
[
‘https://www.refinery29.com/images/11799397.jpg’,
‘https://www.refinery29.com/images/11799396.jpg’
],
‘color’
],

[
‘How do you feel about protective styles?’,
[
[‘I love them and try different ones frequently.’,[3]],
[‘I’m curious and still figuring out which ones suit me best.’,[1]],
[‘Rarely or every once in a while.’,[2]]
],
[
‘https://www.refinery29.com/images/11799395.jpg’,
‘https://www.refinery29.com/images/11799394.jpg’
],
‘color’
],

[
‘What’s your approach to hair care knowledge?’,
[
[‘I’m constantly researching new methods and products.’,[3]],
[‘ I take advice from influencers and experts to improve my routine.’,[1]],
[‘ I focus on understanding my own hair’s needs.’,[2]]
],
[
‘https://www.refinery29.com/images/11799393.jpg’,
‘https://www.refinery29.com/images/11799392.jpg’
],
‘color’
],

[
‘How do you respond when a new hair trend emerges?’,
[
[‘I’m one of the first to try it!’,[3]],
[‘I research it and decide if it’s something I want to try.’,[1]],
[‘I stick to what I know works for my hair.’,[2]]
],
[
‘https://www.refinery29.com/images/11799391.jpg’,
‘https://www.refinery29.com/images/11799390.jpg’
],
‘color’
],

[
‘How would you describe your hair journey?’,
[
[‘Experimental—I’m always testing and exploring.’,[3]],
[‘Learning—I’m figuring out what works best for my hair.’,[1]],
[‘Embracing—I focus on maintaining my natural hair health.’,[2]]
],
[
‘https://www.refinery29.com/images/11799389.jpg’,
‘https://www.refinery29.com/images/11799388.jpg’
],
‘color’
]

];

const personas = [
[
‘The Curious Stylist’,
‘You’re The Curious Stylist, whose curious nature means you love exploring hair care, discovering new styles, and unlocking secrets that’ll make your hair thrive. Hair care isn’t just a routine — it’s a form of self-expression. You’re passionate about exploring new styles and learning from others online or in workshops. From natural ingredients to styling techniques, you seek ways to nurture your hair’s health and beauty.’,
‘#9B2424’,
‘https://www.refinery29.com/images/11799437.jpg’,
‘https://www.refinery29.com/images/11799436.jpg’,
‘#9B2424’,
[
[‘Rosemary & Vegan Collagen Strengthening Scalp & Hair Oil’,’RECOMMENDED PRODUCT’,’https://www.refinery29.com/images/11799429.jpg’,’‘]
],
”,
‘#9B2424’
],
[
‘The Naturalista’,
‘You’re The Naturalista — you embrace your unique texture with the utmost care. You draw inspiration from nature, choosing products that not only nourish and protect, but also maintain moisture and enhance texture. With love for your natural hair, you champion your curls, coils, or waves with pride. Your hair is an extension of you; your hair is an expression of your identity.’,
‘#671424’,
‘https://www.refinery29.com/images/11799435.jpg’,
‘https://www.refinery29.com/images/11799434.jpg’,
‘#671424’,
[
[‘Coconut & Hibiscus Curl Enhancing Smoothie’,’RECOMMENDED PRODUCT’,’https://www.refinery29.com/images/11799428.jpg’,’‘]
],
”,
‘#671424’
],
[
‘The Innovative Chameleon’,
‘You’re The Innovative Chameleon, which means you’re always trying out a new style. Your bathroom is your playground for testing new products and styles. Not only are you constantly reinventing your look, but you’re always on the lookout for exciting, hair-healthy launches that’ll allow you to keep switching things up without any damage.’,
‘#883A54’,
‘https://www.refinery29.com/images/11799433.jpg’,
‘https://www.refinery29.com/images/11799432.jpg’,
‘#883A54’,
[
[‘Bond Repair Leave-In Conditioner’,’RECOMMENDED PRODUCT’,’https://www.refinery29.com/images/11799426.jpg’,’‘]
],
”,
‘#883A54’
]
];

// Store the user answers
let userAnswers = [];

// Variables
let SQ,SA;
let PrQ = “”;
let PrA = “”;
let bg = “”;

let slide = 0;

const alpha = new Array(‘A’,’B’,’C’,’D’,’E’,’F’); // Add more if needed

const icon__instagram = “”;
const icon__x = “”;
const icon__facebook = “”;
const icon__tiktok = “”;

function showShare() {

let a = document.querySelectorAll(“.share-bottom-wrapper”)[0];
let b = document.getElementById(“tmp__share-button”);

a.style.display = “block”;

b.style.opacity = “0.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;

const w1 = setTimeout(function () {
clearTimeout(w1);
b.style.display = “none”;
}, 800);

const w2 = setTimeout(function () {
clearTimeout(w2);
a.style.opacity = “1.0”;
a.style.transition = “opacity 0.75s ease-in-out”;
a.style.webkitTransition = “opacity 0.75s ease-in-out”;
}, 100);

}

function hideBGimage(n) {

let trg = n;
let a;
if (window.innerWidth > 1024) {
a = [“pbg” + n];
} else {
a = [“pbg” + n + “_mobile”];
}

let b = document.getElementById(a);
b.style.opacity = “0.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;

const w = setTimeout(function () {
clearTimeout(w);
b.style.display = “block”;
}, 800);

}

function showBGimage(n) {

let trg = n;
let a;
if (window.innerWidth > 1024) {
a = [“pbg” + n];
} else {
a = [“pbg” + n + “_mobile”];
}

let b = document.getElementById(a);
b.style.opacity = “0.0”;
b.style.display = “block”;

const w = setTimeout(function () {
clearTimeout(w);
b.style.opacity = “1.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;
}, 50);

}

function showDots(n) {

/*
let a = document.getElementById(“dots”);

for (let i = 0; i < questions.length; i++) {
let b = ["dot" + i];
let c = document.getElementById(b);
if (i != n) {
c.style.backgroundColor = "var(–dot-bg)";
} else {
c.style.backgroundColor = "var(–dot-selected)";
}
}

if (n == 0) {
const w = setTimeout(function () {
clearTimeout(w);
a.style.opacity = "1.0";
a.style.transition = "opacity 0.5s ease-in-out";
a.style.webkitTransition = "opacity 0.3s ease-in-out";
}, 50);
}
*/

}

const social = "

Join the SheaMoisture community for new products, tips, and stories celebrating beauty, culture, and heritage. Follow us for more!

“;

let social_set, social_set_m;

function setupSocial() {
if (window.innerWidth > 759) {
social_set = social;
social_set_m = “”;
} else {
social_set = “”;
social_set_m = social;
}
}

function setupProducts(n) {

// Target container
const a = document.getElementById(“products__set”);
const b = document.getElementById(“personas__bg-mobile”);
// const c = document.querySelectorAll(“.tmp__nav”)[0];

let products = “

” + social_set;
a.style.display = “flex”;
// a.style.backgroundColor = personas[n][5];

// b.style.backgroundColor = personas[n][8];

//c.style.background = “transparent”;
//c.style.backgroundColor = “transparent”;

}

function switchPersonas(n) {

let a = document.getElementById(“personas__set”);
let b = document.getElementById(“personas__bg”);

a.style.opacity = “0.0”;
a.style.transition = “opacity 0.75s ease-in-out”;
a.style.webkitTransition = “opacity 0.75s ease-in-out”;

b.style.opacity = “0.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;

// Target specific persona bg
hideBGimage(persona);

const w1 = setTimeout(function () {

clearTimeout(w1);
a.innerHTML = “”;
setupPersona(n);

}, 750);

const w2 = setTimeout(function () {

clearTimeout(w2);

a.style.opacity = “1.0”;
a.style.transition = “opacity 0.75s ease-in-out”;
a.style.webkitTransition = “opacity 0.75s ease-in-out”;

b.style.opacity = “1.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;

showBGimage(n);

}, 751);

}

let mobile = false;

function restartQuiz() {
location.reload();
}

function viewPersonasDrop() {

const a = document.getElementById(“personas__set-dropdown”);
const b = document.getElementById(“dropdown__overlay”);

a.style.display = “flex”;
b.style.display = “block”;

const w = setTimeout(function () {
clearTimeout(w);
a.style.opacity = “1.0”;
a.style.transition = “opacity 0.3s ease-in-out”;
a.style.webkitTransition = “opacity 0.3s ease-in-out”;

b.style.opacity = “1.0”;
b.style.transition = “opacity 0.3s ease-in-out”;
b.style.webkitTransition = “opacity 0.3s ease-in-out”;

}, 50);

}

function hidePersonasDrop() {

const a = document.getElementById(“personas__set-dropdown”);
const b = document.getElementById(“dropdown__overlay”);

a.style.opacity = “0.0”;
a.style.transition = “opacity 0.3s ease-in-out”;
a.style.webkitTransition = “opacity 0.3s ease-in-out”;

b.style.opacity = “0.0”;
b.style.transition = “opacity 0.3s ease-in-out”;
b.style.webkitTransition = “opacity 0.3s ease-in-out”;

const w = setTimeout(function () {
clearTimeout(w);
a.style.display = “none”;
b.style.display = “none”;
}, 350);

}

const tempsiteurl = “”;

function setupPersonasDrop(n) {

// Target container
let a = document.getElementById(“personas__set”);
// Create a new div for the question
let elem = document.createElement(‘div’);
// Add a class to the question
elem.setAttribute(“class”,”personas__set-buttons”);
// Add a class to the question
elem.setAttribute(“id”,”personas__set-buttons”);
// Setup element
let drp =”

RESTART QUIZVIEW PERSONALITIES

” + social_set_m;

// Add new div to the target container
a.appendChild(elem);

}

function setUpPersonasSponsor() {

// Target container
let a = document.getElementById(“personas__set”);
// Create a new div for the question
let elem = document.createElement(‘div’);
// Add a class to the question
elem.setAttribute(“class”,”personas__set-sponsor”);
elem.innerHTML = sponsor_persona;

// Add new div to the target container
a.appendChild(elem);

}

function hideQuestions() {
const a = document.getElementById(“questions__set”);
// const b = document.getElementById(“dots”);

const w = setTimeout(function () {
clearTimeout(w);
a.style.display = “none”;
// b.style.display = “none”;
}, 750);
}

function hideQuiz() {
const a = document.getElementById(“questions__set”);
const b = document.getElementById(“questions__bg”);
// const c = document.getElementById(“dots”);
const d = document.getElementById(“tmp”);
a.style.display = “none”;
b.style.display = “none”;
//c.style.display = “none”;
d.style.backgroundImage = “unset”;
}

let persona;

function setupPersona(n) {

setupSocial();

// Target container
const a = document.getElementById(“personas__set”);
const b = document.getElementById(“questions__set”);

// Prep for fade in
a.style.opacity = “0.0”;

// Add the text
a.innerHTML = “

“;

// Show personas set
if (window.innerWidth > 1024) {
a.style.display = “flex”;
} else {
a.style.display = “block”;
}

// BG
let pa = document.getElementById(“personas__bg”);
pa.style.opacity = “0.0”;
pa.style.backgroundColor = personas[n][2];

/* if (window.innerWidth {
counts[item] = (counts[item] || 0) + 1;
if (counts[item] > maxCount) {
mostCommon = item;
maxCount = counts[item];
}
});
return mostCommon;
}

function storeAnswers(e) {
for (let i = 0; i < e.length; i++) {
userAnswers.push(e[i]);
}
}

function showElem(n,e,d) {

let a = ["a" + n + "_" + e];
let b = document.getElementById(a);

b.style.display = "flex";

const w = setTimeout(function () {

clearTimeout(w);
b.style.opacity = "1.0";
b.style.transition = "opacity 0.75s ease-in-out";
b.style.webkitTransition = "opacity 0.75s ease-in-out";
b.style.transitionDelay = d;
b.style.webkitTransitionDelay = d;

}, 50);

}

function showAnswers(n) {

let delay;

for (let i = 0; i 1024) {
bga = [“bg” + slide];
} else {
bga = [“bg” + slide + “_mobile”];
}

let bgb = document.getElementById(bga);

const w1b = setTimeout(function () {
clearTimeout(w1b);

d.style.opacity = “0.0”;
d.style.display = “block”;

bgb.style.opacity = “0.0”;
bgb.style.display = “block”;

}, 450);

const w2 = setTimeout(function () {

clearTimeout(w2);
d.style.opacity = “1.0”;
d.style.transition = “opacity 0.4s ease-in-out”;
d.style.webkitTransition = “opacity 0.4s ease-in-out”;

bgb.style.opacity = “1.0”;
bgb.style.transition = “opacity 0.5s ease-in-out”;
bgb.style.webkitTransition = “opacity 0.5s ease-in-out”;

}, 500);

const w3 = setTimeout(function () {
clearTimeout(w3);
showAnswers(n);
}, 900);

}

function next(n) {
// Get the answer hinting
let a = questions[SQ][1][SA][1];
// Store the hints into the array
storeAnswers(a);
// Show the next question
animQuestions(n);
// Stagger animate the answers
showAnswers(n+1);
// Dots
// showDots(n+1);

// Remove before pulishing
let s = document.getElementById(“temp__arr”);
s.innerHTML = userAnswers;
}

function select(n,e) {

// Store the selected options until next is clicked
SQ = n;
SA = e;

// Hide previous answer
if (PrQ == n) {
for (let i = 0; i < questions[n][1].length; i++) {
// Unselect answers first
let pa = ["a" + n + "_" + i];
let pb = document.getElementById(pa);
pb.style.backgroundColor = "transparent";
}
}

// Select answer
let a = ["a" + n + "_" + e];
let b = document.getElementById(a);
b.style.backgroundColor = "var(–answer-select-color)";
b.style.transition = "backgroundColor 0.2s ease-in-out";
b.style.webkitTransition = "backgroundColor 0.2s ease-in-out";
b.style.transitionDelay = "0s";
b.style.webkitTransitionDelay = "0s";

// Set new one to
PrQ = n;
PrA = e;

// Go next after clicking
const w = setTimeout(function () {
clearTimeout(w);
if (n == questions.length-1) {
finish();
} else {
next(n);
}
}, 500);

}

function createAnswer(n,e) {
// Which div
let a = ["q" + n];
// Target the specific question div
let b = document.getElementById(a);
// Create a new div for the question
let elem = document.createElement('button');
// Add the text
elem.innerHTML = "

“;
// Add an id to the question
elem.setAttribute(“id”,”a” + n + “_” + e);
// Add an id to the question
elem.setAttribute(“class”,”answer__item”);
// Add an id to the question
elem.setAttribute(“onclick”,”select(” + n + “,” + e + “)”);
// Add new div to the target container
b.appendChild(elem);
}

function initAnswers(n) {
for (let i = 0; i < questions[n][1].length; i++) {
createAnswer(n,i);
}
}

function createPersonaBGdesktop(n) {
let a = document.getElementById("personas__bg-desktop");
let b = a.innerHTML;
let c = "

“;
a.innerHTML = b + c;
}

function createPersonaBGmobile(n) {
let a = document.getElementById(“personas__bg-mobile”);
let b = a.innerHTML;
let c = “

“;
a.innerHTML = b + c;
}

function createBGdesktop(n) {
let a = document.getElementById(“questions__bg-desktop”);
let b = a.innerHTML;
let c = “

“;
a.innerHTML = b + c;
}

function createBGmobile(n) {
let a = document.getElementById(“questions__bg-mobile”);
let b = a.innerHTML;
let c = “

“;
a.innerHTML = b + c;
}

function createDots() {
// Target container
//let a = document.getElementById(“dots”);
//let b = “”;

//for (let i = 0; i < questions.length; i++) {
//b += "

“;
//}

// Add the text
//a.innerHTML = b;

}

function createQuestion(n) {
// Target container
let a = document.getElementById(“questions__set”);
// Create a new div for the question
let elem = document.createElement(‘div’);
// Add the text
elem.innerHTML = “

” + questions[n][0] + “

“;
// Add an id to the question
elem.setAttribute(“id”,”q” + n);
// Add a class to the question
elem.setAttribute(“class”,”question__item”);
// Add new div to the target container
a.appendChild(elem);
}

function hideQuestions() {

let a = document.getElementById(“questions__set”);
let b = document.getElementById(“questions__bg”);

a.style.opacity = “0.0”;
a.style.transition = “opacity 0.75s ease-in-out”;
a.style.webkitTransition = “opacity 0.75s ease-in-out”;

b.style.opacity = “0.0”;
b.style.transition = “opacity 0.75s ease-in-out”;
b.style.webkitTransition = “opacity 0.75s ease-in-out”;
b.style.transitionDelay = “0.25s”;
b.style.webkitTransitionDelay = “0.25s”;

const w1 = setTimeout(function () {
clearTimeout(w1);
a.style.display = “none”;
}, 750);

const w2 = setTimeout(function () {
clearTimeout(w2);
b.style.display = “none”;
}, 1000);

}

function processResults() {

let s = document.getElementById(“temp__arr”);
s.innerHTML = userAnswers;

// Get the most common number
let a = calculateMostCommonAnswer(userAnswers);
// Hide last question
hideQuestions();
// Show result
setupPersona(a-1);

}

function finish() {

// Get the answer hinting
let a = questions[SQ][1][SA][1];
// Store the hints into the array
storeAnswers(a);
// Process results
processResults()
}

function initQuestions() {
// Init questions
for (let i = 0; i < questions.length; i++) {
createQuestion(i);
initAnswers(i);
createBGdesktop(i);
createBGmobile(i);
}
// Init personas
for (let pr = 0; pr < personas.length; pr++) {
createPersonaBGdesktop(pr);
createPersonaBGmobile(pr);
}
// Init dots
// createDots();
}

function setupSharing() {

const a = document.querySelectorAll(".share-bottom-wrapper .fa-facebook")[0];
const b = document.querySelectorAll(".share-bottom-wrapper .fa-twitter")[0];
const c = document.querySelectorAll(".share-bottom-wrapper .fa-envelope-o")[0];

a.innerHTML = "”;

b.innerHTML = “”;

c.innerHTML = “”;

}

function startQuiz() {

let t = document.getElementById(“intro__set”);
(t.style.opacity = “0.0”),
(t.style.transition = “opacity 0.6s ease-in-out”),
(t.style.webkitTransition = “opacity 0.6s ease-in-out”);

let b = document.getElementById(“intro__sponsor”);
(b.style.opacity = “0.0”),
(b.style.transition = “opacity 0.6s ease-in-out”),
(b.style.webkitTransition = “opacity 0.6s ease-in-out”);

let qs = document.getElementById(“questions__set”);
qs.style.display = “flex”;

let e = document.getElementById(“q0”);
let i;

if (window.innerWidth > 1024) {
i = document.getElementById(“bg0”);
} else {
i = document.getElementById(“bg0_mobile”);
}

(e.style.opacity = “0.0”),
(e.style.display = “block”),
(i.style.opacity = “0.0”),
(i.style.display = “block”);

let s = setTimeout(function () {
clearTimeout(s),
(qs.style.opacity = “1.0”),
(qs.style.transition = “opacity 0.4s ease-in-out”),
(qs.style.webkitTransition = “opacity 0.4s ease-in-out”),
(e.style.opacity = “1.0”),
(e.style.transition = “opacity 0.4s ease-in-out”),
(e.style.webkitTransition = “opacity 0.4s ease-in-out”),
(i.style.opacity = “1.0”),
(i.style.transition = “opacity 0.4s ease-in-out”),
(i.style.webkitTransition = “opacity 0.4s ease-in-out”),
(t.style.display = “none”),
(b.style.display = “none”),
showAnswers(0);
//showDots(0);
}, 400);
}

function showSite() {
let n = “all 0.5s ease-in-out”,
e = document.getElementById(“tmp-loading”),
i = document.getElementById(“tmp”),
s = setTimeout(function () {
clearTimeout(s),
(e.style.opacity = “0.0”),
(e.style.transition = n),
(e.style.WebkitTransition = n),
(i.style.display = “block”);
}, 1500),
l = setTimeout(function () {
clearTimeout(l),
(e.style.display = “none”),
(i.style.opacity = “1.0”),
(i.style.transition = n),
(i.style.WebkitTransition = n);
}, 2000);
}

function initIntro() {

const a = document.getElementById(“tmp”);
let b;

if (window.innerWidth > 1024) {
b = intro_bgimage_desktop;
} else {
b = intro_bgimage_mobile;
}

a.style.backgroundImage = “url(” + b + “)”;

const c = document.getElementById(“intro__headline”);
c.innerHTML = intro_headline;

const d = document.getElementById(“intro__dek”);
d.innerHTML = intro_dek;

const e = document.getElementById(“intro__sponsor”);
e.innerHTML = sponsor_intro;

}

const t = setTimeout(function () {
clearTimeout(t),
initQuestions(),
//setupSharing(),
initIntro(),
showSite();
}, 100);

Like what you see? How about some more R29 goodness, right here?

Source link