Where Will We End Up?

by ApexViper14
495 lines7.1 KB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Where Will We End Up?</title>

<style>
*{box-sizing:border-box}

body{
margin:0;
background:#111216;
color:#f5f0e8;
font-family:Arial,sans-serif;
padding:25px 18px;
min-height:100vh
}

.box{
max-width:620px;
margin:auto;
padding:20px 5px 50px
}

.top{
text-align:center;
font-size:11px;
letter-spacing:4px;
color:#999;
margin-bottom:45px
}

.small{
font-size:11px;
letter-spacing:4px;
color:#bca77a;
text-transform:uppercase;
margin-bottom:18px
}

h1{
font-family:Georgia,serif;
font-weight:normal;
font-size:48px;
line-height:1;
margin:0 0 25px
}

h2{
font-family:Georgia,serif;
font-weight:normal;
font-size:30px;
line-height:1.2;
margin:10px 0 30px
}

p{
font-size:18px;
line-height:1.6;
color:#bbb
}

button{
display:block;
width:100%;
margin:12px 0;
padding:18px;
border:1px solid #bca77a;
background:#bca77a;
color:#111;
font-size:14px;
font-weight:bold;
letter-spacing:1px;
cursor:pointer
}

.option{
background:#1b1b1f;
color:#eee;
border-color:#444;
text-align:left;
font-weight:normal;
letter-spacing:0;
line-height:1.4
}

.option:active{
background:#292621
}

.progress{
height:2px;
background:#333;
margin:25px 0 30px
}

.bar{
height:100%;
background:#bca77a;
width:0
}

.center{
text-align:center
}

.hide{
display:none
}

.resultEmoji{
font-size:58px;
margin:20px 0
}

.resultTitle{
font-family:Georgia,serif;
font-size:42px;
line-height:1.05;
margin-bottom:20px
}

.resultBox{
margin-top:35px;
padding:25px 18px;
border:1px solid #806f4d;
background:#18181b
}

.resultBox .small{
margin-bottom:12px
}

.giftTitle{
font-family:Georgia,serif;
font-size:25px;
margin:10px 0 18px
}

.giftText{
font-size:16px;
line-height:1.6;
color:#bbb
}

.heart{
font-size:25px;
margin-top:25px
}
</style>
</head>

<body>

<div class="box">

<div class="top">
OUR NEXT WEEKEND ♡
</div>


<!-- INTRO -->

<div id="intro">

<div class="small">A little mystery</div>

<h1>
Where Will<br>
We End Up?
</h1>

<p>
Eight questions.<br>
Four possible adventures.<br>
One weekend that will become ours.
</p>

<p>
Answer instinctively. Don't overthink anything.
</p>

<button onclick="startQuiz()">
BEGIN THE JOURNEY
</button>

</div>


<!-- QUIZ -->

<div id="quiz" class="hide">

<div class="progress">
<div id="bar" class="bar"></div>
</div>

<div class="small" id="number"></div>

<h2 id="question"></h2>

<div id="answers"></div>

</div>


<!-- RESULT -->

<div id="result" class="hide center">

<div class="small">
THE MOMENT OF TRUTH
</div>

<div class="resultEmoji" id="emoji"></div>

<div class="small">
YOUR WEEKEND IS...
</div>

<div class="resultTitle" id="title"></div>

<p id="description"></p>


<div class="resultBox">

<div class="small">
AND ONE MORE THING...
</div>

<div class="giftTitle">
🎁 YOU WON A BONUS GIFT!
</div>

<div class="giftText">
A custom gold bracelet, engraved with your name in Arabic.
<br><br>
A little reminder of the weekend you chose —
and of us.
</div>

<div class="heart">
♡
</div>

</div>

<p style="font-size:12px;color:#666;margin-top:35px">
Some weekends are planned.<br>
Ours was chosen.
</p>

</div>

</div>


<script>

const questions = [

{
q:"You wake up Saturday with the whole day ahead of you. What sounds most exciting?",
a:[
"Something completely wild that we'll talk about for years",
"A beautiful place where we can slow down and disappear",
"Something luxurious and completely out of the ordinary",
"An adventure where we get to discover something new"
]
},

{
q:"Pick the atmosphere for our weekend.",
a:[
"Energetic & spontaneous",
"Peaceful & romantic",
"Exclusive & glamorous",
"Adventurous & mysterious"
]
},

{
q:"Someone tells you: “I planned a surprise for you. Just trust me.” What do you secretly hope for?",
a:[
"Something completely crazy",
"A beautiful place surrounded by nature",
"Something we normally wouldn't spend money on",
"An experience neither of us has tried before"
]
},

{
q:"Which view would you choose?",
a:[
"A huge open horizon stretching forever",
"Mountains, trees and vineyards",
"A breathtaking panorama from above",
"Crystal-clear water and what lies beneath it"
]
},

{
q:"How much adrenaline do you want?",
a:[
"Maximum. I want to scream.",
"A little, but mostly relaxation.",
"Enough to feel excited, not terrified.",
"Something adventurous and immersive."
]
},

{
q:"It is Saturday night. Which sounds most appealing?",
a:[
"Celebrating an insane day over drinks",
"Wine, great food and a quiet evening together",
"Getting dressed up for an amazing dinner",
"Dinner and drinks after a day full of discoveries"
]
},

{
q:"How do you want to feel when Sunday evening arrives?",
a:[
"Like my adrenaline is still running",
"Completely relaxed and recharged",
"Like I just lived a luxury experience",
"Like I discovered something incredible"
]
},

{
q:"Final question. Don't think. Just choose.",
a:[
"Make me scream",
"Make me disappear",
"Make me feel like we're somewhere extraordinary",
"Take me somewhere I've never been"
]
}

];


const results = [

{
emoji:"🪂",
title:"SKYDIVING!",
description:
"You chose the wildest adventure. Get ready to leave the ground, feel your heart racing and create a memory we'll be talking about for years."
},

{
emoji:"🍷",
title:"OLLER DE MAS!",
description:
"You chose to disappear from normal life for a little while. Mountains, vineyards, beautiful surroundings, great food and time for just us."
},

{
emoji:"🚁",
title:"HELICOPTER RIDE!",
description:
"You chose something extraordinary. A spectacular view, a little luxury and a weekend that definitely won't feel ordinary."
},

{
emoji:"🤿",
title:"UNDERWATER DIVING!",
description:
"You chose adventure and discovery. Something completely different, immersive and unforgettable is waiting for us beneath the water."
}

];


let current=0;

let scores=[
0,
0,
0,
0
];


function startQuiz(){

document.getElementById("intro").classList.add("hide");

document.getElementById("quiz").classList.remove("hide");

showQuestion();

}


function showQuestion(){

let q=questions[current];

document.getElementById("number").innerText=
"QUESTION "+(current+1)+" OF "+questions.length;

document.getElementById("question").innerText=q.q;

document.getElementById("bar").style.width=
((current+1)/questions.length*100)+"%";

let answers=document.getElementById("answers");

answers.innerHTML="";


q.a.forEach(function(answer,index){

let button=document.createElement("button");

button.className="option";

button.innerText=answer;

button.onclick=function(){

chooseAnswer(index);

};

answers.appendChild(button);

});

}


function chooseAnswer(index){

scores[index]++;

current++;


if(current<questions.length){

showQuestion();

}

else{

showResult();

}

}


function showResult(){

let winner=0;


for(let i=1;i<scores.length;i++){

if(scores[i]>scores[winner]){

winner=i;

}

}


let result=results[winner];


document.getElementById("quiz").classList.add("hide");

document.getElementById("result").classList.remove("hide");


document.getElementById("emoji").innerText=result.emoji;

document.getElementById("title").innerText=result.title;

document.getElementById("description").innerText=result.description;

}

</script>

</body>
</html>
Game Source: Where Will We End Up?

Creator: ApexViper14
Libraries: none
Complexity: complex (495 lines, 7.1 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: where-will-we-end-up-apexviper14" to link back to the original. Then publish at arcadelab.ai/publish.