Pokémon Quiz jetzt mit Wissenseinschätzung
This commit is contained in:
parent
bc75aa3daf
commit
79bbb66d32
@ -171,6 +171,45 @@
|
||||
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;
|
||||
@ -436,6 +475,10 @@
|
||||
<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>
|
||||
@ -899,6 +942,12 @@
|
||||
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)
|
||||
@ -946,6 +995,39 @@
|
||||
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>
|
Loading…
x
Reference in New Issue
Block a user