#cms-quiz {
max-width: 650px;
margin: auto;
padding: 30px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
font-family: "Poppins", sans-serif;
}
.quiz-lang-switch {
text-align: right;
margin-bottom: 15px;
}
.quiz-lang-switch button {
background: #eee;
border: none;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
margin-left: 5px;
}
.quiz-lang-switch button.active {
background: #6c5ce7;
color: white;
}
.quiz-title {
text-align: center;
font-size: 26px;
margin-bottom: 25px;
font-weight: 600;
color: #2c3e50;
}
.quiz-step {
display: none;
animation: fadeIn 0.5s ease;
}
.quiz-step.active {
display: block;
}
.quiz-step h3 {
margin-bottom: 10px;
font-size: 20px;
}
.quiz-step select {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #ddd;
margin-bottom: 20px;
}
.next-step, .finish-step {
width: 100%;
padding: 14px;
background: #6c5ce7;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 17px;
transition: 0.3s;
}
.next-step:hover, .finish-step:hover {
background: #5a4bd1;
transform: translateY(-2px);
}
#quiz-result {
margin-top: 25px;
padding: 20px;
background: #f4f4ff;
border-left: 5px solid #6c5ce7;
border-radius: 12px;
display: none;
font-size: 18px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
🇫🇷 FR
🇬🇧 EN
Quel CMS est fait pour vous ?
Site vitrine
Blog
Boutique en ligne
Plateforme avancée
→
Débutant
Intermédiaire
Avancé
Je ne veux pas toucher à la technique
→
Simple
Très personnalisé
Animations avancées
Fonctionnel avant tout
→
Moins de 200 €
200–500 €
500–1500 €
Plus de 1500 €
→
Oui
Non
Peut-être
Voir mon résultat
/* LANGUAGE SWITCH */
function setQuizLang(lang) {
document.getElementById("cms-quiz").setAttribute("data-lang", lang);
document.querySelectorAll("[data-fr]").forEach(el => {
el.innerHTML = el.getAttribute("data-" + lang);
});
document.querySelectorAll("option").forEach(opt => {
opt.innerHTML = opt.getAttribute("data-" + lang);
});
document.querySelectorAll(".quiz-lang-switch button").forEach(btn => {
btn.classList.remove("active");
});
document.querySelector(".quiz-lang-switch button[onclick=\"setQuizLang('" + lang + "')\"]").classList.add("active");
}
/* STEP NAVIGATION */
document.querySelectorAll(".next-step").forEach(btn => {
btn.addEventListener("click", function() {
let current = this.closest(".quiz-step");
let next = current.nextElementSibling;
current.classList.remove("active");
next.classList.add("active");
});
});
/* CALCULATE RESULT */
function calculateCMS() {
let scores = { wordpress: 0, webflow: 0, shopify: 0, strapi: 0 };
let form = document.querySelector("#cms-quiz");
for (let i = 1; i <= 5; i++) {
let value = form.querySelector("[name='q" + i + "']").value;
scores[value]++;
}
let bestCMS = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
let messages = {
wordpress: "WordPress est le CMS idéal pour vous : flexible, économique et parfait pour les sites vitrines, blogs et PME.",
webflow: "Webflow est fait pour vous : design premium, animations avancées et rendu professionnel.",
shopify: "Shopify est votre meilleur choix : la solution e‑commerce la plus simple et la plus complète.",
strapi: "Strapi (Headless) est recommandé : idéal pour les projets techniques, plateformes et applications modernes."
};
document.getElementById("quiz-result").innerHTML = messages[bestCMS];
document.getElementById("quiz-result").style.display = "block";
/* SEND RESULT TO FORMULATOR */
let hiddenField = document.querySelector("input[name='cms_result']");
if (hiddenField) hiddenField.value = bestCMS;
}
