Flags Quiz - Ein interaktives Flaggen-Quiz mit HTML, JavaScript und Bulma

Lesedauer: 6 Minuten

Flaggen sind mehr als nur bunte Stofffetzen – sie erzählen Geschichten von Ländern, Kulturen und Geschichte. Aber wie gut kennst du eigentlich die Flaggen der Welt? Mit meinem neuen Projekt Flags Quiz kannst du dein Wissen auf die Probe stellen!

🎮 Das Projekt

Flags Quiz ist eine kleine, aber feine Web-Anwendung, die es ermöglicht, spielerisch die Flaggen von 248 Ländern und Territorien zu lernen. Das Besondere: Die App ist komplett responsiv, funktioniert auf allen Geräten und kommt mit coolen Features wie Sound-Effekten, mehrsprachiger Unterstützung und einem Timer.

🌐 Live Demo: https://tsjdev-apps.github.io/flagsquiz-web/

📦 GitHub Repository: https://github.com/tsjdev-apps/flagsquiz-web

✨ Features

🎯 Interaktives Quiz: Flaggen erkennen mit Multiple-Choice-Fragen
⏱️ Timer-Challenge: 10 Sekunden pro Frage
🏆 Punktesystem: 5 Punkte für jede richtige Antwort
🔊 Sound-Effekte: Akustisches Feedback für richtige/falsche Antworten
🌍 Mehrsprachig: Deutsch und Englisch (automatische Browser-Erkennung)
📱 Responsive Design: Funktioniert perfekt auf Desktop und Mobile
🎨 Modernes UI: Bulma CSS Framework mit Custom-Styling

🛠️ Technologie-Stack

Das Projekt setzt auf bewährte Web-Technologien:

HTML5 – Struktur und Layout
JavaScript (ES6+) – Spiellogik und Interaktivität
Bulma CSS – Modernes CSS-Framework
Lottie – Animationen auf der Startseite
FlagCDN – Flaggen-Bilder via API
Font Awesome – Icons

🎯 Wie funktioniert das Quiz?

1. Länder-Daten laden

Die Basis des Quiz bildet eine JSON-Datei mit allen Ländern, ihren Namen (Englisch und Deutsch) und ISO-Codes:

JSON

[
  {
    "countryEN": "Germany",
    "countryDE": "Deutschland",
    "code": "de"
  },
  {
    "countryEN": "United States of America",
    "countryDE": "Vereinigte Staaten",
    "code": "us"
  }
]

[
  {
    "countryEN": "Germany",
    "countryDE": "Deutschland",
    "code": "de"
  },
  {
    "countryEN": "United States of America",
    "countryDE": "Vereinigte Staaten",
    "code": "us"
  }
]

JSON

Beim Start der Anwendung werden diese Daten asynchron geladen:

JavaScript

async function loadCountries() {
    try {
        const response = await fetch('assets/data/countries.json');
        countries = await response.json();
        console.log(`Loaded ${countries.length} countries`);
    } catch (error) {
        console.error('Error loading countries:', error);
    }
}

async function loadCountries() {
    try {
        const response = await fetch('assets/data/countries.json');
        countries = await response.json();
        console.log(`Loaded ${countries.length} countries`);
    } catch (error) {
        console.error('Error loading countries:', error);
    }
}

JavaScript

2. Zufällige Fragen generieren

Für jede Frage wird ein zufälliges Land ausgewählt und drei zusätzliche falsche Antworten generiert:

JavaScript

function loadQuestion() {
    // Reset button states
    answerButtons.forEach(button => {
        button.classList.remove('is-success', 'is-danger', 'is-loading');
        button.disabled = false;
        button.blur();
    });

    // Wähle ein zufälliges Land
    currentCountry = countries[Math.floor(Math.random() * countries.length)];
    
    // Generiere 3 falsche Antworten
    const wrongAnswers = [];
    while (wrongAnswers.length < 3) {
        const randomCountry = countries[Math.floor(Math.random() * countries.length)];
        if (randomCountry.code !== currentCountry.code && 
            !wrongAnswers.includes(randomCountry)) {
            wrongAnswers.push(randomCountry);
        }
    }

    // Mische alle Antworten
    const allAnswers = [currentCountry, ...wrongAnswers];
    allAnswers.sort(() => Math.random() - 0.5);

    // Aktualisiere UI
    flagImage.src = `https://flagcdn.com/256x192/${currentCountry.code}.png`;
    flagImage.alt = currentCountry[`country${currentLanguage.toUpperCase()}`];
    
    answerButtons.forEach((button, index) => {
        const country = allAnswers[index];
        button.textContent = country[`country${currentLanguage.toUpperCase()}`];
        button.dataset.code = country.code;
    });

    startTimer();
}

function loadQuestion() {
    // Reset button states
    answerButtons.forEach(button => {
        button.classList.remove('is-success', 'is-danger', 'is-loading');
        button.disabled = false;
        button.blur();
    });

    // Wähle ein zufälliges Land
    currentCountry = countries[Math.floor(Math.random() * countries.length)];
    
    // Generiere 3 falsche Antworten
    const wrongAnswers = [];
    while (wrongAnswers.length < 3) {
        const randomCountry = countries[Math.floor(Math.random() * countries.length)];
        if (randomCountry.code !== currentCountry.code && 
            !wrongAnswers.includes(randomCountry)) {
            wrongAnswers.push(randomCountry);
        }
    }

    // Mische alle Antworten
    const allAnswers = [currentCountry, ...wrongAnswers];
    allAnswers.sort(() => Math.random() - 0.5);

    // Aktualisiere UI
    flagImage.src = `https://flagcdn.com/256x192/${currentCountry.code}.png`;
    flagImage.alt = currentCountry[`country${currentLanguage.toUpperCase()}`];
    
    answerButtons.forEach((button, index) => {
        const country = allAnswers[index];
        button.textContent = country[`country${currentLanguage.toUpperCase()}`];
        button.dataset.code = country.code;
    });

    startTimer();
}

JavaScript

3. Flaggen via API laden

Die Flaggen werden dynamisch über die FlagCDN-API geladen:

JavaScript

// URL-Format: https://flagcdn.com/256x192/{countrycode}.png
flagImage.src = `https://flagcdn.com/256x192/${currentCountry.code}.png`;

// URL-Format: https://flagcdn.com/256x192/{countrycode}.png
flagImage.src = `https://flagcdn.com/256x192/${currentCountry.code}.png`;

JavaScript

Dies ermöglicht hochqualitative Flaggen-Bilder ohne sie alle lokal speichern zu müssen.

4. Timer-Implementierung

Jede Frage hat ein 10-Sekunden-Zeitlimit:

JavaScript

function startTimer() {
    timeLeft = 10;
    updateTimerDisplay();
    
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    timerInterval = setInterval(() => {
        timeLeft--;
        updateTimerDisplay();
        
        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            handleTimeout();
        }
    }, 1000);
}

function updateTimerDisplay() {
    timerValue.textContent = timeLeft;
}

function startTimer() {
    timeLeft = 10;
    updateTimerDisplay();
    
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    timerInterval = setInterval(() => {
        timeLeft--;
        updateTimerDisplay();
        
        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            handleTimeout();
        }
    }, 1000);
}

function updateTimerDisplay() {
    timerValue.textContent = timeLeft;
}

JavaScript

5. Antwort-Handling mit Feedback

Wenn der Spieler eine Antwort auswählt, wird visuelles und akustisches Feedback gegeben:

JavaScript

