. Friendship Patterns", icon: "fa-solid fa-users text-teal-500", content: "You boast a wide and diverse network of friends, professional contacts, and social circles. You are often the initiator of plans, organizing happy hours, weekend dinners, or group outdoor trips. You enjoy group dynamics immensely but still maintain several deep, close friendships that you support with true devotion and loyalty." }, { title: "6. Relationship Tendencies", icon: "fa-solid fa-heart text-rose-500", content: "In romantic relationships, you are highly affectionate, expressive, and fun-loving. You want a partner who will share active adventures with you and happily join you in social settings. However, you are highly supportive and can easily respect an introverted partner’s need for space, provided they communicate it with love and clarity." }, { title: "7. Hidden Strengths", icon: "fa-solid fa-gem text-amber-500", content: "Your main strengths include your high charisma, warm approachability, and exceptional collaboration skills. You are highly adaptable, excellent at networking, and bring an infectious enthusiasm that boosts group morale. You are great at motivating teams and bringing diverse groups together to achieve a common goal." }, { title: "8. Potential Challenges", icon: "fa-solid fa-triangle-exclamation text-yellow-500", content: "You can occasionally struggle with restlessness when forced into long periods of isolation or quiet, repetitive work. You might find yourself seeking external validation or feedback too heavily before making decisions. There is also a small risk of over-scheduling yourself, leaving too little time for essential self-care and deeper reflection." }, { title: "9. Best Environment", icon: "fa-solid fa-house-laptop text-emerald-500", content: "You thrive in active, highly interactive, and socially vibrant environments. Open offices, collaborative workspaces, buzzing community spaces, and frequent group gatherings feed your energy perfectly. You appreciate modern environments that are fast-paced but still offer professional structure." }, { title: "10. Personal Growth Recommendations", icon: "fa-solid fa-circle-up text-violet-500", content: "For optimal growth: 1) Actively practice quiet meditation or independent journaling to build comfort with pure solitude. 2) Before immediately seeking verbal advice, give yourself 15 minutes to solve a problem on your own. 3) Guard your calendar—ensure you leave at least one evening a week completely free to recharge." } ] }, highly_extroverted: { title: "The Dynamic Catalyst (Highly Extroverted)", subtitle: "A roaring fire of social energy, leadership, and connection that lights up every space you enter.", gradient: "from-rose-600 to-rose-950", sections: [ { title: "1. Personality Summary", icon: "fa-solid fa-user-gear text-blue-500", content: "As a Highly Extroverted individual, you are a powerful engine of social energy, charisma, and action. Your mind is oriented purely outward—fueled, inspired, and motivated by the people, activities, and events happening around you. You are expressive, warm, and highly expressive, viewing the world as an endless playground of potential friendships, collaborations, and adventures. You thrive under the spotlight and bring immense life and momentum to any room you enter." }, { title: "2. Social Energy Style", icon: "fa-solid fa-battery-full text-cyan-500", content: "Your energy battery operates on a unique principle: it is charged by interactions. Spending time in active groups, busy offices, and lively social venues fills you with massive vitality and joy. Conversely, extended periods of solitude act like a heavy energy drain, leaving you feeling lethargic, mentally foggy, or anxious. You require continuous social stimulation to keep operating at your peak physiological state." }, { title: "3. Communication Style", icon: "fa-solid fa-comment-dots text-indigo-500", content: "You are an incredibly rapid, animated, and charismatic communicator. You process your thoughts in real-time, meaning you literally think out loud—developing, refining, and sharing ideas in active dialogue. You are highly expressive, using dramatic gestures and touch to connect, and you excel at breaking the ice, facilitating groups, and captivating large audiences with effortless confidence." }, { title: "4. Work and Career Tendencies", icon: "fa-solid fa-briefcase text-slate-600", content: "You are a natural-born leader, visionary, and public advocate in your career. You excel in high-stakes roles that require intense negotiation, public relations, rapid teamwork, and constant real-time problem-solving. You bring invaluable passion and drive to organizations, motivating others with your enthusiastic vision. You intensely dislike solitary, repetitive, behind-the-scenes work without active feedback loop systems." }, { title: "5. Friendship Patterns", icon: "fa-solid fa-users text-teal-500", content: "You have an expansive, sweeping network of friends, colleagues, and acquaintances across multiple circles. You are the ultimate social catalyst—constantly arranging trips, hosting parties, and introducing people to form new networks. Your home is always open, and you love being surrounded by a bustling community, though you must occasionally pause to nurture your closest, deepest friendships." }, { title: "6. Relationship Tendencies", icon: "fa-solid fa-heart text-rose-500", content: "In romantic partnerships, you are deeply expressive, passionate, and seek a highly active, adventurous journey. You want a partner who can match your high energy, join you at social gatherings, and actively share your expressive world. You show your love through bold declarations, surprise adventures, and constant shared activities." }, { title: "7. Hidden Strengths", icon: "fa-solid fa-gem text-amber-500", content: "Your primary strengths are your absolute confidence, infectious passion, and unmatched social magnetism. You possess excellent emotional resilience in groups, bounce back rapidly from rejection, and excel at public speaking and persuasion. You are a powerful force for change, capable of organizing and leading massive initiatives with absolute ease." }, { title: "8. Potential Challenges", icon: "fa-solid fa-triangle-exclamation text-yellow-500", content: "Your continuous search for external stimulation can lead to intense impulsivity or an inability to sit comfortably with silence and solitude. You may occasionally dominate conversations, interrupting quieter individuals or accidentally dismissing vital details that require deep, slow analysis. You can also struggle to handle quiet, slow periods without feeling deeply anxious." }, { title: "9. Best Environment", icon: "fa-solid fa-house-laptop text-emerald-500", content: "You thrive beautifully in high-energy, crowded, fast-paced, and highly stimulated environments. Buzzing modern cities, active open-floor creative workspaces, massive community events, and busy, bustling family homes keep your mind fully engaged and feed your natural drive for connection." }, { title: "10. Personal Growth Recommendations", icon: "fa-solid fa-circle-up text-violet-500", content: "For massive growth: 1) Actively practice active listening—intentionally pause for 5 seconds after someone stops speaking before offering your thoughts. 2) Schedule 'solitude blocks' to build comfort with your own quiet thoughts. 3) Learn to enjoy and appreciate the quiet, slow progress of deep, independent projects without seeking instant external praise." } ] } };// Render all 40 questions dynamically function renderQuestions() { const container = document.getElementById('questions-container'); container.innerHTML = '';questions.forEach((q, index) => { const questionCard = document.createElement('div'); questionCard.className = "bg-white border border-slate-200 rounded-2xl p-6 sm:p-8 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col gap-6"; questionCard.setAttribute('data-question-id', q.id);// Question Header const qHeader = `

${q.text}

`;// Options layout stacked vertically as requested const options = [ { label: "Strongly Disagree", value: 1, color: "hover:border-rose-300 hover:bg-rose-50/30 text-rose-700" }, { label: "Disagree", value: 2, color: "hover:border-rose-200 hover:bg-rose-50/10 text-rose-600" }, { label: "Neutral", value: 3, color: "hover:border-slate-300 hover:bg-slate-50 text-slate-600" }, { label: "Agree", value: 4, color: "hover:border-blue-200 hover:bg-blue-50/10 text-blue-600" }, { label: "Strongly Agree", value: 5, color: "hover:border-blue-300 hover:bg-blue-50/30 text-blue-700" } ];let optionsHTML = ``;questionCard.innerHTML = qHeader + optionsHTML; container.appendChild(questionCard); }); }// Object holding user answers const userAnswers = {};// Handle when user clicks an answer choice function selectOption(questionId, value, buttonElement) { // Store value userAnswers[questionId] = value;// Reset other buttons in the same parent group const siblingButtons = buttonElement.parentNode.querySelectorAll('button'); siblingButtons.forEach(btn => { btn.classList.remove('border-indigo-600', 'bg-indigo-50/60', 'ring-2', 'ring-indigo-100'); btn.classList.add('border-slate-200'); // Reset dot inside right circle const dot = btn.querySelector('.rounded-full > span'); dot.classList.remove('bg-indigo-600'); dot.classList.add('bg-transparent'); });// Highlight selected button buttonElement.classList.remove('border-slate-200'); buttonElement.classList.add('border-indigo-600', 'bg-indigo-50/60', 'ring-2', 'ring-indigo-100'); const activeDot = buttonElement.querySelector('.rounded-full > span'); activeDot.classList.remove('bg-transparent'); activeDot.classList.add('bg-indigo-600');// Update progress metrics updateProgress(); }// Calculate progress percentage and show/hide sticky action bar function updateProgress() { const answeredCount = Object.keys(userAnswers).length; const percentage = Math.round((answeredCount / 40) * 100);// Update UI elements document.getElementById('answered-count').innerText = answeredCount; document.getElementById('progress-badge').innerText = `${percentage}% Completed`; document.getElementById('progress-bar-fill').style.width = `${percentage}%`;const stickyBar = document.getElementById('sticky-action-bar'); if (answeredCount === 40) { // Reveal calculating sticky bar smoothly stickyBar.classList.remove('translate-y-full'); } else { stickyBar.classList.add('translate-y-full'); } }// Processes the scores and compiles the detailed analysis reports function calculateTestResults() { if (Object.keys(userAnswers).length < 40) { showToast("Incomplete Test", "Please answer all 40 questions before calculating your result.", "error"); return; }let totalMaxPoints = 40 * 5; // 200 points maximum (all answers being 5) let userExtrovertPoints = 0;// Loop and sum values questions.forEach(q => { const answer = userAnswers[q.id]; if (q.direction) { // Positive direction: Strongly Agree (5) is maximum extroversion userExtrovertPoints += answer; } else { // Negative direction: Strongly Agree (5) is maximum introversion, Strongly Disagree (1) is extrovert userExtrovertPoints += (6 - answer); } });// Convert to final percentage score between 0% and 100% // Minimum points possible is 40 * 1 = 40. Maximum points is 200. // Range = 160. const rawPercentage = ((userExtrovertPoints - 40) / 160) * 100; const finalPercentage = Math.round(rawPercentage);// Determine Archetype category let categoryKey = ""; let archetypeData = null;if (finalPercentage <= 20) { categoryKey = "highly_introverted"; } else if (finalPercentage <= 40) { categoryKey = "moderately_introverted"; } else if (finalPercentage <= 60) { categoryKey = "ambivert"; } else if (finalPercentage <= 80) { categoryKey = "moderately_extroverted"; } else { categoryKey = "highly_extroverted"; }archetypeData = personalityDetails[categoryKey];// Render Results to UI displayResultsUI(finalPercentage, archetypeData, categoryKey); }// Inject results details, configure the spectrum pin and show results container function displayResultsUI(percentage, archetype, key) { // Update Text Nodes document.getElementById('result-archetype-title').innerText = archetype.title; document.getElementById('result-archetype-subtitle').innerText = archetype.subtitle; document.getElementById('result-percentage-display').innerText = `${percentage}%`;// Adjust header gradient based on result archetype const headerGradient = document.getElementById('result-header-gradient'); headerGradient.className = `absolute inset-0 bg-gradient-to-r ${archetype.gradient} opacity-95 z-0`;// Adjust Spectrum Pin Position // Align the pin on the scale left offset (0% score = 0%, 100% score = 100% left) const spectrumPin = document.getElementById('spectrum-pin'); spectrumPin.style.left = `${percentage}%`;// Build the 10 exhaustive sections const sectionsContainer = document.getElementById('result-sections-container'); sectionsContainer.innerHTML = '';archetype.sections.forEach(sec => { const secCard = document.createElement('div'); secCard.className = "bg-slate-50 border border-slate-200 rounded-2xl p-6 sm:p-8 hover:bg-slate-50/50 transition duration-150"; secCard.innerHTML = `

