Discover Your Social Archetype | Interactive Personality Quiz

\n {stage.title}\n

\n );\n}\n\n// --------------------- Confetti Function ---------------------\nfunction triggerRandomConfetti() {\n if (window.confetti) {\n const particleCount = Math.floor(Math.random() * 50) + 100;\n const spread = Math.random() * 60 + 40;\n const origin = { x: Math.random(), y: Math.random() * 0.5 + 0.3 };\n window.confetti({ particleCount, spread, origin });\n }\n}\n\n// --------------------- Components ---------------------\nfunction IntroScreen({ onStart }) {\n return (\n
\n
!
\n
\n Discover Your Social Archetype\n
\n
\n Unlock your inner potential and connect with your authentic social style\n
\n
\n This immersive quiz will reveal your unique social archetype and guide you toward events and communities that\n align with your natural strengths. Discover whether you're a visionary, nurturer, sage, artisan, connector,\n guardian, or catalyst.\n
\n
\n {archetypeSummaries.map((arch, idx) => (\n
\n {arch.name}\n
{arch.shortDesc}
\n
\n ))}\n
\n \n
\n
\n Takes only 5 minutes • {\" \"}\n Joined by 50,000+ others\n
\n
\n
\n );\n}\n\nfunction CountdownScreen({ onCountdownComplete }) {\n const [count, setCount] = useState(5);\n\n useEffect(() => {\n if (count <= 0) {\n window.confetti\n && window.confetti({\n particleCount: 200,\n spread: 100,\n origin: { x: 0.5, y: 0.5 },\n });\n const timer = setTimeout(() => onCountdownComplete(), 1500);\n return () => clearTimeout(timer);\n }\n const timer = setTimeout(() => setCount(count - 1), 1000);\n return () => clearTimeout(timer);\n }, [count, onCountdownComplete]);\n\n return (\n
\n
\n
{count > 0 ? count : \"Go!\"}
\n
\n
\n {count > 0 ? \"Preparing your personality journey...\" : \"Let's discover your archetype!\"}\n
\n
\n );\n}\n\nfunction PersonalityQuiz({ onComplete }) {\n const [currentQuestion, setCurrentQuestion] = useState(0);\n const [answers, setAnswers] = useState([]);\n const [fadeOutIn, setFadeOutIn] = useState(false);\n\n const handleAnswer = (optionIndex) => {\n triggerRandomConfetti();\n\n // Add transition effect between questions\n setFadeOutIn(true);\n\n const newAnswers = [...answers, optionIndex];\n setAnswers(newAnswers);\n\n setTimeout(() => {\n if (currentQuestion < staticQuestions.length - 1) {\n setCurrentQuestion(currentQuestion + 1);\n } else {\n submitQuiz(newAnswers);\n }\n setFadeOutIn(false);\n }, 400);\n };\n\n const submitQuiz = (allAnswers) => {\n const tally = {};\n staticQuestions.forEach((question, i) => {\n const selected = allAnswers[i];\n const archetype = question.mapping[selected];\n tally[archetype] = (tally[archetype] || 0) + 1;\n });\n\n let maxCount = 0;\n let resultArchetype = \"\";\n Object.entries(tally).forEach(([archetype, count]) => {\n if (count > maxCount) {\n maxCount = count;\n resultArchetype = archetype;\n }\n });\n\n const events = recommendedEvents[resultArchetype] || [];\n const insights = archetypeInsights[resultArchetype] || [];\n const examples = famousExamples[resultArchetype] || [];\n\n onComplete({\n archetype: resultArchetype,\n events,\n insights,\n examples,\n allAnswers, // Pass all answers for potential visualization\n tally, // Pass the tally for the results breakdown\n });\n };\n\n const question = staticQuestions[currentQuestion];\n // Determine stage based on question index (each stage 5 questions)\n const stageIndex = Math.floor(currentQuestion / 5);\n\n // Calculate progress percentage\n const progressPercentage = ((currentQuestion + 1) / staticQuestions.length) * 100;\n\n return (\n
\n {currentQuestion % 5 === 0 && }\n
\n {question.text}\n
\n\n
\n
\n
\n
\n
\n Question {currentQuestion + 1} of {staticQuestions.length}\n
\n
\n\n
\n {question.options.map((option, index) => (\n handleAnswer(index)}\n className=\"option-button\"\n >\n {[\"1️⃣\", \"2️⃣\", \"3️⃣\", \"4️⃣\"][index]}\n {option} \n \n ))}\n
\n
\n );\n}\n\nfunction QuizResults({ results }) {\n const [activeTab, setActiveTab] = useState(\"overview\");\n const iconClass = archetypeIcons[results.archetype] || \"fa-solid fa-user\";\n\n // Calculate percentage for each archetype\n const totalAnswers = Object.values(results.tally).reduce((a, b) => a + b, 0);\n const percentages = {};\n Object.entries(results.tally).forEach(([archetype, count]) => {\n percentages[archetype] = Math.round((count / totalAnswers) * 100);\n });\n\n // Sort archetypes by percentage (descending)\n const sortedArchetypes = Object.entries(percentages)\n .sort((a, b) => b[1] - a[1])\n .map(([archetype]) => archetype);\n\n return (\n
\n
\n
\n Your Social Archetype:\n {results.archetype}\n
\n
\n \n \n
\n
\n\n
\n
\n setActiveTab(\"overview\")}\n >\n Overview\n \n setActiveTab(\"insights\")}\n >\n Insights\n \n setActiveTab(\"events\")}\n >\n Events\n \n setActiveTab(\"breakdown\")}\n >\n Breakdown\n \n
\n\n
\n {activeTab === \"overview\" && (\n
\n
\n
{archetypeDescriptions[results.archetype]}
\n
\n\n
\n Kindred Spirits\n
\n
\n {results.examples.map((person, index) => (\n
\n {person}\n
\n ))}\n
\n
\n )}\n\n {activeTab === \"insights\" && (\n
\n
\n Your Unique Strengths\n
\n
\n {results.insights.map((insight, index) => (\n
\n {insight}\n
\n ))}\n
\n
\n )}\n\n {activeTab === \"events\" && (\n
\n
\n Recommended Events for You\n
\n
\n {results.events.map((event, index) => (\n
\n
\n \n \n
\n
\n
{event}
\n
Perfect match for your {results.archetype.toLowerCase()} nature
\n \n
\n
\n ))}\n
\n
\n )}\n\n {activeTab === \"breakdown\" && (\n
\n
\n Your Archetype Breakdown\n
\n
\n {sortedArchetypes.map((archetype, index) => (\n
\n
\n {archetype}\n
\n
\n \n
\n {percentages[archetype]}%\n
\n
\n ))}\n
\n
\n )}\n
\n
\n\n
\n \n
\n \n View Source\n \n
\n
\n \n );\n}\n\nfunction App() {\n const [phase, setPhase] = useState(\"intro\");\n const [quizResults, setQuizResults] = useState(null);\n\n const handleStart = () => setPhase(\"countdown\");\n const handleCountdownComplete = () => setPhase(\"quiz\");\n const handleQuizComplete = (results) => {\n setQuizResults(results);\n window.confetti\n && window.confetti({\n particleCount: 250,\n spread: 120,\n origin: { x: 0.5, y: 0.4 },\n });\n setPhase(\"results\");\n };\n\n switch (phase) {\n case \"intro\":\n return ;\n case \"countdown\":\n return ;\n case \"quiz\":\n return ;\n case \"results\":\n return ;\n default:\n return null;\n }\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Discover Your Social Archetype | Interactive Personality Quiz\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}",[],[213],"files",[150,170,178,185,193,202,211],"counts",{"_226":32,"_227":217,"_228":32,"_229":206},"pulls","branches","forks","envVars","contents",[],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_159":160,"_106":233,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":234},["D",1750363408228],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":243,"_148":248,"_222":270,"_198":271,"_230":273,"_274":-5,"_275":22,"_276":-5,"_277":-5,"_278":-5,"_279":280},{"_104":105,"_95":96,"_106":244,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":245,"_132":246,"_135":247,"_147":22},["D",1750362068477],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[249,252,255,258,261,264,267],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":250,"_98":251},[],[152],{"_104":171,"_95":172,"_153":173,"_155":-5,"_156":138,"_157":174,"_159":160,"_106":175,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":253,"_98":254},[],[172],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_159":160,"_106":182,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":256,"_98":257},[],[99],{"_104":186,"_95":187,"_153":188,"_155":-5,"_156":138,"_157":189,"_159":160,"_106":190,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":259,"_98":260},[],[187],{"_104":194,"_95":195,"_153":196,"_155":-5,"_156":138,"_157":101,"_159":160,"_106":197,"_100":32,"_162":198,"_164":199,"_165":22,"_166":-5,"_167":262,"_98":263},[],[195],{"_104":203,"_95":204,"_153":205,"_155":-5,"_156":138,"_157":206,"_159":22,"_106":207,"_100":32,"_162":198,"_164":208,"_165":22,"_166":-5,"_167":265,"_98":266},[],[204],{"_104":212,"_95":213,"_153":214,"_155":-5,"_156":138,"_157":215,"_159":22,"_106":216,"_100":217,"_162":218,"_164":219,"_165":22,"_166":-5,"_167":268,"_98":269},[],[213],[249,252,255,258,261,264,267],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_159":160,"_106":233,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":272},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

\n Kindred Spirits\n

\n Your Unique Strengths\n

\n Recommended Events for You\n

{event}

\n Your Archetype Breakdown\n

\n {stage.title}\n

\n Discover Your Social Archetype\n

{count > 0 ? count : \"Go!\"}

\n {question.text}\n

\n Your Social Archetype:\n {results.archetype}\n