/* Add your custom styles here */ body { font-family: 'Marcellus', graphie; background-color: #fff; margin: 0; padding: 0; box-sizing: border-box; }

.quiz-container, .result-container { max-width: 600px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

/* Add more styles as needed */

// Add your quiz questions and options here const questions = [ { question: "Select your favorite color scheme:", options: ["Neutral", "Pastel", "Bold"] }, // Add more questions... ];

let currentQuestion = 0; let userAnswers = [];

// Function to display the current question function displayQuestion() { const quizContainer = document.getElementById('quiz-container'); const currentQ = questions[currentQuestion];

if (currentQuestion < questions.length) {
    // Display the question and options
    let html = `<h2>${currentQ.question}</h2>`;
    currentQ.options.forEach((option, index) => {
        html += `<button onclick="nextQuestion(${index})">${option}</button>`;
    });
    quizContainer.innerHTML = html;
} else {
    // Display the final result
    displayResult();
}

}

// Function to handle user's answer and move to the next question function nextQuestion(answerIndex) { userAnswers.push(answerIndex); currentQuestion++; displayQuestion(); }

// Function to display the final result function displayResult() { const resultContainer = document.getElementById('result-container'); const resultList = document.getElementById('result-list');

// Logic to determine recommended stores based on userAnswers
// Replace the following with your actual logic

const recommendedStores = ["Store1", "Store2", "Store3"];

resultList.innerHTML = recommendedStores.map(store => `<li>${store}</li>`).join('');
resultContainer.style.display = 'block';

}

// Display the first question when the page loads window.onload = displayQuestion;