html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Love Quiz 💖</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container" id="name-screen">
<h1>💕 Welcome to the Love Quiz 💕</h1>
<p>Enter your name and your partner's name to begin!</p>
<input type="text" id="yourName" placeholder="Your Name">
<input type="text" id="partnerName" placeholder="Partner's Name">
<button onclick="startQuiz()">Start Quiz 💘</button>
</div>
<div class="container hidden" id="quiz-screen">
<h2 id="question-text"></h2>
<div id="options-container"></div>
</div>
<div class="container hidden" id="result-screen">
<h2>💝 Love Compatibility Result 💝</h2>
<p id="love-percent"></p>
<p id="message"></p>
<button onclick="restartQuiz()">Try Again 🔄</button>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* General Styling */
body {
background-color: #ffebee;
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
/* Containers */
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
max-width: 400px;
margin: 50px auto;
}
/* Hidden Class */
.hidden {
display: none;
}
/* Title */
h1 {
color: #e91e63;
text-shadow: 0 0 10px #ff4081;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let userName = "";
let partnerName = "";
let loveScore = 0;
let currentQuestionIndex = 0;
const questions = [
{ question: "1️⃣ What's the best Valentine's gift?", options: ["💖 Love", "🍫 Chocolates", "🌹 Roses", "🎁 Surprise"] },
{ question: "2️⃣ Ideal romantic date?", options: ["🌅 Sunset Walk", "🎬 Movie Night", "🍝 Dinner Date", "🏖️ Beach Picnic"] },
{ question: "3️⃣ How do you express love?", options: ["💌 Writing a letter", "💬 Texting", "💖 Hugs", "🎁 Gifting"] },
{ question: "4️⃣ Favorite love song?", options: ["🎶 Pop", "🎻 Classical", "🎸 Rock", "🎤 Love Ballad"] },
{ question: "5️⃣ Best Valentine’s color?", options: ["❤️ Red", "💗 Pink", "💜 Purple", "💛 Gold"] },
{ question: "6️⃣ What makes love last?", options: ["❤️ Trust", "😊 Understanding", "💬 Communication", "🎭 Fun"] },
{ question: "7️⃣ What would you do for love?", options: ["🌎 Travel", "🎶 Write a song", "🎭 Plan a surprise", "💌 Letters"] },
{ question: "8️⃣ Dream Valentine's gift?", options: ["💎 Jewelry", "📖 Love Letter", "🎟️ A Trip", "💐 Flowers"] },
{ question: "9️⃣ Love means?", options: ["💕 Friendship", "💖 Passion", "💍 Commitment", "😊 Happiness"] },
{ question: "🔟 Ideal Valentine's Day?", options: ["🍕 Pizza & Netflix", "🌆 Fancy Dinner", "🎡 Carnival Date", "🏡 Cozy at Home"] }
];
function startQuiz() {
userName = document.getElementById("yourName").value;
partnerName = document.getElementById("partnerName").value;
if (!userName || !partnerName) {
alert("Please enter both names!");
return;
}
document.getElementById("name-screen").classList.add("hidden");
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Ejecutar