${sec.title}

${sec.content}

`; sectionsContainer.appendChild(secCard); });// Reveal Result Card and smooth scroll to it const resultSection = document.getElementById('result-section'); resultSection.classList.remove('hidden');// Hide sticky bar now that the score is shown document.getElementById('sticky-action-bar').classList.add('translate-y-full');// Scroll beautifully setTimeout(() => { resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); showToast("Analysis Complete", "Your comprehensive personality portrait has been calculated!", "success"); }, 100); }// Copies results to clipboard so user can share them easily function shareResults() { const title = document.getElementById('result-archetype-title').innerText; const percentage = document.getElementById('result-percentage-display').innerText; const shareText = `I just took The Introvert vs Extrovert Test and my archetype is: ${title} (${percentage} Extroversion Score)! Discover your style of social energy today on Spectrum Metrics.`;// Create temporary input element for copy const tempInput = document.createElement('textarea'); tempInput.value = shareText; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput);showToast("Copied to Clipboard!", "The result summary has been copied to your clipboard. Share it with friends!", "success"); }// Clear everything and restart function retakeTest() { // Clear selections for (let key in userAnswers) { delete userAnswers[key]; }// Scroll back to top window.scrollTo({ top: 0, behavior: 'smooth' });// Hide results document.getElementById('result-section').classList.add('hidden');// Rerender questions renderQuestions(); updateProgress();showToast("Test Reset", "The test was successfully reset. You can start answering again.", "info"); }// Custom Toast Management (safe alternative to alerts) function showToast(title, message, type = "success") { const toast = document.getElementById('custom-toast'); const icon = document.getElementById('toast-icon'); document.getElementById('toast-title').innerText = title; document.getElementById('toast-message').innerText = message;// Style variations based on type if (type === "success") { icon.className = "text-emerald-400 p-1 shrink-0"; icon.innerHTML = ``; } else if (type === "error") { icon.className = "text-rose-500 p-1 shrink-0"; icon.innerHTML = ``; } else { icon.className = "text-blue-400 p-1 shrink-0"; icon.innerHTML = ``; }// Slide in toast.classList.remove('translate-x-full');// Slide out after 4.5 seconds setTimeout(() => { hideToast(); }, 4500); }function hideToast() { document.getElementById('custom-toast').classList.add('translate-x-full'); }// On Load window.onload = function() { renderQuestions(); };