Which Country Am I? | Full‑Page Speaking Game
Which Country Am I?
speaking game • ask yes/no questions • 20+ countries per difficulty • guess & earn points
🌎
?
Press START to reveal your country
Game controls
Question prompts for students
Geography
- Is your country in Europe / Asia / Africa?
- Is it landlocked or an island?
- Does it have mountains or beaches?
Culture & landmarks
- Does it have a famous monument?
- Known for a specific dish?
- Speak English / French / Arabic?
People & history
- Population over 50 million?
- Monarchy or republic?
- Hosted the Olympics?
Climate & nature
- Mostly hot / cold?
- Rainforests or tundra?
- Unique wildlife?
How to play
- Clue giver sees the mystery country on their screen.
- Others ask YES/NO questions using prompts.
- Correct guess earns +5 points for the team.
- "REVEAL" shows full country info after correct guess.
- Hints cost 1 point but help move game forward.
- Press NEXT COUNTRY to rotate clue giver.
- Press SPACE or double-click stats to count a question.
html, body {
width: 100%;
height: 100%;
background: #f4f7fc;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #111827;
line-height: 1.5;
}
/* full-page game container – no header/footer gaps */
.game-container {
width: 100%;
min-height: 100vh;
background: #ffffff;
display: flex;
flex-direction: column;
box-shadow: none;
}
/* compact title – clean, no header bar */
.game-title {
text-align: center;
padding: 1.2rem 1rem 0.5rem;
background: transparent;
border-bottom: 1px solid #eef2f6;
}
.game-title h1 {
font-size: clamp(1.6rem, 6vw, 2.2rem);
font-weight: 700;
background: linear-gradient(135deg, #8B0000, #b91c1c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
}
.game-title p {
font-size: 0.8rem;
color: #4b5563;
margin-top: 6px;
}
/* main two-column layout */
.game-area {
display: flex;
flex-direction: column;
padding: 20px 24px;
gap: 24px;
flex: 1;
}
@media (min-width: 860px) {
.game-area {
flex-direction: row;
align-items: stretch;
}
}
/* clue giver card (left) */
.clue-giver-section {
flex: 1;
background: linear-gradient(145deg, #fffcf5, #ffffff);
border-radius: 32px;
border: 1px solid #f0eef3;
padding: 24px;
display: flex;
flex-direction: column;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}
.country-display {
text-align: center;
margin-bottom: 20px;
}
.country-flag {
font-size: 4rem;
margin-bottom: 12px;
}
.country-text {
font-size: 2rem;
font-weight: 800;
color: #8B0000;
word-break: break-word;
}
.placeholder-text {
color: #9ca3af;
font-style: italic;
font-weight: 500;
}
.country-info {
background: #faf9fe;
border-radius: 24px;
padding: 18px;
margin-top: 12px;
flex: 1;
overflow-y: auto;
max-height: 480px;
border-left: 3px solid #8B0000;
}
.info-title {
font-weight: 700;
color: #8B0000;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.2rem;
}
.info-item {
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed #f0e2e2;
}
.info-label {
font-weight: 600;
color: #8B0000;
margin-bottom: 4px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.hidden-info {
background: #fff2e6;
padding: 14px;
border-radius: 20px;
margin-top: 16px;
}
.hidden-info ul {
padding-left: 20px;
margin-top: 6px;
}
.hidden-info li {
margin-bottom: 6px;
font-size: 0.85rem;
}
/* right side controls */
.game-controls {
flex: 0.9;
display: flex;
flex-direction: column;
gap: 20px;
}
.control-group {
background: white;
border-radius: 28px;
padding: 20px;
border: 1px solid #eef2f6;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.control-title {
font-weight: 700;
color: #8B0000;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.1rem;
}
.level-selector {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.level-selector label {
font-weight: 600;
color: #1f2937;
}
select {
padding: 10px 24px 10px 14px;
border-radius: 40px;
border: 1px solid #e2e8f0;
background: white;
font-weight: 500;
cursor: pointer;
flex: 1;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
}
.btn {
width: 100%;
padding: 12px 16px;
border: none;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-start {
background: #2e8b57;
color: white;
}
.btn-next {
background: #8B0000;
color: white;
}
.btn-reveal {
background: #DAA520;
color: #1e293b;
}
.btn-hint {
background: #2563eb;
color: white;
}
.btn:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(0.96);
box-shadow: 0 8px 18px -8px rgba(0,0,0,0.2);
}
.game-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.stat {
background: #f9fafb;
border-radius: 24px;
padding: 12px 8px;
text-align: center;
}
.stat-label {
font-size: 0.7rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
}
.stat-value {
font-size: 1.6rem;
font-weight: 800;
color: #8B0000;
}
.team-score {
display: flex;
gap: 12px;
margin-top: 8px;
}
.team {
flex: 1;
text-align: center;
background: #f9fafb;
padding: 12px;
border-radius: 24px;
transition: 0.1s;
}
.team-name {
font-weight: 700;
color: #8B0000;
margin-bottom: 6px;
}
.team-points {
font-size: 1.8rem;
font-weight: 800;
}
/* question prompts section */
.question-prompts {
padding: 0 24px 24px;
}
.prompts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 12px;
}
.prompt-category {
background: #fefcf5;
border-radius: 24px;
padding: 18px;
border-left: 4px solid #8B0000;
}
.category-title {
font-weight: 700;
margin-bottom: 12px;
display: flex;
gap: 8px;
color: #8B0000;
}
.prompt-list {
list-style: none;
}
.prompt-list li {
padding: 6px 0;
font-size: 0.85rem;
border-bottom: 1px dashed #f0e2e2;
display: flex;
gap: 8px;
}
.prompt-list li i {
color: #8B0000;
font-size: 0.7rem;
margin-top: 4px;
}
/* hint & answer panels */
.hint-container, .answer-container {
padding: 0 24px 16px;
}
.hint-text {
background: #fff9e8;
border-left: 4px solid #DAA520;
padding: 16px;
border-radius: 24px;
font-style: italic;
}
.country-info-detailed {
background: #f9fafb;
border-radius: 24px;
padding: 18px;
}
.game-rules {
margin: 16px 24px 24px;
background: #fefaf5;
border-radius: 28px;
padding: 20px;
border: 1px solid #f0eef3;
}
.rules-title {
font-weight: 700;
display: flex;
gap: 8px;
margin-bottom: 16px;
color: #8B0000;
}
.rules-list {
list-style: none;
}
.rules-list li {
display: flex;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f0e2e2;
font-size: 0.85rem;
}
@media (max-width: 640px) {
.game-area {
padding: 16px;
gap: 16px;
}
.clue-giver-section {
padding: 16px;
}
.control-group {
padding: 16px;
}
.btn {
padding: 10px;
}
}
Which Country Am I?
speaking game • ask yes/no questions • guess the mystery country
🌎
?
Press START to reveal your country
Game controls
Question prompts for students
Geography
- Is your country in Europe / Asia / Africa?
- Is it landlocked or an island?
- Does it have mountains / deserts / beaches?
Culture & landmarks
- Does it have a famous monument?
- Is it known for a specific dish?
- Do they speak English / French / Arabic?
People & history
- Is the population more than 50 million?
- Is it a monarchy / republic?
- Has it hosted the Olympics?
Climate & nature
- Is it mostly hot / cold?
- Does it have rainforests or tundra?
- Is it known for unique wildlife?
How to play
- The clue giver sees the mystery country on their screen.
- Other students ask YES/NO questions using the prompts.
- First correct guess earns points & becomes next clue giver.
- Use "REVEAL" to show full country info after guessing.
- Hints cost 1 point but help move the game forward.