function handleAnswer(event) {
    if (answered) return;
    answered = true;
    
    clearInterval(timerInterval);
    
    const selectedButton = event.target;
    const selectedCode = selectedButton.dataset.code;
    const isCorrect = selectedCode === currentCountry.code;
    
    // Deaktiviere alle Buttons
    answerButtons.forEach(button => {
        button.disabled = true;
        button.blur();
    });
    
    if (isCorrect) {
        // Richtige Antwort
        selectedButton.classList.add('is-success');
        score += 5;
        scoreValue.textContent = score;
        playSound(correctSound);
        
        setTimeout(() => {
            loadQuestion();
        }, 3000);
    } else {
        // Falsche Antwort - Game Over
        selectedButton.classList.add('is-danger');
        playSound(wrongSound);
        
        // Zeige richtige Antwort
        answerButtons.forEach(button => {
            if (button.dataset.code === currentCountry.code) {
                button.classList.add('is-success');
            }
        });
        
        setTimeout(() => {
            showGameOver();
        }, 2000);
    }
}

function handleAnswer(event) {
    if (answered) return;
    answered = true;
    
    clearInterval(timerInterval);
    
    const selectedButton = event.target;
    const selectedCode = selectedButton.dataset.code;
    const isCorrect = selectedCode === currentCountry.code;
    
    // Deaktiviere alle Buttons
    answerButtons.forEach(button => {
        button.disabled = true;
        button.blur();
    });
    
    if (isCorrect) {
        // Richtige Antwort
        selectedButton.classList.add('is-success');
        score += 5;
        scoreValue.textContent = score;
        playSound(correctSound);
        
        setTimeout(() => {
            loadQuestion();
        }, 3000);
    } else {
        // Falsche Antwort - Game Over
        selectedButton.classList.add('is-danger');
        playSound(wrongSound);
        
        // Zeige richtige Antwort
        answerButtons.forEach(button => {
            if (button.dataset.code === currentCountry.code) {
                button.classList.add('is-success');
            }
        });
        
        setTimeout(() => {
            showGameOver();
        }, 2000);
    }
}

JavaScript

6. Sound-Effekte

Sound-Effekte werden mit HTML5 Audio-API implementiert:

JavaScript

const correctSound = new Audio('assets/audio/answercorrect.mp3');
const wrongSound = new Audio('assets/audio/answerwrong.mp3');
let isSoundEnabled = true;

function playSound(sound) {
    if (isSoundEnabled) {
        sound.currentTime = 0;
        sound.play().catch(err => console.log('Audio play failed:', err));
    }
}

// Toggle Sound
soundToggle.addEventListener('click', () => {
    isSoundEnabled = !isSoundEnabled;
    soundIcon.className = isSoundEnabled ? 'fas fa-volume-up' : 'fas fa-volume-mute';
});

const correctSound = new Audio('assets/audio/answercorrect.mp3');
const wrongSound = new Audio('assets/audio/answerwrong.mp3');
let isSoundEnabled = true;

function playSound(sound) {
    if (isSoundEnabled) {
        sound.currentTime = 0;
        sound.play().catch(err => console.log('Audio play failed:', err));
    }
}

// Toggle Sound
soundToggle.addEventListener('click', () => {
    isSoundEnabled = !isSoundEnabled;
    soundIcon.className = isSoundEnabled ? 'fas fa-volume-up' : 'fas fa-volume-mute';
});

JavaScript

7. Mehrsprachigkeit

Die App unterstützt Deutsch und Englisch mit automatischer Browser-Erkennung:

JavaScript

let currentLanguage = 'en';

// Erkenne Browser-Sprache
function detectBrowserLanguage() {
    const savedLanguage = localStorage.getItem('flagsquiz-language');
    if (savedLanguage) {
        return savedLanguage;
    }
    
    const browserLang = navigator.language || navigator.userLanguage;
    return browserLang.startsWith('de') ? 'de' : 'en';
}

// Übersetzungen
const translations = {
    en: {
        welcomeTitle: 'Welcome to the Flags Quiz!',
        welcomeSubtitle: 'Test your knowledge about the flags of the world.',
        startButton: 'Start Quiz',
        questionText: 'Which country does this flag belong to?',
        scoreLabel: 'SCORE',
        timeLabel: 'TIME',
        gameOverTitle: 'Game Over',
        // ... weitere Übersetzungen
    },
    de: {
        welcomeTitle: 'Willkommen zum Flaggen-Quiz!',
        welcomeSubtitle: 'Teste dein Wissen über die Flaggen der Welt.',
        startButton: 'Quiz starten',
        questionText: 'Zu welchem Land gehört diese Flagge?',
        scoreLabel: 'PUNKTE',
        timeLabel: 'ZEIT',
        gameOverTitle: 'Spiel vorbei',
        // ... weitere Übersetzungen
    }
};

function updateLanguage() {
    document.querySelector('#welcomeTitle').textContent = translations[currentLanguage].welcomeTitle;
    document.querySelector('#welcomeSubtitle').textContent = translations[currentLanguage].welcomeSubtitle;
    // ... weitere UI-Updates
    
    // Speichere Auswahl
    localStorage.setItem('flagsquiz-language', currentLanguage);
}

let currentLanguage = 'en';

// Erkenne Browser-Sprache
function detectBrowserLanguage() {
    const savedLanguage = localStorage.getItem('flagsquiz-language');
    if (savedLanguage) {
        return savedLanguage;
    }
    
    const browserLang = navigator.language || navigator.userLanguage;
    return browserLang.startsWith('de') ? 'de' : 'en';
}

// Übersetzungen
const translations = {
    en: {
        welcomeTitle: 'Welcome to the Flags Quiz!',
        welcomeSubtitle: 'Test your knowledge about the flags of the world.',
        startButton: 'Start Quiz',
        questionText: 'Which country does this flag belong to?',
        scoreLabel: 'SCORE',
        timeLabel: 'TIME',
        gameOverTitle: 'Game Over',
        // ... weitere Übersetzungen
    },
    de: {
        welcomeTitle: 'Willkommen zum Flaggen-Quiz!',
        welcomeSubtitle: 'Teste dein Wissen über die Flaggen der Welt.',
        startButton: 'Quiz starten',
        questionText: 'Zu welchem Land gehört diese Flagge?',
        scoreLabel: 'PUNKTE',
        timeLabel: 'ZEIT',
        gameOverTitle: 'Spiel vorbei',
        // ... weitere Übersetzungen
    }
};

function updateLanguage() {
    document.querySelector('#welcomeTitle').textContent = translations[currentLanguage].welcomeTitle;
    document.querySelector('#welcomeSubtitle').textContent = translations[currentLanguage].welcomeSubtitle;
    // ... weitere UI-Updates
    
    // Speichere Auswahl
    localStorage.setItem('flagsquiz-language', currentLanguage);
}

JavaScript

🎨 Custom Design mit Bulma

Das Design basiert auf Bulma CSS, wurde aber mit einer eigenen Farbpalette angepasst:

CSS

:root {
    --color-dark-slate: #455054;
    --color-teal: #308695;
    --color-pink: #D45769;
    --color-orange: #E69D45;
    --color-light-gray: #D4CFC9;
}

.navbar {
    background-color: var(--color-teal) !important;
}

.button.is-primary {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}

.answer-button.is-success {
    background-color: var(--color-teal) !important;
    border-color: var(--color-teal) !important;
}

.answer-button.is-danger {
    background-color: var(--color-pink) !important;
    border-color: var(--color-pink) !important;
}

:root {
    --color-dark-slate: #455054;
    --color-teal: #308695;
    --color-pink: #D45769;
    --color-orange: #E69D45;
    --color-light-gray: #D4CFC9;
}

.navbar {
    background-color: var(--color-teal) !important;
}

.button.is-primary {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}

.answer-button.is-success {
    background-color: var(--color-teal) !important;
    border-color: var(--color-teal) !important;
}

.answer-button.is-danger {
    background-color: var(--color-pink) !important;
    border-color: var(--color-pink) !important;
}

CSS

