Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quick MBTI Personality Test</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .question-card { | |
| transition: all 0.3s ease; | |
| } | |
| .question-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .option-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .option-btn:hover:not(.selected) { | |
| background-color: #f3f4f6; | |
| } | |
| .selected { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-3xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Quick MBTI Test</h1> | |
| <p class="text-gray-600">Discover your personality type in just 20 questions</p> | |
| <div class="mt-4 p-4 bg-yellow-50 border-l-4 border-yellow-400 text-yellow-700 rounded"> | |
| <p><i class="fas fa-exclamation-circle mr-2"></i> <strong>Note:</strong> This is a simplified version with only 20 questions. Results might not be as accurate as a full assessment.</p> | |
| </div> | |
| </header> | |
| <!-- Test Container --> | |
| <div id="test-container" class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Progress Bar --> | |
| <div class="bg-gray-200 h-2"> | |
| <div id="progress-bar" class="progress-bar bg-indigo-600 h-2" style="width: 0%"></div> | |
| </div> | |
| <!-- Welcome Screen --> | |
| <div id="welcome-screen" class="p-8 text-center fade-in"> | |
| <div class="mb-6"> | |
| <i class="fas fa-brain text-6xl text-indigo-500 mb-4"></i> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Welcome to the MBTI Quick Test</h2> | |
| <p class="text-gray-600 mb-4">This test will help you identify your Myers-Briggs personality type based on 20 carefully selected questions.</p> | |
| <p class="text-gray-600 mb-6">Answer honestly based on your natural preferences, not how you think you should respond.</p> | |
| </div> | |
| <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| Start Test <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Question Screen (initially hidden) --> | |
| <div id="question-screen" class="hidden p-6"> | |
| <div id="question-container" class="question-card bg-white rounded-lg p-6 mb-6 border border-gray-200"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span id="question-number" class="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">Question 1 of 20</span> | |
| <span id="dimension" class="text-sm font-medium text-gray-500">E/I</span> | |
| </div> | |
| <h3 id="question-text" class="text-xl font-medium text-gray-800 mb-6">How would you describe yourself in social situations?</h3> | |
| <div class="space-y-3"> | |
| <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200"> | |
| <span class="font-medium">I enjoy being around people and find social interactions energizing</span> | |
| </button> | |
| <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200"> | |
| <span class="font-medium">I prefer one-on-one interactions or small groups, and need alone time to recharge</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="prev-btn" class="text-indigo-600 font-medium py-2 px-4 rounded hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i class="fas fa-arrow-left mr-2"></i> Previous | |
| </button> | |
| <button id="next-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Screen (initially hidden) --> | |
| <div id="results-screen" class="hidden p-8 text-center"> | |
| <div class="mb-8"> | |
| <i class="fas fa-chart-pie text-6xl text-indigo-500 mb-4"></i> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Your MBTI Type</h2> | |
| <div id="mbti-type" class="text-5xl font-bold text-indigo-600 my-6 tracking-wider">XXXX</div> | |
| <div id="type-description" class="bg-gray-50 p-6 rounded-lg text-left text-gray-700 mb-6"> | |
| <p class="mb-4">Your description will appear here. Based on your answers, this section will explain the key characteristics of your personality type.</p> | |
| <p>Remember that this is a simplified test with only 20 questions, so the results might not be completely accurate. For a more precise assessment, consider taking a full-length MBTI test.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <div class="dimension-score p-4 rounded-lg border"> | |
| <div class="text-sm font-medium text-gray-500 mb-2">Extraversion (E) / Introversion (I)</div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">E</span> | |
| <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5"> | |
| <div id="ei-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <span class="font-bold">I</span> | |
| </div> | |
| <div id="ei-score" class="text-xs text-gray-500 mt-1">50% / 50%</div> | |
| </div> | |
| <div class="dimension-score p-4 rounded-lg border"> | |
| <div class="text-sm font-medium text-gray-500 mb-2">Sensing (S) / Intuition (N)</div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">S</span> | |
| <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5"> | |
| <div id="sn-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <span class="font-bold">N</span> | |
| </div> | |
| <div id="sn-score" class="text-xs text-gray-500 mt-1">50% / 50%</div> | |
| </div> | |
| <div class="dimension-score p-4 rounded-lg border"> | |
| <div class="text-sm font-medium text-gray-500 mb-2">Thinking (T) / Feeling (F)</div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">T</span> | |
| <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5"> | |
| <div id="tf-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <span class="font-bold">F</span> | |
| </div> | |
| <div id="tf-score" class="text-xs text-gray-500 mt-1">50% / 50%</div> | |
| </div> | |
| <div class="dimension-score p-4 rounded-lg border"> | |
| <div class="text-sm font-medium text-gray-500 mb-2">Judging (J) / Perceiving (P)</div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">J</span> | |
| <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5"> | |
| <div id="jp-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <span class="font-bold">P</span> | |
| </div> | |
| <div id="jp-score" class="text-xs text-gray-500 mt-1">50% / 50%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="retake-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full mr-4 transition duration-300"> | |
| <i class="fas fa-redo mr-2"></i> Retake Test | |
| </button> | |
| <button id="learn-more-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> | |
| Learn More <i class="fas fa-external-link-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>This test is based on the Myers-Briggs Type Indicator (MBTI) framework.</p> | |
| <p class="mt-1">For educational purposes only. Not a diagnostic tool.</p> | |
| </footer> | |
| </div> | |
| <script> | |