feat: complete quiz tasks
This commit is contained in:
Ayobami
+159
-25
@@ -23,10 +23,15 @@
|
||||
Let’s start our journey
|
||||
<span class="underlineSpan">just for you</span>.
|
||||
</h3>
|
||||
<p class="para">
|
||||
We are experts on skin and skincare actives..
|
||||
</p>
|
||||
<p class="para">We are experts on skin and skincare actives..</p>
|
||||
<button id="beginButton" class="beginButton">LET'S BEGIN!</button>
|
||||
<button
|
||||
id="resumeButton"
|
||||
class="resumeButton"
|
||||
style="display: none; margin-top: 1em"
|
||||
>
|
||||
RESUME QUIZ
|
||||
</button>
|
||||
</div>
|
||||
<div class="main-image-container">
|
||||
<img onerror="handleImageMissing(this)" />
|
||||
@@ -46,18 +51,52 @@
|
||||
<section id="page3">
|
||||
<div class="container">
|
||||
<div class="row headerRow">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div id="identity" class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<button
|
||||
id="resetQuizButton"
|
||||
class="resetQuizButton"
|
||||
style="margin-left: 1em"
|
||||
>
|
||||
Reset Quiz
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<div class="row questionRow mtb" id="questionRow">
|
||||
<h1>
|
||||
<!-- dynamic data here -->
|
||||
@@ -80,7 +119,9 @@
|
||||
<div class="answerInner typeText">
|
||||
<input type="text" />
|
||||
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +130,9 @@
|
||||
<div class="answerInner typeNum">
|
||||
<input type="number" maxlength="4" minlength="4" />
|
||||
<div class="arrowAnswerBtn nextBtn" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,7 +155,14 @@
|
||||
<div class="sliderDiv">
|
||||
<div class="slidecontainer">
|
||||
<!-- value="1" -->
|
||||
<input type="range" min="0" max="100" class="slider" id="myRange" step="any" />
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
class="slider"
|
||||
id="myRange"
|
||||
step="any"
|
||||
/>
|
||||
</div>
|
||||
<div class="sliderRanges">
|
||||
<!-- dynamic data -->
|
||||
@@ -121,7 +171,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row answerRow typeSelection" id="typeSelection" data-type="7">
|
||||
<div
|
||||
class="row answerRow typeSelection"
|
||||
id="typeSelection"
|
||||
data-type="7"
|
||||
>
|
||||
<div class="answerInner">
|
||||
<!-- dynamic data -->
|
||||
</div>
|
||||
@@ -133,7 +187,9 @@
|
||||
<input id="city_id" hidden />
|
||||
<div id="result"></div>
|
||||
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,16 +199,28 @@
|
||||
<section id="page4">
|
||||
<div class="container">
|
||||
<div class="row headerRow">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row customImgRow">
|
||||
@@ -169,16 +237,28 @@
|
||||
<section id="page5">
|
||||
<div class="container center-everything">
|
||||
<div class="row headerRow">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div id="identity" class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responseRow">
|
||||
@@ -189,6 +269,15 @@
|
||||
<div class="responseBody">
|
||||
<!-- dynamic data here -->
|
||||
</div>
|
||||
<div
|
||||
id="responseCountdown"
|
||||
style="
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weatherApi" data-type="8">
|
||||
@@ -219,7 +308,10 @@
|
||||
<div class="container">
|
||||
<div class="row finalRow">
|
||||
<div class="imgDiv">
|
||||
<img src="/frontend_images/FinalScreenAnimation/final.gif" alt="image missing" />
|
||||
<img
|
||||
src="/frontend_images/FinalScreenAnimation/final.gif"
|
||||
alt="image missing"
|
||||
/>
|
||||
</div>
|
||||
<div class="finalDesc">
|
||||
<h3>Preparing your custom formula...</h3>
|
||||
@@ -247,13 +339,18 @@
|
||||
</div>
|
||||
<div class="paraDiv">
|
||||
<p>
|
||||
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
|
||||
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
|
||||
blackheads and tone out your skin for a nice, even look.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttonDiv">
|
||||
<button class="button" onclick="addToCart()">
|
||||
YOUR CUSTOM FORMULA <span id="arrowCustom" class="arrowCustom control-arrows"><img src="/image/right-arrow-white.png" /></span>
|
||||
YOUR CUSTOM FORMULA
|
||||
<span id="arrowCustom" class="arrowCustom control-arrows"
|
||||
><img src="/image/right-arrow-white.png"
|
||||
/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,11 +362,18 @@
|
||||
<h3>About these results</h3>
|
||||
</div>
|
||||
<div class="paraDiv">
|
||||
<p>These results tell us exactly how much support you need in which areas - Your custom forumlas will be tailored to these measurements.</p>
|
||||
<p>
|
||||
These results tell us exactly how much support you need in which
|
||||
areas - Your custom forumlas will be tailored to these
|
||||
measurements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttonDiv">
|
||||
<button class="button" onclick="addToCart()">
|
||||
YOUR CUSTOM FORMULA <span id="arrowCustom" class="arrowCustom control-arrows"><img src="/image/right-arrow-white.png" /></span>
|
||||
YOUR CUSTOM FORMULA
|
||||
<span id="arrowCustom" class="arrowCustom control-arrows"
|
||||
><img src="/image/right-arrow-white.png"
|
||||
/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,6 +397,36 @@
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user