Does AI Think Like Me?
What You'll Build?
A fun personality quiz where "AI" predicts your answers.
What You'll Learn About AI?
Real AI didn't start smart.
Early AI was just a LOT of if/else rules written by humans. Like:
IF user likes cats → predict they like quiet activities
IF user sleeps late → predict they're a night owl
This is called Rule-Based AI.
It's still used today in chatbots, spam filters, and recommendation systems.
Setup
Online (No installation): codepen.io
VS Code: Create new folder ai-personality-quiz → then, create index.html, style.css, script.js
STEP 1: HTML (under index.html)
<!DOCTYPE html>
<html>
<head>
<title>Does AI Think Like Me?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1> Does AI Think Like Me?</h1>
<p class="subtitle">Answer 5 questions. AI will predict your personality!</p>
</div>
<!-- Quiz Section -->
<div id="quizSection">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<p class="progress-text" id="progressText">Question 1 of 5</p>
<div class="question-card" id="questionCard">
<h2 id="questionText">Loading...</h2>
<div class="options" id="optionsContainer"></div>
</div>
</div>
<!-- Result Section (hidden at first) -->
<div id="resultSection" class="hidden">
<div class="result-card">
<h2> AI's Prediction:</h2>
<div class="ai-result" id="aiResult"></div>
<div class="explanation">
<h3> How did AI know?</h3>
<p id="explanationText"></p>
</div>
<button class="btn" onclick="restartQuiz()">Try Again! 🔄</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
STEP 2: CSS (under style.css)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
font-family: Arial, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 600px;
width: 100%;
}
.header {
text-align: center;
margin-bottom: 30px;
}
h1 {
color: white;
font-size: 36px;
margin-bottom: 10px;
}
.subtitle {
color: #a0aec0;
font-size: 18px;
}
/* Progress Bar */
.progress-bar {
background-color: #2d3748;
border-radius: 50px;
height: 10px;
margin-bottom: 10px;
}
.progress-fill {
background: linear-gradient(90deg, #667eea, #764ba2);
height: 10px;
border-radius: 50px;
width: 20%;
transition: width 0.5s ease;
}
.progress-text {
color: #a0aec0;
text-align: right;
margin-bottom: 20px;
font-size: 14px;
}
/* Question Card */
.question-card {
background-color: #2d3748;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.question-card h2 {
color: white;
font-size: 22px;
margin-bottom: 25px;
line-height: 1.5;
}
/* Options */
.options {
display: flex;
flex-direction: column;
gap: 12px;
}
.option-btn {
background-color: #4a5568;
color: white;
border: 2px solid transparent;
padding: 15px 20px;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
text-align: left;
transition: all 0.3s;
}
.option-btn:hover {
background-color: #667eea;
border-color: #764ba2;
transform: translateX(5px);
}
/* Result Section */
.hidden {
display: none;
}
.result-card {
background-color: #2d3748;
border-radius: 20px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.result-card h2 {
color: #a0aec0;
font-size: 20px;
margin-bottom: 20px;
}
.ai-result {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
}
.ai-result h3 {
color: white;
font-size: 26px;
margin-bottom: 10px;
}
.ai-result p {
color: #e2e8f0;
font-size: 16px;
line-height: 1.6;
}
.explanation {
background-color: #1a202c;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
text-align: left;
}
.explanation h3 {
color: #667eea;
margin-bottom: 10px;
}
.explanation p {
color: #a0aec0;
line-height: 1.6;
font-size: 15px;
}
.btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(102,126,234,0.5);
}
STEP 3: JavaScript (under script.js)
// ============================================
// ALL THE QUIZ QUESTIONS
// ============================================
const questions = [
{
question: "It's Saturday morning! What do you do first?",
options: [
{ text: "🛏️ Sleep in as long as possible", value: "relax" },
{ text: "📚 Read a book or watch something", value: "creative" },
{ text: "🏃 Go outside for a walk or exercise", value: "active" },
{ text: "💻 Work on a project or hobby", value: "maker" }
]
},
{
question: "Your friend group would describe you as...",
options: [
{ text: "😂 The funny one", value: "creative" },
{ text: "🧠 The smart one", value: "maker" },
{ text: "❤️ The caring one", value: "relax" },
{ text: "⚡ The energetic one", value: "active" }
]
},
{
question: "Pick a superpower!",
options: [
{ text: "🧠 Read minds", value: "creative" },
{ text: "⚡ Super speed", value: "active" },
{ text: "🔧 Build anything instantly", value: "maker" },
{ text: "😴 Never need sleep", value: "relax" }
]
},
{
question: "What kind of movies do you love most?",
options: [
{ text: "🚀 Action and adventure", value: "active" },
{ text: "🎭 Drama and stories", value: "creative" },
{ text: "🔬 Science fiction", value: "maker" },
{ text: "😂 Comedy", value: "relax" }
]
},
{
question: "You have a free afternoon. You spend it...",
options: [
{ text: "🎮 Playing games", value: "relax" },
{ text: "🎨 Making or creating something", value: "maker" },
{ text: "🏀 Playing a sport", value: "active" },
{ text: "✍️ Writing, drawing, or music", value: "creative" }
]
}
];
// ============================================
// AI PERSONALITY RESULTS
// This is the "AI brain" - just if/else rules!
// ============================================
const personalities = {
relax: {
title: "😌 The Peaceful Soul",
description: "You value comfort, fun, and good vibes. You're loyal to friends, easy to talk to, and know how to enjoy life without stress.",
traits: ["Great listener", "Loyal friend", "Finds joy in simple things"]
},
creative: {
title: "🎨 The Creative Dreamer",
description: "Your mind never stops! You see the world differently and love expressing yourself. You're the kind of person who comes up with ideas others never think of.",
traits: ["Original thinker", "Expressive", "Full of imagination"]
},
active: {
title: "⚡ The Go-Getter",
description: "You have amazing energy! You love challenges, moving fast, and making things happen. People look to you when they need someone to take action.",
traits: ["Natural leader", "Full of energy", "Love challenges"]
},
maker: {
title: "🔧 The Builder Brain",
description: "You love understanding how things work and making new things. You're probably the person everyone asks when something is broken - or needs to be built!",
traits: ["Problem solver", "Curious mind", "loves creating things"]
}
};
// ============================================
// QUIZ LOGIC
// ============================================
let currentQuestion = 0;
let scores = { relax: 0, creative: 0, active: 0, maker: 0 };
// Show first question when page loads
showQuestion();
function showQuestion() {
const q = questions[currentQuestion];
// Update progress bar
const progress = ((currentQuestion + 1) / questions.length) * 100;
document.getElementById('progressFill').style.width = progress + '%';
document.getElementById('progressText').textContent =
`Question ${currentQuestion + 1} of ${questions.length}`;
// Show question text
document.getElementById('questionText').textContent = q.question;
// Create option buttons
const container = document.getElementById('optionsContainer');
container.innerHTML = ''; // Clear old options
q.options.forEach(function(option) {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.textContent = option.text;
btn.onclick = function() { selectAnswer(option.value); };
container.appendChild(btn);
});
}
function selectAnswer(value) {
// Add to score for this personality type
scores[value]++;
currentQuestion++;
if (currentQuestion < questions.length) {
// More questions left
showQuestion();
} else {
// Quiz done! Show result
showResult();
}
}
function showResult() {
// Find the personality with highest score
// This is the "AI rule" - most common answer wins!
let topPersonality = 'relax';
let topScore = 0;
for (let type in scores) {
if (scores[type] > topScore) {
topScore = scores[type];
topPersonality = type;
}
}
const result = personalities[topPersonality];
// Hide quiz, show result
document.getElementById('quizSection').classList.add('hidden');
document.getElementById('resultSection').classList.remove('hidden');
// Build result HTML
document.getElementById('aiResult').innerHTML = `
<h3>${result.title}</h3>
<p>${result.description}</p>
<br>
<p><strong>Your traits:</strong> ${result.traits.join(' • ')}</p>
`;
// Explain how the "AI" worked
document.getElementById('explanationText').innerHTML = `
The AI tracked your answers and counted which personality type you chose most often.
You chose <strong>${topPersonality}</strong> type answers ${topScore} out of 5 times!
<br><br>
This is called <strong>Rule-Based AI</strong> - the most common answer wins.
Real AI apps like Spotify and Netflix use this same idea to recommend songs and movies! 🎵🎬
`;
}
function restartQuiz() {
// Reset everything
currentQuestion = 0;
scores = { relax: 0, creative: 0, active: 0, maker: 0 };
document.getElementById('quizSection').classList.remove('hidden');
document.getElementById('resultSection').classList.add('hidden');
showQuestion();
}
Challenges for you to try out:
Add 5 more questions - Copy the question format and add your own
Add a new personality type - Create a "scientist" or "artist" type
Add a share button - Shows a message they can copy and share with friends
Make it a friend quiz - "How well does AI know your best friend?"
STEP 4: Show off your work!
For Online Editors:
CodePen: Click "Save" and share the URL
For VS Code:
Take a video and share it!
Or learn to publish on GitHub Pages
Troubleshooting
-> My CSS isn't working!
Check that style.css is spelled exactly right in both files
Make sure the <link> tag is in the <head> section
Save both files!
-> I don't see my changes!
Did you save? (Ctrl+S or Cmd+S)
Try refreshing your browser (F5 or Cmd+R)
Your project will look like this 👇🏽
