Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mind Mirror</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { width: 100%; min-height: 100%; } | |
| body { background: #f8fafc; color: #1e293b; font-family: 'DM Sans', sans-serif; overflow-x: hidden; } | |
| body::before { | |
| content: ''; position: fixed; inset: 0; | |
| background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 60%), | |
| radial-gradient(ellipse 60% 80% at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 60%); | |
| pointer-events: none; z-index: 0; | |
| } | |
| .screen { display: none; position: relative; z-index: 1; min-height: 100vh; padding: 40px 20px; } | |
| .screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } | |
| #screen-intro { text-align: center; gap: 32px; } | |
| .logo-ring { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #6366f1; display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; animation: pulse 3s ease-in-out infinite; background: #ffffff; } | |
| .logo-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(99, 102, 241, 0.2); } | |
| .logo-icon { font-size: 38px; } | |
| @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(99, 102, 241, 0.2)}50%{box-shadow:0 0 0 20px rgba(99, 102, 241, 0)} } | |
| h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem,6vw,3.5rem); font-weight: 900; line-height: 1.1; color: #0f172a; } | |
| h1 span { color: #6366f1; } | |
| .tagline { font-size: 1.1rem; color: #64748b; max-width: 420px; line-height: 1.7; font-weight: 300; } | |
| .pills { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } | |
| .pill { background: #ffffff; border: 1px solid rgba(99, 102, 241, 0.15); border-radius: 100px; padding: 8px 20px; font-size: 0.85rem; color: #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,0.02); } | |
| #screen-form { gap: 24px; max-width: 480px; width: 100%; } | |
| .form-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; text-align: center; color: #0f172a; } | |
| .fg { display: flex; flex-direction: column; gap: 8px; width: 100%; } | |
| .fg label { font-size: 0.9rem; color: #475569; font-weight: 500; } | |
| .fg input, .fg select { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 14px 18px; color: #0f172a; font-family: 'DM Sans', sans-serif; font-size: 1rem; outline: none; transition: all 0.2s; width: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.02); } | |
| .fg input:focus, .fg select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } | |
| .fg select option { background: #ffffff; color: #0f172a; } | |
| .btn { background: #6366f1; color: #ffffff; border: none; border-radius: 12px; padding: 16px 40px; font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2); } | |
| .btn:hover { background: #4f46e5; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); } | |
| .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } | |
| #screen-quiz { gap: 32px; max-width: 600px; width: 100%; } | |
| .prog-wrap { width: 100%; background: #e2e8f0; border-radius: 100px; height: 6px; overflow: hidden; } | |
| .prog-fill { height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 100px; transition: width 0.5s ease; } | |
| .qmeta { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #64748b; } | |
| .qcat { background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.15); color: #4f46e5; padding: 4px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 500; } | |
| .qcard { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px; width: 100%; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02); } | |
| .qtext { font-size: 1.15rem; font-weight: 500; line-height: 1.7; margin-bottom: 24px; color: #0f172a; } | |
| .opts { display: flex; flex-direction: column; gap: 12px; } | |
| .opt { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 20px; color: #334155; font-family: 'DM Sans', sans-serif; font-size: 0.97rem; cursor: pointer; text-align: left; transition: all 0.2s; line-height: 1.5; } | |
| .opt:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.03); color: #0f172a; } | |
| .opt.selected { border-color: #6366f1; background: rgba(99, 102, 241, 0.08); color: #4f46e5; font-weight: 500; } | |
| #screen-loading { gap: 28px; text-align: center; } | |
| .loading-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; text-align: center; margin-bottom: 8px; color: #0f172a; } | |
| .loading-subtitle { color: #64748b; text-align: center; font-size: 0.9rem; } | |
| .orb { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #e2e8f0; border-top-color: #6366f1; border-left-color: #6366f1; animation: spin 1s linear infinite; margin: 0 auto; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .steps { display: flex; flex-direction: column; gap: 10px; } | |
| .step { font-size: 0.9rem; color: #94a3b8; display: flex; align-items: center; gap: 10px; justify-content: center; transition: color 0.4s; } | |
| .step.done { color: #334155; font-weight: 500; } | |
| .dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; transition: background 0.4s; flex-shrink: 0; } | |
| .step.done .dot { background: #6366f1; } | |
| #screen-result { gap: 28px; max-width: 640px; width: 100%; animation: fadeup 0.7s ease; padding-top: 60px; padding-bottom: 60px; } | |
| @keyframes fadeup { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} } | |
| .rhead { text-align: center; } | |
| .rhead h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: #6366f1; margin-bottom: 8px; } | |
| .rhead p { color: #64748b; font-size: 0.95rem; } | |
| .rcard { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px 32px; width: 100%; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03); } | |
| .rcard h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: #4f46e5; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } | |
| .rcard h3::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } | |
| .rcontent { font-size: 1rem; line-height: 1.85; color: #334155; font-weight: 400; } | |
| .sci-badge { display: flex; align-items: center; gap: 18px; background: rgba(99, 102, 241, 0.04); border: 1px solid rgba(99, 102, 241, 0.1); border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; } | |
| .sci-icon { font-size: 2.4rem; } | |
| .sci-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: #0f172a; } | |
| .sci-title { font-size: 0.85rem; color: #64748b; margin-top: 4px; } | |
| .jobs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } | |
| .job { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 100px; padding: 6px 16px; font-size: 0.88rem; color: #334155; font-weight: 500; } | |
| .score-bars { display: flex; flex-direction: column; gap: 12px; } | |
| .score-row { display: flex; align-items: center; gap: 12px; } | |
| .score-label { font-size: 0.85rem; color: #475569; width: 80px; flex-shrink: 0; font-weight: 500; } | |
| .score-bar-wrap { flex: 1; background: #f1f5f9; border-radius: 100px; height: 10px; overflow: hidden; border: 1px solid #e2e8f0; } | |
| .score-bar-fill { height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 100px; transition: width 1s ease; } | |
| .score-val { font-size: 0.82rem; color: #64748b; width: 28px; text-align: right; flex-shrink: 0; font-weight: 500; } | |
| .btn-out { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px 32px; color: #475569; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } | |
| .btn-out:hover { border-color: #6366f1; background: #f8fafc; color: #6366f1; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="screen-intro" class="screen active"> | |
| <div class="logo-ring"><span class="logo-icon">🧷</span></div> | |
| <div><h1>Mind<br><span>Mirror</span></h1></div> | |
| <p class="tagline">Discover your intelligence type and find out which legendary scientist thinks like you.</p> | |
| <div class="pills"> | |
| <div class="pill">⏱ 5 minutes</div> | |
| <div class="pill">🧠 15 questions</div> | |
| <div class="pill">✨ Instant results</div> | |
| </div> | |
| <button class="btn" onclick="go('form')">Start the Test</button> | |
| </div> | |
| <div id="screen-form" class="screen"> | |
| <p class="form-title">Before we begin</p> | |
| <div class="fg"><label>Your Name</label><input type="text" id="iname" placeholder="Enter your name"/></div> | |
| <div class="fg"><label>Your Age</label><input type="number" id="iage" placeholder="e.g. 25" min="10" max="80"/></div> | |
| <div class="fg"><label>Education Level</label> | |
| <select id="iedu"> | |
| <option value="">Select...</option> | |
| <option>High School</option> | |
| <option>Bachelor Degree</option> | |
| <option>Postgraduate</option> | |
| </select> | |
| </div> | |
| <div class="fg"><label>What do you enjoy most?</label> | |
| <select id="iint"> | |
| <option value="">Select...</option> | |
| <option>Reading and Research</option> | |
| <option>Art and Creativity</option> | |
| <option>Technology and Programming</option> | |
| <option>People and Communication</option> | |
| <option>Sports and Physical Activity</option> | |
| <option>Business and Entrepreneurship</option> | |
| </select> | |
| </div> | |
| <button class="btn" onclick="startQ()">Let us Go</button> | |
| </div> | |
| <div id="screen-quiz" class="screen"> | |
| <div class="prog-wrap"><div class="prog-fill" id="prog" style="width:0%"></div></div> | |
| <div class="qmeta"><span id="qnum">Question 1 of 15</span><span class="qcat" id="qcat">Logic</span></div> | |
| <div class="qcard"><p class="qtext" id="qtext"></p><div class="opts" id="qopts"></div></div> | |
| <button class="btn" id="btnNext" disabled onclick="nextQ()">Next</button> | |
| </div> | |
| <div id="screen-loading" class="screen"> | |
| <div class="orb"></div> | |
| <div> | |
| <h2 class="loading-title">Analysing your mind...</h2> | |
| <p class="loading-subtitle">Processing your answers</p> | |
| </div> | |
| <div class="steps"> | |
| <div class="step" id="s1"><div class="dot"></div>Detecting patterns</div> | |
| <div class="step" id="s2"><div class="dot"></div>Identifying intelligence type</div> | |
| <div class="step" id="s3"><div class="dot"></div>Matching with scientists</div> | |
| <div class="step" id="s4"><div class="dot"></div>Generating your personal report</div> | |
| </div> | |
| </div> | |
| <div id="screen-result" class="screen"> | |
| <div class="rhead"><h2 id="rname">Your Results</h2><p>Personalised intelligence analysis</p></div> | |
| <div class="rcard"> | |
| <h3>Your Intelligence Scores</h3> | |
| <div class="score-bars" id="score-bars"></div> | |
| </div> | |
| <div class="rcard"><h3>Your Intelligence Type</h3><div class="rcontent" id="rintel"></div></div> | |
| <div class="rcard"> | |
| <h3>Your Mind Resembles</h3> | |
| <div class="sci-badge"> | |
| <div class="sci-icon" id="rsicon"></div> | |
| <div><div class="sci-name" id="rsname"></div><div class="sci-title" id="rstitle"></div></div> | |
| </div> | |
| <div class="rcontent" id="rsreason"></div> | |
| </div> | |
| <div class="rcard"> | |
| <h3>Best Career Matches</h3> | |
| <div class="jobs" id="rjobs"></div> | |
| <div class="rcontent" id="rjreason"></div> | |
| </div> | |
| <div class="rcard"><h3>Personal Advice</h3><div class="rcontent" id="radvice"></div></div> | |
| <button class="btn-out" onclick="location.reload()">↩ Restart</button> | |
| </div> | |
| <script> | |
| var QS = [ | |
| {c:"Logic",t:"You have 3 boxes: one apples only, one oranges only, one mixed. All labels are wrong. You open the mixed-label box and find an apple. Can you identify all boxes?",o:[{t:"Yes, since all labels are wrong I deduce the rest logically.",s:{logical:3}},{t:"No, I need to open another box.",s:{logical:1}},{t:"Not sure, not enough information.",s:{logical:1}},{t:"Maybe, I need more time to think.",s:{logical:2}}]}, | |
| {c:"Creativity",t:"A 5-year-old asks: What is time? How do you explain it?",o:[{t:"Time is what passes while you wait for dinner.",s:{creative:3,verbal:2}},{t:"I show a clock and explain the hands.",s:{logical:2}},{t:"Time is the space between waking up and going to sleep.",s:{creative:2,verbal:2}},{t:"I say they are too young to understand.",s:{logical:1}}]}, | |
| {c:"Spatial",t:"You are standing facing south. Which hand points north?",o:[{t:"My left hand.",s:{spatial:3}},{t:"My right hand.",s:{spatial:1}},{t:"I am not sure, I need a compass.",s:{spatial:0}},{t:"It depends on which way I am walking.",s:{spatial:1}}]}, | |
| {c:"Verbal",t:"Best way to convince someone with a very different opinion?",o:[{t:"Find common ground first, then present evidence calmly.",s:{verbal:3,emotional:2}},{t:"Use strong facts and statistics.",s:{logical:2,verbal:1}},{t:"Ask questions that guide them to the answer.",s:{verbal:3,emotional:3}},{t:"Stay confident and repeat my point firmly.",s:{verbal:1}}]}, | |
| {c:"Emotional",t:"Your friend failed something important and is discouraged. First thing you do?",o:[{t:"Listen carefully before saying anything.",s:{emotional:3}},{t:"Point out their mistakes so they can improve.",s:{logical:2,emotional:1}},{t:"Share stories of people who succeeded after failure.",s:{verbal:2,emotional:2}},{t:"Suggest a practical action plan immediately.",s:{logical:3,emotional:1}}]}, | |
| {c:"Logic",t:"All Bloops are Razzies. All Razzies are Lazzies. Are all Bloops definitely Lazzies?",o:[{t:"Yes, always.",s:{logical:3}},{t:"No, not necessarily.",s:{logical:0}},{t:"Sometimes.",s:{logical:1}},{t:"Not enough information.",s:{logical:1}}]}, | |
| {c:"Creativity",t:"If you could add a sixth human sense, what would it be?",o:[{t:"Detecting lies, so society would be more honest.",s:{creative:3,verbal:2}},{t:"Sensing magnetic fields to always know direction.",s:{creative:2,spatial:2}},{t:"Reading hidden emotions in others.",s:{creative:3,emotional:3}},{t:"Nothing, five senses are enough.",s:{logical:1}}]}, | |
| {c:"Spatial",t:"A room has 4 corners. A cat in one corner sees 3 cats in every other corner. How many cats total?",o:[{t:"4 cats.",s:{spatial:3,logical:3}},{t:"13 cats.",s:{spatial:0}},{t:"3 cats.",s:{spatial:1}},{t:"That is impossible.",s:{logical:1}}]}, | |
| {c:"Verbal",t:"Which sentence has the best style?",o:[{t:"A great book does not just add information, it changes how you think.",s:{verbal:3}},{t:"Books are very useful and contain a lot of information.",s:{verbal:1}},{t:"You should read books because they are important.",s:{verbal:0}},{t:"Reading is one of the important types of learning.",s:{verbal:1}}]}, | |
| {c:"Emotional",t:"A friend whose mood changes very frequently. Your first interpretation?",o:[{t:"They are probably under stress or going through something difficult.",s:{emotional:3}},{t:"That is just their personality, hard to change.",s:{emotional:0}},{t:"They might have a health issue.",s:{logical:2}},{t:"They might be seeking attention.",s:{verbal:1}}]}, | |
| {c:"Logic",t:"If you multiply all numbers from 1 to 10, how many zeros does the result end with?",o:[{t:"Two zeros.",s:{logical:3}},{t:"One zero.",s:{logical:1}},{t:"Ten zeros.",s:{logical:0}},{t:"I cannot calculate that.",s:{logical:0}}]}, | |
| {c:"Creativity",t:"If your life were a movie, what genre?",o:[{t:"A deep psychological drama full of inner conflict.",s:{creative:3,emotional:3}},{t:"An action thriller packed with challenges and victories.",s:{creative:2}},{t:"A social comedy with a diverse cast.",s:{creative:2,verbal:2}},{t:"A structured scientific documentary.",s:{logical:3}}]}, | |
| {c:"Spatial",t:"If you fold a square paper diagonally in half, what shape do you get?",o:[{t:"A right-angled triangle.",s:{spatial:3}},{t:"A rectangle.",s:{spatial:0}},{t:"A trapezoid.",s:{spatial:1}},{t:"I am not sure.",s:{spatial:0}}]}, | |
| {c:"Verbal",t:"Emailing your manager to request a day off. Most important element?",o:[{t:"A clear reason plus a solution for pending work.",s:{verbal:3,logical:2}},{t:"A respectful and polished tone.",s:{verbal:2}},{t:"Keeping it short and to the point.",s:{logical:2,verbal:1}},{t:"Reminding them of my dedication and rights.",s:{verbal:1}}]}, | |
| {c:"Emotional",t:"During a heated argument, what do you usually do?",o:[{t:"Try to understand the other person even if I disagree.",s:{emotional:3,verbal:2}},{t:"Focus on logic and arguments, setting emotions aside.",s:{logical:3}},{t:"Try to calm things down and find a compromise.",s:{emotional:3,verbal:2}},{t:"Get energized and defend my position with full force.",s:{verbal:2}}]} | |
| ]; | |
| // ── Intelligence profiles ───────────────────────────────────────────────────── | |
| var PROFILES = { | |
| logical: { | |
| name: "Analytical Thinker", | |
| desc: "You have a powerful logical mind that thrives on patterns, systems, and structured reasoning. You approach problems methodically and enjoy uncovering hidden truths through evidence and deduction. Your mind is wired to see cause-and-effect relationships others often miss. This makes you exceptionally effective in situations that require precision and critical thinking.", | |
| scientist: "Albert Einstein", title: "Theoretical Physicist", icon: "🧪", | |
| reason: "Like Einstein, you are driven by deep curiosity and the need to find elegant, logical explanations for complex phenomena. You prefer working with abstract ideas and systems rather than surface-level observations.", | |
| jobs: ["Data Scientist", "Software Engineer", "Financial Analyst", "Research Scientist"], | |
| jobs_reason: "Your logical precision and systematic thinking make you exceptional at roles that require analysis, problem-solving, and working with complex data or systems.", | |
| advice: "Challenge yourself with complex puzzles and abstract problems regularly. Your logical strength grows when you apply it to unfamiliar domains, so seek out interdisciplinary challenges." | |
| }, | |
| creative: { | |
| name: "Creative Visionary", | |
| desc: "Your mind is a generator of original ideas, bold connections, and imaginative solutions. You see the world through a unique lens, often perceiving possibilities where others see limitations. Creative intelligence drives your thinking, making you naturally innovative and expressive. You are drawn to aesthetics, storytelling, and original thought.", | |
| scientist: "Leonardo da Vinci", title: "Renaissance Polymath", icon: "🎨", | |
| reason: "Like da Vinci, you blend artistic vision with intellectual curiosity. You are never satisfied with conventional answers and consistently seek new, inventive ways to understand and express the world around you.", | |
| jobs: ["UX Designer", "Creative Director", "Product Innovator", "Art Director"], | |
| jobs_reason: "Your imaginative thinking and ability to generate original ideas make you invaluable in roles that require innovation, design, and bringing new concepts to life.", | |
| advice: "Keep a daily journal of your ideas, no matter how wild they seem. Your best breakthroughs often come from combining unrelated concepts, so expose yourself to diverse fields and experiences." | |
| }, | |
| spatial: { | |
| name: "Spatial Navigator", | |
| desc: "You possess a rare ability to perceive, manipulate, and reason about objects and space with exceptional clarity. Your mind naturally constructs mental maps and three-dimensional models of the world. This spatial intelligence allows you to excel in environments that require precision, visualization, and physical understanding. You have an intuitive grasp of how things fit together.", | |
| scientist: "Nikola Tesla", title: "Inventor and Engineer", icon: "⚡", | |
| reason: "Like Tesla, you can visualize complex machines and systems entirely in your mind before building them. Your spatial reasoning allows you to mentally simulate how things work in three dimensions.", | |
| jobs: ["Architect", "Civil Engineer", "3D Artist", "Surgeon"], | |
| jobs_reason: "Your ability to visualize and mentally manipulate spatial information makes you exceptional in fields that require precise three-dimensional thinking and technical design.", | |
| advice: "Practice sketching your ideas visually and explore design or engineering challenges. Your spatial gifts are amplified when you combine them with hands-on building and experimentation." | |
| }, | |
| verbal: { | |
| name: "Verbal Communicator", | |
| desc: "You wield language as both a tool and an art form, expressing complex ideas with clarity, precision, and impact. Your verbal intelligence enables you to persuade, inspire, and connect deeply through words. You are naturally drawn to reading, writing, debate, and storytelling. People listen when you speak because your communication resonates on multiple levels.", | |
| scientist: "Marie Curie", title: "Physicist and Chemist", icon: "🔬", | |
| reason: "Like Curie, you combine intellectual rigor with the ability to communicate your insights clearly and persuasively. You can translate complex ideas into language that others can understand and be moved by.", | |
| jobs: ["Lawyer", "Journalist", "Professor", "Marketing Strategist"], | |
| jobs_reason: "Your mastery of language and communication makes you naturally suited for roles where the power of words, persuasion, and clear expression drive outcomes.", | |
| advice: "Write every day, even briefly. The more you practice expressing complex thoughts clearly, the sharper your verbal intelligence becomes. Consider public speaking to amplify your natural gift." | |
| }, | |
| emotional: { | |
| name: "Empathetic Leader", | |
| desc: "You have a profound ability to sense, understand, and respond to the emotions of yourself and others. Your emotional intelligence makes you a natural connector, healer, and leader of people. You read social situations with remarkable accuracy and know how to bring out the best in those around you. People trust you because they feel genuinely understood in your presence.", | |
| scientist: "Carl Jung", title: "Psychologist and Psychiatrist", icon: "🧘", | |
| reason: "Like Jung, you have a deep fascination with the inner world of human experience. You intuitively understand what drives people and can navigate the complexities of relationships and emotions with wisdom.", | |
| jobs: ["Psychologist", "Human Resources Director", "Social Worker", "Life Coach"], | |
| jobs_reason: "Your empathy and emotional insight make you invaluable in roles centered on people, well-being, and human connection. You thrive where emotional intelligence is the key skill.", | |
| advice: "Trust your intuition about people while continuing to learn about emotional psychology. Your gift grows when you combine natural empathy with structured knowledge about human behavior." | |
| } | |
| }; | |
| var ud = {}, ans = [], cq = 0, sel = null; | |
| function go(id) { | |
| document.querySelectorAll('.screen').forEach(function(s) { s.classList.remove('active'); }); | |
| document.getElementById('screen-' + id).classList.add('active'); | |
| window.scrollTo(0, 0); | |
| } | |
| function startQ() { | |
| var n = document.getElementById('iname').value.trim(); | |
| var a = document.getElementById('iage').value; | |
| var e = document.getElementById('iedu').value; | |
| var i = document.getElementById('iint').value; | |
| if (!n || !a || !e || !i) { alert('Please fill in all fields.'); return; } | |
| ud = { name: n, age: a, edu: e, interest: i }; | |
| ans = []; cq = 0; showQ(); go('quiz'); | |
| } | |
| function showQ() { | |
| var q = QS[cq]; sel = null; | |
| document.getElementById('btnNext').disabled = true; | |
| document.getElementById('qnum').textContent = 'Question ' + (cq+1) + ' of ' + QS.length; | |
| document.getElementById('qcat').textContent = q.c; | |
| document.getElementById('qtext').textContent = q.t; | |
| document.getElementById('prog').style.width = ((cq / QS.length) * 100) + '%'; | |
| var c = document.getElementById('qopts'); c.innerHTML = ''; | |
| q.o.forEach(function(opt, i) { | |
| var b = document.createElement('button'); | |
| b.className = 'opt'; b.textContent = opt.t; | |
| b.onclick = function() { | |
| document.querySelectorAll('.opt').forEach(function(x) { x.classList.remove('selected'); }); | |
| b.classList.add('selected'); sel = i; | |
| document.getElementById('btnNext').disabled = false; | |
| }; | |
| c.appendChild(b); | |
| }); | |
| } | |
| function nextQ() { | |
| if (sel === null) return; | |
| var q = QS[cq]; | |
| ans.push({ score: q.o[sel].s }); | |
| cq++; | |
| if (cq < QS.length) { showQ(); } | |
| else { | |
| document.getElementById('prog').style.width = '100%'; | |
| go('loading'); | |
| ['s1','s2','s3','s4'].forEach(function(id, i) { | |
| setTimeout(function() { document.getElementById(id).classList.add('done'); }, i * 800 + 400); | |
| }); | |
| setTimeout(showResult, 3800); | |
| } | |
| } | |
| function showResult() { | |
| // Calculate scores | |
| var sc = { logical: 0, creative: 0, spatial: 0, verbal: 0, emotional: 0 }; | |
| ans.forEach(function(a) { | |
| for (var k in a.score) { sc[k] = (sc[k] || 0) + a.score[k]; } | |
| }); | |
| // Max possible per category | |
| var maxScores = { logical: 9, creative: 9, spatial: 9, verbal: 9, emotional: 9 }; | |
| // Find dominant intelligence | |
| var dominant = 'logical'; | |
| var maxVal = 0; | |
| for (var k in sc) { | |
| if (sc[k] > maxVal) { maxVal = sc[k]; dominant = k; } | |
| } | |
| // Adjust based on interest | |
| var interestMap = { | |
| 'Reading and Research': 'verbal', | |
| 'Art and Creativity': 'creative', | |
| 'Technology and Programming': 'logical', | |
| 'People and Communication': 'emotional', | |
| 'Sports and Physical Activity': 'spatial', | |
| 'Business and Entrepreneurship': 'logical' | |
| }; | |
| var interestBoost = interestMap[ud.interest]; | |
| if (interestBoost && sc[interestBoost] + 2 >= sc[dominant]) { | |
| dominant = interestBoost; | |
| } | |
| var p = PROFILES[dominant]; | |
| // Score bars | |
| var barsHTML = ''; | |
| var labels = { logical: 'Logical', creative: 'Creative', spatial: 'Spatial', verbal: 'Verbal', emotional: 'Emotional' }; | |
| for (var key in sc) { | |
| var pct = Math.round((sc[key] / maxScores[key]) * 100); | |
| if (pct > 100) pct = 100; | |
| barsHTML += '<div class="score-row">' + | |
| '<span class="score-label">' + labels[key] + '</span>' + | |
| '<div class="score-bar-wrap"><div class="score-bar-fill" style="width:' + pct + '%"></div></div>' + | |
| '<span class="score-val">' + pct + '%</span>' + | |
| '</div>'; | |
| } | |
| document.getElementById('score-bars').innerHTML = barsHTML; | |
| // Fill result | |
| document.getElementById('rname').textContent = ud.name + "'s Results"; | |
| document.getElementById('rintel').textContent = p.desc; | |
| document.getElementById('rsicon').innerHTML = p.icon; | |
| document.getElementById('rsname').textContent = p.scientist; | |
| document.getElementById('rstitle').textContent = p.title; | |
| document.getElementById('rsreason').textContent = p.reason; | |
| document.getElementById('radvice').textContent = p.advice; | |
| document.getElementById('rjreason').textContent = p.jobs_reason; | |
| var jl = document.getElementById('rjobs'); jl.innerHTML = ''; | |
| p.jobs.forEach(function(j) { | |
| var t = document.createElement('div'); t.className = 'job'; t.textContent = j; jl.appendChild(t); | |
| }); | |
| go('result'); | |
| } | |
| </script> | |
| </body> | |
| </html> |