Quiz

<div class="container">
   <div id="quiz" class="quiz-container"></div>
   <div id="suggestions" class="suggestions-container" style="display: none;">
       <t3>Based on your skin type, here are our picks</t3>
       <div class="product-container"></div>
   </div>
</div>

.container {
 overflow-x: hidden;
}
/* ========================
  QUIZ SECTION STYLES
======================== */
.quiz-container {
 display: flex;
 flex-direction: column;
 background-color: #fff;
 padding: 24px;
 width: 100%;
 text-align: left;
 overflow-x: hidden;
 margin-bottom: 20px;
}
.quiz-question {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 10px;
 word-wrap: break-word;
}
.quiz-options {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 width: 100%;
 justify-content: flex-start;
}
.quiz-option {
 background-color: transparent;
 color: #131313;
 border: 1px solid #131313;
 border-radius: 8px;
 padding: 8px 16px;
 font-size: 14px;
 cursor: pointer;
 white-space: nowrap;
 flex: 1 1 calc(50% - 10px);
 text-align: center;
 box-sizing: border-box;
}
.quiz-image-options {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 justify-content: space-between;
 margin-top: 16px;
}
.quiz-card {
 width: 48%;
 border: 2px solid #e0e0e0;
 border-radius: 12px;
 padding: 10px;
 cursor: pointer;
 transition: border-color 0.2s ease;
 background-color: #fff;
}
.radio-row {
 display: flex;
 align-items: center;
 font-weight: 600;
 margin-bottom: 8px;
 font-size: 15px;
 color: #131313;
}
.quiz-card input[type="radio"] {
 accent-color: #ff2c85;
 margin-right: 8px;
 transform: scale(1.2);
}
.option-image {
 width: 100%;
 border-radius: 8px;
 object-fit: cover;
 height: auto;
}
/* ========================
  PRODUCT SUGGESTIONS
======================== */
.suggestions-container {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 text-align: left;
 padding: 12px 12px;
 background-color: #fff;
 border-radius: 10px;
 width: 100%;
}
.product-container {
 margin-top: 16px;
 overflow-x: auto;
 display: flex;
 gap: 12px;
 scrollbar-width: none;
 padding: 0 0 8px 0;
}
/* Product Card Layout (New Style) */
.product-card {
 flex: 0 0 80%;
 background: #fff;
 border-radius: 8px;
 padding: 8px;
 box-sizing: border-box;
}
.product-image-wrapper {
 position: relative;
}
.product-card-image {
 width: 100%;
 border-radius: 6px;
 object-fit: cover;
}
.badge {
 position: absolute;
 top: 8px;
 left: 8px;
 background-color: #000;
 color: #fff;
 font-size: 10px;
 padding: 2px 6px;
 border-radius: 3px;
}
.heart {
 position: absolute;
 top: 8px;
 right: 8px;
}
.product-card h4 {
 font-size: 14px;
 font-weight: 500;
 color: '#646464';
 margin: 8px 0 4px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.price-line {
 display: flex;
 align-items: center;
 gap: 6px;
}
.price {
 font-weight: 600;
 font-size: 14px;
}
.compare-price {
 font-size: 12px;
 color: #aaa;
 text-decoration: line-through;
}
/* Swatches */
.swatches {
 margin-top: 8px;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}
.swatch {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 box-sizing: border-box;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 background-size: cover;
 background-position: center;
 cursor: pointer;
 position: relative;
 border: 2px solid transparent; /* default */
}
.swatch.selected {
 border-color: #000; /* ✅ black border when selected */
}
.swatch.selected::after {
 content: "";
 width: 10px;
 height: 10px;
 background-color: white;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

const quizData = [
 {
   type: "image",
   question: "What is your skin type?",
   options: [
     { label: "Dry", image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748253305/dry-skin_y1smmo.png" },
     { label: "Normal", image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748253305/normal-skin_ze1iki.png" },
     { label: "Oily", image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748253305/oily-skin_ptouc4.png" },
     { label: "Combination", image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1748253305/dry-skin_y1smmo.png" }
   ]
 },
 {
   type: "text",
   question: "Is your skin sensitive?",
   options: ["Yes", "No"]
 },
 {
   type: "text",
   question: "What is your skin care goal?",
   options: ["Clear Skin (Acne)", "Wrinkle Care (Anti-ageing)", "Calming (Redness)", "Dark Spots (Brightening)"]
 }
];
const quizContainer = document.getElementById("quiz");
const suggestionsContainer = document.getElementById("suggestions");
const productContainer = document.querySelector(".product-container");
let currentQuestion = 0;
let selectedAnswers = [];
let currentProducts = [];
const COLOR_MAP = {
 black: "#000000", navy: "#001f3f", gray: "#808080", green: "#228B22",
 stone: "#D2B48C", white: "#FFFFFF", blue: "#1E90FF", red: "#FF4136",
 pink: "#FF69B4", beige: "#F5F5DC"
};
// Load next quiz question
function loadQuestion() {
 if (currentQuestion >= quizData.length) {
   showProductSuggestions();
   return;
 }
 const { question, options, type } = quizData[currentQuestion];
 let optionsHTML = "";
 if (type === "image") {
   optionsHTML = `
     <div class="quiz-image-options">
       ${options.map((opt, i) => `
         <div class="quiz-card" onclick="handleOptionClick(${i})">
           <div class="radio-row">
             <input type="radio" name="quiz-${currentQuestion}" id="opt-${i}" />
             <label for="opt-${i}"><t5>${opt.label}</t5></label>
           </div>
           <img src="${opt.image}" alt="${opt.label}" class="option-image" />
         </div>
       `).join("")}
     </div>`;
 } else {
   optionsHTML = `
     <div class="quiz-options">
       ${options.map((opt, i) => `
         <filled-button class="quiz-option" onclick="handleOptionClick(${i})">
           <t5>${opt}</t5>
         </filled-button>
       `).join("")}
     </div>`;
 }
 quizContainer.innerHTML = `
   <div class="quiz-question"><t3>${question}</t3></div>
   ${optionsHTML}
 `;
 resizeBlock();
}
// Handle option selection and move to next question
window.handleOptionClick = (index) => {
 const current = quizData[currentQuestion];
 const selected = current.options[index]?.label || current.options[index];
 selectedAnswers.push(selected);
 currentQuestion++;
 loadQuestion();
};
// Show product suggestions after quiz
function showProductSuggestions() {
 quizContainer.style.display = "none";
 suggestionsContainer.style.display = "block";
 VajroSDK.helpers.getProducts({ collectionId: "445532995834", count: 6 }).then((products) => {
   currentProducts = products;
   productContainer.innerHTML = products.map(renderProductCard).join("");
   resizeBlock();
 }).catch((err) => {
   productContainer.innerHTML = `<t5 style="color:red;">❌ Failed to load products</t5>`;
   VajroSDK.actions.showToast({
     title: "Error",
     message: err.message || "Product loading failed"
   });
 });
}
// Render each product card HTML
function renderProductCard(p) {
 const variant = p.variants[0] || {};
 const price = variant.price?.amount || variant.price;
 const compareAt = variant.compareAtPrice?.amount || variant.compareAtPrice;
 const currency = variant.price?.currencyCode || variant.currencyCode || "USD";
 const swatches = p.options?.find(opt => opt.name?.toLowerCase() === "color")?.values || [];
 return `
   <div class="product-card" data-product-id="${p.id}">
     <div class="product-image-wrapper">
       <img src="${p.featuredImage?.url || p.images?.[0]}" class="product-card-image" data-product-id="${p.id}" alt="${p.title}" />
       <span class="badge"><t5>NEW</t5></span>
       <span class="heart">❤️</span>
     </div>
     <t4>${p.title}</t4>
     <div class="price-line">
       <span class="price"><t5>${currency} ${price}</t5></span>
       ${compareAt && compareAt > price ? `<span class="compare-price"><t5>${currency} ${compareAt}</t5></span>` : ""}
     </div>
     <div class="swatches">
       ${swatches.map((val, i) => {
   const hex = COLOR_MAP[val.toLowerCase()];
   const bgStyle = hex ? `background-color:${hex}` : `background-image:url('${p.images?.[i] || p.featuredImage?.url}')`;
   return `<span class="swatch" data-color="${val.toLowerCase()}" data-product-id="${p.id}" title="${val}" style="${bgStyle}"></span>`;
 }).join("")}
     </div>
   </div>`;
}
// Swatch interaction + product open
document.addEventListener("click", (e) => {
 const swatch = e.target.closest(".swatch");
 const image = e.target.closest(".product-card-image");
 if (swatch) {
   const productId = swatch.dataset.productId;
   const selectedColor = swatch.dataset.color;
   const product = currentProducts.find(p => p.id === productId);
   const card = document.querySelector(`.product-card[data-product-id="${productId}"]`);
   if (!product || !card) return;
   card.querySelectorAll(".swatch").forEach(s => s.classList.remove("selected"));
   swatch.classList.add("selected");
   const matched = product.variants.find(v =>
     v.selectedOptions?.some(opt =>
       opt.name.toLowerCase() === "color" && opt.value.toLowerCase() === selectedColor));
   const img = card.querySelector(".product-card-image");
   if (img && matched?.image) img.src = matched.image;
   return;
 }
 if (image) {
   VajroSDK.actions.openProduct({ productId: image.dataset.productId });
 }
});
// VajroSDK resize block
async function resizeBlock(container = ".container") {
 try {
   await VajroSDK.actions.resizeBlock(container);
 } catch (err) {
   VajroSDK.actions.showToast({
     title: "Resize Error",
     message: err.message || "Could not adjust height"
   });
 }
}
loadQuestion();