Hugging Face's logo

Spaces:
Hawkwind
/
quick-mbti-test
Running

App Files Community
quick-mbti-test / index.html
Hawkwind's picture
Hawkwind
Add 1 files
439b25f verified
raw
history blame contribute delete
26 kB
<!DOCTYPE html>
<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>
<p class="text-gray-500">Read your MBTI type at https://huggingface.co/spaces/Hawkwind/mbti-personality-arcade</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 id="options-container" class="space-y-3">
<!-- Options will be inserted here by JavaScript -->
</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>
// Questions data
const questions = [
{
dimension: "E/I",
question: "How would you describe yourself in social situations?",
options: [
"I enjoy being around people and find social interactions energizing",
"I prefer one-on-one interactions or small groups, and need alone time to recharge"
],
weights: [1, -1] // E vs I
},
{
dimension: "S/N",
question: "When learning something new, you tend to:",
options: [
"Focus on concrete facts and practical applications",
"Look for patterns, possibilities, and underlying meanings"
],
weights: [1, -1] // S vs N
},
{
dimension: "T/F",
question: "When making decisions, you're more likely to:",
options: [
"Consider logical consequences and objective analysis",
"Consider personal values and how it affects others"
],
weights: [1, -1] // T vs F
},
{
dimension: "J/P",
question: "In your daily life, you prefer to:",
options: [
"Have things planned and settled",
"Keep your options open and be flexible"
],
weights: [1, -1] // J vs P
},
{
dimension: "E/I",
question: "After a long week, you'd rather:",
options: [
"Go out with friends or attend a social event",
"Stay in with a good book, movie, or hobby"
],
weights: [1, -1] // E vs I
},
{
dimension: "S/N",
question: "You're more interested in:",
options: [
"What is actual, present, current, and real",
"What is possible, future, potential, and imagined"
],
weights: [1, -1] // S vs N
},
{
dimension: "T/F",
question: "When someone is upset, you're more likely to:",
options: [
"Try to solve their problem or analyze the situation",
"Focus on understanding their feelings and offering comfort"
],
weights: [1, -1] // T vs F
},
{
dimension: "J/P",
question: "When working on a project, you:",
options: [
"Like to have a clear plan and follow it",
"Prefer to keep things flexible and adapt as you go"
],
weights: [1, -1] // J vs P
},
{
dimension: "E/I",
question: "In conversations, you usually:",
options: [
"Think out loud and process ideas by talking",
"Think things through before speaking"
],
weights: [1, -1] // E vs I
},
{
dimension: "S/N",
question: "You tend to trust information that is:",
options: [
"Concrete, specific, and based on experience",
"Theoretical, abstract, and based on insights"
],
weights: [1, -1] // S vs N
},
{
dimension: "T/F",
question: "When evaluating an idea, what's more important?",
options: [
"Whether it makes logical sense",
"Whether it aligns with important values"
],
weights: [1, -1] // T vs F
},
{
dimension: "J/P",
question: "You feel more comfortable when:",
options: [
"Decisions are made and things are settled",
"Options are open for last-minute changes"
],
weights: [1, -1] // J vs P
},
{
dimension: "E/I",
question: "At a party, you're more likely to:",
options: [
"Be the one initiating conversations with new people",
"Wait for others to approach you or stick with people you know"
],
weights: [1, -1] // E vs I
},
{
dimension: "S/N",
question: "When someone describes a situation, you focus more on:",
options: [
"The specific details and facts they mention",
"The overall patterns and what it might mean"
],
weights: [1, -1] // S vs N
},
{
dimension: "T/F",
question: "When giving feedback, you prioritize:",
options: [
"Being honest and accurate, even if it might hurt feelings",
"Being tactful and considerate of how the person will receive it"
],
weights: [1, -1] // T vs F
},
{
dimension: "J/P",
question: "Your workspace is typically:",
options: [
"Organized and tidy, with everything in its place",
"A bit messy, but you know where things are"
],
weights: [1, -1] // J vs P
},
{
dimension: "E/I",
question: "You consider yourself more:",
options: [
"Outgoing and enthusiastic",
"Reserved and reflective"
],
weights: [1, -1] // E vs I
},
{
dimension: "S/N",
question: "You're more impressed by:",
options: [
"Practical solutions that work in the real world",
"Innovative ideas that could change how things are done"
],
weights: [1, -1] // S vs N
},
{
dimension: "T/F",
question: "When making an important choice, you rely more on:",
options: [
"Objective analysis and pros/cons lists",
"Your gut feeling and personal values"
],
weights: [1, -1] // T vs F
},
{
dimension: "J/P",
question: "You prefer schedules and deadlines to be:",
options: [
"Followed closely and respected",
"Flexible guidelines that can adapt to circumstances"
],
weights: [1, -1] // J vs P
}
];
// DOM elements
const welcomeScreen = document.getElementById('welcome-screen');
const questionScreen = document.getElementById('question-screen');
const resultsScreen = document.getElementById('results-screen');
const startBtn = document.getElementById('start-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const retakeBtn = document.getElementById('retake-btn');
const questionNumber = document.getElementById('question-number');
const dimension = document.getElementById('dimension');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const progressBar = document.getElementById('progress-bar');
const mbtiType = document.getElementById('mbti-type');
const typeDescription = document.getElementById('type-description');
const eiBar = document.getElementById('ei-bar');
const snBar = document.getElementById('sn-bar');
const tfBar = document.getElementById('tf-bar');
const jpBar = document.getElementById('jp-bar');
const eiScore = document.getElementById('ei-score');
const snScore = document.getElementById('sn-score');
const tfScore = document.getElementById('tf-score');
const jpScore = document.getElementById('jp-score');
// Test state
let currentQuestion = 0;
let answers = [];
let scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
// Initialize the test
function initTest() {
currentQuestion = 0;
answers = [];
scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
showQuestion();
}
// Show current question
function showQuestion() {
const question = questions[currentQuestion];
// Update question info
questionNumber.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
dimension.textContent = question.dimension;
questionText.textContent = question.question;
// Update progress bar
progressBar.style.width = `${(currentQuestion / questions.length) * 100}%`;
// Clear previous options
optionsContainer.innerHTML = '';
// Add new options
question.options.forEach((option, index) => {
const optionBtn = document.createElement('button');
optionBtn.className = 'option-btn w-full text-left p-4 rounded-lg border border-gray-200';
optionBtn.innerHTML = `<span class="font-medium">${option}</span>`;
// Check if this option was previously selected
if (answers[currentQuestion] === index) {
optionBtn.classList.add('selected');
}
optionBtn.addEventListener('click', () => selectOption(index));
optionsContainer.appendChild(optionBtn);
});
// Update navigation buttons
prevBtn.disabled = currentQuestion === 0;
nextBtn.disabled = answers[currentQuestion] === undefined;
}
// Select an option
function selectOption(index) {
// Remove selected class from all options
document.querySelectorAll('.option-btn').forEach(btn => {
btn.classList.remove('selected');
});
// Add selected class to clicked option
event.target.classList.add('selected');
// Store answer
answers[currentQuestion] = index;
// Enable next button
nextBtn.disabled = false;
}
// Calculate results
function calculateResults() {
// Reset scores
scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
// Calculate scores for each dimension
questions.forEach((question, index) => {
const answerIndex = answers[index];
if (answerIndex === undefined) return;
const weight = question.weights[answerIndex];
switch(question.dimension) {
case "E/I":
weight > 0 ? scores.E++ : scores.I++;
break;
case "S/N":
weight > 0 ? scores.S++ : scores.N++;
break;
case "T/F":
weight > 0 ? scores.T++ : scores.F++;
break;
case "J/P":
weight > 0 ? scores.J++ : scores.P++;
break;
}
});
// Determine MBTI type
const type = [
scores.E >= scores.I ? "E" : "I",
scores.S >= scores.N ? "S" : "N",
scores.T >= scores.F ? "T" : "F",
scores.J >= scores.P ? "J" : "P"
].join("");
return {
type: type,
scores: scores
};
}
// Show results
function showResults() {
const results = calculateResults();
// Display MBTI type
mbtiType.textContent = results.type;
// Calculate and display dimension percentages
const totalEI = scores.E + scores.I;
const totalSN = scores.S + scores.N;
const totalTF = scores.T + scores.F;
const totalJP = scores.J + scores.P;
const ePercent = Math.round((scores.E / totalEI) * 100);
const sPercent = Math.round((scores.S / totalSN) * 100);
const tPercent = Math.round((scores.T / totalTF) * 100);
const jPercent = Math.round((scores.J / totalJP) * 100);
eiBar.style.width = `${ePercent}%`;
snBar.style.width = `${sPercent}%`;
tfBar.style.width = `${tPercent}%`;
jpBar.style.width = `${jPercent}%`;
eiScore.textContent = `${ePercent}% / ${100 - ePercent}%`;
snScore.textContent = `${sPercent}% / ${100 - sPercent}%`;
tfScore.textContent = `${tPercent}% / ${100 - tPercent}%`;
jpScore.textContent = `${jPercent}% / ${100 - jPercent}%`;
// Show results screen
questionScreen.classList.add('hidden');
resultsScreen.classList.remove('hidden');
}
// Event listeners
startBtn.addEventListener('click', () => {
welcomeScreen.classList.add('hidden');
questionScreen.classList.remove('hidden');
initTest();
});
nextBtn.addEventListener('click', () => {
if (currentQuestion < questions.length - 1) {
currentQuestion++;
showQuestion();
} else {
showResults();
}
});
prevBtn.addEventListener('click', () => {
if (currentQuestion > 0) {
currentQuestion--;
showQuestion();
}
});
retakeBtn.addEventListener('click', () => {
resultsScreen.classList.add('hidden');
welcomeScreen.classList.remove('hidden');
});
learnMoreBtn.addEventListener('click', () => {
// This would link to more detailed information about the MBTI type
alert("This would link to more detailed information about your MBTI type in a real implementation.");
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hawkwind/quick-mbti-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>