<h2 style="text-align:center; font-size:28px; margin-bottom:30px;">NOT SURE WHICH WATCH TO CHOOSE?</h2>
<p style="text-align:center; font-size:16px; margin-bottom:40px;">Answer a few quick questions and discover watches that match your style.</p>
<div id="quiz-container" style="max-width:600px; margin:0 auto; padding:30px; background:#fff; border:1px solid #eee; border-radius:12px;">
<div id="quiz-question" style="margin-bottom:30px;">
<h3 id="question-text" style="font-size:20px; margin-bottom:20px;">Who is the watch for?</h3>
<div id="options-list" style="display:flex; flex-direction:column; gap:12px;">
<button onclick="selectOption(0)" style="padding:14px 20px; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:16px; cursor:pointer; text-align:left;">Myself</button>
<button onclick="selectOption(1)" style="padding:14px 20px; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:16px; cursor:pointer; text-align:left;">A gift</button>
</div>
</div>
<div style="display:flex; justify-content:space-between; align-items:center; margin-top:20px;">
<span id="progress" style="color:#888; font-size:14px;">Question 1 of 8</span>
<button id="next-btn" onclick="nextQuestion()" style="padding:12px 24px; background:#ccc; color:#fff; border:none; border-radius:6px; cursor:not-allowed;" disabled>Next →</button>
</div>
</div>
<script>
const questions = [
{
text: "Who is the watch for?",
options: ["Myself", "A gift"]
},
{
text: "What style do you prefer?",
options: ["Classic", "Modern", "Bold", "Sporty", "Minimal", "No preference"]
},
{
text: "What shape do you like?",
options: ["Square", "Round", "Skeleton", "No preference"]
},
{
text: "What size look do you prefer?",
options: ["Smaller & subtle", "Medium & versatile", "Larger & bold", "Not sure"]
},
{
text: "What strap material?",
options: ["Stainless Steel", "Rubber", "Leather", "No preference"]
},
{
text: "Dial colour?",
options: ["Black", "Blue", "Green", "Silver", "Gold", "Any colour"]
},
{
text: "Movement type?",
options: ["Automatic", "Quartz", "No preference", "Not sure"]
},
{
text: "Your budget?",
options: ["Under £30", "£30–£50", "£50–£100", "£100+", "No preference"]
}
];
let currentQ = 0;
let answers = [];
let selectedIndex = null;
function renderQuestion() {
const q = questions[currentQ];
document.getElementById("question-text").textContent = q.text;
document.getElementById("progress").textContent = `Question ${currentQ + 1} of ${questions.length}`;
const list = document.getElementById("options-list");
list.innerHTML = "";
q.options.forEach((opt, i) => {
const btn = document.createElement("button");
btn.textContent = opt;
btn.style = "padding:14px 20px; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:16px; cursor:pointer; text-align:left;";
btn.onclick = () => selectOption(i, btn);
list.appendChild(btn);
});
selectedIndex = null;
document.getElementById("next-btn").disabled = true;
document.getElementById("next-btn").style.background = "#ccc";
document.getElementById("next-btn").style.cursor = "not-allowed";
}
function selectOption(i, btn) {
selectedIndex = i;
answers[currentQ] = questions[currentQ].options[i];
document.querySelectorAll("#options-list button").forEach(b => {
b.style.border = "1px solid #ddd";
b.style.background = "#fff";
});
btn.style.border = "2px solid #000";
btn.style.background = "#f9f9f9";
document.getElementById("next-btn").disabled = false;
document.getElementById("next-btn").style.background = "#000";
document.getElementById("next-btn").style.cursor = "pointer";
}
function nextQuestion() {
if (selectedIndex === null) return;
currentQ++;
if (currentQ >= questions.length) {
showResults();
return;
}
renderQuestion();
}
function showResults() {
document.getElementById("quiz-container").innerHTML = `
<h3 style="text-align:center; font-size:24px; margin-bottom:20px;">🎉 YOUR WATCH MATCHES</h3>
<p style="text-align:center; margin-bottom:30px;">Based on your answers, these watches are perfect for you:</p>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
<a href="/collections/all" style="display:block; padding:20px; border:1px solid #eee; border-radius:8px; text-decoration:none; color:inherit; text-align:center;">
<strong>Shop All Watches</strong><br>
<span style="color:#888;">Browse our full collection</span>
</a>
<a href="/pages/watch-concierge" style="display:block; padding:20px; border:1px solid #000; background:#000; color:#fff; border-radius:8px; text-decoration:none; text-align:center;">
<strong>Ask the Concierge</strong><br>
<span>Get personal help</span>
</a>
</div>
`;
}
</script>