HTML/CSS
JavaScript
Eyewear Quiz
This quiz helps users quickly identify the best eyewear for them, enhancing their shopping experience with personalized recommendations. 🚀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feel Good Contacts Eyewear Quiz</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Quiz Overlay */
#fgc-quiz-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
/* Quiz Container */
#fgc-quiz-container {
background-color: white;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Quiz Header */
#fgc-quiz-header {
padding: 15px;
text-align: center;
position: relative;
border-bottom: 1px solid #eee;
}
#fgc-quiz-title {
font-size: 22px;
color: #333;
margin-bottom: 5px;
}
#fgc-quiz-subtitle {
font-size: 14px;
color: #666;
}
#fgc-quiz-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #666;
}
/* Progress Bar */
#fgc-quiz-progress {
padding: 10px 15px;
}
#fgc-quiz-progress-bar {
height: 5px;
background-color: #e0e0e0;
border-radius: 3px;
}
#fgc-quiz-progress-fill {
height: 100%;
background-color: #ff4747;
width: 20%;
transition: width 0.3s ease;
}
/* Quiz Content */
#fgc-quiz-content {
padding: 15px;
}
.fgc-quiz-question {
display: none;
}
.fgc-quiz-question.active {
display: block;
}
.fgc-quiz-question-title {
font-size: 16px;
margin-bottom: 15px;
color: #333;
}
/* Options Grid */
.fgc-quiz-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 400px) {
.fgc-quiz-options {
grid-template-columns: 1fr;
}
}
.fgc-quiz-option {
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px 10px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
}
.fgc-quiz-option:hover {
border-color: #ff4747;
}
.fgc-quiz-option.selected {
border-color: #ff4747;
background-color: #fff0f0;
}
.fgc-quiz-option i {
font-size: 28px;
color: #555;
margin-bottom: 8px;
}
.fgc-quiz-option.selected i {
color: #ff4747;
}
.fgc-quiz-option-text {
display: block;
font-size: 14px;
margin-top: 5px;
}
/* Navigation */
#fgc-quiz-nav {
padding: 15px;
display: flex;
justify-content: space-between;
border-top: 1px solid #eee;
}
.fgc-quiz-btn {
padding: 10px 15px;
border-radius: 4px;
border: none;
font-size: 14px;
cursor: pointer;
}
#fgc-quiz-prev-btn {
background-color: #e0e0e0;
color: #333;
}
#fgc-quiz-next-btn {
background-color: #ff4747;
color: white;
}
#fgc-quiz-prev-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Results */
#fgc-quiz-results {
display: none;
padding: 20px;
text-align: center;
}
#fgc-quiz-results-title {
font-size: 20px;
margin-bottom: 15px;
}
#fgc-quiz-recommendation {
background-color: #f8f8f8;
border-radius: 6px;
padding: 15px;
margin: 15px 0;
}
#fgc-quiz-products {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
}
.fgc-quiz-product {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.fgc-quiz-product-title {
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.fgc-quiz-product-price {
color: #ff4747;
font-weight: 600;
margin-bottom: 10px;
}
.fgc-quiz-product-btn {
background-color: #ff4747;
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 13px;
}
#fgc-quiz-restart-btn {
margin-top: 15px;
padding: 8px 15px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="fgc-quiz-overlay">
<div id="fgc-quiz-container">
<!-- Quiz Header -->
<div id="fgc-quiz-header">
<h1 id="fgc-quiz-title">Find Your Perfect Eyewear</h1>
<p id="fgc-quiz-subtitle">Take our quick quiz for personalized recommendations</p>
<button id="fgc-quiz-close">×</button>
</div>
<!-- Progress Bar -->
<div id="fgc-quiz-progress">
<div id="fgc-quiz-progress-bar">
<div id="fgc-quiz-progress-fill"></div>
</div>
</div>
<!-- Quiz Content -->
<div id="fgc-quiz-content">
<!-- Question 1 -->
<div class="fgc-quiz-question active" data-question="1">
<h2 class="fgc-quiz-question-title">What type of eyewear are you looking for?</h2>
<div class="fgc-quiz-options">
<div class="fgc-quiz-option" data-value="glasses">
<i class="fas fa-glasses"></i>
<span class="fgc-quiz-option-text">Glasses</span>
</div>
<div class="fgc-quiz-option" data-value="sunglasses">
<i class="fas fa-sun"></i>
<span class="fgc-quiz-option-text">Sunglasses</span>
</div>
<div class="fgc-quiz-option" data-value="contacts">
<i class="fas fa-eye"></i>
<span class="fgc-quiz-option-text">Contact Lenses</span>
</div>
<div class="fgc-quiz-option" data-value="prescription-sunglasses">
<i class="fas fa-prescription"></i>
<span class="fgc-quiz-option-text">Prescription Sunglasses</span>
</div>
</div>
</div>
<!-- Question 2 -->
<div class="fgc-quiz-question" data-question="2">
<h2 class="fgc-quiz-question-title">What style are you looking for?</h2>
<div class="fgc-quiz-options">
<div class="fgc-quiz-option" data-value="mens">
<i class="fas fa-male"></i>
<span class="fgc-quiz-option-text">Men's</span>
</div>
<div class="fgc-quiz-option" data-value="womens">
<i class="fas fa-female"></i>
<span class="fgc-quiz-option-text">Women's</span>
</div>
<div class="fgc-quiz-option" data-value="unisex">
<i class="fas fa-user-friends"></i>
<span class="fgc-quiz-option-text">Unisex</span>
</div>
<div class="fgc-quiz-option" data-value="kids">
<i class="fas fa-child"></i>
<span class="fgc-quiz-option-text">Kids</span>
</div>
</div>
</div>
<!-- Question 3 -->
<div class="fgc-quiz-question" data-question="3">
<h2 class="fgc-quiz-question-title">What's your face shape?</h2>
<div class="fgc-quiz-options">
<div class="fgc-quiz-option" data-value="oval">
<i class="fas fa-circle"></i>
<span class="fgc-quiz-option-text">Oval</span>
</div>
<div class="fgc-quiz-option" data-value="round">
<i class="fas fa-circle"></i>
<span class="fgc-quiz-option-text">Round</span>
</div>
<div class="fgc-quiz-option" data-value="square">
<i class="fas fa-square"></i>
<span class="fgc-quiz-option-text">Square</span>
</div>
<div class="fgc-quiz-option" data-value="heart">
<i class="fas fa-heart"></i>
<span class="fgc-quiz-option-text">Heart</span>
</div>
</div>
</div>
<!-- Question 4 -->
<div class="fgc-quiz-question" data-question="4">
<h2 class="fgc-quiz-question-title">What's your budget?</h2>
<div class="fgc-quiz-options">
<div class="fgc-quiz-option" data-value="budget">
<i class="fas fa-pound-sign"></i>
<span class="fgc-quiz-option-text">Under £50</span>
</div>
<div class="fgc-quiz-option" data-value="mid">
<i class="fas fa-pound-sign"></i><i class="fas fa-pound-sign"></i>
<span class="fgc-quiz-option-text">£50 - £100</span>
</div>
<div class="fgc-quiz-option" data-value="premium">
<i class="fas fa-pound-sign"></i><i class="fas fa-pound-sign"></i><i class="fas fa-pound-sign"></i>
<span class="fgc-quiz-option-text">Over £100</span>
</div>
</div>
</div>
<!-- Results -->
<div id="fgc-quiz-results">
<h2 id="fgc-quiz-results-title">Your Perfect Eyewear</h2>
<p>Based on your preferences, we recommend:</p>
<div id="fgc-quiz-recommendation">
<h3>Our Top Recommendation</h3>
<p id="fgc-quiz-recommendation-text"></p>
</div>
<div id="fgc-quiz-products">
<!-- Products will be inserted here -->
</div>
<button id="fgc-quiz-restart-btn">Take Quiz Again</button>
</div>
</div>
<!-- Navigation -->
<div id="fgc-quiz-nav">
<button id="fgc-quiz-prev-btn" class="fgc-quiz-btn" disabled>Previous</button>
<button id="fgc-quiz-next-btn" class="fgc-quiz-btn">Next</button>
</div>
</div>
</div>
</body>
</html>
Note: In the console, type 'allow pasting,' and then you can paste the code below.
/**
/* Feel Good Contacts Eyewear Quiz
* JavaScript to be executed in console
*/
(function() {
// Quiz state
const state = {
currentQuestion: 1,
totalQuestions: 4,
answers: {},
selectedOption: null
};
// Simple product recommendations data
const products = {
glasses: [
{ title: "Classic Rectangle Frames", price: "£39.99" },
{ title: "Round Metal Frames", price: "£45.00" }
],
sunglasses: [
{ title: "Aviator Sunglasses", price: "£59.99" },
{ title: "Wayfarer Sunglasses", price: "£49.99" }
],
contacts: [
{ title: "Daily Disposable Lenses", price: "From £15.99" },
{ title: "Monthly Lenses", price: "From £24.99" }
]
};
// Face shape recommendations
const faceShapeRecommendations = {
oval: "Oval faces suit most frame styles. Try rectangular or square frames.",
round: "Round faces look best with angular frames that add definition.",
square: "Square faces are complemented by round or oval frames.",
heart: "Heart-shaped faces work well with frames wider at the bottom."
};
// Initialize event listeners
function init() {
// Option selection
document.querySelectorAll(".fgc-quiz-option").forEach(option => {
option.addEventListener("click", selectOption);
});
// Navigation buttons
document.getElementById("fgc-quiz-next-btn").addEventListener("click", nextQuestion);
document.getElementById("fgc-quiz-prev-btn").addEventListener("click", prevQuestion);
document.getElementById("fgc-quiz-close").addEventListener("click", closeQuiz);
document.getElementById("fgc-quiz-restart-btn").addEventListener("click", restartQuiz);
}
// Select an option
function selectOption(e) {
// Clear previous selection
document.querySelectorAll(`.fgc-quiz-question[data-question="${state.currentQuestion}"] .fgc-quiz-option`).forEach(opt => {
opt.classList.remove("selected");
});
// Select current option
e.currentTarget.classList.add("selected");
state.selectedOption = e.currentTarget.getAttribute("data-value");
}
// Go to next question
function nextQuestion() {
// Save answer if option selected
if (state.selectedOption) {
state.answers[state.currentQuestion] = state.selectedOption;
state.selectedOption = null;
// If on last question, show results
if (state.currentQuestion === state.totalQuestions) {
showResults();
} else {
// Move to next question
document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"]`).classList.remove("active");
state.currentQuestion++;
document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"]`).classList.add("active");
// Update progress bar
updateProgress();
// Enable prev button
document.getElementById("fgc-quiz-prev-btn").disabled = false;
// Pre-select if already answered
if (state.answers[state.currentQuestion]) {
const savedOption = document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"] .fgc-quiz-option[data-value="${state.answers[state.currentQuestion]}"]`);
if (savedOption) {
savedOption.classList.add("selected");
state.selectedOption = state.answers[state.currentQuestion];
}
}
}
} else {
alert("Please select an option to continue");
}
}
// Go to previous question
function prevQuestion() {
document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"]`).classList.remove("active");
state.currentQuestion--;
document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"]`).classList.add("active");
// Update progress
updateProgress();
// Disable prev button on first question
if (state.currentQuestion === 1) {
document.getElementById("fgc-quiz-prev-btn").disabled = true;
}
// Pre-select if already answered
if (state.answers[state.currentQuestion]) {
const savedOption = document.querySelector(`.fgc-quiz-question[data-question="${state.currentQuestion}"] .fgc-quiz-option[data-value="${state.answers[state.currentQuestion]}"]`);
if (savedOption) {
savedOption.classList.add("selected");
state.selectedOption = state.answers[state.currentQuestion];
}
}
}
// Update progress bar
function updateProgress() {
const progressPercent = (state.currentQuestion / state.totalQuestions) * 100;
document.getElementById("fgc-quiz-progress-fill").style.width = `${progressPercent}%`;
}
// Show results
function showResults() {
// Hide questions and navigation
document.getElementById("fgc-quiz-content").style.display = "none";
document.getElementById("fgc-quiz-nav").style.display = "none";
// Show results
document.getElementById("fgc-quiz-results").style.display = "block";
// Get product recommendations based on answers
const eyewearType = state.answers[1];
// Create recommendation text based on face shape
const faceShape = state.answers[3] || "oval";
document.getElementById("fgc-quiz-recommendation-text").textContent =
faceShapeRecommendations[faceShape] || "Based on your selections, we've picked some great options for you.";
// Populate product recommendations
const productsContainer = document.getElementById("fgc-quiz-products");
productsContainer.innerHTML = "";
const recommendedProducts = products[eyewearType] || products.glasses;
recommendedProducts.forEach(product => {
const productElement = document.createElement("div");
productElement.className = "fgc-quiz-product";
productElement.innerHTML = `
${product.title}
${product.price}
`;
productsContainer.appendChild(productElement);
});
// Set up product buttons
document.querySelectorAll(".fgc-quiz-product-btn").forEach(btn => {
btn.addEventListener("click", () => {
// Navigate to product page (placeholder)
console.log("Navigate to product page");
});
});
}
// Close quiz
function closeQuiz() {
document.getElementById("fgc-quiz-overlay").style.display = "none";
}
// Restart quiz
function restartQuiz() {
// Reset state
state.currentQuestion = 1;
state.answers = {};
state.selectedOption = null;
// Clear selections
document.querySelectorAll(".fgc-quiz-option").forEach(option => {
option.classList.remove("selected");
});
// Hide results
document.getElementById("fgc-quiz-results").style.display = "none";
// Show first question and navigation
document.getElementById("fgc-quiz-content").style.display = "block";
document.getElementById("fgc-quiz-nav").style.display = "flex";
// Show first question only
document.querySelectorAll(".fgc-quiz-question").forEach(question => {
question.classList.remove("active");
});
document.querySelector(`.fgc-quiz-question[data-question="1"]`).classList.add("active");
// Reset progress
updateProgress();
// Disable prev button
document.getElementById("fgc-quiz-prev-btn").disabled = true;
}
// Initialize the quiz
init();
})();