<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Qui de nous deux ? ❤️</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 18px;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ffe4ef, #fbc2eb);
color: #75194d;
text-align: center;
}
.card {
background: white;
max-width: 480px;
margin: 15px auto;
padding: 25px 18px;
border-radius: 25px;
box-shadow: 0 8px 25px #d98aaf70;
}
h1 { font-size: 27px; }
.subtitle { line-height: 1.6; }
.level {
display: inline-block;
padding: 8px 14px;
border-radius: 20px;
background: #ffe4ef;
font-weight: bold;
}
#question {
font-size: 21px;
line-height: 1.5;
margin: 24px 0;
}
button {
display: block;
width: 100%;
padding: 16px 12px;
margin: 13px 0;
border: none;
border-radius: 15px;
font-size: 17px;
font-weight: bold;
background: #f8d2e4;
color: #75194d;
cursor: pointer;
}
button:disabled { opacity: 1; }
button.correct { background: #22a95a; color: white; }
button.wrong { background: #ef4444; color: white; }
#feedback {
font-weight: bold;
min-height: 25px;
line-height: 1.5;
}
#next, .restart { background: #e83e8c; color: white; }
.small { font-size: 14px; }
</style>
</head>
<body>
<div class="card" id="card">
<h1>👀❤️ QUI DE NOUS DEUX… ?</h1>
<p class="subtitle">
Bienvenue dans le jeu de <b>LAURAINE et MALICKA</b> 💗<br>
Pour chaque question, choisis la personne qui correspond le mieux !
Pas de triche 😂❤️
</p>
<p>1 = LAURAINE ❤️<br>2 = MALICKA 💗</p>
<p class="small">Choisis ta réponse et découvre si tu as vu juste ! 🥹</p>
<div class="level" id="level"></div>
<p id="counter"></p>
<h2 id="question"></h2>
<div id="answers"></div>
<p id="feedback"></p>
<button id="next" hidden onclick="nextQuestion()">
Question suivante ❤️
</button>
</div>
<script>
const questions = [
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus provoquer les disputes pour rien ? 😩",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus têtue et veut toujours avoir raison ? 😔",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui boude le plus longtemps après une dispute ? 😬",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus faire la victime alors qu’elle a commencé ? 😂",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui dit « laisse-moi » mais veut qu’on insiste ? 🤣",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus susceptible pour les petites choses ?",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus taquiner l’autre jusqu’à l’énerver ? 😆",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus forte pour transformer un petit problème en grand débat ? 😭",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui est la plus jalouse dans le couple ? 😔😤",
correct: 2
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui pose le plus de questions quand l’autre parle à quelqu’un ? 😬",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui fait semblant de ne pas être jalouse alors que ça la dérange ? 😂",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui peut changer d’humeur après avoir vu un simple message ? 🥰💔",
correct: 2
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui aime le plus tester l’amour de l’autre ? 👀",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui peut dire « fais ce que tu veux » alors qu’elle ne veut surtout pas que tu le fasses ? 👏😹",
correct: 1
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui aime le plus l’autre ? 😤❤️",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui réclame le plus d’attention ? 😭",
correct: 1
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui envoie le plus de messages quand l’autre lui manque ? 🙂↔️",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui aime le plus entendre « je t’aime » ? 😭",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui pardonne le plus vite après une dispute ? 😔",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui a le plus peur de perdre l’autre ? 🥺",
correct: 2
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui commence souvent les disputes, puis finit par dire que c’est l’autre ? 😒",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui attend que l’autre fasse le premier pas après une dispute ? 😤",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui peut être fâchée et quand même vouloir un câlin ? ",
correct: 2
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui dit « je m’en fiche » alors qu’elle y pense toute la journée ? 😬",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui revient dire « bébé, tu me manques » après avoir dit qu’elle ne voulait plus parler ? 😭❤️",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui parle le plus de sexe ? 🫠",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui aime le plus les bêtises mais ne veut pas l’avouer ? 😏",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui voudrait passer toute une journée collée à l’autre ? 😭❤️",
correct: 2
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui commence les palabres et finit par proposer un moment très coquin, avec l’accord de l’autre ? 😔🫦",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui est la plus capable de surprendre l’autre avec une initiative très osée, toujours avec son accord ? 😭❤️",
correct: 1
}
];
let index = 0;
let score = 0;
function render() {
const q = questions[index];
document.getElementById("level").textContent = q.level;
document.getElementById("counter").textContent =
"Question " + (index + 1) + " / " + questions.length;
document.getElementById("question").textContent = q.q;
document.getElementById("feedback").textContent = "";
document.getElementById("next").hidden = true;
const box = document.getElementById("answers");
box.innerHTML = "";
["LAURAINE ❤️", "MALICKA 💗"].forEach((name, i) => {
const btn = document.createElement("button");
btn.textContent = (i + 1) + ". " + name;
btn.onclick = () => {
box.querySelectorAll("button").forEach(b => b.disabled = true);
if (i + 1 === q.correct) {
btn.classList.add("correct");
document.getElementById("feedback").textContent =
"Bonne réponse ! 💚🎉";
score++;
} else {
btn.classList.add("wrong");
box.children[q.correct - 1].classList.add("correct");
document.getElementById("feedback").textContent =
"Oups ! Ce n’est pas la bonne réponse 😂❤️";
}
document.getElementById("next").hidden = false;
document.getElementById("next").textContent =
index === questions.length - 1 ? "Voir la fin 💖" : "Question suivante ❤️";
};
box.appendChild(btn);
});
}
function nextQuestion() {
index++;
if (index >= questions.length) {
document.getElementById("card").innerHTML = `
<h1>💖 BRAVO À NOUS ! 💖</h1>
<p>Tu as terminé notre jeu d’amour 🥹❤️</p>
<h2>Je t’aime Mayouuu 🫶</h2>
<p>Maintenant, avoue… laquelle des deux est vraiment la plus provocatrice ? 😂❤️</p>
<p>Tu as trouvé ${score} bonne(s) réponse(s) sur ${questions.length}.</p>
<button class="restart" onclick="location.reload()">Rejouer 💋</button>
`;
} else {
render();
}
}
render();
</script>
</body>
</html>