🎭 Lottie-Animation

Auf der Startseite wird eine Lottie-Animation verwendet, um das Quiz visuell ansprechender zu machen:

HTML

<!-- Lottie Player via CDN -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- Animation -->
<lottie-player 
    src="assets/quiz.json" 
    background="transparent" 
    speed="1" 
    style="width: 300px; height: 300px; margin: 0 auto;" 
    loop 
    autoplay>
</lottie-player>

<!-- Lottie Player via CDN -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- Animation -->
<lottie-player 
    src="assets/quiz.json" 
    background="transparent" 
    speed="1" 
    style="width: 300px; height: 300px; margin: 0 auto;" 
    loop 
    autoplay>
</lottie-player>

HTML

📊 Projekt-Struktur

Plaintext

flagsquiz-web/
├── assets/
│   ├── audio/
│   │   ├── answercorrect.mp3
│   │   └── answerwrong.mp3
│   ├── data/
│   │   └── countries.json
│   ├── favicon.ico
│   └── quiz.json
├── css/
│   └── styles.css
├── js/
│   └── app.js
├── index.html
└── README.md

flagsquiz-web/
├── assets/
│   ├── audio/
│   │   ├── answercorrect.mp3
│   │   └── answerwrong.mp3
│   ├── data/
│   │   └── countries.json
│   ├── favicon.ico
│   └── quiz.json
├── css/
│   └── styles.css
├── js/
│   └── app.js
├── index.html
└── README.md

Plaintext

🚀 Installation und Ausführung

Das Projekt ist super einfach zu starten:

Bash

# Repository klonen
git clone https://github.com/tsjdev-apps/flagsquiz-web.git
cd flagsquiz-web

# Lokalen Webserver starten
python -m http.server 8000

# Browser öffnen
# http://localhost:8000

# Repository klonen
git clone https://github.com/tsjdev-apps/flagsquiz-web.git
cd flagsquiz-web

# Lokalen Webserver starten
python -m http.server 8000

# Browser öffnen
# http://localhost:8000

Bash

🎓 Fazit

Das Flags Quiz Projekt zeigt, wie man mit einfachen Web-Technologien eine interaktive, responsive und benutzerfreundliche Anwendung erstellen kann. Besonders die Kombination aus Bulma CSS für schnelles Prototyping und Vanilla JavaScript für volle Kontrolle hat sich bewährt.

Das Projekt eignet sich perfekt für:

📚 Lernen – Web-Entwicklung für Anfänger
🎮 Spielen – Flaggen-Wissen testen
🔧 Erweitern – Als Basis für eigene Quiz-Apps

Author

Flags Quiz – Ein interaktives Flaggen-Quiz mit HTML, JavaScript und Bulma

🎮 Das Projekt

✨ Features

🛠️ Technologie-Stack

🎯 Wie funktioniert das Quiz?

1. Länder-Daten laden

2. Zufällige Fragen generieren

3. Flaggen via API laden

4. Timer-Implementierung

5. Antwort-Handling mit Feedback

6. Sound-Effekte

7. Mehrsprachigkeit

🎨 Custom Design mit Bulma

🎭 Lottie-Animation

📊 Projekt-Struktur

🚀 Installation und Ausführung

🎓 Fazit

Sebastian Jensen

Cancel Reply

🎮 Das Projekt

✨ Features

🛠️ Technologie-Stack

🎯 Wie funktioniert das Quiz?

1. Länder-Daten laden

2. Zufällige Fragen generieren

3. Flaggen via API laden

4. Timer-Implementierung

5. Antwort-Handling mit Feedback

6. Sound-Effekte

7. Mehrsprachigkeit

🎨 Custom Design mit Bulma

🎭 Lottie-Animation

📊 Projekt-Struktur

🚀 Installation und Ausführung

🎓 Fazit

Spotify Playlisten für das Programmieren

Xamarin.Forms Projekt mit .NET Standard

Azure Functions im Docker Container