2022-04-12 08:57:07 -04:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<link rel="stylesheet" href="/frontend_css/style.css?v=1.39" />
|
|
|
|
|
|
<link rel="stylesheet" href="/frontend_css/mobile_styles.css?v=1.39" />
|
|
|
|
|
|
|
|
|
|
|
|
<title>Quiz</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<section id="page1">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row firstRow">
|
|
|
|
|
|
<h1>Create Yours</h1>
|
|
|
|
|
|
<h5><span class="dash"></span>TEST SKIN CARE QUIZ</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row secondRow">
|
|
|
|
|
|
<div class="columns">
|
|
|
|
|
|
<h3 class="heading">
|
|
|
|
|
|
Let’s start our journey
|
|
|
|
|
|
<span class="underlineSpan">just for you</span>.
|
|
|
|
|
|
</h3>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<p class="para">We are experts on skin and skincare actives..</p>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
<button id="beginButton" class="beginButton">LET'S BEGIN!</button>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<button
|
|
|
|
|
|
id="resumeButton"
|
|
|
|
|
|
class="resumeButton"
|
|
|
|
|
|
style="display: none; margin-top: 1em"
|
|
|
|
|
|
>
|
|
|
|
|
|
RESUME QUIZ
|
|
|
|
|
|
</button>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="main-image-container">
|
|
|
|
|
|
<img onerror="handleImageMissing(this)" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page2">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page3">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row headerRow">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="prevBtn"
|
|
|
|
|
|
class="prevBtn nav-item left"
|
|
|
|
|
|
onclick="nextQuestion(true)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
|
|
|
|
|
><img src="/image/left-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div id="identity" class="nav-item bordered">
|
|
|
|
|
|
<div class="createdByDiv">
|
|
|
|
|
|
<!-- Dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="nextBtn"
|
|
|
|
|
|
class="nextBtn nextBtnTop nav-item right"
|
|
|
|
|
|
onclick="nextQuestion()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<button
|
|
|
|
|
|
id="resetQuizButton"
|
|
|
|
|
|
class="resetQuizButton"
|
|
|
|
|
|
style="margin-left: 1em"
|
|
|
|
|
|
>
|
|
|
|
|
|
Reset Quiz
|
|
|
|
|
|
</button>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="questionNavBar"
|
|
|
|
|
|
class="question-nav-bar"
|
|
|
|
|
|
style="
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
padding: 0.5em 0;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
"
|
|
|
|
|
|
></div>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
<div class="row questionRow mtb" id="questionRow">
|
|
|
|
|
|
<h1>
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row noteRow" id="noteRow">
|
|
|
|
|
|
<div class="noteTitle">
|
|
|
|
|
|
<h4>
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="noteDesc">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row answerRow typeText" id="typeText" data-type="1">
|
|
|
|
|
|
<div class="answerInner typeText">
|
|
|
|
|
|
<input type="text" />
|
|
|
|
|
|
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<span class="arrowAnswer control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row answerRow typeNum" id="typeNum" data-type="2">
|
|
|
|
|
|
<div class="answerInner typeNum">
|
|
|
|
|
|
<input type="number" maxlength="4" minlength="4" />
|
|
|
|
|
|
<div class="arrowAnswerBtn nextBtn" onclick="nextQuestion()">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<span class="arrowAnswer control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row answerRow typeMcq" id="typeMcq" data-type="4">
|
|
|
|
|
|
<div class="answerInner">
|
|
|
|
|
|
<!-- dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row answerRow typeMcqi" id="typeMcqi" data-type="5">
|
|
|
|
|
|
<div class="answerInner"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="typeSlide" class="row answerRow typeSlide" data-type="6">
|
|
|
|
|
|
<div class="answerInner">
|
|
|
|
|
|
<div class="imgDiv">
|
|
|
|
|
|
<!-- dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sliderDiv">
|
|
|
|
|
|
<div class="slidecontainer">
|
|
|
|
|
|
<!-- value="1" -->
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<input
|
|
|
|
|
|
type="range"
|
|
|
|
|
|
min="0"
|
|
|
|
|
|
max="100"
|
|
|
|
|
|
class="slider"
|
|
|
|
|
|
id="myRange"
|
|
|
|
|
|
step="any"
|
|
|
|
|
|
/>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sliderRanges">
|
|
|
|
|
|
<!-- dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
class="row answerRow typeSelection"
|
|
|
|
|
|
id="typeSelection"
|
|
|
|
|
|
data-type="7"
|
|
|
|
|
|
>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
<div class="answerInner">
|
|
|
|
|
|
<!-- dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row answerRow typeGeo" id="typeGeo" data-type="8">
|
|
|
|
|
|
<div class="answerInner">
|
|
|
|
|
|
<input id="city" type="search" autocomplete="off" />
|
|
|
|
|
|
<input id="city_id" hidden />
|
|
|
|
|
|
<div id="result"></div>
|
|
|
|
|
|
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<span class="arrowAnswer control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page4">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row headerRow">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="prevBtn"
|
|
|
|
|
|
class="prevBtn nav-item left"
|
|
|
|
|
|
onclick="nextQuestion(true,true)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
|
|
|
|
|
><img src="/image/left-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="nav-item bordered">
|
|
|
|
|
|
<div class="createdByDiv">
|
|
|
|
|
|
<!-- Dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="nextBtn"
|
|
|
|
|
|
class="nextBtn nextBtnTop nav-item right"
|
|
|
|
|
|
onclick="closeResponse()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row customImgRow">
|
|
|
|
|
|
<div class="imgRowInner">
|
|
|
|
|
|
<img src="/frontend_images/JarWithName/Jar.png" alt="" />
|
|
|
|
|
|
<p class="createdByName">
|
|
|
|
|
|
<!-- Dynamic data -->
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page5">
|
|
|
|
|
|
<div class="container center-everything">
|
|
|
|
|
|
<div class="row headerRow">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="prevBtn"
|
|
|
|
|
|
class="prevBtn nav-item left"
|
|
|
|
|
|
onclick="nextQuestion(true,true)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
|
|
|
|
|
><img src="/image/left-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div id="identity" class="nav-item bordered">
|
|
|
|
|
|
<div class="createdByDiv">
|
|
|
|
|
|
<!-- Dynamic data -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="nextBtn"
|
|
|
|
|
|
class="nextBtn nextBtnTop nav-item right"
|
|
|
|
|
|
onclick="closeResponse()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row responseRow">
|
|
|
|
|
|
<div class="responseInner">
|
|
|
|
|
|
<div class="responseHead">
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="responseBody">
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="responseCountdown"
|
|
|
|
|
|
style="
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
|
"
|
|
|
|
|
|
></div>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="weatherApi" data-type="8">
|
|
|
|
|
|
<div class="header">Environmental Profile</div>
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="item" id="humidity">
|
|
|
|
|
|
<span class="info-header">Humidity:</span>
|
|
|
|
|
|
<span class="info-value"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item" id="temp">
|
|
|
|
|
|
<span class="info-header">Temperature:</span>
|
|
|
|
|
|
<span class="info-value"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item" id="sun">
|
|
|
|
|
|
<span class="info-header">Sun:</span>
|
|
|
|
|
|
<span class="info-value"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item" id="pollution">
|
|
|
|
|
|
<span class="info-header">Pollution:</span>
|
|
|
|
|
|
<span class="info-value"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page6">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row finalRow">
|
|
|
|
|
|
<div class="imgDiv">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<img
|
|
|
|
|
|
src="/frontend_images/FinalScreenAnimation/final.gif"
|
|
|
|
|
|
alt="image missing"
|
|
|
|
|
|
/>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="finalDesc">
|
|
|
|
|
|
<h3>Preparing your custom formula...</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="page7">
|
|
|
|
|
|
<div class="container mto">
|
|
|
|
|
|
<div class="row headerRow">
|
|
|
|
|
|
<div id="identity" class="nav-item bordered">
|
|
|
|
|
|
<div class="finalProfileDiv">Final: Skin Profile</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row messageRow">
|
|
|
|
|
|
<div class="messageInner">
|
|
|
|
|
|
<div class="nameDiv">
|
|
|
|
|
|
<h5>
|
|
|
|
|
|
<!-- dynamic data -->
|
|
|
|
|
|
</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="messageDiv">
|
|
|
|
|
|
<h3>Your Skin Profile is Complete!</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="paraDiv">
|
|
|
|
|
|
<p>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
Based on what you’ve shared, your skin is pretty nicely
|
|
|
|
|
|
balanced. We’ll look to reduce your pores, protecting you from
|
|
|
|
|
|
pollution and sealing out toxins. We’ll also target your
|
2022-04-12 08:57:07 -04:00
|
|
|
|
blackheads and tone out your skin for a nice, even look.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="buttonDiv">
|
|
|
|
|
|
<button class="button" onclick="addToCart()">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
YOUR CUSTOM FORMULA
|
|
|
|
|
|
<span id="arrowCustom" class="arrowCustom control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow-white.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="profile-result-container"></div>
|
|
|
|
|
|
<div class="row aboutRow">
|
|
|
|
|
|
<div class="aboutInner">
|
|
|
|
|
|
<div class="aboutDiv">
|
|
|
|
|
|
<h3>About these results</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="paraDiv">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<p>
|
|
|
|
|
|
These results tell us exactly how much support you need in which
|
|
|
|
|
|
areas - Your custom forumlas will be tailored to these
|
|
|
|
|
|
measurements.
|
|
|
|
|
|
</p>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="buttonDiv">
|
|
|
|
|
|
<button class="button" onclick="addToCart()">
|
2025-07-24 22:56:01 +01:00
|
|
|
|
YOUR CUSTOM FORMULA
|
|
|
|
|
|
<span id="arrowCustom" class="arrowCustom control-arrows"
|
|
|
|
|
|
><img src="/image/right-arrow-white.png"
|
|
|
|
|
|
/></span>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="progressBarSection">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row progressBar">
|
|
|
|
|
|
<div id="myBar"></div>
|
|
|
|
|
|
<div class="progressColumnsDiv">
|
|
|
|
|
|
<!-- dynamic data here -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<div class="lds-ring">
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
<div></div>
|
|
|
|
|
|
</div>
|
2025-07-24 22:56:01 +01:00
|
|
|
|
<div
|
|
|
|
|
|
id="terminationOverlay"
|
|
|
|
|
|
style="
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.85);
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="terminationMessage"
|
|
|
|
|
|
style="
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
|
"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="terminationCountdown"
|
|
|
|
|
|
style="color: white; font-size: 2em; text-align: center"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
2022-04-12 08:57:07 -04:00
|
|
|
|
<script src="/frontend_js/jquery.min.js"></script>
|
|
|
|
|
|
<script src="/frontend_js/jquery-2.1.3.js"></script>
|
|
|
|
|
|
<script src="/frontend_js/jquery-ui.js"></script>
|
|
|
|
|
|
<script src="/frontend_js/quiz-test.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
