Make plant quiz dynamic with fetch from Plantlix API and fallback
This commit is contained in:
Felix Brabetz
@@ -7,39 +7,88 @@
|
||||
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Das kleine Pflanzen-Quiz</h2>
|
||||
<p class="text-stone-400 mb-12 font-light">Teste dein Wissen! In Kooperation mit den Lern-Algorithmen von Plantlix.de.</p>
|
||||
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800 text-left" x-data="{ answered: false, correct: false }">
|
||||
<h3 class="text-xl font-bold text-white mb-6">Welcher dieser Bäume ist ein extremer Tiefwurzler und übersteht Trockenheit am besten?</h3>
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800 text-left"
|
||||
x-data="{
|
||||
answered: false,
|
||||
correct: false,
|
||||
selected: '',
|
||||
question: 'Lade Quiz-Frage von Plantlix...',
|
||||
options: [],
|
||||
correctAnswer: '',
|
||||
explanation: '',
|
||||
loading: true,
|
||||
init() {
|
||||
// Versuche die Frage von Plantlix zu holen
|
||||
fetch('https://plantlix.de/api/quiz/random')
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('API Fehler');
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
this.question = data.question;
|
||||
this.options = data.options; // Erwartet Array von Objekten: { key: 'A', text: '...' }
|
||||
this.correctAnswer = data.correctAnswer; // Erwartet 'A', 'B' oder 'C'
|
||||
this.explanation = data.explanation;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('Plantlix API nicht erreichbar, nutze Fallback-Frage.');
|
||||
// Fallback-Daten (die ursprüngliche Frage)
|
||||
this.question = 'Welcher dieser Bäume ist ein extremer Tiefwurzler und übersteht Trockenheit am besten?';
|
||||
this.options = [
|
||||
{ key: 'A', text: 'Die Rotbuche (*Fagus sylvatica*)' },
|
||||
{ key: 'B', text: 'Die Stieleiche (*Quercus robur*)' },
|
||||
{ key: 'C', text: 'Die Fichte (*Picea abies*)' }
|
||||
];
|
||||
this.correctAnswer = 'B';
|
||||
this.explanation = 'Die Stieleiche bildet eine tiefgehende Pfahlwurzel und kommt so auch in trockenen Sommern an Wasser. Buchen und Fichten sind Flachwurzler und leiden schneller unter Trockenstress.';
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}">
|
||||
|
||||
<div class="space-y-4" x-show="!answered">
|
||||
<button @click="answered = true; correct = false" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
|
||||
<span>A) Die Rotbuche (*Fagus sylvatica*)</span>
|
||||
<i class="fa-solid fa-chevron-right text-stone-600"></i>
|
||||
</button>
|
||||
<button @click="answered = true; correct = true" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
|
||||
<span>B) Die Stieleiche (*Quercus robur*)</span>
|
||||
<i class="fa-solid fa-chevron-right text-stone-600"></i>
|
||||
</button>
|
||||
<button @click="answered = true; correct = false" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
|
||||
<span>C) Die Fichte (*Picea abies*)</span>
|
||||
<i class="fa-solid fa-chevron-right text-stone-600"></i>
|
||||
</button>
|
||||
<!-- Loading State -->
|
||||
<div x-show="loading" class="text-center py-6">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-emerald-500 mb-4"></div>
|
||||
<p class="text-stone-500 text-sm font-mono" x-text="question"></p>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div x-show="answered" x-cloak class="text-center py-6" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
|
||||
<div x-show="correct" class="text-emerald-400">
|
||||
<div class="text-4xl mb-4"><i class="fa-solid fa-circle-check"></i></div>
|
||||
<h4 class="text-xl font-bold mb-2">Absolut richtig!</h4>
|
||||
<p class="text-stone-400 text-sm font-light">Die Stieleiche bildet eine tiefgehende Pfahlwurzel und kommt so auch in trockenen Sommern an Wasser. Buchen und Fichten sind Flachwurzler und leiden schneller unter Trockenstress.</p>
|
||||
<!-- Quiz Content -->
|
||||
<div x-show="!loading" x-cloak>
|
||||
<h3 class="text-xl font-bold text-white mb-6" x-text="question"></h3>
|
||||
|
||||
<div class="space-y-4" x-show="!answered">
|
||||
<template x-for="option in options" :key="option.key">
|
||||
<button @click="answered = true; selected = option.key; correct = (option.key === correctAnswer)"
|
||||
class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center group">
|
||||
<span>
|
||||
<span class="font-mono text-emerald-500 mr-2" x-text="option.key + ')'"></span>
|
||||
<span x-text="option.text"></span>
|
||||
</span>
|
||||
<i class="fa-solid fa-chevron-right text-stone-600 group-hover:text-emerald-500 transition-colors"></i>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="!correct" class="text-amber-500">
|
||||
<div class="text-4xl mb-4"><i class="fa-solid fa-circle-xmark"></i></div>
|
||||
<h4 class="text-xl font-bold mb-2">Leider nicht ganz!</h4>
|
||||
<p class="text-stone-400 text-sm font-light">Die richtige Antwort ist **B) Die Stieleiche**. Sie bildet eine tiefe Pfahlwurzel. Rotbuchen und Fichten wurzeln eher flach und sind daher anfälliger für Trockenheit.</p>
|
||||
|
||||
<!-- Result -->
|
||||
<div x-show="answered" class="text-center py-6" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
|
||||
<div x-show="correct" class="text-emerald-400">
|
||||
<div class="text-4xl mb-4"><i class="fa-solid fa-circle-check"></i></div>
|
||||
<h4 class="text-xl font-bold mb-2">Absolut richtig!</h4>
|
||||
<p class="text-stone-400 text-sm font-light" x-text="explanation"></p>
|
||||
</div>
|
||||
<div x-show="!correct" class="text-amber-500">
|
||||
<div class="text-4xl mb-4"><i class="fa-solid fa-circle-xmark"></i></div>
|
||||
<h4 class="text-xl font-bold mb-2">Leider nicht ganz!</h4>
|
||||
<p class="text-stone-400 text-sm font-light">
|
||||
Die richtige Antwort ist <span class="font-bold" x-text="correctAnswer"></span>.
|
||||
<span x-text="explanation"></span>
|
||||
</p>
|
||||
</div>
|
||||
<button @click="answered = false; selected = ''; correct = false; init();" class="mt-8 text-xs text-stone-500 hover:text-white underline uppercase tracking-wider transition-colors">
|
||||
Nächste Frage laden
|
||||
</button>
|
||||
</div>
|
||||
<button @click="answered = false" class="mt-8 text-xs text-stone-500 hover:text-white underline uppercase tracking-wider transition-colors">
|
||||
Nochmal versuchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user