1033 lines
38 KiB
HTML
1033 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pokémon Quiz</title>
|
|
|
|
<!-- OG Tags -->
|
|
<meta property="og:title" content="Pokémon Quiz">
|
|
<meta property="og:description" content="Teste dein Pokémon-Wissen mit diesem Quiz">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://tools.ponywave.de/pokemon_quiz">
|
|
<meta property="og:image" content="https://tools.ponywave.de/pokemon_quiz/images/pokeball.png">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="images/favicon.ico">
|
|
<link rel="shortcut icon" href="images/favicon.ico">
|
|
|
|
<!-- Analytics -->
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="pokemon_quiz"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #e91e63;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.container {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.start-screen, .quiz-screen, .result-screen, .generation-screen {
|
|
text-align: center;
|
|
}
|
|
|
|
.difficulty-buttons, .generation-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.info-text {
|
|
margin: 20px 0;
|
|
padding: 10px;
|
|
background-color: #e3f2fd;
|
|
border-radius: 5px;
|
|
font-style: italic;
|
|
color: #0d47a1;
|
|
}
|
|
|
|
button {
|
|
background-color: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
.pokemon-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: contain;
|
|
margin: 20px auto;
|
|
display: block;
|
|
}
|
|
|
|
.silhouette {
|
|
filter: brightness(0); /* Silhouette-Effekt */
|
|
}
|
|
|
|
.pokemon-image.revealed {
|
|
filter: brightness(1); /* Normaler Zustand */
|
|
animation: reveal 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes reveal {
|
|
0% { filter: brightness(0); }
|
|
100% { filter: brightness(1); }
|
|
}
|
|
|
|
.option-button {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
background-color: #2196f3;
|
|
}
|
|
|
|
.option-button:hover {
|
|
background-color: #0d8aee;
|
|
}
|
|
|
|
.option-button.correct {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.option-button.incorrect {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.next-button {
|
|
margin-top: 20px;
|
|
background-color: #9c27b0;
|
|
}
|
|
|
|
.next-button:hover {
|
|
background-color: #8e24aa;
|
|
}
|
|
|
|
.restart-button {
|
|
margin-top: 20px;
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.restart-button:hover {
|
|
background-color: #f57c00;
|
|
}
|
|
|
|
.progress {
|
|
margin-top: 20px;
|
|
font-style: italic;
|
|
color: #666;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.back-button {
|
|
margin-top: 10px;
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #e53935;
|
|
}
|
|
|
|
.generation-all {
|
|
background-color: #673ab7;
|
|
}
|
|
|
|
.generation-all:hover {
|
|
background-color: #5e35b1;
|
|
}
|
|
|
|
.score {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin: 20px 0;
|
|
color: #e91e63;
|
|
}
|
|
|
|
/* Stil für die Wissenseinschätzung */
|
|
.knowledge-rating {
|
|
font-size: 18px;
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background-color: #f5f5f5;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.knowledge-rating-title {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
color: #673ab7;
|
|
}
|
|
|
|
/* Farbstile für verschiedene Bewertungsstufen */
|
|
.rating-beginner {
|
|
border-left: 5px solid #f44336;
|
|
}
|
|
|
|
.rating-intermediate {
|
|
border-left: 5px solid #ff9800;
|
|
}
|
|
|
|
.rating-advanced {
|
|
border-left: 5px solid #4caf50;
|
|
}
|
|
|
|
.rating-expert {
|
|
border-left: 5px solid #2196f3;
|
|
}
|
|
|
|
.rating-master {
|
|
border-left: 5px solid #9c27b0;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
color: #666;
|
|
border-top: 1px solid #ddd;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
footer a {
|
|
color: #e91e63;
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.save-load-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.save-button {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.save-button:hover {
|
|
background-color: #f57c00;
|
|
}
|
|
|
|
.load-button {
|
|
background-color: #2196f3;
|
|
}
|
|
|
|
.load-button:hover {
|
|
background-color: #0d8aee;
|
|
}
|
|
|
|
/* Modals und Popups */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
text-align: center;
|
|
}
|
|
|
|
.modal h3 {
|
|
margin-top: 0;
|
|
color: #e91e63;
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.modal-buttons button {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.quit-button {
|
|
background-color: #f44336;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.quit-button:hover {
|
|
background-color: #e53935;
|
|
}
|
|
|
|
.modal-confirm {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.modal-cancel {
|
|
background-color: #9e9e9e;
|
|
}
|
|
|
|
/* Freeform-Modus Styles */
|
|
.freeform-input {
|
|
margin: 20px auto;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border: 2px solid #2196f3;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.freeform-input:focus {
|
|
outline: none;
|
|
border-color: #9c27b0;
|
|
box-shadow: 0 0 8px rgba(156, 39, 176, 0.5);
|
|
}
|
|
|
|
.mode-selection {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.mode-options {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.mode-button {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.mode-button:hover {
|
|
background-color: #f57c00;
|
|
}
|
|
|
|
.mode-button.active {
|
|
background-color: #e65100;
|
|
box-shadow: 0 0 10px rgba(230, 81, 0, 0.5);
|
|
}
|
|
|
|
.freeform-feedback {
|
|
margin: 10px 0;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
height: 25px;
|
|
}
|
|
|
|
.freeform-feedback.correct {
|
|
color: #4caf50;
|
|
}
|
|
|
|
.freeform-feedback.incorrect {
|
|
color: #f44336;
|
|
}
|
|
|
|
.submit-answer {
|
|
background-color: #2196f3;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.submit-answer:hover {
|
|
background-color: #0d8aee;
|
|
}
|
|
|
|
.correct-name {
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
color: #4caf50;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Pokémon Quiz</h1>
|
|
|
|
<div class="container">
|
|
<!-- Generation-Auswahl Screen -->
|
|
<div class="generation-screen">
|
|
<h2>Wähle eine Pokémon-Generation</h2>
|
|
<img src="" alt="Zufälliges Pokémon" class="pokemon-image" id="random-pokemon">
|
|
<div class="generation-buttons">
|
|
<button class="generation-button" data-gen="1">Gen 1: Kanto (1-151)</button>
|
|
<button class="generation-button" data-gen="2">Gen 2: Johto (152-251)</button>
|
|
<button class="generation-button" data-gen="3">Gen 3: Hoenn (252-386)</button>
|
|
<button class="generation-button" data-gen="4">Gen 4: Sinnoh (387-493)</button>
|
|
<button class="generation-button" data-gen="5">Gen 5: Einall (494-649)</button>
|
|
<button class="generation-button" data-gen="6">Gen 6: Kalos (650-721)</button>
|
|
<button class="generation-button" data-gen="7">Gen 7: Alola (722-809)</button>
|
|
<button class="generation-button" data-gen="8">Gen 8: Galar (810-905)</button>
|
|
<button class="generation-button" data-gen="9">Gen 9: Paldea (906-1025)</button>
|
|
<button class="generation-button generation-all" data-gen="all">Alle Generationen</button>
|
|
</div>
|
|
|
|
<!-- Fortschritt laden Button anzeigen, wenn gespeichert -->
|
|
<div class="save-load-buttons">
|
|
<button id="load-progress-button" class="load-button hidden">Fortschritt laden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schwierigkeitsgrad-Auswahl Screen -->
|
|
<div class="start-screen hidden">
|
|
<h2>Wähle den Schwierigkeitsgrad</h2>
|
|
<img src="" alt="Zufälliges Pokémon" class="pokemon-image" id="difficulty-pokemon">
|
|
|
|
<!-- Spielmodus-Auswahl -->
|
|
<div class="mode-selection">
|
|
<h3>Spielmodus</h3>
|
|
<div class="mode-options">
|
|
<button id="mode-multiple-choice" class="mode-button active">Multiple Choice</button>
|
|
<button id="mode-freeform" class="mode-button">Freeform</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="difficulty-buttons">
|
|
<button id="very-easy">10 Pokémon</button>
|
|
<button id="easy">25 Pokémon</button>
|
|
<button id="medium">50 Pokémon</button>
|
|
<button id="advanced">75 Pokémon</button>
|
|
<button id="hard">100 Pokémon</button>
|
|
<button id="expert">125 Pokémon</button>
|
|
<button id="all">Alle Pokémon</button>
|
|
</div>
|
|
<button class="back-button">Zurück zur Generation</button>
|
|
</div>
|
|
|
|
<!-- Quiz Screen -->
|
|
<div class="quiz-screen hidden">
|
|
<h2>Wie heißt dieses Pokémon?</h2>
|
|
<img src="" alt="Pokémon" class="pokemon-image silhouette" id="pokemon-image">
|
|
|
|
<!-- Multiple Choice Optionen -->
|
|
<div id="multiple-choice-container">
|
|
<div class="options" id="options">
|
|
<!-- Optionen werden hier dynamisch eingefügt -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Freeform Eingabe -->
|
|
<div id="freeform-container" class="hidden">
|
|
<input type="text" id="freeform-input" class="freeform-input" placeholder="Pokémon-Name eingeben..." autocomplete="off">
|
|
<div id="freeform-feedback" class="freeform-feedback"></div>
|
|
<div id="correct-name" class="correct-name hidden"></div>
|
|
<button id="submit-answer" class="submit-answer">Überprüfen</button>
|
|
</div>
|
|
|
|
<button class="next-button hidden" id="next-button">Nächstes Pokémon</button>
|
|
<div class="progress" id="progress"></div>
|
|
|
|
<!-- Fortschritt speichern und Aufgeben -->
|
|
<div class="save-load-buttons">
|
|
<button id="save-progress-button" class="save-button">Fortschritt speichern</button>
|
|
<button id="quit-button" class="quit-button">Aufgeben</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ergebnis Screen -->
|
|
<div class="result-screen hidden">
|
|
<h2>Quiz beendet!</h2>
|
|
<div class="score" id="final-score"></div>
|
|
<div id="knowledge-rating" class="knowledge-rating">
|
|
<div class="knowledge-rating-title">Wissenseinschätzung</div>
|
|
<div id="knowledge-rating-text"></div>
|
|
</div>
|
|
<button class="restart-button" id="restart-button">Neustart</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div class="modal-overlay" id="save-modal">
|
|
<div class="modal">
|
|
<h3>Fortschritt gespeichert!</h3>
|
|
<p>Dein Fortschritt wurde erfolgreich gespeichert.</p>
|
|
<div class="modal-buttons">
|
|
<button class="modal-confirm" onclick="closeModal('save-modal')">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="quit-modal">
|
|
<div class="modal">
|
|
<h3>Quiz wirklich beenden?</h3>
|
|
<p>Möchtest du das Quiz wirklich beenden? Dein aktueller Fortschritt geht verloren, wenn du nicht gespeichert hast.</p>
|
|
<div class="modal-buttons">
|
|
<button class="modal-cancel" onclick="closeModal('quit-modal')">Abbrechen</button>
|
|
<button class="modal-confirm" onclick="quitQuiz()">Beenden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<a href="https://tools.ponywave.de">Zurück zur Startseite</a> | © 2025 Akamaru | Made with ❤️ by Claude
|
|
</footer>
|
|
|
|
<script>
|
|
// DOM-Elemente
|
|
const generationScreen = document.querySelector('.generation-screen');
|
|
const startScreen = document.querySelector('.start-screen');
|
|
const quizScreen = document.querySelector('.quiz-screen');
|
|
const resultScreen = document.querySelector('.result-screen');
|
|
const randomPokemonImage = document.getElementById('random-pokemon');
|
|
const difficultyPokemonImage = document.getElementById('difficulty-pokemon');
|
|
const pokemonImage = document.getElementById('pokemon-image');
|
|
const optionsContainer = document.getElementById('options');
|
|
const multipleChoiceContainer = document.getElementById('multiple-choice-container');
|
|
const freeformContainer = document.getElementById('freeform-container');
|
|
const freeformInput = document.getElementById('freeform-input');
|
|
const freeformFeedback = document.getElementById('freeform-feedback');
|
|
const correctNameElement = document.getElementById('correct-name');
|
|
const submitAnswerButton = document.getElementById('submit-answer');
|
|
const nextButton = document.getElementById('next-button');
|
|
const progressElement = document.getElementById('progress');
|
|
const finalScoreElement = document.getElementById('final-score');
|
|
const restartButton = document.getElementById('restart-button');
|
|
const backButton = document.querySelector('.back-button');
|
|
const generationButtons = document.querySelectorAll('.generation-button');
|
|
const saveProgressButton = document.getElementById('save-progress-button');
|
|
const loadProgressButton = document.getElementById('load-progress-button');
|
|
const quitButton = document.getElementById('quit-button');
|
|
const modeMultipleChoiceButton = document.getElementById('mode-multiple-choice');
|
|
const modeFreeformButton = document.getElementById('mode-freeform');
|
|
|
|
// Spielvariablen
|
|
let pokemons = [];
|
|
let currentPokemonIndex = 0;
|
|
let quizPokemons = [];
|
|
let correctAnswers = 0;
|
|
let answeredQuestions = 0;
|
|
let selectedGeneration = 1;
|
|
let maxPokemonNumber = 151; // Standard: Gen1
|
|
let gameMode = 'multiple-choice'; // Standard: Multiple-Choice
|
|
|
|
// Modal-Funktionen
|
|
function showModal(modalId) {
|
|
document.getElementById(modalId).classList.add('active');
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('active');
|
|
}
|
|
|
|
function quitQuiz() {
|
|
closeModal('quit-modal');
|
|
quizScreen.classList.add('hidden');
|
|
generationScreen.classList.remove('hidden');
|
|
displayRandomPokemon(randomPokemonImage);
|
|
}
|
|
|
|
// Game Mode Selection
|
|
modeMultipleChoiceButton.addEventListener('click', () => {
|
|
setGameMode('multiple-choice');
|
|
});
|
|
|
|
modeFreeformButton.addEventListener('click', () => {
|
|
setGameMode('freeform');
|
|
});
|
|
|
|
function setGameMode(mode) {
|
|
gameMode = mode;
|
|
|
|
// UI-Update der Buttons
|
|
modeMultipleChoiceButton.classList.toggle('active', mode === 'multiple-choice');
|
|
modeFreeformButton.classList.toggle('active', mode === 'freeform');
|
|
}
|
|
|
|
// Generation-Bereiche
|
|
const generations = {
|
|
1: { min: 1, max: 151, name: "Kanto" },
|
|
2: { min: 152, max: 251, name: "Johto" },
|
|
3: { min: 252, max: 386, name: "Hoenn" },
|
|
4: { min: 387, max: 493, name: "Sinnoh" },
|
|
5: { min: 494, max: 649, name: "Einall" },
|
|
6: { min: 650, max: 721, name: "Kalos" },
|
|
7: { min: 722, max: 809, name: "Alola" },
|
|
8: { min: 810, max: 905, name: "Galar" },
|
|
9: { min: 906, max: 1025, name: "Paldea" }
|
|
};
|
|
|
|
// Fortschritt-Speicher-Funktionalität
|
|
|
|
// Prüfe, ob ein gespeicherter Fortschritt vorhanden ist
|
|
function checkSavedProgress() {
|
|
const savedProgress = localStorage.getItem('pokemonQuizProgress');
|
|
if (savedProgress) {
|
|
loadProgressButton.classList.remove('hidden');
|
|
} else {
|
|
loadProgressButton.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Fortschritt speichern
|
|
function saveProgress() {
|
|
const progress = {
|
|
selectedGeneration,
|
|
quizPokemons,
|
|
currentPokemonIndex,
|
|
correctAnswers,
|
|
answeredQuestions,
|
|
pokemons, // Speichere auch die verfügbaren Pokémon für die korrekten Antwortoptionen
|
|
gameMode // Speichere den Spielmodus
|
|
};
|
|
localStorage.setItem('pokemonQuizProgress', JSON.stringify(progress));
|
|
showModal('save-modal');
|
|
}
|
|
|
|
// Fortschritt laden
|
|
function loadProgress() {
|
|
const savedProgress = localStorage.getItem('pokemonQuizProgress');
|
|
if (savedProgress) {
|
|
const progress = JSON.parse(savedProgress);
|
|
selectedGeneration = progress.selectedGeneration;
|
|
quizPokemons = progress.quizPokemons;
|
|
currentPokemonIndex = progress.currentPokemonIndex;
|
|
correctAnswers = progress.correctAnswers;
|
|
answeredQuestions = progress.answeredQuestions;
|
|
|
|
// Spielmodus laden, falls vorhanden
|
|
if (progress.gameMode) {
|
|
gameMode = progress.gameMode;
|
|
}
|
|
|
|
// Stelle sicher, dass wir alle Pokémon haben, um korrekte Antwortoptionen zu generieren
|
|
if (progress.pokemons) {
|
|
pokemons = progress.pokemons;
|
|
} else {
|
|
// Lade die Pokémon für die aktuelle Generation, wenn sie nicht gespeichert wurden
|
|
loadPokemonForGeneration(selectedGeneration).then(() => {
|
|
showNextPokemon();
|
|
});
|
|
return;
|
|
}
|
|
|
|
// UI wechseln
|
|
generationScreen.classList.add('hidden');
|
|
startScreen.classList.add('hidden');
|
|
quizScreen.classList.remove('hidden');
|
|
resultScreen.classList.add('hidden');
|
|
|
|
// Zeige den richtigen Modus an
|
|
updateGameModeUI();
|
|
|
|
// Aktuelles Pokémon anzeigen
|
|
showNextPokemon();
|
|
}
|
|
}
|
|
|
|
// Spielmodus-UI aktualisieren
|
|
function updateGameModeUI() {
|
|
if (gameMode === 'multiple-choice') {
|
|
multipleChoiceContainer.classList.remove('hidden');
|
|
freeformContainer.classList.add('hidden');
|
|
} else {
|
|
multipleChoiceContainer.classList.add('hidden');
|
|
freeformContainer.classList.remove('hidden');
|
|
// Reset Freeform-Elemente
|
|
freeformInput.value = '';
|
|
freeformInput.disabled = false;
|
|
freeformFeedback.textContent = '';
|
|
freeformFeedback.className = 'freeform-feedback';
|
|
correctNameElement.textContent = '';
|
|
correctNameElement.classList.add('hidden');
|
|
submitAnswerButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Lade Pokémon-Daten für eine bestimmte Generation
|
|
async function loadPokemonForGeneration(generation) {
|
|
try {
|
|
if (generation === "all") {
|
|
// Lade alle Generationen
|
|
pokemons = [];
|
|
for (let i = 1; i <= 9; i++) {
|
|
try {
|
|
const genResponse = await fetch(`json/gen${i}.json`);
|
|
const genData = await genResponse.json();
|
|
pokemons = pokemons.concat(genData);
|
|
} catch (genError) {
|
|
console.warn(`Generation ${i} nicht verfügbar:`, genError);
|
|
}
|
|
}
|
|
} else {
|
|
// Lade spezifische Generation
|
|
const response = await fetch(`json/gen${generation}.json`);
|
|
pokemons = await response.json();
|
|
}
|
|
return pokemons;
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Pokémon-Daten:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Event-Listener für Fortschritt-Buttons
|
|
saveProgressButton.addEventListener('click', saveProgress);
|
|
loadProgressButton.addEventListener('click', loadProgress);
|
|
quitButton.addEventListener('click', () => showModal('quit-modal'));
|
|
|
|
// Pokemon-Daten laden
|
|
async function loadPokemonData(generation) {
|
|
try {
|
|
await loadPokemonForGeneration(generation);
|
|
|
|
maxPokemonNumber = generations[generation] ? generations[generation].max : 151;
|
|
|
|
setupDifficultyButtons();
|
|
displayRandomPokemon(difficultyPokemonImage);
|
|
|
|
// Zeige den Schwierigkeitsgrad-Screen
|
|
generationScreen.classList.add('hidden');
|
|
startScreen.classList.remove('hidden');
|
|
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Pokémon-Daten:', error);
|
|
alert(`Generation ${generation} ist noch nicht verfügbar. Bitte wähle eine andere Generation.`);
|
|
}
|
|
}
|
|
|
|
// Event-Listener für Generationsauswahl
|
|
generationButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const gen = button.getAttribute('data-gen');
|
|
selectedGeneration = gen;
|
|
loadPokemonData(gen);
|
|
});
|
|
});
|
|
|
|
// Zufälliges Pokémon im Startbildschirm anzeigen
|
|
function displayRandomPokemon(imageElement) {
|
|
if (pokemons.length > 0) {
|
|
const randomIndex = Math.floor(Math.random() * pokemons.length);
|
|
const randomPokemon = pokemons[randomIndex];
|
|
const genFolder = getGenerationFolder(randomPokemon.nummer);
|
|
imageElement.src = `images/${genFolder}/${randomPokemon.nummer}.png`;
|
|
}
|
|
}
|
|
|
|
// Bestimme den Generationsordner basierend auf der Pokémon-Nummer
|
|
function getGenerationFolder(number) {
|
|
const num = parseInt(number);
|
|
for (let genId in generations) {
|
|
const gen = generations[genId];
|
|
if (num >= gen.min && num <= gen.max) {
|
|
return `gen${genId}`;
|
|
}
|
|
}
|
|
return "gen1"; // Fallback
|
|
}
|
|
|
|
// Schwierigkeitsgrad-Buttons einrichten
|
|
function setupDifficultyButtons() {
|
|
document.getElementById('very-easy').addEventListener('click', () => startQuiz(10));
|
|
document.getElementById('easy').addEventListener('click', () => startQuiz(25));
|
|
document.getElementById('medium').addEventListener('click', () => startQuiz(50));
|
|
document.getElementById('advanced').addEventListener('click', () => startQuiz(75));
|
|
document.getElementById('hard').addEventListener('click', () => startQuiz(100));
|
|
document.getElementById('expert').addEventListener('click', () => startQuiz(125));
|
|
document.getElementById('all').addEventListener('click', () => startQuiz(pokemons.length));
|
|
}
|
|
|
|
// Quiz starten
|
|
function startQuiz(count) {
|
|
// Alle Pokémon zufällig anordnen und dann nur die gewünschte Anzahl nehmen
|
|
const shuffledPokemons = shuffleArray([...pokemons]);
|
|
count = Math.min(count, shuffledPokemons.length);
|
|
quizPokemons = shuffledPokemons.slice(0, count);
|
|
|
|
// Spielvariablen zurücksetzen
|
|
currentPokemonIndex = 0;
|
|
correctAnswers = 0;
|
|
answeredQuestions = 0;
|
|
|
|
// UI wechseln
|
|
startScreen.classList.add('hidden');
|
|
quizScreen.classList.remove('hidden');
|
|
resultScreen.classList.add('hidden');
|
|
|
|
// Aktualisiere die Spielmodus-UI
|
|
updateGameModeUI();
|
|
|
|
// Erstes Pokémon anzeigen
|
|
showNextPokemon();
|
|
}
|
|
|
|
// Nächstes Pokémon anzeigen
|
|
function showNextPokemon() {
|
|
if (currentPokemonIndex >= quizPokemons.length) {
|
|
showResults();
|
|
return;
|
|
}
|
|
|
|
const currentPokemon = quizPokemons[currentPokemonIndex];
|
|
|
|
// Bild setzen
|
|
const genFolder = getGenerationFolder(currentPokemon.nummer);
|
|
pokemonImage.src = `images/${genFolder}/${currentPokemon.nummer}.png`;
|
|
pokemonImage.classList.add('silhouette');
|
|
pokemonImage.classList.remove('revealed');
|
|
|
|
// Je nach Spielmodus UI anpassen
|
|
if (gameMode === 'multiple-choice') {
|
|
// Optionen generieren
|
|
generateOptions(currentPokemon);
|
|
} else {
|
|
// Freeform-Felder zurücksetzen
|
|
freeformInput.value = '';
|
|
freeformInput.disabled = false;
|
|
freeformInput.focus();
|
|
freeformFeedback.textContent = '';
|
|
freeformFeedback.className = 'freeform-feedback';
|
|
correctNameElement.textContent = '';
|
|
correctNameElement.classList.add('hidden');
|
|
submitAnswerButton.disabled = false;
|
|
}
|
|
|
|
// Fortschritt aktualisieren
|
|
progressElement.textContent = `Pokemon ${currentPokemonIndex + 1} von ${quizPokemons.length}`;
|
|
|
|
// Next-Button verstecken
|
|
nextButton.classList.add('hidden');
|
|
}
|
|
|
|
// Optionen für aktuelles Pokémon generieren (Multiple Choice)
|
|
function generateOptions(currentPokemon) {
|
|
// Optionen-Container leeren
|
|
optionsContainer.innerHTML = "";
|
|
|
|
// Richtige Antwort
|
|
const correctAnswer = currentPokemon.name;
|
|
|
|
// Zwei falsche Antworten auswählen
|
|
const incorrectOptions = getRandomIncorrectOptions(correctAnswer, 2);
|
|
|
|
// Alle Optionen mischen
|
|
const allOptions = shuffleArray([correctAnswer, ...incorrectOptions]);
|
|
|
|
// Optionen-Buttons erstellen
|
|
allOptions.forEach(option => {
|
|
const button = document.createElement('button');
|
|
button.classList.add('option-button');
|
|
button.textContent = option;
|
|
button.addEventListener('click', () => checkMultipleChoiceAnswer(button, option, correctAnswer));
|
|
optionsContainer.appendChild(button);
|
|
});
|
|
}
|
|
|
|
// Antwort überprüfen (Multiple Choice)
|
|
function checkMultipleChoiceAnswer(button, selectedOption, correctAnswer) {
|
|
// Pokémon aufdecken
|
|
pokemonImage.classList.add('revealed');
|
|
pokemonImage.classList.remove('silhouette');
|
|
|
|
// Alle Buttons deaktivieren
|
|
const allButtons = optionsContainer.querySelectorAll('button');
|
|
allButtons.forEach(btn => {
|
|
btn.disabled = true;
|
|
if (btn.textContent === correctAnswer) {
|
|
btn.classList.add('correct');
|
|
}
|
|
});
|
|
|
|
// Ausgewählten Button markieren
|
|
if (selectedOption === correctAnswer) {
|
|
button.classList.add('correct');
|
|
correctAnswers++;
|
|
} else {
|
|
button.classList.add('incorrect');
|
|
}
|
|
|
|
// Nächster Button anzeigen
|
|
nextButton.classList.remove('hidden');
|
|
answeredQuestions++;
|
|
}
|
|
|
|
// Event-Listener für Freeform-Antworten
|
|
submitAnswerButton.addEventListener('click', checkFreeformAnswer);
|
|
freeformInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
checkFreeformAnswer();
|
|
}
|
|
});
|
|
|
|
// Antwort überprüfen (Freeform)
|
|
function checkFreeformAnswer() {
|
|
const currentPokemon = quizPokemons[currentPokemonIndex];
|
|
const correctAnswer = currentPokemon.name;
|
|
const userAnswer = freeformInput.value.trim();
|
|
|
|
// Pokémon aufdecken
|
|
pokemonImage.classList.add('revealed');
|
|
pokemonImage.classList.remove('silhouette');
|
|
|
|
// Eingabefeld und Button deaktivieren
|
|
freeformInput.disabled = true;
|
|
submitAnswerButton.disabled = true;
|
|
|
|
// Antwort vergleichen (unabhängig von Groß-/Kleinschreibung)
|
|
const isCorrect = userAnswer.toLowerCase() === correctAnswer.toLowerCase();
|
|
|
|
// Feedback anzeigen
|
|
if (isCorrect) {
|
|
freeformFeedback.textContent = "Richtig!";
|
|
freeformFeedback.className = "freeform-feedback correct";
|
|
correctAnswers++;
|
|
} else {
|
|
freeformFeedback.textContent = "Falsch!";
|
|
freeformFeedback.className = "freeform-feedback incorrect";
|
|
correctNameElement.textContent = `Die richtige Antwort ist: ${correctAnswer}`;
|
|
correctNameElement.classList.remove('hidden');
|
|
}
|
|
|
|
// Nächster Button anzeigen
|
|
nextButton.classList.remove('hidden');
|
|
answeredQuestions++;
|
|
}
|
|
|
|
// Zufällige falsche Optionen generieren
|
|
function getRandomIncorrectOptions(correctAnswer, count) {
|
|
// Liste aller Pokémon-Namen ohne die richtige Antwort
|
|
const allNames = pokemons.map(p => p.name).filter(name => name !== correctAnswer);
|
|
return shuffleArray(allNames).slice(0, count);
|
|
}
|
|
|
|
// Ergebnisse anzeigen
|
|
function showResults() {
|
|
quizScreen.classList.add('hidden');
|
|
resultScreen.classList.remove('hidden');
|
|
finalScoreElement.textContent = `Deine Punktzahl: ${correctAnswers} von ${quizPokemons.length}`;
|
|
|
|
// Berechne den Prozentsatz der richtigen Antworten
|
|
const percentage = (correctAnswers / quizPokemons.length) * 100;
|
|
|
|
// Aktualisiere die Wissenseinschätzungsanzeige
|
|
updateKnowledgeRating(percentage);
|
|
}
|
|
|
|
// Array zufällig mischen (Fisher-Yates Algorithmus)
|
|
function shuffleArray(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
// Zurück zur Generationsauswahl
|
|
backButton.addEventListener('click', () => {
|
|
startScreen.classList.add('hidden');
|
|
generationScreen.classList.remove('hidden');
|
|
displayRandomPokemon(randomPokemonImage);
|
|
});
|
|
|
|
// Event-Listener einrichten
|
|
nextButton.addEventListener('click', () => {
|
|
currentPokemonIndex++;
|
|
showNextPokemon();
|
|
});
|
|
|
|
restartButton.addEventListener('click', () => {
|
|
resultScreen.classList.add('hidden');
|
|
generationScreen.classList.remove('hidden');
|
|
displayRandomPokemon(randomPokemonImage);
|
|
});
|
|
|
|
// Anwendung initialisieren
|
|
// Prüfe, ob ein gespeicherter Fortschritt vorhanden ist
|
|
checkSavedProgress();
|
|
|
|
// Zeige zufälliges Pokémon im Generationsauswahl-Screen
|
|
fetch('json/gen1.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tempPokemons = data;
|
|
const randomIndex = Math.floor(Math.random() * tempPokemons.length);
|
|
const randomPokemon = tempPokemons[randomIndex];
|
|
randomPokemonImage.src = `images/gen1/${randomPokemon.nummer}.png`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Vorschau:', error);
|
|
randomPokemonImage.src = 'images/gen1/001.png'; // Fallback
|
|
});
|
|
|
|
// Aktualisiere die Wissenseinschätzungsanzeige
|
|
function updateKnowledgeRating(percentage) {
|
|
const knowledgeRating = document.getElementById('knowledge-rating');
|
|
const knowledgeRatingText = document.getElementById('knowledge-rating-text');
|
|
|
|
// Setze die Klasse zurück
|
|
knowledgeRating.className = 'knowledge-rating';
|
|
|
|
// Bestimme die Bewertungsstufe und Text basierend auf dem Prozentsatz
|
|
let ratingClass, ratingText;
|
|
|
|
if (percentage < 20) {
|
|
ratingClass = 'rating-beginner';
|
|
ratingText = 'Pokémon-Anfänger: Du hast gerade erst mit deiner Reise begonnen! Aber keine Sorge, jeder große Trainer fängt klein an. Trainiere weiter und werde mit der Zeit besser!';
|
|
} else if (percentage < 40) {
|
|
ratingClass = 'rating-intermediate';
|
|
ratingText = 'Pokémon-Trainer: Du kennst schon einige Pokémon, aber es gibt noch viel zu entdecken. Weiter so, du bist auf dem richtigen Weg!';
|
|
} else if (percentage < 60) {
|
|
ratingClass = 'rating-advanced';
|
|
ratingText = 'Erfahrener Trainer: Du hast ein solides Wissen über Pokémon! Mit ein bisschen mehr Training könntest du es mit den Arenaleitern aufnehmen.';
|
|
} else if (percentage < 80) {
|
|
ratingClass = 'rating-expert';
|
|
ratingText = 'Pokémon-Experte: Beeindruckend! Du kennst dich sehr gut in der Welt der Pokémon aus. Die Top Vier sind nicht mehr weit entfernt!';
|
|
} else {
|
|
ratingClass = 'rating-master';
|
|
ratingText = 'Pokémon-Meister: Unglaublich! Dein Wissen ist auf dem Niveau eines Pokémon-Champions. Professor Eich wäre stolz auf dich!';
|
|
}
|
|
|
|
// Wende die Klasse an und setze den Text
|
|
knowledgeRating.classList.add(ratingClass);
|
|
knowledgeRatingText.textContent = ratingText;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |