Untitled
unknown
plain_text
a month ago
42 kB
14
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dovi's Greek Quest</title>
<style>
:root {
--primary: #1a3a6e;
--primary-light: #2a5294;
--gold: #d4a72c;
--gold-light: #e6c45a;
--cream: #faf6ee;
--dark: #2c2416;
--green: #2d8659;
--red: #c54040;
--shadow: rgba(0,0,0,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: Georgia, 'Times New Roman', serif;
background: var(--cream);
background-image:
repeating-linear-gradient(45deg, transparent 0 20px, rgba(212,167,44,0.04) 20px 21px),
repeating-linear-gradient(-45deg, transparent 0 20px, rgba(26,58,110,0.04) 20px 21px);
color: var(--dark);
min-height: 100vh;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 820px;
width: 100%;
background: white;
border: 3px solid var(--primary);
border-radius: 10px;
box-shadow: 0 8px 32px var(--shadow);
padding: 28px;
margin: 16px 0;
}
@media (max-width: 600px) {
.container { padding: 18px; }
}
/* Title screen */
.title { text-align: center; }
h1 {
color: var(--primary);
font-size: clamp(1.6em, 5vw, 2.4em);
margin-bottom: 8px;
letter-spacing: 1px;
}
.subtitle {
color: var(--gold);
font-size: 1.1em;
font-style: italic;
margin-bottom: 22px;
}
.columns-decoration {
display: flex;
justify-content: space-between;
margin: 14px 0 22px;
font-size: 2em;
opacity: 0.5;
}
.mode-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 24px 0;
}
@media (min-width: 700px) {
.mode-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.mode-btn {
background: var(--primary);
color: white;
border: 2px solid var(--gold);
padding: 22px 18px;
font-size: 1em;
font-family: inherit;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.mode-btn:hover {
background: var(--gold);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow);
}
.mode-name {
font-size: 1.2em;
font-weight: bold;
display: block;
margin-bottom: 6px;
}
.mode-desc {
font-size: 0.85em;
opacity: 0.92;
line-height: 1.4;
}
/* Game screen */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 2px solid var(--gold);
margin-bottom: 18px;
flex-wrap: wrap;
gap: 10px;
}
.game-title {
color: var(--primary);
font-size: 1.1em;
font-weight: bold;
}
.stats {
display: flex;
gap: 16px;
font-size: 0.9em;
flex-wrap: wrap;
}
.stat { color: var(--primary); }
.stat strong { color: var(--gold); }
.progress-bar {
height: 8px;
background: #eee;
border-radius: 4px;
overflow: hidden;
margin-bottom: 22px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--gold));
transition: width 0.3s;
}
.empire-progress {
background: #f8f5ec;
padding: 14px;
border-radius: 6px;
margin-bottom: 18px;
text-align: center;
border: 2px dashed var(--gold);
}
.empire-emoji {
font-size: 1.4em;
letter-spacing: 6px;
margin-top: 6px;
}
.ribbon {
background: var(--gold);
color: var(--primary);
padding: 8px 14px;
margin-bottom: 14px;
text-align: center;
font-weight: bold;
border-radius: 4px;
display: none;
}
.ribbon.show { display: block; }
.topic-tag {
display: inline-block;
background: var(--primary);
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.75em;
margin-bottom: 10px;
}
.question {
font-size: 1.2em;
color: var(--dark);
margin-bottom: 18px;
line-height: 1.5;
padding: 14px 16px;
background: #f8f5ec;
border-left: 4px solid var(--gold);
border-radius: 0 4px 4px 0;
}
.answers {
display: grid;
gap: 10px;
}
.answer-btn {
background: white;
border: 2px solid var(--primary);
color: var(--primary);
padding: 13px 18px;
font-size: 0.98em;
font-family: inherit;
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: all 0.15s;
line-height: 1.4;
}
.answer-btn:hover:not(:disabled) {
background: var(--primary);
color: white;
transform: translateX(4px);
}
.answer-btn:disabled { cursor: default; }
.answer-btn.correct {
background: var(--green) !important;
color: white !important;
border-color: var(--green);
}
.answer-btn.wrong {
background: var(--red) !important;
color: white !important;
border-color: var(--red);
}
.answer-btn.correct-shown {
border-color: var(--green);
background: rgba(45, 134, 89, 0.15);
color: var(--dark);
}
.feedback {
margin-top: 18px;
padding: 14px 16px;
border-radius: 6px;
display: none;
line-height: 1.5;
}
.feedback.show { display: block; }
.feedback.correct {
background: rgba(45, 134, 89, 0.1);
border-left: 4px solid var(--green);
}
.feedback.wrong {
background: rgba(197, 64, 64, 0.08);
border-left: 4px solid var(--red);
}
.next-btn {
background: var(--gold);
color: var(--primary);
border: none;
padding: 12px 28px;
font-size: 1.05em;
font-family: inherit;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
margin-top: 14px;
display: none;
width: 100%;
}
.next-btn.show { display: block; }
.next-btn:hover {
background: var(--primary);
color: white;
}
.timer {
font-size: 1.1em;
font-weight: bold;
color: var(--red);
}
.timer.safe { color: var(--green); }
/* Results screen */
.results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 18px 0;
}
.result-card {
background: #f8f5ec;
padding: 20px;
border-radius: 8px;
text-align: center;
border: 2px solid var(--gold);
}
.result-number {
font-size: 2.4em;
color: var(--primary);
font-weight: bold;
line-height: 1.1;
}
.result-label {
margin-top: 6px;
font-size: 0.9em;
color: #555;
}
.grade-message {
text-align: center;
font-size: 1.05em;
padding: 14px;
background: #f8f5ec;
border-radius: 6px;
line-height: 1.5;
margin: 16px 0;
}
.topic-breakdown { margin: 22px 0; }
.topic-breakdown h3 {
color: var(--primary);
margin-bottom: 10px;
font-size: 1.15em;
}
.topic-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.topic-name { color: var(--primary); font-weight: 600; }
.topic-bar {
flex: 1;
height: 8px;
background: #eee;
margin: 0 12px;
border-radius: 4px;
overflow: hidden;
max-width: 200px;
}
.topic-bar-fill { height: 100%; background: var(--green); }
.topic-bar-fill.low { background: var(--red); }
.topic-bar-fill.mid { background: var(--gold); }
.review-section {
margin-top: 24px;
padding-top: 20px;
border-top: 2px solid var(--gold);
}
.review-section h3 {
color: var(--primary);
margin-bottom: 12px;
font-size: 1.15em;
}
.review-item {
background: rgba(197, 64, 64, 0.05);
border-left: 3px solid var(--red);
padding: 12px 14px;
margin-bottom: 10px;
border-radius: 0 4px 4px 0;
}
.review-q {
font-weight: bold;
color: var(--dark);
margin-bottom: 4px;
}
.review-a {
color: var(--green);
margin-top: 4px;
font-weight: 600;
}
.review-explanation {
color: #666;
font-size: 0.92em;
margin-top: 6px;
font-style: italic;
}
.restart-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.restart-buttons .mode-btn {
padding: 12px 24px;
flex: 1;
min-width: 200px;
}
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="container">
<!-- Title Screen -->
<div id="title-screen" class="title">
<h1>Dovi's Greek Quest</h1>
<p class="subtitle">A Study Adventure for the May 13 Test</p>
<div class="columns-decoration">
<span>🏛</span><span>🏛</span><span>🏛</span><span>🏛</span><span>🏛</span>
</div>
<p style="margin-bottom:14px; color: #555; font-size: 0.95em;">Pick your mode and start studying.</p>
<div class="mode-grid">
<button class="mode-btn" onclick="startGame('practice')">
<span class="mode-name">📚 Practice</span>
<span class="mode-desc">All questions, in random order. Explanations shown. No timer. Best for first-time review.</span>
</button>
<button class="mode-btn" onclick="startGame('conquest')">
<span class="mode-name">⚔️ Conquest</span>
<span class="mode-desc">25 questions. Build your empire. Streak bonuses for correct chains.</span>
</button>
<button class="mode-btn" onclick="startGame('test')">
<span class="mode-name">🏛 Test Day</span>
<span class="mode-desc">30 questions, 45 seconds each. No explanations until the end. Mimics the real test.</span>
</button>
</div>
<p style="margin-top:24px; color:#888; font-size: 0.85em;">Built from your Greece notes and review sheet. Good luck!</p>
</div>
<!-- Game Screen -->
<div id="game-screen" class="hidden">
<div class="top-bar">
<div class="game-title" id="game-mode-name"></div>
<div class="stats">
<div class="stat">Score: <strong id="score">0</strong></div>
<div class="stat">Q: <strong id="question-num">1/0</strong></div>
<div class="stat" id="timer-stat" style="display:none;">⏱ <strong class="timer" id="timer">45</strong></div>
</div>
</div>
<div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width: 0%"></div></div>
<div class="empire-progress" id="empire-progress" style="display:none;">
<div>Your Empire: <span id="empire-status">A small village</span></div>
<div class="empire-emoji" id="empire-emoji">🏠</div>
</div>
<div class="ribbon" id="streak-ribbon"></div>
<div id="topic-tag-container"></div>
<div class="question" id="question-text"></div>
<div class="answers" id="answers"></div>
<div class="feedback" id="feedback"></div>
<button class="next-btn" id="next-btn" onclick="nextQuestion()">Next →</button>
</div>
<!-- Results Screen -->
<div id="results-screen" class="hidden">
<h1 style="text-align:center;">Results</h1>
<p class="subtitle" style="text-align:center;" id="result-mode"></p>
<div class="results-grid">
<div class="result-card">
<div class="result-number"><span id="final-score">0</span>/<span id="total-q">0</span></div>
<div class="result-label">Correct</div>
</div>
<div class="result-card">
<div class="result-number" id="final-pct">0%</div>
<div class="result-label">Mastery</div>
</div>
</div>
<p class="grade-message" id="grade-message"></p>
<div class="topic-breakdown">
<h3>By Topic</h3>
<div id="topic-stats"></div>
</div>
<div class="review-section" id="review-section">
<h3>Questions to Review</h3>
<div id="missed-questions"></div>
</div>
<div class="restart-buttons">
<button class="mode-btn" onclick="goHome()">← Back to Menu</button>
</div>
</div>
</div>
<script>
// =============================================================
// QUESTION BANK
// Each question verified against the source notes.
// All answer fields are comma-free to avoid any display issues.
// =============================================================
const QUESTIONS = [
// GEOGRAPHY OF GREECE (8)
{q:"What type of landform is Greece?",correct:"A peninsula",wrong:["An island","A continent","A desert"],topic:"Geography",explanation:"Greece is a peninsula (land surrounded by water on three sides) and also has many islands."},
{q:"What is the land of Greece mostly like?",correct:"Rocky and mountainous",wrong:["Flat and grassy","Sandy and dry","Lush rainforest"],topic:"Geography",explanation:"Rocky and mountainous land made farming hard and travel difficult."},
{q:"Where did most farming happen in ancient Greece?",correct:"Coastal plains and river valleys",wrong:["On mountain peaks","Inside cities","In underground caves"],topic:"Geography",explanation:"Only the few flat areas (coastal plains and river valleys) had land good enough for farming."},
{q:"Why were ancient Greek communities isolated from each other?",correct:"Mountains and seas made travel difficult",wrong:["They spoke different languages","Each city built giant walls","They were enemies"],topic:"Geography",explanation:"Travel across mountains and seas was hard so communities developed separately and made their own governments."},
{q:"What did the isolated Greek communities each create on their own?",correct:"Their own governments",wrong:["Their own languages","Their own oceans","Their own continents"],topic:"Geography"},
{q:"Even though Greek city-states were separate what did they share?",correct:"The same language",wrong:["The same king","The same army","The same religion"],topic:"Geography",explanation:"They spoke the same language but had different ways of life."},
{q:"Why did the Greeks become expert shipbuilders?",correct:"They used the seas for food and trade",wrong:["They wanted to escape Greece","A king ordered everyone to build boats","They had no use for the land"],topic:"Geography"},
{q:"What did ancient Greeks trade with other cultures using their ships?",correct:"Foods products and ideas",wrong:["Only gold coins","Only weapons","Only clothing"],topic:"Geography"},
// CITY-STATES & CLASSICAL AGE (5)
{q:"Around what year did Greeks first join together for protection?",correct:"750 BCE",wrong:["500 BCE","1000 BCE","356 BCE"],topic:"City-States"},
{q:"Why did the Greeks first join together in groups?",correct:"For protection and stability",wrong:["To build one giant city","To worship one god","To pay taxes to a king"],topic:"City-States"},
{q:"What is the Greek word for city-state?",correct:"Polis",wrong:["Dynasty","Empire","Tribe"],topic:"City-States"},
{q:"The formation of city-states began which historical period?",correct:"The Classical Age",wrong:["The Stone Age","The Bronze Age","The Hellenistic Age"],topic:"City-States",explanation:"The Classical Age was a period filled with great achievements."},
{q:"The Classical Age was a period of...",correct:"Great achievements",wrong:["Constant famine","Total destruction","Mass migration"],topic:"City-States"},
// GOVERNMENT - MONARCHY/OLIGARCHY/TYRANNY (8)
{q:"Who ruled Athens first before any other type of government?",correct:"Kings",wrong:["Aristocrats","Tyrants","The people"],topic:"Government",explanation:"The order in Athens was: monarchy (kings), oligarchy (a few), tyranny (one strong man), then democracy."},
{q:"What kind of government has only a few people in power?",correct:"Oligarchy",wrong:["Monarchy","Democracy","Tyranny"],topic:"Government"},
{q:"During an oligarchy who held the power in Athens?",correct:"Aristocrats",wrong:["Farmers","Soldiers","Priests"],topic:"Government"},
{q:"What is an aristocrat?",correct:"A rich and powerful person",wrong:["A poor farmer","A traveling merchant","A foreign soldier"],topic:"Government"},
{q:"What is a tyrant?",correct:"A person who takes power by force",wrong:["A person elected by citizens","The oldest son of a king","A religious leader"],topic:"Government"},
{q:"Who overthrew the aristocrats and ruled Athens as a tyrant?",correct:"Peisistratus",wrong:["Alexander the Great","Philip II","Pericles"],topic:"Government"},
{q:"Why was Peisistratus considered a good ruler?",correct:"He had support from the people and a strong army",wrong:["He never went to war","He gave away all the land","He was elected fairly"],topic:"Government"},
{q:"What did Peisistratus do during his rule?",correct:"He made improvements in Athens",wrong:["He destroyed the city walls","He banned all trade","He moved Athens to Sparta"],topic:"Government"},
// DEMOCRACY (10)
{q:"Around what year did democracy begin in Athens?",correct:"500 BCE",wrong:["750 BCE","431 BCE","323 BCE"],topic:"Democracy",explanation:"This is one of the three dates you must know by heart."},
{q:"What does the word democracy mean?",correct:"Rule of the people",wrong:["Rule of the king","Rule of the rich","Rule of the army"],topic:"Democracy",explanation:"It comes from Greek roots meaning 'rule of the people.'"},
{q:"Which city-state is the birthplace of democracy?",correct:"Athens",wrong:["Sparta","Macedonia","Corinth"],topic:"Democracy"},
{q:"In a democracy who holds the power?",correct:"The people themselves",wrong:["One king","A small group of nobles","A foreign emperor"],topic:"Democracy"},
{q:"Did all Greek city-states become democracies?",correct:"No only some did",wrong:["Yes every single one","Only Sparta did","Only city-states with kings did"],topic:"Democracy"},
{q:"In a direct democracy who votes on the laws?",correct:"The citizens themselves on every issue",wrong:["Elected representatives","Only the wealthy","Only soldiers"],topic:"Democracy",explanation:"Athens used direct democracy. The U.S. uses representative democracy."},
{q:"In a representative democracy who votes on the laws?",correct:"Elected officials chosen by the citizens",wrong:["Every citizen on every issue","Only the king's family","Religious leaders"],topic:"Democracy"},
{q:"Which type of democracy did ancient Athens use?",correct:"Direct democracy",wrong:["Representative democracy","Constitutional monarchy","Oligarchy"],topic:"Democracy"},
{q:"Which type of democracy does the United States use?",correct:"Representative democracy",wrong:["Direct democracy","Pure monarchy","Tyranny"],topic:"Democracy"},
{q:"Where did Athenian citizens go to vote and discuss issues?",correct:"The Athenian Assembly",wrong:["The royal palace","The Senate of Rome","The marketplace"],topic:"Democracy"},
// ATHENS vs SPARTA (4)
{q:"In Athens women were mostly expected to...",correct:"Stay home and care for the household",wrong:["Train as soldiers","Lead the government","Compete in the Olympics"],topic:"Athens vs Sparta"},
{q:"Compared to Athenian women Spartan women had...",correct:"More freedom and rights",wrong:["Far fewer rights","Exactly the same rights","No rights at all"],topic:"Athens vs Sparta"},
{q:"Spartan women were trained in...",correct:"Physical fitness and athletics",wrong:["Cooking and weaving only","Government and law","Trade and shipbuilding"],topic:"Athens vs Sparta"},
{q:"In Athenian democracy who was actually allowed to vote?",correct:"Adult male citizens only",wrong:["All people in Athens","Only women","Only foreigners"],topic:"Athens vs Sparta",explanation:"Even though Athens invented democracy women foreigners and enslaved people could not vote."},
// PELOPONNESIAN WAR (15)
{q:"After fighting outsiders together what did Greek city-states form?",correct:"Alliances",wrong:["Empires","Republics","Religions"],topic:"Peloponnesian War"},
{q:"What is an alliance?",correct:"An agreement to work together",wrong:["A type of weapon","A trade route","A type of money"],topic:"Peloponnesian War"},
{q:"Because of these alliances which city became one of the most powerful?",correct:"Athens",wrong:["Sparta","Macedonia","Persia"],topic:"Peloponnesian War"},
{q:"Which city-state went to war against Athens because it feared Athens's power?",correct:"Sparta",wrong:["Macedonia","Egypt","Persia"],topic:"Peloponnesian War"},
{q:"What is the name of the war between Athens and Sparta?",correct:"The Peloponnesian War",wrong:["The Trojan War","The Persian War","The Hellenistic War"],topic:"Peloponnesian War"},
{q:"In what year did the Peloponnesian War begin?",correct:"431 BCE",wrong:["500 BCE","750 BCE","359 BCE"],topic:"Peloponnesian War",explanation:"This is one of the three dates you must know by heart."},
{q:"What did Sparta do to try to make Athens surrender at the start of the war?",correct:"Surrounded the city and burned the crops",wrong:["Sailed warships into the harbor","Cut off the water supply","Built a wall around all of Greece"],topic:"Peloponnesian War"},
{q:"Why didn't Athens starve during the Spartan siege?",correct:"Merchant ships brought food into the city",wrong:["Sparta sold them food","They grew enough food inside the city","They stopped eating until Sparta left"],topic:"Peloponnesian War"},
{q:"How long did the siege of Athens last?",correct:"10 years",wrong:["1 year","5 years","100 years"],topic:"Peloponnesian War"},
{q:"How did the first phase of the Peloponnesian War end?",correct:"Both sides agreed to a truce and Sparta went home",wrong:["Athens conquered Sparta","Sparta destroyed Athens completely","Persia took over both cities"],topic:"Peloponnesian War"},
{q:"In 415 BCE Athens tried to conquer which island?",correct:"Sicily",wrong:["Crete","Cyprus","Rhodes"],topic:"Peloponnesian War"},
{q:"Who helped Sicily fight against Athens?",correct:"Sparta",wrong:["Macedonia","Persia","Egypt"],topic:"Peloponnesian War",explanation:"Sparta was an ally of Sicily."},
{q:"Who won the Peloponnesian War in the end?",correct:"Sparta",wrong:["Athens","Macedonia","Persia"],topic:"Peloponnesian War"},
{q:"After winning the Peloponnesian War Sparta became...",correct:"The most powerful city-state in Greece",wrong:["A democracy","Part of Egypt","An ally of Athens"],topic:"Peloponnesian War"},
{q:"What was the main cause of the Peloponnesian War?",correct:"Sparta feared Athens's growing power",wrong:["Athens invaded Sparta first","A drought caused a food shortage","Persia ordered them to fight"],topic:"Peloponnesian War"},
// GREEK EMPIRE / PHILIP II (5)
{q:"Who became king of Macedonia in 359 BCE?",correct:"Philip II",wrong:["Alexander the Great","Peisistratus","Pericles"],topic:"Greek Empire"},
{q:"Where is Macedonia located in relation to Greece?",correct:"North of Greece",wrong:["South of Egypt","East of Persia","On the island of Sicily"],topic:"Greek Empire"},
{q:"How was Philip II able to defeat the Greek armies?",correct:"He used new war strategies",wrong:["He had ten times more soldiers","He paid them to surrender","He used elephants in battle"],topic:"Greek Empire"},
{q:"After defeating the Greek armies what did Philip II do?",correct:"Took control of Greece",wrong:["Returned home peacefully","Surrendered to Athens","Joined the Spartan army"],topic:"Greek Empire"},
{q:"Who took over as ruler after Philip II died?",correct:"His son Alexander",wrong:["His brother","A Greek general","The Spartan king"],topic:"Greek Empire",explanation:"Alexander the Great inherited the throne and went on to build a massive empire."},
// ALEXANDER THE GREAT (9)
{q:"What years did Alexander the Great live?",correct:"356 BCE to 323 BCE",wrong:["500 BCE to 431 BCE","750 BCE to 700 BCE","100 BCE to 50 BCE"],topic:"Alexander",explanation:"This is one of the three dates you must know by heart."},
{q:"Who was Alexander the Great's father?",correct:"Philip II of Macedonia",wrong:["Peisistratus of Athens","Pericles of Athens","Darius of Persia"],topic:"Alexander"},
{q:"What kind of leader was Alexander the Great?",correct:"A talented war leader",wrong:["A peaceful philosopher","A weak king with no army","A religious priest"],topic:"Alexander"},
{q:"Which regions did Alexander the Great conquer?",correct:"Mesopotamia Egypt and Persia",wrong:["Italy France and Spain","China India and Japan","England Germany and Russia"],topic:"Alexander"},
{q:"Alexander the Great built...",correct:"The largest empire in the world at that time",wrong:["The first democracy","The Greek alphabet","The Roman Empire"],topic:"Alexander"},
{q:"What did Alexander spread throughout his empire?",correct:"Greek culture",wrong:["Roman law","Egyptian writing","Persian religion"],topic:"Alexander"},
{q:"What is the name for the culture created when Greek ideas blended with other cultures?",correct:"Hellenistic",wrong:["Classical","Mesopotamian","Athenian"],topic:"Alexander"},
{q:"How did Alexander treat the people he conquered?",correct:"He allowed them to keep their own traditions",wrong:["He forced them to speak only Greek","He destroyed their cultures","He sent them all into slavery"],topic:"Alexander"},
{q:"What happened to Alexander's empire after he died?",correct:"It fell apart",wrong:["It grew even larger","It became one peaceful nation","It was given to Sparta"],topic:"Alexander"},
// VOCABULARY (18)
{q:"What is a primary source?",correct:"A firsthand account from the time being studied",wrong:["A modern textbook","A summary written long after","A movie about an event"],topic:"Vocabulary",explanation:"A diary or letter from someone who was there is a primary source."},
{q:"What is a secondary source?",correct:"A source created later that uses other sources",wrong:["A direct firsthand account","An object dug up at an ancient site","An eyewitness diary"],topic:"Vocabulary"},
{q:"What does polytheism mean?",correct:"Belief in many gods",wrong:["Belief in one god","Belief in no gods","Belief in nature only"],topic:"Vocabulary",explanation:"'Poly' means many and 'theos' means god."},
{q:"What does monotheism mean?",correct:"Belief in one god",wrong:["Belief in many gods","Belief in no gods","Belief in spirits"],topic:"Vocabulary",explanation:"'Mono' means one and 'theos' means god."},
{q:"What does isolated mean?",correct:"Cut off or separated from others",wrong:["Connected closely to others","Wealthy and powerful","Crowded together"],topic:"Vocabulary"},
{q:"What is silt?",correct:"Fine fertile soil left behind by rivers",wrong:["A type of building stone","A kind of crop","A metal tool"],topic:"Vocabulary"},
{q:"What is irrigation?",correct:"Bringing water to crops through channels",wrong:["Digging up ancient artifacts","Trading without money","Building stone walls"],topic:"Vocabulary"},
{q:"What is barter?",correct:"Trading goods without using money",wrong:["Paying with gold coins","Borrowing from a king","Selling at an auction"],topic:"Vocabulary"},
{q:"What is agriculture?",correct:"Farming",wrong:["Shipbuilding","Trading at sea","Fighting wars"],topic:"Vocabulary"},
{q:"What does circa mean?",correct:"Approximately or around (used with dates)",wrong:["Exactly","Before","After"],topic:"Vocabulary",explanation:"You'll see it as 'c.' before a date when historians aren't sure of the exact year."},
{q:"What is an archaeologist?",correct:"A person who studies the past by examining artifacts",wrong:["A person who designs buildings","A person who maps the stars","A person who teaches history class"],topic:"Vocabulary"},
{q:"What is a social hierarchy?",correct:"A ranking of people by status in society",wrong:["A type of city government","A trading network","A religious holiday"],topic:"Vocabulary"},
{q:"What is a dynasty?",correct:"A series of rulers from the same family",wrong:["A type of city","A war between cities","A religious belief"],topic:"Vocabulary"},
{q:"What does BCE stand for?",correct:"Before Common Era",wrong:["Before Christian Era","Beyond Common Era","Backward Counted Era"],topic:"Vocabulary",explanation:"BCE counts backward. The bigger the BCE number the further back in time."},
{q:"What does CE stand for?",correct:"Common Era",wrong:["Christian Empire","Continued Era","Counted Era"],topic:"Vocabulary"},
{q:"What is a decade?",correct:"A period of 10 years",wrong:["100 years","1000 years","1 year"],topic:"Vocabulary"},
{q:"What is a century?",correct:"A period of 100 years",wrong:["10 years","1000 years","50 years"],topic:"Vocabulary"},
{q:"What are canals?",correct:"Man-made waterways",wrong:["Tall mountains","Religious temples","Wooden ships"],topic:"Vocabulary"},
// MAPS / FERTILE CRESCENT (8)
{q:"What is the Fertile Crescent?",correct:"A region of rich farmland in the Middle East",wrong:["A type of Greek city-state","A famous Greek god","A war strategy"],topic:"Maps"},
{q:"Mesopotamia was located between which two rivers?",correct:"The Tigris and the Euphrates",wrong:["The Nile and the Jordan","The Indus and the Ganges","The Amazon and the Congo"],topic:"Maps"},
{q:"What does Mesopotamia mean?",correct:"Land between the rivers",wrong:["Land of the gods","Land of the kings","Land of the deserts"],topic:"Maps"},
{q:"Which river is most associated with ancient Egypt?",correct:"The Nile",wrong:["The Tigris","The Euphrates","The Jordan"],topic:"Maps"},
{q:"How many continents are there on Earth?",correct:"7",wrong:["5","6","8"],topic:"Maps"},
{q:"How many oceans are there on Earth?",correct:"5",wrong:["4","7","3"],topic:"Maps"},
{q:"The Mediterranean Sea borders which of these regions?",correct:"Greece Egypt and Israel",wrong:["China and India","England and France","Brazil and Argentina"],topic:"Maps"},
{q:"Egypt is divided into which two regions on the map?",correct:"Upper Egypt and Lower Egypt",wrong:["North and South Egypt","East and West Egypt","Inner and Outer Egypt"],topic:"Maps"},
// GREEK ROOTS (5)
{q:"The Greek root 'bio' means...",correct:"Life",wrong:["Earth","Heat","Mind"],topic:"Greek Roots",explanation:"As in biography (life-writing) and biology (study of life)."},
{q:"The Greek root 'geo' means...",correct:"Earth",wrong:["Life","Heat","Water"],topic:"Greek Roots",explanation:"As in geography (earth-writing) and geology (study of the earth)."},
{q:"The Greek root 'thermo' means...",correct:"Heat",wrong:["Cold","Earth","Water"],topic:"Greek Roots",explanation:"As in thermometer (measures heat)."},
{q:"The Greek root 'psych' means...",correct:"Mind or soul",wrong:["Body","Earth","Heat"],topic:"Greek Roots",explanation:"As in psychology (study of the mind)."},
{q:"The Greek root 'mono' means...",correct:"One",wrong:["Many","Few","Two"],topic:"Greek Roots",explanation:"As in monarchy (rule of one) and monotheism (belief in one god)."},
// CONCEPTS (8)
{q:"Why is water essential for the development of farms and villages?",correct:"Crops animals and people all need water to survive",wrong:["Water is only used for trade","Water cools metal tools","Water is needed only for shipbuilding"],topic:"Concepts"},
{q:"How did geography influence the development of ancient Greece?",correct:"Mountains and seas isolated communities leading to separate city-states",wrong:["Flat land caused all Greeks to unite under one king","Deserts forced Greeks to leave","Forests gave them so much food they never traded"],topic:"Concepts"},
{q:"Who created the Greek empire?",correct:"Philip II and his son Alexander the Great",wrong:["Peisistratus of Athens","The Athenian Assembly","The Spartan army alone"],topic:"Concepts"},
{q:"How is American democracy different from ancient Athenian democracy?",correct:"Americans elect representatives while Athenians voted directly",wrong:["Americans have a king while Athenians did not","Americans were a city-state while Athenians were a nation","Athenians had no government"],topic:"Concepts"},
{q:"How did Alexander the Great influence the cultures he conquered?",correct:"He spread Greek culture creating Hellenistic societies",wrong:["He erased every local culture by force","He converted everyone to Egyptian religion","He returned all conquered lands"],topic:"Concepts"},
{q:"What was the order of government development in Athens?",correct:"Monarchy then oligarchy then tyranny then democracy",wrong:["Democracy then oligarchy then tyranny then monarchy","Tyranny then democracy then monarchy then oligarchy","Oligarchy then democracy then tyranny then monarchy"],topic:"Concepts"},
{q:"Of these events which happened first?",correct:"Athens created the first democracy",wrong:["The Peloponnesian War began","Alexander the Great conquered Persia","Philip II became king of Macedonia"],topic:"Concepts",explanation:"Order: Democracy in Athens (~500 BCE) → Peloponnesian War (431 BCE) → Philip II (359 BCE) → Alexander conquered Persia (~330s BCE)."},
{q:"Of these events which happened last?",correct:"Alexander the Great built his empire",wrong:["Athens created the first democracy","The Peloponnesian War began","Greeks first formed city-states"],topic:"Concepts"}
];
// =============================================================
// GAME STATE & LOGIC
// =============================================================
let state = {
mode: null,
questions: [],
current: 0,
score: 0,
streak: 0,
bestStreak: 0,
missed: [],
answered: false,
timeLeft: 0,
timerInterval: null,
topicStats: {}
};
function shuffle(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function startGame(mode) {
state = {
mode,
questions: [],
current: 0,
score: 0,
streak: 0,
bestStreak: 0,
missed: [],
answered: false,
timeLeft: 0,
timerInterval: null,
topicStats: {}
};
const shuffled = shuffle(QUESTIONS);
document.getElementById('empire-progress').style.display = 'none';
document.getElementById('timer-stat').style.display = 'none';
if (mode === 'practice') {
state.questions = shuffled;
document.getElementById('game-mode-name').textContent = '📚 Practice Mode';
} else if (mode === 'conquest') {
state.questions = shuffled.slice(0, 25);
document.getElementById('game-mode-name').textContent = '⚔️ Conquest Mode';
document.getElementById('empire-progress').style.display = 'block';
} else if (mode === 'test') {
state.questions = shuffled.slice(0, 30);
document.getElementById('game-mode-name').textContent = '🏛 Test Day Mode';
document.getElementById('timer-stat').style.display = 'inline';
}
document.getElementById('title-screen').classList.add('hidden');
document.getElementById('results-screen').classList.add('hidden');
document.getElementById('game-screen').classList.remove('hidden');
showQuestion();
}
function showQuestion() {
if (state.current >= state.questions.length) {
showResults();
return;
}
const q = state.questions[state.current];
state.answered = false;
document.getElementById('score').textContent = state.score;
document.getElementById('question-num').textContent = `${state.current + 1}/${state.questions.length}`;
document.getElementById('progress-fill').style.width = `${(state.current / state.questions.length) * 100}%`;
const tagContainer = document.getElementById('topic-tag-container');
tagContainer.innerHTML = `<span class="topic-tag">${q.topic}</span>`;
document.getElementById('question-text').textContent = q.q;
const allAnswers = shuffle([q.correct, ...q.wrong]);
const answersDiv = document.getElementById('answers');
answersDiv.innerHTML = '';
allAnswers.forEach(ans => {
const btn = document.createElement('button');
btn.className = 'answer-btn';
btn.textContent = ans;
btn.onclick = () => selectAnswer(ans, btn);
answersDiv.appendChild(btn);
});
document.getElementById('feedback').classList.remove('show');
document.getElementById('next-btn').classList.remove('show');
document.getElementById('streak-ribbon').classList.remove('show');
if (state.mode === 'test') {
state.timeLeft = 45;
updateTimer();
if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(() => {
state.timeLeft--;
updateTimer();
if (state.timeLeft <= 0) {
clearInterval(state.timerInterval);
if (!state.answered) selectAnswer(null, null);
}
}, 1000);
}
}
function updateTimer() {
const t = document.getElementById('timer');
t.textContent = state.timeLeft;
t.className = state.timeLeft > 15 ? 'timer safe' : 'timer';
}
function selectAnswer(answer, btn) {
if (state.answered) return;
state.answered = true;
if (state.timerInterval) clearInterval(state.timerInterval);
const q = state.questions[state.current];
const isCorrect = answer === q.correct;
if (!state.topicStats[q.topic]) state.topicStats[q.topic] = {right: 0, total: 0};
state.topicStats[q.topic].total++;
const buttons = document.querySelectorAll('.answer-btn');
buttons.forEach(b => {
b.disabled = true;
if (b.textContent === q.correct) {
b.classList.add(isCorrect ? 'correct' : 'correct-shown');
} else if (b === btn) {
b.classList.add('wrong');
}
});
if (isCorrect) {
state.score++;
state.streak++;
state.bestStreak = Math.max(state.bestStreak, state.streak);
state.topicStats[q.topic].right++;
} else {
state.streak = 0;
state.missed.push(q);
}
const feedback = document.getElementById('feedback');
if (state.mode !== 'test') {
feedback.className = `feedback show ${isCorrect ? 'correct' : 'wrong'}`;
let msg = isCorrect ? `<strong>✓ Correct!</strong>` : `<strong>✗ The correct answer is:</strong> ${q.correct}`;
if (q.explanation) msg += `<br><br><em>${q.explanation}</em>`;
feedback.innerHTML = msg;
}
if (state.mode === 'conquest') {
updateEmpire();
if (state.streak >= 3 && state.streak % 3 === 0) {
const ribbon = document.getElementById('streak-ribbon');
ribbon.textContent = `🔥 ${state.streak} in a row! Empire growing!`;
ribbon.classList.add('show');
}
}
document.getElementById('next-btn').classList.add('show');
}
function updateEmpire() {
const pct = state.score / state.questions.length;
let status, emoji;
if (pct < 0.2) { status = 'A small village'; emoji = '🏠'; }
else if (pct < 0.4) { status = 'A growing town'; emoji = '🏠 🏠 🏠'; }
else if (pct < 0.6) { status = 'A city-state'; emoji = '🏛 🏛 🏛'; }
else if (pct < 0.8) { status = 'A regional power'; emoji = '🏛 🏛 🏛 ⚔️'; }
else { status = 'An empire of legend!'; emoji = '👑 🏛 🏛 ⚔️ ⚔️'; }
document.getElementById('empire-status').textContent = status;
document.getElementById('empire-emoji').textContent = emoji;
}
function nextQuestion() {
state.current++;
showQuestion();
}
function showResults() {
document.getElementById('game-screen').classList.add('hidden');
document.getElementById('results-screen').classList.remove('hidden');
if (state.timerInterval) clearInterval(state.timerInterval);
document.getElementById('final-score').textContent = state.score;
document.getElementById('total-q').textContent = state.questions.length;
const pct = Math.round((state.score / state.questions.length) * 100);
document.getElementById('final-pct').textContent = pct + '%';
document.getElementById('result-mode').textContent =
state.mode === 'practice' ? 'Practice Complete' :
state.mode === 'conquest' ? `Empire Built! Best streak: ${state.bestStreak}` :
'Test Day Results';
let msg;
if (pct === 100) msg = "🏛 Perfect score! You've mastered ancient Greece. Alexander would be proud.";
else if (pct >= 90) msg = "⚔️ Excellent! You really know this material. Just review the few you missed.";
else if (pct >= 80) msg = "👍 Strong work. Review the missed ones below and you're set.";
else if (pct >= 70) msg = "📚 Good progress. Focus on the topics where you scored lowest.";
else if (pct >= 60) msg = "💪 Getting there. Try Practice Mode to see explanations for each question.";
else msg = "🔁 More practice needed. Use Practice Mode to read explanations and build it up.";
document.getElementById('grade-message').textContent = msg;
const ts = document.getElementById('topic-stats');
ts.innerHTML = '';
Object.keys(state.topicStats).sort().forEach(topic => {
const s = state.topicStats[topic];
const pct = Math.round((s.right / s.total) * 100);
const barClass = pct >= 80 ? '' : pct >= 60 ? 'mid' : 'low';
const row = document.createElement('div');
row.className = 'topic-row';
row.innerHTML = `<span class="topic-name">${topic}</span><div class="topic-bar"><div class="topic-bar-fill ${barClass}" style="width:${pct}%"></div></div><span>${s.right}/${s.total}</span>`;
ts.appendChild(row);
});
const reviewSection = document.getElementById('review-section');
const missed = document.getElementById('missed-questions');
if (state.missed.length === 0) {
reviewSection.style.display = 'none';
} else {
reviewSection.style.display = 'block';
missed.innerHTML = '';
state.missed.forEach(q => {
const div = document.createElement('div');
div.className = 'review-item';
let html = `<div class="review-q">${q.q}</div><div class="review-a">✓ ${q.correct}</div>`;
if (q.explanation) html += `<div class="review-explanation">${q.explanation}</div>`;
div.innerHTML = html;
missed.appendChild(div);
});
}
}
function goHome() {
document.getElementById('results-screen').classList.add('hidden');
document.getElementById('game-screen').classList.add('hidden');
document.getElementById('title-screen').classList.remove('hidden');
}
</script>
</body>
</html>Editor is loading...
Leave a Comment