.", category: "touch", val: "Enjoying the physical teamwork close by" } ] }, { id: 32, text: "What makes someone a great roommate or long-term partner in daily life?", options: [ { key: "A", text: "They say 'thank you' and voice appreciation for your existence daily.", category: "words", val: "Hearing continuous appreciation for daily chores" }, { key: "B", text: "They coordinate shared meals where you can sit and chat together.", category: "time", val: "Carving out shared dining and chatting times" }, { key: "C", text: "They occasionally surprise you with fresh groceries or home goods.", category: "gifts", val: "Surprising you with household goods or foods" }, { key: "D", text: "They maintain a reliable schedule of taking out trash and washing dishes.", category: "service", val: "Reliably handling trash, laundry, and daily tasks" }, { key: "E", text: "They hug you when they pass by in the hallway.", category: "touch", val: "Spontaneous hallway hugs and physical touch" } ] },// Physical Touch Focus (8 Questions) { id: 33, text: "When greeting a close family member or a partner, what feels most natural?", options: [ { key: "A", text: "Saying 'I am so incredibly happy to see you!' out loud.", category: "words", val: "A vocal exclamation of joy upon meeting" }, { key: "B", text: "Immediately sitting down together to catch up on life details.", category: "time", val: "Immediately sitting down to talk" }, { key: "C", text: "Handing them a small gift or treat you picked up on the way.", category: "gifts", val: "Handing over a gift you brought along" }, { key: "D", text: "Helping them carry their bags or heavy coat inside.", category: "service", val: "Helping them carry heavy bags or luggage" }, { key: "E", text: "Stepping forward for a warm, squeezy, multi-second hug.", category: "touch", val: "Stepping forward for a long, warm embrace" } ] }, { id: 34, text: "How do you naturally express comforting sympathy when someone is crying?", options: [ { key: "A", text: "Saying, 'I am here for you, and everything is going to be okay.'", category: "words", val: "Speaking soothing words of hope and security" }, { key: "B", text: "Sitting silently beside them, letting them cry without rushing them.", category: "time", val: "Offering silent, attentive presence" }, { key: "C", text: "Bringing them a warm cup of herbal tea and a clean tissue.", category: "gifts", val: "Bringing a warm cup of tea and a tissue box" }, { key: "D", text: "Proactively handling their phone calls or cleaning up to give them space.", category: "service", val: "Handling chores to give them emotional space" }, { key: "E", text: "Wrapping your arms around them or rubbing their back gently.", category: "touch", val: "Holding them close and rubbing their back" } ] }, { id: 35, text: "What makes walking around a park or city center with a loved one feel romantic?", options: [ { key: "A", text: "Hearing them compliment you on how much they enjoy walking with you.", category: "words", val: "Verbal affirmations of enjoying the walk" }, { key: "B", text: "Talking and exploring new pathways together with zero screens.", category: "time", val: "Conversing and navigating streets together" }, { key: "C", text: "Stopping at a local market to buy a small souvenir or pastry.", category: "gifts", val: "Buying a sweet souvenir at a local shop" }, { key: "D", text: "Them offering to carry your jacket or umbrella if it gets heavy.", category: "service", val: "Holding your umbrella or carrying your jacket" }, { key: "E", text: "Interlocking your fingers and holding hands as you walk.", category: "touch", val: "Interlocking fingers and holding hands" } ] }, { id: 36, text: "Which of the following experiences makes you feel most relaxed in a relationship?", options: [ { key: "A", text: "Hearing soft, loving bedtime affirmations or whisper statements.", category: "words", val: "Soft whispered affirmations at bed time" }, { key: "B", text: "Lying down side-by-side discussing deep universal mysteries.", category: "time", val: "Lying side-by-side discussing deep secrets" }, { key: "C", text: "Exchanging small, sentimental gifts under your pillows.", category: "gifts", val: "Exchanging tiny, sentimental bedside gifts" }, { key: "D", text: "Someone adjusting the blanket and fluffing your pillows for you.", category: "service", val: "Having someone tuck you in and fluff your pillows" }, { key: "E", text: "Cuddling, spooning, or sharing a warm, quiet skin-to-skin touch.", category: "touch", val: "Sharing warm cuddles and physical proximity" } ] }, { id: 37, text: "When sitting on the couch to watch a movie, you prefer:", options: [ { key: "A", text: "Discussing the plot together and praising each other's theories.", category: "words", val: "Talking about plot theories and complimenting ideas" }, { key: "B", text: "Having an evening completely dedicated to enjoying the story together.", category: "time", val: "An evening reserved for pure, shared screen time" }, { key: "C", text: "Preparing a special bowl of gourmet popcorn and sweets as a treat.", category: "gifts", val: "Preparing special popcorn and treats" }, { key: "D", text: "Them popping the popcorn and cleaning up the kitchen so you can rest.", category: "service", val: "Popcorn popped and cleanup handled by them" }, { key: "E", text: "Sitting so close that your legs touch, or draping an arm over their shoulder.", category: "touch", val: "Sitting close with legs touching or arms draped" } ] }, { id: 38, text: "What is your reaction to a sudden, gentle back rub or shoulder squeeze?", options: [ { key: "A", text: "You feel great, especially if they whisper 'You're doing amazing.'", category: "words", val: "Feeling great, paired with motivating whispers" }, { key: "B", text: "It prompts you to stop working and take a break to talk.", category: "time", val: "Taking a break to turn and chat" }, { key: "C", text: "You view it as a wonderful physical gift of comfort.", category: "gifts", val: "Appreciating it as a physical gift of massage" }, { key: "D", text: "You appreciate it as a helpful service to reduce your physical tension.", category: "service", val: "Relieving physical muscle tension on your behalf" }, { key: "E", text: "You immediately melt into the touch, feeling instantly connected.", category: "touch", val: "Melting into the touch with instant connection" } ] }, { id: 39, text: "How do you show affection to someone you care about when saying goodbye?", options: [ { key: "A", text: "Saying 'I love you so much, be safe and call me immediately!'", category: "words", val: "Speaking protective, warm goodbye affirmations" }, { key: "B", text: "Lingering by the door for a few minutes just to squeeze in more talk.", category: "time", val: "Lingering at the doorway for extra chatting" }, { key: "C", text: "Handing them a small snack or drink for their trip home.", category: "gifts", val: "Handing over a travel snack for their trip" }, { key: "D", text: "Helping them bundle up, zip their coat, or carrying their bags to the car.", category: "service", val: "Zipping their coat and loading bags" }, { key: "E", text: "Holding them close in a tight, protective embrace for a long moment.", category: "touch", val: "Holding them close in a long, tight embrace" } ] }, { id: 40, text: "In moments of joy or excitement, what is your first impulse?", options: [ { key: "A", text: "To shout out expressions of praise and shout 'We did it!'", category: "words", val: "Screaming expressions of victory and praise" }, { key: "B", text: "To pull someone aside to sit down and celebrate the news together.", category: "time", val: "Sitting down to revel in the happy news together" }, { key: "C", text: "To go out immediately and buy a nice commemorative item.", category: "gifts", val: "Buying a gift to commemorate the milestone" }, { key: "D", text: "To take care of cooking a feast to celebrate the occasion.", category: "service", val: "Preparing a celebratory feast for everyone" }, { key: "E", text: "To jump up and down, high-five, and hug them tightly.", category: "touch", val: "High-fiving, jumping, and hugging tightly" } ] } ];// Object containing definitions, strengths, and communication tips for results output const resultsDefinitions = { words: { title: "Words of Affirmation", color: "rose-500", bg: "bg-rose-500", border: "border-rose-200", badge: "text-rose-700 bg-rose-50 border border-rose-100", description: "You thrive on verbal expressions of love, compliments, spoken appreciation, and encouraging support. Words carry immense weight for you; sincere phrases fill your emotional tank, while harsh comments or critical neglect can be exceptionally draining.", loved: "Verbal compliments, sweet unexpected text messages, handwritten cards, and spoken reassurance of your value.", show: "Praising others, writing long appreciative messages, offering verbal support, and celebrating actions with active verbal feedback.", communication: "Expressive, verbal, encouraging, and highly reassuring.", strengths: "Excellent at building partner self-esteem; highly supportive, expressive, and direct about feelings.", misunderstandings: "Can be highly sensitive to sharp tones, criticism, or cold periods of verbal silence.", tips: "Leave sticky notes around the house, send text messages explaining exactly *why* you appreciate them, and speak words of admiration in front of others." }, time: { title: "Quality Time", color: "indigo-500", bg: "bg-indigo-500", border: "border-indigo-200", badge: "text-indigo-700 bg-indigo-50 border border-indigo-100", description: "For you, love is spelt T-I-M-E. You feel most loved when your companion is fully present, has put away distractions (like phones or laptops), looks you in the eyes, and shares undivided, focused activities and deep conversations.", loved: "Uninterrupted eye contact, dates without phone distractions, long walks, and quiet side-by-side hobbies.", show: "Carving out dedicated spaces on your schedule, planning activities, and offering a highly attentive listening ear.", communication: "Present, attentive, reflective, and deeply connected.", strengths: "Master at building emotional intimacy; highly present, empathetic, and excellent at deep conversational bonds.", misunderstandings: "May feel rejected or unimportant if someone is distracted, multitasks while talking, or cancels plans.", tips: "Create phone-free hours during dinner, plan a weekend walk in nature to discuss goals, or sit and listen without trying to solve problems instantly." }, gifts: { title: "Receiving Gifts", color: "teal-500", bg: "bg-teal-500", border: "border-teal-200", badge: "text-teal-700 bg-teal-50 border border-teal-100", description: "You do not seek materialism; rather, you cherish gifts as visual symbols of love and active remembrance. To you, a gift shows that the giver was thinking of you when you weren't there, and put physical effort into obtaining or crafting a token of love.", loved: "Thoughtful souvenirs, unexpected small candies, items that show they remembered your obscure hobbies, and beautifully wrapped cards.", show: "Observing others' interests, collecting souvenirs during travels, wrapping presents beautifully, and giving items with rich sentimental meaning.", communication: "Symbolic, observational, creative, and sentimental.", strengths: "Exceptional at remembering birthdays, anniversaries, and milestones; highly creative in showing appreciation.", misunderstandings: "Can feel deeply neglected if milestones are forgotten, or if a physical token is dismissed as trivial or materialistic.", tips: "Give small, inexpensive items (like a single flower, a favorite candy bar, or a cool rock found on a hike) to show they were on your mind." }, service: { title: "Acts of Service", color: "amber-500", bg: "bg-amber-500", border: "border-amber-200", badge: "text-amber-700 bg-amber-50 border border-amber-100", description: "You believe actions speak much louder than words. You feel most loved when someone steps in to handle daily burdens, runs errands, prepares meals, or maintains shared spaces to make your life smoother and less exhausting.", loved: "Cooking you dinner, doing chores before being asked, carrying heavy items, and taking difficult administrative errands off your list.", show: "Washing dishes, doing laundry, repairing broken household items, and proactive logistical help.", communication: "Practical, proactive, logistical, and action-oriented.", strengths: "Highly reliable in times of crisis; active problem-solver; relieves partner of daily cognitive and labor burdens.", misunderstandings: "Broken commitments, lazy follow-up, or messy shared spaces can feel like a direct lack of care or respect.", tips: "Ask directly, 'What is one chore I can handle for you today to make your night easier?' and complete it fully without being reminded." }, touch: { title: "Physical Touch", color: "pink-500", bg: "bg-pink-500", border: "border-pink-200", badge: "text-pink-700 bg-pink-50 border border-pink-100", description: "You feel most secure and connected through physical closeness and tactile interaction. Simple touch indicators like hand-holding, cuddles, rubs, and warm greetings are vital to maintaining your emotional sense of safety.", loved: "Long hugs, holding hands during walks, back rubs, sitting close on the couch, and gentle parting kisses.", show: "Reaching out during conversation, sitting close, initiating rubs, and greeting friends and family with physical warmth.", communication: "Tactile, warm, close, and physically affectionate.", strengths: "Excellent at offering immediate physical comfort and grounding; highly affectionate, warm, and comforting.", misunderstandings: "Long periods without touch or physical coldness can make you feel emotionally isolated, neglected, or rejected.", tips: "Prioritize greeting each other with a warm, dedicated 10-second hug, sit close enough to touch while reading or watching movies, and hold hands." } };// State variables to track responses const userResponses = {};// DOM Elements const questionsWrapper = document.getElementById("questions-wrapper"); const progressBarFill = document.getElementById("progress-bar-fill"); const progressText = document.getElementById("progress-text"); const progressBadge = document.getElementById("progress-indicator-badge"); const validationError = document.getElementById("validation-error"); const resultsSection = document.getElementById("results-section");// UI Renderer: Creates and renders all 40 question cards on load function initQuiz() { questionsWrapper.innerHTML = ""; // Clear questionBank.forEach((q, idx) => { const card = document.createElement("div"); card.id = `q-card-${q.id}`; card.className = "bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-100 transition-all duration-300 relative scroll-mt-24"; // Card header containing progress tracker numbers let headerHtml = `

