<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz : Quel est ton style d'amour ?</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f8f5ff;
color: #333;
}
h1 {
color: #8e44ad;
text-align: center;
margin-bottom: 30px;
}
.intro {
text-align: center;
margin-bottom: 30px;
font-style: italic;
color: #666;
}
.question {
background-color: white;
padding: 15px;
margin-bottom: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.question-text {
margin-bottom: 10px;
font-weight: 500;
}
.options {
display: flex;
justify-content: space-around;
margin-top: 10px;
}
.option {
cursor: pointer;
padding: 8px 20px;
border: 1px solid #ddd;
border-radius: 20px;
transition: all 0.3s;
}
.option:hover {
background-color: #f0f0f0;
}
.option.selected {
background-color: #8e44ad;
color: white;
border-color: #8e44ad;
}
.submit-btn {
display: block;
width: 200px;
margin: 30px auto;
padding: 12px;
background-color: #8e44ad;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #7d32a8;
}
.results {
display: none;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-top: 30px;
}
.results h2 {
color: #8e44ad;
text-align: center;
margin-bottom: 20px;
}
.progress-container {
width: 100%;
background-color: #ddd;
border-radius: 10px;
margin: 20px 0;
height: 10px;
}
.progress-bar {
height: 10px;
border-radius: 10px;
background-color: #8e44ad;
width: 0%;
transition: width 0.5s;
}
.newsletter-form {
display: none;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-top: 30px;
text-align: center;
}
.newsletter-form h2 {
color: #8e44ad;
margin-bottom: 20px;
}
.newsletter-form p {
margin-bottom: 20px;
line-height: 1.6;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
text-align: left;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.form-group input:focus {
outline: none;
border-color: #8e44ad;
box-shadow: 0 0 5px rgba(142, 68, 173, 0.3);
}
.newsletter-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #8e44ad;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
.newsletter-btn:hover {
background-color: #7d32a8;
}
.privacy-note {
font-size: 12px;
color: #777;
margin-top: 15px;
}
.locked-results {
text-align: center;
padding: 20px;
background-color: rgba(142, 68, 173, 0.1);
border-radius: 8px;
margin-bottom: 20px;
}
.locked-icon {
font-size: 40px;
color: #8e44ad;
margin-bottom: 10px;
}
/* Nouvelle visualisation de résultats */
.love-diagram {
width: 400px;
height: 400px;
margin: 0 auto 40px;
position: relative;
}
.love-diagram svg {
width: 100%;
height: 100%;
}
.love-diagram .shape {
fill: rgba(142, 68, 173, 0.6);
stroke: #8e44ad;
stroke-width: 2;
transition: all 0.5s;
}
.love-diagram .center-point {
fill: #8e44ad;
}
.love-diagram .axis-line {
stroke: #ccc;
stroke-width: 1;
stroke-dasharray: 5, 5;
}
.love-diagram .axis-label {
font-size: 14px;
font-weight: bold;
fill: #8e44ad;
text-anchor: middle;
}
.love-type {
margin-bottom: 20px;
padding: 15px;
background-color: #f8f5ff;
border-left: 4px solid #8e44ad;
border-radius: 4px;
}
.love-type h3 {
color: #8e44ad;
margin-top: 0;
margin-bottom: 5px;
}
.love-type .score {
display: inline-block;
margin-bottom: 10px;
font-weight: bold;
color: #8e44ad;
}
.love-types-list {
margin-top: 40px;
}
</style>
</head>
<body>
<h1>Quiz : Quel est ton style d'amour ?</h1>
<div class="intro">
<p>Réponds par VRAI ou FAUX à chaque affirmation. À la fin, découvre quel style d'amour (selon la typologie de John Alan Lee) te correspond le plus.</p>
</div>
<div class="progress-container">
<div class="progress-bar" id="progress"></div>
</div>
<div id="quiz-container">
<!-- Questions will be inserted here by JavaScript -->
</div>
<button class="submit-btn" id="submit-btn" disabled>Voir mes résultats</button>
<div class="newsletter-form" id="newsletter-form">
<h2>Découvre ton style d'amour !</h2>
<div class="locked-results">
<div class="locked-icon">🔒</div>
<p>Ton profil est prêt ! Inscris-toi à notre newsletter pour y accéder.</p>
</div>
<p>Reçois gratuitement des conseils personnalisés sur les relations amoureuses et des analyses psychologiques basées sur ton style d'amour dominant.</p>
<form id="email-form">
<div class="form-group">
<label for="name">Prénom</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit" class="newsletter-btn" id="newsletter-btn">Accéder à mes résultats</button>
</form>
<p class="privacy-note">Nous respectons ta vie privée. Tu peux te désinscrire à tout moment.</p>
</div>
<div class="results" id="results">
<h2>Ton profil amoureux</h2>
<div class="love-diagram" id="love-diagram">
<!-- SVG diagram will be inserted here by JavaScript -->
</div>
<div id="dominant-type">
<!-- Dominant type description will be inserted here -->
</div>
<div class="love-types-list" id="love-types-list">
<h3>Détail de tes styles d'amour</h3>
<!-- All style descriptions will be inserted here -->
</div>
</div>
<script>
// Quiz data
const questions = [
{ id: 1, text: "L'attirance physique est essentielle pour que je tombe amoureux(se).", category: "eros" },
{ id: 2, text: "Je crois au coup de foudre et à l'amour immédiat.", category: "eros" },
{ id: 3, text: "J'ai besoin d'une connexion émotionnelle et sexuelle forte pour être épanoui(e).", category: "eros" },
{ id: 4, text: "Je cherche l'intensité et la passion dans mes relations.", category: "eros" },
{ id: 5, text: "Je préfère que l'amour naisse d'une amitié solide.", category: "storge" },
{ id: 6, text: "La confiance et la complicité sont plus importantes que la passion.", category: "storge" },
{ id: 7, text: "J'ai besoin de temps pour développer des sentiments amoureux.", category: "storge" },
{ id: 8, text: "Je valorise la stabilité dans mes relations amoureuses.", category: "storge" },
{ id: 9, text: "J'aime séduire et jouer au jeu de l'amour sans trop m'attacher.", category: "ludus" },
{ id: 10, text: "Je me lasse rapidement quand une relation devient trop sérieuse.", category: "ludus" },
{ id: 11, text: "Il m'arrive de fréquenter plusieurs personnes à la fois.", category: "ludus" },
{ id: 12, text: "Je préfère éviter les engagements trop profonds.", category: "ludus" },
{ id: 13, text: "Je choisis mes partenaires en fonction de leur compatibilité avec ma vision de la vie.", category: "pragma" },
{ id: 14, text: "Je pense que l'amour doit être raisonnable et réfléchi.", category: "pragma" },
{ id: 15, text: "Je considère les qualités pratiques (valeurs, projets, mode de vie) avant de m'engager.", category: "pragma" },
{ id: 16, text: "Je vois l'amour comme un partenariat basé sur des objectifs communs.", category: "pragma" },
{ id: 17, text: "Je suis souvent envahi(e) par mes émotions dans mes relations.", category: "mania" },
{ id: 18, text: "J'ai peur d'être abandonné(e) ou rejeté(e) par la personne que j'aime.", category: "mania" },
{ id: 19, text: "Je peux devenir jaloux(se) ou dépendant(e) en amour.", category: "mania" },
{ id: 20, text: "J'ai besoin de me sentir aimé(e) intensément pour être rassuré(e).", category: "mania" },
{ id: 21, text: "Je suis prêt(e) à faire passer les besoins de l'autre avant les miens.", category: "agape" },
{ id: 22, text: "J'aime sans attendre nécessairement quelque chose en retour.", category: "agape" },
{ id: 23, text: "Je pense que l'amour, c'est avant tout se mettre au service de l'autre.", category: "agape" },
{ id: 24, text: "Je pardonne facilement à la personne que j'aime, même après une blessure.", category: "agape" }
];
const styleDescriptions = {
eros: {
name: "Eros - L'amour passion",
description: "Tu es attiré par la beauté physique et l'attirance immédiate. Pour toi, l'amour est une expérience intense, passionnée et souvent irrésistible. Tu recherches une connexion émotionnelle et physique forte avec ton partenaire. Ce style d'amour se caractérise par une forte alchimie et une attraction qui peut être ressentie dès les premiers instants.",
color: "#FF5E78"
},
storge: {
name: "Storge - L'amour amitié",
description: "Tu préfères que l'amour se développe lentement, à partir d'une amitié solide. Tu valorises la confiance, la complicité et la stabilité plus que la passion immédiate. Tes relations sont généralement durables et fondées sur des bases solides. Ce style d'amour se caractérise par sa stabilité et son évolution progressive.",
color: "#4E9F3D"
},
ludus: {
name: "Ludus - L'amour-jeu",
description: "Pour toi, l'amour est un jeu plaisant, sans engagement profond. Tu aimes séduire et être séduit(e), mais tu peux te lasser quand les choses deviennent trop sérieuses. Tu préfères garder une certaine liberté dans tes relations. Ce style d'amour se caractérise par la légèreté et un certain détachement émotionnel.",
color: "#FFB830"
},
pragma: {
name: "Pragma - L'amour raisonné",
description: "Tu abordes l'amour de façon pratique et rationnelle. Tu choisis tes partenaires en fonction de critères précis et de compatibilité avec ton mode de vie. Pour toi, l'amour est un partenariat basé sur des objectifs communs et une vision partagée. Ce style d'amour se caractérise par sa dimension réfléchie et sa recherche de compatibilité.",
color: "#3A86FF"
},
mania: {
name: "Mania - L'amour obsessionnel",
description: "Tu vis l'amour de façon intense, parfois même obsessionnelle. Tes émotions peuvent être envahissantes, avec des craintes d'abandon et de la jalousie. Tu as besoin de preuves d'amour constantes pour te sentir en sécurité dans ta relation. Ce style d'amour se caractérise par son intensité émotionnelle et sa dimension parfois anxieuse.",
color: "#9B5DE5"
},
agape: {
name: "Agape - L'amour altruiste",
description: "Tu aimes de façon désintéressée et généreuse. Tu es prêt(e) à faire passer les besoins de l'autre avant les tiens et à pardonner facilement. Ton amour est un don de soi, sans attente de retour équivalent. Ce style d'amour se caractérise par sa bienveillance et son absence de calcul.",
color: "#00BBF9"
}
};
// Variables to track quiz state
let answers = {};
let currentQuestionIndex = 0;
let quizResults = null;
// DOM elements
const quizContainer = document.getElementById('quiz-container');
const submitBtn = document.getElementById('submit-btn');
const newsletterForm = document.getElementById('newsletter-form');
const resultsSection = document.getElementById('results');
const loveDiagram = document.getElementById('love-diagram');
const dominantType = document.getElementById('dominant-type');
const loveTypesList = document.getElementById('love-types-list');
const progressBar = document.getElementById('progress');
const emailForm = document.getElementById('email-form');
// Initialize the quiz
function initQuiz() {
answers = {};
currentQuestionIndex = 0;
quizResults = null;
newsletterForm.style.display = 'none';
resultsSection.style.display = 'none';
submitBtn.disabled = true;
loadQuestion(currentQuestionIndex);
updateProgressBar();
}
// Load a specific question
function loadQuestion(index) {
if (index >= questions.length) {
return;
}
const question = questions[index];
quizContainer.innerHTML = `
<div class="question" data-id="${question.id}">
<div class="question-text">${question.id}. ${question.text}</div>
<div class="options">
<div class="option" data-value="vrai">VRAI</div>
<div class="option" data-value="faux">FAUX</div>
</div>
</div>
`;
// Add event listeners to options
const options = document.querySelectorAll('.option');
options.forEach(option => {
option.addEventListener('click', () => {
selectOption(option);
});
});
// If this question has been answered before, highlight the selected option
const questionId = question.id;
if (answers[questionId] !== undefined) {
const selectedValue = answers[questionId] ? 'vrai' : 'faux';
const selectedOption = document.querySelector(`.option[data-value="${selectedValue}"]`);
if (selectedOption) {
selectedOption.classList.add('selected');
}
}
}
// Handle option selection
function selectOption(selectedOption) {
// Remove 'selected' class from all options in this question
const options = document.querySelectorAll('.option');
options.forEach(opt => opt.classList.remove('selected'));
// Add 'selected' class to the clicked option
selectedOption.classList.add('selected');
// Save the answer
const questionId = parseInt(selectedOption.closest('.question').dataset.id);
const value = selectedOption.dataset.value === 'vrai';
answers[questionId] = value;
// Move to next question after a short delay
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
loadQuestion(currentQuestionIndex);
} else {
// Enable submit button when all questions are answered
submitBtn.disabled = false;
}
updateProgressBar();
}, 500);
}
// Update progress bar
function updateProgressBar() {
const progress = (currentQuestionIndex / questions.length) * 100;
progressBar.style.width = `${progress}%`;
}
// Calculate results
function calculateResults() {
const categories = {
eros: 0,
storge: 0,
ludus: 0,
pragma: 0,
mania: 0,
agape: 0
};
// Count true answers for each category
questions.forEach(question => {
if (answers[question.id] === true) {
categories[question.category]++;
}
});
return categories;
}
// Show newsletter form
function showNewsletterForm() {
// Calculate and store results
quizResults = calculateResults();
// Hide quiz container and button
quizContainer.style.display = 'none';
submitBtn.style.display = 'none';
// Show newsletter form
newsletterForm.style.display = 'block';
// Scroll to newsletter form
newsletterForm.scrollIntoView({ behavior: 'smooth' });
}
// Generate spider/radar chart SVG
function generateLoveDiagramSVG(results) {
const styles = Object.keys(results);
const maxScore = 4; // Maximum score for each category
const centerX = 200;
const centerY = 200;
const radius = 150;
const angleStep = (Math.PI * 2) / styles.length;
// Calculate points for the shape based on scores
const points = styles.map((style, index) => {
const score = results[style];
const percentage = score / maxScore;
const angle = index * angleStep - Math.PI / 2; // Start from top (subtract 90 degrees)
const x = centerX + radius * percentage * Math.cos(angle);
const y = centerY + radius * percentage * Math.sin(angle);
return { x, y, style, score };
});
// Create SVG content
let svg = `<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">`;
// Draw axis lines from center to edges
styles.forEach((style, index) => {
const angle = index * angleStep - Math.PI / 2;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
svg += `<line class="axis-line" x1="${centerX}" y1="${centerY}" x2="${x}" y2="${y}" />`;
// Add axis labels slightly beyond the edge
const labelX = centerX + (radius + 20) * Math.cos(angle);
const labelY = centerY + (radius + 20) * Math.sin(angle);
svg += `<text class="axis-label" x="${labelX}" y="${labelY}"
style="fill: ${styleDescriptions[style].color}">
${styleDescriptions[style].name.split(' - ')[0]}
</text>`;
});
// Draw concentric circles for scale
for (let i = 1; i <= 4; i++) {
const circleRadius = (radius * i) / 4;
svg += `<circle cx="${centerX}" cy="${centerY}" r="${circleRadius}"
fill="none" stroke="#eee" stroke-width="1" stroke-dasharray="2,2" />`;
}
// Create the shape polygon
let polygonPoints = points.map(p => `${p.x},${p.y}`).join(' ');
svg += `<polygon class="shape" points="${polygonPoints}" />`;
// Add dots at each point
points.forEach(point => {
svg += `<circle cx="${point.x}" cy="${point.y}" r="4"
fill="${styleDescriptions[point.style].color}" />`;
});
// Add center point
svg += `<circle class="center-point" cx="${centerX}" cy="${centerY}" r="3" />`;
svg += `</svg>`;
return svg;
}
// Show results
function showResults() {
if (!quizResults) {
return;
}
// Hide newsletter form
newsletterForm.style.display = 'none';
// Find dominant style
let dominantStyle = Object.keys(quizResults).reduce((a, b) => quizResults[a] > quizResults[b] ? a : b);
// In case of a tie, choose the first one in the order they appear
const maxScore = quizResults[dominantStyle];
const tiedStyles = Object.keys(quizResults).filter(style => quizResults[style] === maxScore);
if (tiedStyles.length > 1) {
const styleOrder = ['eros', 'storge', 'ludus', 'pragma', 'mania', 'agape'];
dominantStyle = tiedStyles.sort((a, b) => styleOrder.indexOf(a) - styleOrder.indexOf(b))[0];
}
// Generate and insert the love diagram
loveDiagram.innerHTML = generateLoveDiagramSVG(quizResults);
// Show dominant style description
dominantType.innerHTML = `
<div class="love-type" style="border-left-color: ${styleDescriptions[dominantStyle].color}">
<h3>${styleDescriptions[dominantStyle].name}</h3>
<span class="score">${quizResults[dominantStyle]}/4</span>
<p>${styleDescriptions[dominantStyle].description}</p>
</div>
`;
// Clear and repopulate all styles list
loveTypesList.innerHTML = '<h3>Détail de tes styles d\'amour</h3>';
// Display all styles sorted by score
Object.keys(quizResults)
.sort((a, b) => quizResults[b] - quizResults[a])
.forEach(style => {
const styleElement = document.createElement('div');
styleElement.className = 'love-type';
styleElement.style.borderLeftColor = styleDescriptions[style].color;
styleElement.innerHTML = `
<h3>${styleDescriptions[style].name}</h3>
<span class="score">${quizResults[style]}/4</span>
<p>${styleDescriptions[style].description}</p>
`;
loveTypesList.appendChild(styleElement);
});
// Show results section
resultsSection.style.display = 'block';
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// Event listeners
submitBtn.addEventListener('click', showNewsletterForm);
emailForm.addEventListener('submit', function(e) {
e.preventDefault();
showResults();
});
// Initialize the quiz when the page loads
initQuiz();
</script>
</body>
</html>
