| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Free Personality Test | Persona</title> |
| <meta name="description" content="Take our free personality test and get a detailed report of your personality type. Understand your strengths and weaknesses."> |
| |
| |
| <meta property="og:title" content="Free Personality Test | Persona"> |
| <meta property="og:description" content="Discover your personality type with our free, in-depth test."> |
| <meta property="og:url" content="https://your-website.com"> |
| <meta name="twitter:card" content="summary_large_image"> |
|
|
| |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
|
|
| <style> |
| |
| :root { |
| --primary-color: #6a11cb; |
| --secondary-color: #2575fc; |
| --background-color: #f4f7f6; |
| --text-color: #333; |
| --card-bg: #ffffff; |
| --shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); |
| --border-radius: 16px; |
| --font-family: 'Poppins', sans-serif; |
| } |
| |
| [data-theme="dark"] { |
| --primary-color: #8e44ad; |
| --secondary-color: #3498db; |
| --background-color: #121212; |
| --text-color: #f4f7f6; |
| --card-bg: #1e1e1e; |
| --shadow: 0 10px 20px rgba(0,0,0,0.3), 0 6px 6px rgba(0,0,0,0.3); |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: var(--font-family); |
| background-color: var(--background-color); |
| color: var(--text-color); |
| transition: background-color 0.3s, color 0.3s; |
| line-height: 1.6; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| main { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| |
| .page { |
| display: none; |
| } |
| |
| .page.active { |
| display: block; |
| } |
| |
| |
| header { |
| padding: 1rem 5%; |
| background: var(--card-bg); |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| cursor: pointer; |
| } |
| |
| #theme-toggle { |
| background: none; |
| border: none; |
| font-size: 1.5rem; |
| cursor: pointer; |
| color: var(--text-color); |
| } |
| |
| |
| #name-input-section { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| min-height: 80vh; |
| text-align: center; |
| padding: 2rem; |
| } |
| #name-input-section h1 { |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| } |
| #name-input-section p { |
| font-size: 1.2rem; |
| max-width: 500px; |
| margin-bottom: 2rem; |
| opacity: 0.8; |
| } |
| #name-input { |
| font-size: 1.2rem; |
| padding: 0.8rem; |
| border-radius: 8px; |
| border: 2px solid #ddd; |
| margin-bottom: 1rem; |
| width: 100%; |
| max-width: 400px; |
| text-align: center; |
| background-color: var(--card-bg); |
| color: var(--text-color); |
| } |
| #start-btn { |
| padding: 1rem 2.5rem; |
| font-size: 1.1rem; |
| font-weight: 600; |
| } |
| |
| |
| .hero { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: 4rem 2rem; |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
| color: #fff; |
| min-height: 70vh; |
| } |
| |
| .hero-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 2rem; |
| max-width: 1200px; |
| flex-wrap: wrap-reverse; |
| } |
| |
| .hero-content { |
| max-width: 600px; |
| text-align: left; |
| } |
| |
| .hero-content h1 { |
| font-size: 3.5rem; |
| margin-bottom: 1rem; |
| line-height: 1.2; |
| } |
| |
| .hero-content p { |
| font-size: 1.2rem; |
| margin: 0 0 2rem; |
| } |
| |
| .hero-image img { |
| width: 300px; |
| height: 300px; |
| border-radius: 50%; |
| object-fit: cover; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .cta-button { |
| display: inline-block; |
| padding: 1rem 2.5rem; |
| background-color: #fff; |
| color: var(--primary-color); |
| border: none; |
| border-radius: 50px; |
| font-size: 1.1rem; |
| font-weight: 600; |
| text-decoration: none; |
| transition: transform 0.3s, box-shadow 0.3s; |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
| cursor: pointer; |
| } |
| |
| .cta-button:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 8px 25px rgba(0,0,0,0.3); |
| } |
| |
| .small-text { |
| margin-top: 1rem; |
| font-size: 0.9rem; |
| opacity: 0.8; |
| } |
| |
| |
| .types-section { |
| padding: 4rem 5%; |
| text-align: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .types-section h2 { |
| font-size: 2.5rem; |
| margin-bottom: 3rem; |
| color: var(--text-color); |
| } |
| |
| .types-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .type-card { |
| background: var(--card-bg); |
| border-radius: var(--border-radius); |
| padding: 2rem; |
| box-shadow: var(--shadow); |
| cursor: pointer; |
| transition: transform 0.3s, box-shadow 0.3s; |
| border-left: 5px solid var(--primary-color); |
| text-align: center; |
| } |
| |
| .type-card .icon { |
| font-size: 2.5rem; |
| color: var(--primary-color); |
| margin-bottom: 1rem; |
| } |
| |
| .type-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1); |
| } |
| |
| .type-card h3 { |
| font-size: 1.5rem; |
| color: var(--primary-color); |
| margin-bottom: 0.5rem; |
| } |
| |
| .type-card h4 { |
| font-size: 1rem; |
| font-weight: 600; |
| margin-bottom: 1rem; |
| color: var(--text-color); |
| } |
| |
| .type-card p { |
| font-size: 0.9rem; |
| color: var(--text-color); |
| opacity: 0.8; |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| z-index: 1001; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| background-color: rgba(0,0,0,0.6); |
| animation: fadeIn 0.3s; |
| } |
| |
| .modal-content { |
| background-color: var(--card-bg); |
| margin: 10% auto; |
| padding: 2rem; |
| border-radius: var(--border-radius); |
| width: 80%; |
| max-width: 700px; |
| position: relative; |
| box-shadow: 0 20px 40px rgba(0,0,0,0.4); |
| } |
| |
| .close-button { |
| color: #aaa; |
| float: right; |
| font-size: 28px; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| .close-button:hover, |
| .close-button:focus { |
| color: black; |
| text-decoration: none; |
| } |
| |
| #modal-body h3 { |
| color: var(--primary-color); |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| |
| .test-main { |
| max-width: 800px; |
| margin: 2rem auto; |
| padding: 0 1rem; |
| } |
| |
| .progress-container { |
| width: 100%; |
| background-color: #e0e0e0; |
| border-radius: 50px; |
| margin-bottom: 2rem; |
| overflow: hidden; |
| } |
| |
| .progress-bar { |
| width: 0%; |
| height: 15px; |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
| border-radius: 50px; |
| transition: width 0.4s ease-in-out; |
| } |
| |
| .test-container { |
| background: var(--card-bg); |
| padding: 2.5rem; |
| border-radius: var(--border-radius); |
| box-shadow: var(--shadow); |
| } |
| |
| .question-block { |
| text-align: center; |
| margin-bottom: 2rem; |
| animation: fadeIn 0.5s; |
| } |
| |
| .question-block h2 { |
| font-size: 1.8rem; |
| margin-bottom: 2rem; |
| line-height: 1.4; |
| } |
| |
| .options { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin: 0 auto; |
| max-width: 500px; |
| } |
| |
| .options span { |
| font-weight: 600; |
| padding: 0 0.5rem; |
| color: var(--text-color); |
| opacity: 0.7; |
| } |
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| width: 100%; |
| height: 8px; |
| background: #ddd; |
| border-radius: 5px; |
| outline: none; |
| margin: 0 1rem; |
| } |
| |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 24px; |
| height: 24px; |
| background: var(--secondary-color); |
| cursor: pointer; |
| border-radius: 50%; |
| box-shadow: 0 0 10px rgba(0,0,0,0.2); |
| transition: background-color 0.2s; |
| } |
| |
| input[type="range"]::-webkit-slider-thumb:hover { |
| background-color: var(--primary-color); |
| } |
| |
| input[type="range"]::-moz-range-thumb { |
| width: 24px; |
| height: 24px; |
| background: var(--secondary-color); |
| cursor: pointer; |
| border-radius: 50%; |
| } |
| |
| .navigation-buttons { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 2rem; |
| } |
| |
| .nav-button { |
| padding: 0.8rem 2rem; |
| border: 2px solid var(--primary-color); |
| border-radius: 50px; |
| background-color: var(--primary-color); |
| color: #fff; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .nav-button:hover:not(:disabled) { |
| background-color: var(--secondary-color); |
| border-color: var(--secondary-color); |
| transform: translateY(-3px); |
| } |
| |
| .nav-button:disabled { |
| background-color: #ccc; |
| border-color: #ccc; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| |
| .results-main { |
| padding: 2rem 1rem; |
| text-align: center; |
| } |
| |
| .result-card { |
| background: var(--card-bg); |
| max-width: 700px; |
| margin: 2rem auto; |
| padding: 3rem; |
| border-radius: var(--border-radius); |
| box-shadow: var(--shadow); |
| } |
| |
| #result-type { |
| font-size: 3rem; |
| font-weight: 700; |
| color: var(--primary-color); |
| } |
| |
| #result-title { |
| font-size: 1.5rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| #result-summary { |
| font-size: 1.1rem; |
| margin-bottom: 2rem; |
| } |
| |
| .result-actions { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| flex-wrap: wrap; |
| } |
| |
| .action-button { |
| padding: 0.8rem 1.5rem; |
| border: none; |
| border-radius: 50px; |
| font-size: 1rem; |
| cursor: pointer; |
| transition: all 0.3s; |
| background-color: var(--primary-color); |
| color: #fff; |
| font-weight: 600; |
| } |
| |
| .action-button:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); |
| } |
| |
| .action-button.secondary { |
| background-color: transparent; |
| border: 2px solid var(--primary-color); |
| color: var(--primary-color); |
| } |
| |
| .action-button.secondary:hover { |
| background-color: var(--primary-color); |
| color: #fff; |
| } |
| |
| .result-details-section { |
| max-width: 800px; |
| margin: 2rem auto; |
| padding: 2rem; |
| text-align: left; |
| background: var(--card-bg); |
| border-radius: var(--border-radius); |
| } |
| |
| .result-details-section h3 { |
| color: var(--primary-color); |
| margin-top: 1.5rem; |
| margin-bottom: 0.5rem; |
| font-size: 1.5rem; |
| } |
| |
| .result-details-section p { |
| margin-bottom: 1rem; |
| } |
| |
| |
| footer { |
| text-align: center; |
| padding: 2rem 1rem; |
| margin-top: 2rem; |
| opacity: 0.7; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .hero-content h1 { |
| font-size: 2.5rem; |
| } |
| .hero-container { |
| gap: 1rem; |
| } |
| .hero-content { |
| text-align: center; |
| } |
| .hero-content p { |
| font-size: 1rem; |
| } |
| .hero-image img { |
| width: 200px; |
| height: 200px; |
| } |
| .types-section h2 { |
| font-size: 2rem; |
| } |
| .modal-content { |
| width: 90%; |
| margin: 20% auto; |
| } |
| .test-container { |
| padding: 1.5rem; |
| } |
| .question-block h2 { |
| font-size: 1.5rem; |
| } |
| .options { |
| flex-direction: column; |
| } |
| input[type="range"] { |
| margin: 1rem 0; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <header> |
| <nav> |
| <div style="display: flex; align-items: center; gap: 1rem;"> |
| <div class="logo">Persona</div> |
| <a href="https://niftytechfinds.com" style="color: var(--text-color); text-decoration: none; font-size: 0.9rem; opacity: 0.7;">Back to niftytechfinds.com</a> |
| </div> |
| <div class="theme-switcher"> |
| <button id="theme-toggle">🌙</button> |
| </div> |
| </nav> |
| </header> |
|
|
| <main> |
| |
| <div id="home-page" class="page active"> |
| <section id="name-input-section"> |
| <h1>Welcome to Persona</h1> |
| <p>Let's start your journey of self-discovery. First, what should we call you?</p> |
| <input type="text" id="name-input" placeholder="Enter your name"> |
| <button id="start-btn" class="cta-button">Start Discovery</button> |
| </section> |
| |
| <div id="main-content" style="display: none;"> |
| <section class="hero"> |
| <div class="hero-container"> |
| <div class="hero-content"> |
| <h1 id="hero-title">Discover Yourself</h1> |
| <p>Uncover your true potential. Our scientifically validated personality test will help you understand your strengths, weaknesses, and how you interact with the world.</p> |
| <button id="take-test-btn" class="cta-button">Take the Test →</button> |
| <p class="small-text">Takes less than 12 minutes.</p> |
| </div> |
| <div class="hero-image"> |
| <img src="https://placehold.co/400x400/6a11cb/ffffff?text=Persona" alt="Abstract representation of a personality"> |
| </div> |
| </div> |
| </section> |
| |
| <section id="personality-types" class="types-section"> |
| <h2><i class="fas fa-users"></i> The 16 Personality Types</h2> |
| <div class="types-grid" id="types-grid"> |
| |
| </div> |
| </section> |
| </div> |
| </div> |
|
|
| |
| <div id="test-page" class="page"> |
| <div class="test-main"> |
| <div class="progress-container"> |
| <div class="progress-bar" id="progress-bar"></div> |
| </div> |
| |
| <div class="test-container"> |
| <div id="question-container" class="question-block"> |
| |
| </div> |
| |
| <div class="navigation-buttons"> |
| <button id="prev-btn" class="nav-button" disabled>Previous</button> |
| <button id="next-btn" class="nav-button">Next</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="results-page" class="page"> |
| <div class="results-main"> |
| <div id="result-content" class="result-card"> |
| <h1 id="result-type"></h1> |
| <h2 id="result-title"></h2> |
| <p id="result-summary"></p> |
| <div class="result-actions"> |
| <button id="download-pdf-btn" class="action-button">Download PDF</button> |
| <button id="retake-test-btn" class="action-button secondary">Retake Test</button> |
| </div> |
| </div> |
| <div id="result-details" class="result-details-section"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div id="type-modal" class="modal"> |
| <div class="modal-content"> |
| <span class="close-button">×</span> |
| <div id="modal-body"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| <footer> |
| <p>© <span id="footer-year"></span> Persona. All Rights Reserved. Inspired by 16Personalities.</p> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| |
| const personalityData = { |
| "INTJ": { title: "The Architect", icon: "fas fa-chess-king", summary: "Imaginative and strategic thinkers, with a plan for everything.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Quick, imaginative, and strategic mind. High self-confidence. Independent and decisive. Hard-working and determined.</p><p><strong>Weaknesses:</strong> Can be arrogant and judgmental. Often overly analytical. Clueless in romance.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INTJs excel in careers that require intellectual rigor and strategic thinking, such as scientists, engineers, strategists, and university professors.</p>" }, |
| "INTP": { title: "The Logician", icon: "fas fa-flask", summary: "Innovative inventors with an unquenchable thirst for knowledge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Great analysts and abstract thinkers. Imaginative and original. Open-minded.</p><p><strong>Weaknesses:</strong> Can be very private and withdrawn. Insensitive. Absent-minded. Condescending.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INTPs thrive in fields that value expertise and logic, such as philosophy, computer science, and technical writing.</p>" }, |
| "ENTJ": { title: "The Commander", icon: "fas fa-bullhorn", summary: "Bold, imaginative and strong-willed leaders, always finding a way – or making one.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Efficient, energetic, self-confident, strong-willed, strategic thinkers.</p><p><strong>Weaknesses:</strong> Stubborn, dominant, intolerant, impatient, arrogant.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENTJs are natural leaders, well-suited for roles like CEO, entrepreneur, or military officer.</p>" }, |
| "ENTP": { title: "The Debater", icon: "fas fa-lightbulb", summary: "Smart and curious thinkers who cannot resist an intellectual challenge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Knowledgeable, quick thinkers, original, excellent brainstormers, charismatic.</p><p><strong>Weaknesses:</strong> Very argumentative, insensitive, intolerant, can find it difficult to focus.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENTPs enjoy complex challenges and are suited for careers like entrepreneur, lawyer, or consultant.</p>" }, |
| "INFJ": { title: "The Advocate", icon: "fas fa-hand-holding-heart", summary: "Quiet and mystical, yet very inspiring and tireless idealists.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Creative, insightful, inspiring, convincing, decisive, determined and passionate.</p><p><strong>Weaknesses:</strong> Sensitive, extremely private, perfectionistic, always need to have a cause, can burn out easily.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INFJs seek careers with a purpose, such as counselor, teacher, or artist.</p>" }, |
| "INFP": { title: "The Mediator", icon: "fas fa-dove", summary: "Poetic, kind and altruistic people, always eager to help a good cause.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Idealistic, seek and value harmony, open-minded and flexible, very creative, passionate and energetic.</p><p><strong>Weaknesses:</strong> Too idealistic, too altruistic, impractical, dislike dealing with data.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INFPs thrive in creative and mission-driven fields like writing, psychology, and social work.</p>" }, |
| "ENFJ": { title: "The Protagonist", icon: "fas fa-users", summary: "Charismatic and inspiring leaders, able to mesmerize their listeners.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Tolerant, reliable, charismatic, altruistic, natural leaders.</p><p><strong>Weaknesses:</strong> Overly idealistic, too selfless, too sensitive, fluctuating self-esteem.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENFJs are natural people-leaders, excelling in teaching, politics, and sales.</p>" }, |
| "ENFP": { title: "The Campaigner", icon: "fas fa-laugh-beam", summary: "Enthusiastic, creative and sociable free spirits, who can always find a reason to smile.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Curious, observant, energetic and enthusiastic, excellent communicators, know how to relax.</p><p><strong>Weaknesses:</strong> Poor practical skills, find it difficult to focus, overthink things, get stressed easily.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENFPs' creativity and people skills make them great journalists, actors, and advertising creatives.</p>" }, |
| "ISTJ": { title: "The Logistician", icon: "fas fa-clipboard-list", summary: "Practical and fact-minded individuals, whose reliability cannot be doubted.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Honest and direct, strong-willed and dutiful, very responsible, calm and practical.</p><p><strong>Weaknesses:</strong> Stubborn, insensitive, always by the book, judgmental.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISTJs are the bedrock of society, excelling in roles like accountant, auditor, or systems administrator.</p>" }, |
| "ISFJ": { title: "The Defender", icon: "fas fa-shield-alt", summary: "Very dedicated and warm protectors, always ready to defend their loved ones.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Supportive, reliable and patient, imaginative and observant, enthusiastic, loyal and hard-working.</p><p><strong>Weaknesses:</strong> Humble and shy, take things too personally, repress their feelings, reluctant to change.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISFJs are caring and dedicated, making them excellent nurses, doctors, and social workers.</p>" }, |
| "ESTJ": { title: "The Executive", icon: "fas fa-gavel", summary: "Excellent administrators, unsurpassed at managing things – or people.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Dedicated, strong-willed, direct and honest, loyal, patient and reliable, enjoy creating order.</p><p><strong>Weaknesses:</strong> Inflexible and stubborn, uncomfortable with unconventional situations, judgmental.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESTJs thrive in management and administration, such as financial officers or project managers.</p>" }, |
| "ESFJ": { title: "The Consul", icon: "fas fa-handshake", summary: "Extraordinarily caring, social and popular people, always eager to help.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Strong practical skills, strong sense of duty, very loyal, sensitive and warm.</p><p><strong>Weaknesses:</strong> Worried about their social status, inflexible, reluctant to improvise or innovate.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESFJs are community builders, finding fulfillment in roles like nursing, teaching, and event coordinating.</p>" }, |
| "ISTP": { title: "The Virtuoso", icon: "fas fa-tools", summary: "Bold and practical experimenters, masters of all kinds of tools.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Optimistic and energetic, creative and practical, spontaneous and rational.</p><p><strong>Weaknesses:</strong> Stubborn, insensitive, private and reserved, easily bored, dislike commitment.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISTPs are hands-on problem-solvers, perfect for careers in mechanics, engineering, or as first responders.</p>" }, |
| "ISFP": { title: "The Adventurer", icon: "fas fa-paint-brush", summary: "Flexible and charming artists, always ready to explore and experience something new.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Charming, sensitive to others, imaginative, passionate, curious, artistic.</p><p><strong>Weaknesses:</strong> Fiercely independent, unpredictable, easily stressed, overly competitive.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISFPs are creative souls who shine as artists, designers, musicians, and chefs.</p>" }, |
| "ESTP": { title: "The Entrepreneur", icon: "fas fa-rocket", summary: "Smart, energetic and very perceptive people, who truly enjoy living on the edge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Bold, rational and practical, original, perceptive, direct, sociable.</p><p><strong>Weaknesses:</strong> Insensitive, impatient, risk-prone, unstructured, may miss the bigger picture.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESTPs thrive in high-energy environments like sales, emergency services, and entrepreneurship.</p>" }, |
| "ESFP": { title: "The Entertainer", icon: "fas fa-microphone-alt", summary: "Spontaneous, energetic and enthusiastic people – life is never boring around them.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Bold and original. Excellent people skills. Practical. Spontaneous and fun-loving.</p><p><strong>Weaknesses:</strong> Sensitive. Conflict-averse. Easily bored. Poor long-term planners.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESFPs are born to be in the spotlight. Careers in entertainment, sales, event planning, and customer service suit them well.</p>" } |
| }; |
| |
| const questions = [ |
| |
| { text: "You regularly make new friends.", dimension: 'E' }, |
| { text: "You feel comfortable just walking up to someone you find interesting and striking up a conversation.", dimension: 'E' }, |
| { text: "You feel more energized after spending time with a group of people.", dimension: 'E' }, |
| { text: "At parties, you tend to stick to a few people you know rather than mingle with everyone.", dimension: 'I' }, |
| { text: "You often prefer to express yourself in writing.", dimension: 'I' }, |
| { text: "You would rather have a few close friends than a wide circle of acquaintances.", dimension: 'I' }, |
| { text: "You enjoy being the center of attention.", dimension: 'E' }, |
| { text: "You often find yourself lost in thought and unaware of your surroundings.", dimension: 'I' }, |
| { text: "You are quick to respond to emails and messages.", dimension: 'E' }, |
| { text: "In your free time, you prefer to engage in solitary activities.", dimension: 'I' }, |
| { text: "You enjoy large parties and social gatherings.", dimension: 'E' }, |
| { text: "Being in a quiet, secluded place is rejuvenating for you.", dimension: 'I' }, |
| { text: "You are often the one to start a conversation with new people.", dimension: 'E' }, |
| { text: "You feel a bit drained after a day of social activities, even if you enjoyed them.", dimension: 'I' }, |
| { text: "You think of yourself as a private person.", dimension: 'I' }, |
| |
| |
| { text: "You are more intrigued by a general concept than by the specific details.", dimension: 'N' }, |
| { text: "You tend to focus on what is happening here and now, rather than what might happen in the future.", dimension: 'S' }, |
| { text: "You enjoy philosophical discussions.", dimension: 'N' }, |
| { text: "You prefer practical, hands-on activities over theoretical ones.", dimension: 'S' }, |
| { text: "You often have a strong sense of impending events.", dimension: 'N' }, |
| { text: "You trust experience more than imagination.", dimension: 'S' }, |
| { text: "You like to explore the 'what ifs' and possibilities of a situation.", dimension: 'N' }, |
| { text: "You are more down-to-earth than head-in-the-clouds.", dimension: 'S' }, |
| { text: "You find metaphors and symbolism fascinating.", dimension: 'N' }, |
| { text: "You would rather see how something works in practice than read a manual about it.", dimension: 'S' }, |
| { text: "You are often described as imaginative.", dimension: 'N' }, |
| { text: "You prefer to rely on what you can see and touch.", dimension: 'S' }, |
| { text: "Abstract theories and ideas are exciting to you.", dimension: 'N' }, |
| { text: "You pay a lot of attention to details in your environment.", dimension: 'S' }, |
| { text: "You are more likely to ponder the meaning of life than to plan your daily tasks.", dimension: 'N' }, |
| |
| |
| { text: "When making a decision, you prioritize logic over others' feelings.", dimension: 'T' }, |
| { text: "You find it easy to understand what others are feeling.", dimension: 'F' }, |
| { text: "You believe that truth should be valued more than tact.", dimension: 'T' }, |
| { text: "Your decisions are often influenced by your emotions.", dimension: 'F' }, |
| { text: "You enjoy finding flaws in an argument.", dimension: 'T' }, |
| { text: "You are more concerned with harmony than with proving a point.", dimension: 'F' }, |
| { text: "You would rather be seen as competent than compassionate.", dimension: 'T' }, |
| { text: "You often make choices to accommodate others.", dimension: 'F' }, |
| { text: "You can stay detached and objective in a heated debate.", dimension: 'T' }, |
| { text: "Seeing other people cry can easily make you feel like you want to cry too.", dimension: 'F' }, |
| { text: "You are more likely to criticize someone's work than to praise it.", dimension: 'T' }, |
| { text: "You value empathy and kindness highly in others.", dimension: 'F' }, |
| { text: "You find it more important to be efficient than to be cooperative.", dimension: 'T' }, |
| { text: "You are careful not to hurt other people's feelings.", dimension: 'F' }, |
| { text: "It's easy for you to make impersonal decisions.", dimension: 'T' }, |
| |
| |
| { text: "You prefer to have a detailed plan rather than to improvise.", dimension: 'J' }, |
| { text: "You enjoy spontaneity and last-minute plans.", dimension: 'P' }, |
| { text: "You like to have your work done well before the deadline.", dimension: 'J' }, |
| { text: "You are comfortable with a flexible schedule.", dimension: 'P' }, |
| { text: "You like to make to-do lists and stick to them.", dimension: 'J' }, |
| { text: "You prefer to keep your options open as long as possible.", dimension: 'P' }, |
| { text: "You find satisfaction in a tidy and organized workspace.", dimension: 'J' }, |
| { text: "You often work in bursts of energy.", dimension: 'P' }, |
| { text: "You prefer to finish one project before starting another.", dimension: 'J' }, |
| { text: "You are more of a 'go with the flow' type of person.", dimension: 'P' }, |
| { text: "You feel more comfortable when you know what to expect.", dimension: 'J' }, |
| { text: "You enjoy adapting to new and unexpected situations.", dimension: 'P' }, |
| { text: "You are a methodical and systematic worker.", dimension: 'J' }, |
| { text: "You often find it difficult to commit to a plan.", dimension: 'P' }, |
| { text: "You like to have things settled and decided.", dimension: 'J' } |
| ]; |
| |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const typesGrid = document.getElementById('types-grid'); |
| const modal = document.getElementById('type-modal'); |
| const modalBody = document.getElementById('modal-body'); |
| const closeModalBtn = document.getElementsByClassName('close-button')[0]; |
| const logo = document.querySelector('.logo'); |
| |
| |
| const homePage = document.getElementById('home-page'); |
| const testPage = document.getElementById('test-page'); |
| const resultsPage = document.getElementById('results-page'); |
| |
| |
| const nameInputSection = document.getElementById('name-input-section'); |
| const nameInput = document.getElementById('name-input'); |
| const startBtn = document.getElementById('start-btn'); |
| const mainContent = document.getElementById('main-content'); |
| const heroTitle = document.getElementById('hero-title'); |
| const takeTestBtn = document.getElementById('take-test-btn'); |
| |
| |
| const questionContainer = document.getElementById('question-container'); |
| const progressBar = document.getElementById('progress-bar'); |
| const prevBtn = document.getElementById('prev-btn'); |
| const nextBtn = document.getElementById('next-btn'); |
| |
| |
| const resultContent = document.getElementById('result-content'); |
| const resultTypeEl = document.getElementById('result-type'); |
| const resultTitleEl = document.getElementById('result-title'); |
| const resultSummaryEl = document.getElementById('result-summary'); |
| const resultDetailsEl = document.getElementById('result-details'); |
| const downloadPdfBtn = document.getElementById('download-pdf-btn'); |
| const retakeTestBtn = document.getElementById('retake-test-btn'); |
| |
| |
| document.getElementById('footer-year').textContent = new Date().getFullYear(); |
| |
| |
| let currentQuestionIndex = 0; |
| let userName = ''; |
| const userAnswers = new Array(questions.length).fill(null); |
| |
| |
| function navigateTo(pageId) { |
| document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); |
| document.getElementById(pageId).classList.add('active'); |
| window.scrollTo(0, 0); |
| } |
| |
| startBtn.addEventListener('click', () => { |
| userName = nameInput.value.trim(); |
| if (userName) { |
| heroTitle.textContent = `Discover Yourself, ${userName}!`; |
| nameInputSection.style.display = 'none'; |
| mainContent.style.display = 'block'; |
| } else { |
| alert('Please enter your name to begin.'); |
| } |
| }); |
| |
| takeTestBtn.addEventListener('click', () => { |
| navigateTo('test-page'); |
| startTest(); |
| }); |
| |
| logo.addEventListener('click', () => { |
| navigateTo('home-page'); |
| }); |
| |
| |
| const currentTheme = localStorage.getItem('theme'); |
| if (currentTheme) { |
| document.documentElement.setAttribute('data-theme', currentTheme); |
| themeToggle.textContent = currentTheme === 'dark' ? '☀️' : '🌙'; |
| } |
| |
| themeToggle.addEventListener('click', () => { |
| let theme = document.documentElement.getAttribute('data-theme'); |
| if (theme === 'dark') { |
| document.documentElement.setAttribute('data-theme', 'light'); |
| localStorage.setItem('theme', 'light'); |
| themeToggle.textContent = '🌙'; |
| } else { |
| document.documentElement.setAttribute('data-theme', 'dark'); |
| localStorage.setItem('theme', 'dark'); |
| themeToggle.textContent = '☀️'; |
| } |
| }); |
| |
| |
| function populatePersonalityCards() { |
| if (typesGrid && personalityData) { |
| Object.keys(personalityData).forEach(type => { |
| const card = document.createElement('div'); |
| card.className = 'type-card'; |
| card.dataset.type = type; |
| const typeInfo = personalityData[type]; |
| card.innerHTML = `<div class="icon"><i class="${typeInfo.icon}"></i></div><h3>${type}</h3><h4>${typeInfo.title}</h4><p>${typeInfo.summary}</p>`; |
| card.addEventListener('click', () => openModal(type)); |
| typesGrid.appendChild(card); |
| }); |
| } |
| } |
| |
| |
| function openModal(type) { |
| const typeInfo = personalityData[type]; |
| modalBody.innerHTML = `<h3><i class="${typeInfo.icon}"></i> ${type} - ${typeInfo.title}</h3>${typeInfo.description}`; |
| modal.style.display = 'block'; |
| } |
| |
| closeModalBtn.onclick = () => modal.style.display = "none"; |
| window.onclick = (event) => { |
| if (event.target == modal) { |
| modal.style.display = "none"; |
| } |
| }; |
| |
| |
| function startTest() { |
| currentQuestionIndex = 0; |
| userAnswers.fill(null); |
| showQuestion(currentQuestionIndex); |
| } |
| |
| function showQuestion(index) { |
| const question = questions[index]; |
| questionContainer.innerHTML = ` |
| <h2>${question.text}</h2> |
| <div class="options"> |
| <span>Disagree</span> |
| <input type="range" id="answer-slider" min="-3" max="3" value="${userAnswers[index] === null ? 0 : userAnswers[index]}"> |
| <span>Agree</span> |
| </div> |
| `; |
| const slider = document.getElementById('answer-slider'); |
| slider.addEventListener('input', () => { |
| userAnswers[index] = parseInt(slider.value, 10); |
| }); |
| updateNavigation(); |
| updateProgressBar(); |
| } |
| |
| function updateNavigation() { |
| prevBtn.disabled = currentQuestionIndex === 0; |
| nextBtn.textContent = currentQuestionIndex === questions.length - 1 ? 'Finish' : 'Next'; |
| } |
| |
| function updateProgressBar() { |
| const progress = (currentQuestionIndex / questions.length) * 100; |
| progressBar.style.width = `${progress}%`; |
| } |
| |
| nextBtn.addEventListener('click', () => { |
| if (userAnswers[currentQuestionIndex] === null) { |
| userAnswers[currentQuestionIndex] = 0; |
| } |
| |
| if (currentQuestionIndex < questions.length - 1) { |
| currentQuestionIndex++; |
| showQuestion(currentQuestionIndex); |
| } else { |
| progressBar.style.width = `100%`; |
| const finalResult = calculateResult(); |
| displayResults(finalResult); |
| navigateTo('results-page'); |
| } |
| }); |
| |
| prevBtn.addEventListener('click', () => { |
| if (currentQuestionIndex > 0) { |
| currentQuestionIndex--; |
| showQuestion(currentQuestionIndex); |
| } |
| }); |
| |
| |
| function calculateResult() { |
| const scores = { E: 0, I: 0, N: 0, S: 0, T: 0, F: 0, J: 0, P: 0 }; |
| userAnswers.forEach((answer, index) => { |
| if (answer === null) return; |
| const question = questions[index]; |
| const dimension = question.dimension; |
| |
| |
| if (answer > 0) scores[dimension] += answer; |
| else if (answer < 0) scores[dimension === 'E' ? 'I' : dimension === 'I' ? 'E' : dimension === 'N' ? 'S' : dimension === 'S' ? 'N' : dimension === 'T' ? 'F' : dimension === 'F' ? 'T' : dimension === 'J' ? 'P' : 'J'] -= answer; |
| }); |
| |
| let result = ''; |
| result += scores.E >= scores.I ? 'E' : 'I'; |
| result += scores.N >= scores.S ? 'N' : 'S'; |
| result += scores.T >= scores.F ? 'T' : 'F'; |
| result += scores.J >= scores.P ? 'J' : 'P'; |
| return result; |
| } |
| |
| function displayResults(personalityType) { |
| if (personalityType && personalityData[personalityType]) { |
| const data = personalityData[personalityType]; |
| resultTypeEl.textContent = personalityType; |
| resultTitleEl.textContent = data.title; |
| resultSummaryEl.innerHTML = `Here are your results, <strong>${userName || 'friend'}</strong>! You are an ${data.title}.<br>${data.summary}`; |
| resultDetailsEl.innerHTML = data.description; |
| } else { |
| resultContent.innerHTML = '<h1>Result not found!</h1><p>It seems you haven\'t completed the test, or the personality type is invalid. Please take the test to get your result.</p>'; |
| } |
| } |
| |
| retakeTestBtn.addEventListener('click', () => { |
| navigateTo('test-page'); |
| startTest(); |
| }); |
| |
| downloadPdfBtn.addEventListener('click', () => { |
| const personalityType = resultTypeEl.textContent; |
| if (!personalityType || !personalityData[personalityType]) return; |
| |
| const { jsPDF } = window.jspdf; |
| const doc = new jsPDF(); |
| const data = personalityData[personalityType]; |
| |
| doc.setFont('helvetica', 'bold'); |
| doc.setFontSize(24); |
| doc.text(`Persona Report for ${userName || 'User'}`, 20, 20); |
| |
| doc.setFontSize(18); |
| doc.text(`${personalityType} - ${data.title}`, 20, 30); |
| |
| |
| doc.setFont('helvetica', 'normal'); |
| doc.setFontSize(12); |
| |
| const tempDiv = document.createElement('div'); |
| tempDiv.innerHTML = data.description; |
| |
| let yPos = 45; |
| |
| const summaryLines = doc.splitTextToSize(`Summary: ${data.summary}`, 170); |
| doc.text(summaryLines, 20, yPos); |
| yPos += (summaryLines.length * 7) + 10; |
| |
| let contentText = ''; |
| tempDiv.childNodes.forEach(node => { |
| if (node.nodeName === 'H3') { |
| |
| const cleanText = node.textContent; |
| contentText += `\n\n${cleanText.trim()}\n`; |
| } else if (node.nodeName === 'P') { |
| contentText += `${node.innerText}\n`; |
| } |
| }); |
| |
| const detailLines = doc.splitTextToSize(contentText.trim(), 170); |
| doc.text(detailLines, 20, yPos); |
| |
| doc.save(`${personalityType}_Personality_Result.pdf`); |
| }); |
| |
| |
| |
| populatePersonalityCards(); |
| |
| mainContent.style.display = 'none'; |
| nameInputSection.style.display = 'flex'; |
| navigateTo('home-page'); |
| |
| }); |
| </script> |
| </html> |
|
|
