.", score: 1 }, { label: "B", text: "I schedule a private meeting, focus on performance facts, and collaborate on a solution.", score: 4 }, { label: "C", text: "I say nothing, fix their mistakes myself, and avoid working with them in the future.", score: 2 }, { label: "D", text: "I drop hints through sarcastic jokes, hoping they will understand the message.", score: 1 } ], explanation: "Providing feedback privately and constructively protects relationships while addressing core performance gaps." }, { id: 20, category: "Social Skills", difficulty: "Moderate", text: "You are at a professional networking event full of strangers. You feel highly introverted or nervous. What do you do?", options: [ { label: "A", text: "I stand in the corner checking my phone until it is polite enough to leave.", score: 1 }, { label: "B", text: "I find a small group, listen to their conversation, and ask genuine, curious questions.", score: 4 }, { label: "C", text: "I interrupt conversations to hand out my business card quickly to as many people as possible.", score: 2 }, { label: "D", text: "I stay near the bar or food table, talking only to the staff to pass the time.", score: 2 } ], explanation: "Active listening and warm curiosity are low-pressure, high-value ways to build authentic professional connections." }, { id: 25, category: "Social Skills", difficulty: "Moderate", text: "You made a mistake that damaged your trust with a close teammate. How do you rebuild the relationship?", options: [ { label: "A", text: "I buy them a gift and act like nothing happened to move past the tension.", score: 2 }, { label: "B", text: "I acknowledge the impact of my actions, apologize sincerely, and build consistent, transparent habits.", score: 4 }, { label: "C", text: "I wait for them to apologize to me first for overreacting to my mistake.", score: 1 }, { label: "D", text: "I avoid working with them completely to prevent any awkward interactions.", score: 1 } ], explanation: "Rebuilding trust requires accountability, sincere apologies, and consistent, transparent actions over time." }, { id: 30, category: "Social Skills", difficulty: "Moderate", text: "You are leading a group project where the goals are unclear and the team is losing focus. How do you respond?", options: [ { label: "A", text: "I wait for a manager to step in and clarify the project goals.", score: 2 }, { label: "B", text: "I organize a team session to align on a shared vision, define clear roles, and map out next steps.", score: 4 }, { label: "C", text: "I write down all the goals myself and assign them to people without asking for input.", score: 3 }, { label: "D", text: "I complain to team members about our lack of clear direction.", score: 1 } ], explanation: "High social intelligence means stepping up to coordinate, align, and guide teams during periods of uncertainty." }, { id: 35, category: "Social Skills", difficulty: "Advanced", text: "During a team brainstorming session, a quiet teammate is interrupted while sharing an idea. What is your reaction?", options: [ { label: "A", text: "I ignore it and focus on the person who interrupted, as they seem to have more energy.", score: 2 }, { label: "B", text: "I wait for a break and say: 'I’d love to hear the rest of what [Name] was sharing before we move on.'", score: 4 }, { label: "C", text: "I call out the person who interrupted to make sure they know they were rude.", score: 2 }, { label: "D", text: "I talk to the quiet teammate in private later to hear what they wanted to say.", score: 3 } ], explanation: "Inclusive leaders use their influence to protect quiet voices, ensuring psychological safety and equal participation." }, { id: 40, category: "Social Skills", difficulty: "Advanced", text: "How do you align differing opinions on a team when making a high-stakes decision?", options: [ { label: "A", text: "I push for a vote so we can quickly decide by majority rules.", score: 2 }, { label: "B", text: "I make the final decision myself to save time and prevent further debate.", score: 2 }, { label: "C", text: "I facilitate a discussion focused on shared goals, map out the pros and cons of each view, and guide us to a compromise.", score: 4 }, { label: "D", text: "I side with the most senior team member's opinion to avoid conflict.", score: 3 } ], explanation: "Advanced social coordination focuses on collaborative alignment, guiding diverse views toward a shared compromise." } ];// Global Application State let userAnswers = {}; // Format: { questionId: selectedScore } let trackingProgress = 0;// Initialize App on Window Load window.onload = function() { renderQuestions(); setupScrollTracking(); };// Render Questions to DOM function renderQuestions() { const container = document.getElementById('quiz-container'); container.innerHTML = ''; // Clear spinnerQUESTION_BANK.forEach((q, index) => { const qCard = document.createElement('div'); qCard.id = `q-card-${q.id}`; qCard.className = "bg-white border border-slate-150 rounded-2xl p-6 md:p-8 shadow-premium transition-all duration-300 scroll-mt-24"; // Construct options HTML let optionsHtml = ''; q.options.forEach(opt => { optionsHtml += ` ${opt.label} ${opt.text} `; });// Generate Question Card Layout qCard.innerHTML = `