${q.text}

`; // Form options container let optionsHtml = ``; card.innerHTML = headerHtml + optionsHtml; questionsWrapper.appendChild(card);// Insert AdSense slots dynamically in their requested positions if (idx + 1 === 10) { insertAdSensePlaceholder("mid-ad-1", "AdSense In-Content Ad #1 (After Question 10)"); } else if (idx + 1 === 20) { insertAdSensePlaceholder("mid-ad-2", "AdSense In-Content Ad #2 (After Question 20)"); } else if (idx + 1 === 30) { insertAdSensePlaceholder("mid-ad-3", "AdSense In-Content Ad #3 (After Question 30)"); } });updateProgressBar(); }// Helper to construct AdSense slots visually function insertAdSensePlaceholder(adClass, label) { const adDiv = document.createElement("div"); adDiv.className = `adsense-slot ${adClass} border-2 border-dashed border-slate-200 rounded-2xl p-4 my-8 text-center text-xs text-slate-400 font-mono tracking-wider min-h-[100px] flex flex-col justify-center items-center gap-2`; adDiv.innerHTML = ` Advertisement Placeholder

${label}

`; questionsWrapper.appendChild(adDiv); }// Controller: Handle option click selections function selectOption(questionId, category, optionKey, optionMeaning) { // Save answer selection state userResponses[questionId] = { category: category, key: optionKey, meaning: optionMeaning };// Update UI: Highlight card status const statusSpan = document.getElementById(`q-status-${questionId}`); statusSpan.className = "text-xs font-semibold text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-full flex items-center gap-1"; statusSpan.innerHTML = ` Answered`;// Reset borders of sibling options and set active state style const card = document.getElementById(`q-card-${questionId}`); card.className = "bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-emerald-100 ring-2 ring-emerald-50 transition-all duration-300 relative scroll-mt-24";const labels = card.querySelectorAll("label"); labels.forEach(label => { label.className = "option-card block p-4 rounded-xl border border-slate-200 hover:border-rose-300 hover:bg-rose-50/20 cursor-pointer transition-all duration-150 flex items-start gap-3"; const checkBullet = label.querySelector("span"); checkBullet.className = "w-5 h-5 rounded-full border border-slate-300 flex items-center justify-center flex-shrink-0 text-[10px] text-white font-bold bg-white transition-all duration-150 mt-0.5"; });// Set active class for selected option const clickedLabel = event.currentTarget; clickedLabel.className = "option-card block p-4 rounded-xl border-rose-400 bg-rose-50/30 cursor-pointer transition-all duration-150 flex items-start gap-3 ring-2 ring-rose-100"; const clickedBullet = clickedLabel.querySelector(`span`); clickedBullet.className = "w-5 h-5 rounded-full border-rose-500 flex items-center justify-center flex-shrink-0 text-[10px] text-white font-bold bg-rose-500 transition-all duration-150 mt-0.5 shadow-md shadow-rose-200";updateProgressBar(); }// Progress bar rendering engine function updateProgressBar() { const answeredCount = Object.keys(userResponses).length; const totalQuestions = 40; const percent = Math.round((answeredCount / totalQuestions) * 100);progressBarFill.style.width = `${percent}%`; progressText.innerText = `${answeredCount} of ${totalQuestions}`;const stickyProgress = document.getElementById("sticky-progress");if (percent === 100) { progressBadge.innerText = "Complete!"; progressBadge.className = "inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full uppercase tracking-wider border border-emerald-100"; stickyProgress.className = "sticky top-[69px] z-40 bg-emerald-50/95 border-b border-emerald-150 shadow-sm py-3 px-4 rounded-2xl mb-8 flex flex-col sm:flex-row items-center justify-between gap-3 transition-all duration-300 ring-2 ring-emerald-100"; } else { progressBadge.innerText = `${percent}%`; progressBadge.className = "inline-block text-[11px] font-bold text-rose-600 bg-rose-50 px-2 py-1 rounded-full uppercase tracking-wider border border-rose-100"; stickyProgress.className = "sticky top-[69px] z-40 bg-white/95 border-b border-slate-150 shadow-sm py-3 px-4 rounded-2xl mb-8 flex flex-col sm:flex-row items-center justify-between gap-3 transition-all duration-300"; } }// Validation & Scoring Engine (scoringEngine.js and resultEngine.js equivalent) function submitQuiz() { const answeredCount = Object.keys(userResponses).length; const totalQuestions = 40;if (answeredCount < totalQuestions) { validationError.classList.remove("hidden"); // Find and scroll to the first unanswered question card for (let i = 1; i <= totalQuestions; i++) { if (!userResponses[i]) { const targetCard = document.getElementById(`q-card-${i}`); targetCard.className = "bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-red-200 ring-2 ring-red-50 transition-all duration-300 relative scroll-mt-24"; // Scroll smoothly to this first bad element targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); break; } } return; }validationError.classList.add("hidden"); calculateResults(); }// Calculate and render results details function calculateResults() { // Scoring structure const scores = { words: 0, time: 0, gifts: 0, service: 0, touch: 0 };// Compile tally Object.values(userResponses).forEach(resp => { scores[resp.category] += 1; });// Convert to percentages based on 40 questions total const percentages = {}; Object.keys(scores).forEach(cat => { percentages[cat] = Math.round((scores[cat] / 40) * 100); });// Find primary love language (highest percentage) let primaryCat = "words"; let highestPercent = -1;Object.keys(percentages).forEach(cat => { if (percentages[cat] > highestPercent) { highestPercent = percentages[cat]; primaryCat = cat; } });const primaryData = resultsDefinitions[primaryCat];// Render primary language details on UI document.getElementById("primary-lang-title").innerText = `${primaryData.title} (${highestPercent}%)`; document.getElementById("primary-lang-subtitle").innerHTML = ` ${primaryData.description} `;// Render Progress Bars for all 5 love languages const chartContainer = document.getElementById("chart-bars-container"); chartContainer.innerHTML = "";// Sort languages by score descending const sortedLangs = Object.keys(percentages).sort((a, b) => percentages[b] - percentages[a]);sortedLangs.forEach(cat => { const info = resultsDefinitions[cat]; const pct = percentages[cat]; const barHtml = ` `; chartContainer.insertAdjacentHTML("beforeend", barHtml); });// Render Detailed Analysis Grid const analysisGrid = document.getElementById("analysis-grid"); analysisGrid.innerHTML = ` `;// Render Answer Review Section const tableBody = document.getElementById("review-table-body"); tableBody.innerHTML = "";questionBank.forEach((q, idx) => { const userChoice = userResponses[q.id]; const categoryLabel = resultsDefinitions[userChoice.category].title; const badgeClass = resultsDefinitions[userChoice.category].badge;const rowHtml = ` ${idx + 1} [${userChoice.key}] ${userChoice.meaning} ${categoryLabel} This preference indicates that you place high value on physical or situational expressions of ${categoryLabel} in relationships. `; tableBody.insertAdjacentHTML("beforeend", rowHtml); });// Reveal Result UI with smooth scrolling resultsSection.classList.remove("hidden"); resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); }// Accordion utility for FAQ function toggleFaq(index) { const content = document.getElementById(`faq-content-${index}`); const icon = document.getElementById(`faq-icon-${index}`);if (content.classList.contains("hidden")) { content.classList.remove("hidden"); icon.classList.add("rotate-180"); } else { content.classList.add("hidden"); icon.classList.remove("rotate-180"); } }// Initialize quiz on window load window.onload = function() { initQuiz(); };