<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What Can AI Do? - Interactive Quiz</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
.quiz-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 30px;
margin-bottom: 30px;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.intro {
text-align: center;
margin-bottom: 30px;
}
.question-container {
margin-bottom: 20px;
}
.question {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.options {
display: flex;
flex-direction: column;
gap: 10px;
}
.option {
padding: 12px 15px;
background-color: #f1f5f9;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.option:hover {
background-color: #e2e8f0;
}
.option.selected {
background-color: #3498db;
color: white;
border-color: #2980b9;
}
.option.correct {
background-color: #2ecc71;
color: white;
border-color: #27ae60;
}
.option.incorrect {
background-color: #e74c3c;
color: white;
border-color: #c0392b;
}
.explanation {
background-color: #f8f9fa;
border-left: 4px solid #3498db;
padding: 15px;
margin-top: 20px;
display: none;
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #2980b9;
}
button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
.progress {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.progress-bar {
height: 10px;
background-color: #ecf0f1;
border-radius: 5px;
flex-grow: 1;
margin: 0 15px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #3498db;
width: 0%;
transition: width 0.3s ease;
}
.results {
text-align: center;
display: none;
}
.score {
font-size: 2rem;
font-weight: bold;
color: #2c3e50;
margin: 20px 0;
}
.message {
font-size: 1.2rem;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>What Can AI Do?</h1>
<div class="intro">
<p>Test your knowledge about modern AI capabilities in this friendly quiz designed for entrepreneurs, freelancers, marketers, and curious minds!</p>
<button id="start-btn">Start Quiz</button>
</div>
<div id="quiz" style="display: none;">
<div class="progress">
<span id="question-number">Question 1</span>
<div class="progress-bar">
<div class="progress-fill" id="progress"></div>
</div>
<span id="question-total">of 8</span>
</div>
<div class="question-container">
<div class="question" id="question-text">Question text goes here</div>
<div class="options" id="options-container">
<!-- Options will be inserted here -->
</div>
<div class="explanation" id="explanation">
Explanation text goes here
</div>
</div>
<div class="controls">
<button id="prev-btn" disabled>Previous</button>
<button id="next-btn" disabled>Next</button>
</div>
</div>
<div class="results" id="results">
<h2>Quiz Complete!</h2>
<div class="score" id="score">0/8</div>
<div class="message" id="result-message"></div>
<button id="restart-btn">Take Quiz Again</button>
</div>
</div>
<script>
// Quiz data
const quiz = {
title: "What Can AI Do?",
description: "Test your knowledge about modern AI capabilities in this friendly quiz designed for entrepreneurs, freelancers, marketers, and curious minds!",
questions: [
{
id: 1,
question: "Which of the following tasks can modern AI text generators NOT reliably perform?",
options: [
"Write a personalized email based on bullet points you provide",
"Create original poetry in the style of famous authors",
"Determine with 100% accuracy if content was AI-generated",
"Summarize a long research paper into key points"
],
correctIndex: 2,
explanation: "While AI can create and detect AI-generated content with high accuracy, achieving 100% accuracy in detection remains challenging as AI-generated content continues to evolve and improve, creating an ongoing \"arms race\" between generation and detection technologies."
},
{
id: 2,
question: "What input is typically needed to create an AI-generated image?",
options: [
"A text description of what you want to see",
"At least one reference image to work from",
"Specific color codes and artistic style parameters",
"Programming knowledge in Python or JavaScript"
],
correctIndex: 0,
explanation: "Most modern AI image generators like DALL-E, Midjourney, and Stable Diffusion primarily work with text prompts (called \"text-to-image\"), allowing users to simply describe what they want to see without needing technical skills or reference images."
},
{
id: 3,
question: "What's a current limitation of AI-generated videos that creators should know?",
options: [
"They can only be created in standard definition quality",
"They typically last seconds rather than minutes",
"They cannot include human figures or faces",
"They require specialized hardware to view"
],
correctIndex: 1,
explanation: "Current consumer-accessible AI video generation tools typically produce short clips (often 5-15 seconds), though this limitation is rapidly changing as the technology evolves and computational resources improve."
},
{
id: 4,
question: "Which of these is something today's AI audio tools can do for you?",
options: [
"Create a perfect replica of any singer's voice from a 5-second sample",
"Generate background music that changes based on your video content",
"Convert your text into natural-sounding speech in multiple languages",
"Automatically master audio to professional studio quality"
],
correctIndex: 2,
explanation: "Text-to-speech AI has advanced dramatically, with systems like Google's, Amazon's, and OpenAI's capable of converting text to remarkably natural-sounding speech in dozens of languages and voices, making content more accessible and multilingual."
},
{
id: 5,
question: "For entrepreneurs and small business owners, which AI application offers the most immediate practical value?",
options: [
"Fully automated customer service that handles all inquiries",
"Content creation for marketing materials and social media",
"Complete replacement of human decision-making in management",
"Autonomous physical product manufacturing"
],
correctIndex: 1,
explanation: "AI content creation tools provide immediate value by helping businesses generate marketing copy, blog posts, social media content, and product descriptions quickly and cost-effectively, allowing small teams to produce professional-quality content at scale."
},
{
id: 6,
question: "Which statement about current AI limitations is most accurate?",
options: [
"AI cannot understand the context in conversations",
"AI cannot generate images larger than 1024x1024 pixels",
"AI struggles with understanding nuanced ethical questions",
"AI cannot work with languages other than English"
],
correctIndex: 2,
explanation: "While AI has made tremendous progress in many areas, it still struggles with nuanced ethical reasoning, often failing to consider complex moral trade-offs or cultural contexts that humans naturally incorporate into their ethical decision-making."
},
{
id: 7,
question: "Which AI capability would be most valuable for a social media marketer?",
options: [
"Automatically posting content without human review",
"Predicting exact engagement rates for future posts",
"Creating variations of content tailored to different platforms",
"Analyzing competitor strategies without access to their accounts"
],
correctIndex: 2,
explanation: "AI's ability to adapt content for different platforms (like reformatting text for Twitter vs. LinkedIn, or adjusting image compositions for Instagram vs. Facebook) saves marketers significant time while optimizing content performance across channels."
},
{
id: 8,
question: "What surprising capability do some modern AI systems have?",
options: [
"They can predict stock market changes with 95% accuracy",
"They can compose music that professional musicians can't distinguish from human composers",
"They can diagnose certain medical conditions by analyzing patterns humans might miss",
"They can translate between over 100 human languages in real-time"
],
correctIndex: 3,
explanation: "Modern AI translation systems like Google Translate and DeepL support over 100 languages, with some systems capable of translating between language pairs that have never been directly translated before! This is achieved through techniques like \"zero-shot translation\" where the AI learns to connect languages through shared patterns rather than direct translation pairs."
}
]
};
// Quiz state
let currentQuestion = 0;
let score = 0;
let userAnswers = Array(quiz.questions.length).fill(null);
let reviewMode = false;
// DOM elements
const startBtn = document.getElementById('start-btn');
const quizContainer = document.getElementById('quiz');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const explanation = document.getElementById('explanation');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const questionNumber = document.getElementById('question-number');
const questionTotal = document.getElementById('question-total');
const progress = document.getElementById('progress');
const resultsContainer = document.getElementById('results');
const scoreElement = document.getElementById('score');
const resultMessage = document.getElementById('result-message');
const restartBtn = document.getElementById('restart-btn');
const introContainer = document.querySelector('.intro');
// Event listeners
startBtn.addEventListener('click', startQuiz);
prevBtn.addEventListener('click', showPreviousQuestion);
nextBtn.addEventListener('click', handleNextButton);
restartBtn.addEventListener('click', restartQuiz);
// Initialize quiz
function startQuiz() {
introContainer.style.display = 'none';
quizContainer.style.display = 'block';
currentQuestion = 0;
score = 0;
userAnswers = Array(quiz.questions.length).fill(null);
reviewMode = false;
showQuestion(currentQuestion);
updateProgress();
}
// Display current question
function showQuestion(index) {
const question = quiz.questions[index];
questionText.textContent = question.question;
questionNumber.textContent = `Question ${index + 1}`;
questionTotal.textContent = `of ${quiz.questions.length}`;
// Clear options
optionsContainer.innerHTML = '';
// Add options
question.options.forEach((option, i) => {
const optionElement = document.createElement('div');
optionElement.classList.add('option');
optionElement.textContent = option;
optionElement.dataset.index = i;
// If in review mode or user already answered
if (reviewMode || userAnswers[index] !== null) {
if (i === question.correctIndex) {
optionElement.classList.add('correct');
} else if (userAnswers[index] === i) {
optionElement.classList.add('incorrect');
}
optionElement.style.cursor = 'default';
} else {
optionElement.addEventListener('click', () => selectOption(i));
}
// If user previously selected this option
if (userAnswers[index] === i && !reviewMode) {
optionElement.classList.add('selected');
}
optionsContainer.appendChild(optionElement);
});
// Show explanation if in review mode or user already answered
if (reviewMode || userAnswers[index] !== null) {
explanation.textContent = question.explanation;
explanation.style.display = 'block';
} else {
explanation.style.display = 'none';
}
// Update buttons
prevBtn.disabled = index === 0;
if (reviewMode) {
nextBtn.textContent = index === quiz.questions.length - 1 ? 'Finish' : 'Next';
nextBtn.disabled = false;
} else {
nextBtn.textContent = index === quiz.questions.length - 1 ? 'Finish' : 'Next';
nextBtn.disabled = userAnswers[index] === null;
}
}
// Handle option selection
function selectOption(optionIndex) {
if (reviewMode || userAnswers[currentQuestion] !== null) return;
userAnswers[currentQuestion] = optionIndex;
// Update UI
const options = optionsContainer.querySelectorAll('.option');
options.forEach((option, i) => {
option.classList.remove('selected');
if (i === optionIndex) {
option.classList.add('selected');
}
});
// Enable next button
nextBtn.disabled = false;
// Show explanation
explanation.textContent = quiz.questions[currentQuestion].explanation;
explanation.style.display = 'block';
}
// Show previous question
function showPreviousQuestion() {
if (currentQuestion > 0) {
currentQuestion--;
showQuestion(currentQuestion);
updateProgress();
}
}
// Handle next button click
function handleNextButton() {
if (currentQuestion < quiz.questions.length - 1) {
currentQuestion++;
showQuestion(currentQuestion);
updateProgress();
} else {
showResults();
}
}
// Update progress bar
function updateProgress() {
const progressPercentage = ((currentQuestion + 1) / quiz.questions.length) * 100;
progress.style.width = `${progressPercentage}%`;
}
// Calculate score
function calculateScore() {
score = 0;
userAnswers.forEach((answer, index) => {
if (answer === quiz.questions[index].correctIndex) {
score++;
}
});
return score;
}
// Show results
function showResults() {
const finalScore = calculateScore();
const percentage = Math.round((finalScore / quiz.questions.length) * 100);
quizContainer.style.display = 'none';
resultsContainer.style.display = 'block';
scoreElement.textContent = `${finalScore}/${quiz.questions.length} (${percentage}%)`;
if (percentage >= 80) {
resultMessage.textContent = "Excellent! You have a strong understanding of modern AI capabilities!";
} else if (percentage >= 60) {
resultMessage.textContent = "Good job! You know quite a bit about AI, with some room to learn more.";
} else {
resultMessage.textContent = "Thanks for taking the quiz! There's an exciting world of AI capabilities to explore.";
}
}
// Restart quiz
function restartQuiz() {
resultsContainer.style.display = 'none';
reviewMode = false;
startQuiz();
}
</script>
</body>
</html>