${q.text}

`;container.appendChild(qCard);// Insert Strategic AdSense Placeholders if (index + 1 === 10) { container.appendChild(createAdPlaceholder("Ad Slot #2 (In-Content Ad between Q10 & Q11)")); } else if (index + 1 === 20) { container.appendChild(createAdPlaceholder("Ad Slot #3 (In-Content Ad between Q20 & Q21)")); } else if (index + 1 === 30) { container.appendChild(createAdPlaceholder("Ad Slot #4 (In-Content Ad between Q30 & Q31)")); } }); }// Helper to color difficulty tags function getDifficultyClass(diff) { switch(diff) { case 'Easy': return 'bg-emerald-50 text-emerald-700 border border-emerald-100'; case 'Moderate': return 'bg-sky-50 text-sky-700 border border-sky-100'; case 'Advanced': return 'bg-purple-50 text-purple-700 border border-purple-100'; default: return 'bg-slate-50 text-slate-600'; } }// Create Ad Placeholders Dynamically function createAdPlaceholder(labelText) { const adDiv = document.createElement('div'); adDiv.className = "my-8 py-4 px-6 border-2 border-dashed border-slate-200 bg-slate-50/50 rounded-xl text-center shadow-sm"; adDiv.innerHTML = `

Advertisement

`; return adDiv; }// Handle Option Selection function selectOption(qId, score, label) { // Check if this was already answered to manage state const wasAnswered = userAnswers.hasOwnProperty(qId); userAnswers[qId] = { score: score, label: label };// Update Highlight styling on options const group = document.getElementById(`options-group-${qId}`); const buttons = group.querySelectorAll('button'); buttons.forEach(btn => { const badge = btn.querySelector('.option-badge'); if (btn.id === `opt-${qId}-${label}`) { // Active Selected State btn.classList.add('border-indigo-600', 'bg-indigo-50/40', 'ring-2', 'ring-indigo-500/20'); btn.classList.remove('border-slate-200', 'hover:border-indigo-400', 'hover:bg-indigo-50/20'); if (badge) { badge.classList.add('bg-indigo-600', 'text-white', 'border-indigo-600'); badge.classList.remove('bg-slate-100', 'text-slate-500', 'border-slate-200'); } } else { // Reset others btn.classList.remove('border-indigo-600', 'bg-indigo-50/40', 'ring-2', 'ring-indigo-500/20'); btn.classList.add('border-slate-200', 'hover:border-indigo-400', 'hover:bg-indigo-50/20'); if (badge) { badge.classList.remove('bg-indigo-600', 'text-white', 'border-indigo-600'); badge.classList.add('bg-slate-100', 'text-slate-500', 'border-slate-200'); } } });// Make Card look completed const card = document.getElementById(`q-card-${qId}`); card.classList.add('border-indigo-100', 'bg-indigo-50/5');// Update progress statistics updateProgress();// Smooth Scroll to Next unanswered question (optional auto-scroll for speed) if (!wasAnswered) { setTimeout(() => { const nextIndex = QUESTION_BANK.findIndex(q => q.id === qId) + 1; if (nextIndex < QUESTION_BANK.length) { const nextId = QUESTION_BANK[nextIndex].id; if (!userAnswers.hasOwnProperty(nextId)) { const nextCard = document.getElementById(`q-card-${nextId}`); if (nextCard) { nextCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } } }, 350); } }// Update progress tracking metrics function updateProgress() { const answeredCount = Object.keys(userAnswers).length; const progressPct = (answeredCount / 40) * 100;// Update sticky banner elements document.getElementById('sticky-progress-text').innerText = `${answeredCount}/40 Answered`; document.getElementById('sticky-progress-bar').style.width = `${progressPct}%`;// Control visibility of sticky tracker const tracker = document.getElementById('sticky-progress-container'); if (answeredCount > 0) { tracker.classList.remove('opacity-0', 'pointer-events-none'); } else { tracker.classList.add('opacity-0', 'pointer-events-none'); } }// Find and scroll to first unanswered card function scrollToNextUnanswered() { for (let i = 0; i < QUESTION_BANK.length; i++) { const qId = QUESTION_BANK[i].id; if (!userAnswers.hasOwnProperty(qId)) { const card = document.getElementById(`q-card-${qId}`); if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); // Flash red highlight temporarily card.classList.add('ring-2', 'ring-amber-400'); setTimeout(() => card.classList.remove('ring-2', 'ring-amber-400'), 1000); break; } } } }// Setup sticky header scroll trigger function setupScrollTracking() { window.addEventListener('scroll', () => { const intro = document.getElementById('quiz-intro-card'); const tracker = document.getElementById('sticky-progress-container'); if (intro && Object.keys(userAnswers).length > 0) { const rect = intro.getBoundingClientRect(); if (rect.bottom < 0) { tracker.classList.add('opacity-100'); tracker.classList.remove('opacity-0', 'pointer-events-none'); } else { tracker.classList.remove('opacity-100'); tracker.classList.add('opacity-0', 'pointer-events-none'); } } }); }// Auto Fill Test for testing & reviewing results instantly function autoFillTest() { QUESTION_BANK.forEach(q => { // Pick a mix of balanced random option labels for mock responses const options = ['A', 'B', 'C', 'D']; const randomChoice = options[Math.floor(Math.random() * options.length)]; const selectedOpt = q.options.find(o => o.label === randomChoice); selectOption(q.id, selectedOpt.score, randomChoice); }); // Auto scroll down to the action submit panel document.getElementById('submit-section').scrollIntoView({ behavior: 'smooth' }); }// Reset Quiz responses function resetQuiz() { userAnswers = {}; updateProgress(); renderQuestions(); document.getElementById('submit-validation-error').classList.add('hidden'); document.getElementById('results-panel').classList.add('hidden'); window.scrollTo({ top: 0, behavior: 'smooth' }); }// Submit and Analyze Results function submitQuiz() { const answeredCount = Object.keys(userAnswers).length;if (answeredCount < 40) { const error = document.getElementById('submit-validation-error'); error.classList.remove('hidden'); error.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; }document.getElementById('submit-validation-error').classList.add('hidden');// 1. Calculate scores let totalScore = 0; const categoryScores = { "Self-Awareness": { earned: 0, total: 32 }, "Self-Regulation": { earned: 0, total: 32 }, "Motivation": { earned: 0, total: 32 }, "Empathy": { earned: 0, total: 32 }, "Social Skills": { earned: 0, total: 32 } };QUESTION_BANK.forEach(q => { const userAnswer = userAnswers[q.id]; if (userAnswer) { totalScore += userAnswer.score; categoryScores[q.category].earned += userAnswer.score; } });// Normalize score to percentage-like index const percentage = Math.round((totalScore / 160) * 100);// Determine Profile Level let levelTitle = ""; let levelDesc = ""; let growthPlanHTML = "";if (percentage < 50) { levelTitle = "Emerging Emotional Awareness"; levelDesc = "You are beginning to recognize emotional patterns in your daily life. While reactive responses might occasionally take over during stressful situations, developing targeted self-awareness strategies will help you build stronger relational and emotional control."; growthPlanHTML = ` `; } else if (percentage < 75) { levelTitle = "Emotionally Aware Coach"; levelDesc = "You generally understand complex emotions and manage most personal scenarios effectively. You balance standard logic with empathetic consideration, though highly stressful situations can still tempt you toward defensive communication."; growthPlanHTML = ` `; } else if (percentage < 90) { levelTitle = "Highly Emotionally Intelligent"; levelDesc = "You demonstrate strong emotional awareness, empathy, and interpersonal skills. You can step outside your own perspective during disagreements and stay focused when facing challenges."; growthPlanHTML = ` `; } else { levelTitle = "Advanced Emotional Insight"; levelDesc = "You consistently show deep emotional understanding, adaptability, and strong relationship management. Your decisions are guided by deep empathy and long-term values rather than temporary emotional triggers."; growthPlanHTML = ` `; }// Render Core Result Card Data document.getElementById('eq-level-badge').innerText = levelTitle; document.getElementById('eq-general-desc').innerText = levelDesc; document.getElementById('eq-aggregate-score').innerText = totalScore; document.getElementById('eq-score-pct-bar').style.width = `${percentage}%`; document.getElementById('growth-blueprint-content').innerHTML = growthPlanHTML;// Render Category Breakdown Progress Card Layout const categoryContainer = document.getElementById('category-breakdown-container'); categoryContainer.innerHTML = '';const colors = { "Self-Awareness": { bg: "bg-indigo-600", lightBg: "bg-indigo-50", border: "border-indigo-100", text: "text-indigo-700" }, "Self-Regulation": { bg: "bg-sky-600", lightBg: "bg-sky-50", border: "border-sky-100", text: "text-sky-700" }, "Motivation": { bg: "bg-emerald-600", lightBg: "bg-emerald-50", border: "border-emerald-100", text: "text-emerald-700" }, "Empathy": { bg: "bg-amber-600", lightBg: "bg-amber-50", border: "border-amber-100", text: "text-amber-700" }, "Social Skills": { bg: "bg-rose-600", lightBg: "bg-rose-50", border: "border-rose-100", text: "text-rose-700" } };Object.keys(categoryScores).forEach(cat => { const scoreData = categoryScores[cat]; const catPct = Math.round((scoreData.earned / scoreData.total) * 100); const palette = colors[cat];const cardHtml = ` `; categoryContainer.insertAdjacentHTML('beforeend', cardHtml); });// Generate Educational Answer Review Deck generateAnswerReview('all');// Reveal and scroll smoothly to Results const resultsPanel = document.getElementById('results-panel'); resultsPanel.classList.remove('hidden'); resultsPanel.scrollIntoView({ behavior: 'smooth' }); }// Generate and Filter Educational Answer Review function generateAnswerReview(filterMode) { const container = document.getElementById('answer-review-deck'); container.innerHTML = '';// Render buttons active classes manually const allBtn = document.getElementById('filter-all'); const optBtn = document.getElementById('filter-optimal'); const subBtn = document.getElementById('filter-suboptimal');// Reset styles [allBtn, optBtn, subBtn].forEach(b => { b.className = "px-3.5 py-2 rounded-lg font-semibold bg-slate-100 text-slate-600 hover:bg-slate-200 transition"; });if (filterMode === 'all') allBtn.className = "px-3.5 py-2 rounded-lg font-semibold bg-indigo-50 text-indigo-700 transition"; if (filterMode === 'optimal') optBtn.className = "px-3.5 py-2 rounded-lg font-semibold bg-indigo-50 text-indigo-700 transition"; if (filterMode === 'suboptimal') subBtn.className = "px-3.5 py-2 rounded-lg font-semibold bg-indigo-50 text-indigo-700 transition";QUESTION_BANK.forEach((q, index) => { const ans = userAnswers[q.id]; if (!ans) return;const isOptimal = ans.score === 4;// Handle filters if (filterMode === 'optimal' && !isOptimal) return; if (filterMode === 'suboptimal' && isOptimal) return;// Find the optimal choice text const optimalOpt = q.options.find(o => o.score === 4); const userChoiceOpt = q.options.find(o => o.label === ans.label);const itemHtml = ` `; container.insertAdjacentHTML('beforeend', itemHtml); });if (container.children.length === 0) { container.innerHTML = `

No scenarios match your active review filters.

`; } }function filterReview(mode) { generateAnswerReview(mode); }// Accordion functionality function toggleFaq(id) { const ans = document.getElementById(`faq-ans-${id}`); const icon = document.getElementById(`faq-icon-${id}`);if (ans.classList.contains('hidden')) { ans.classList.remove('hidden'); icon.classList.add('rotate-180'); } else { ans.classList.add('hidden'); icon.classList.remove('rotate-180'); } }