From a431237b7011e5ef291cd72934d6ab243632eb58 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 06:44:31 +0200
Subject: [PATCH] Make plant quiz dynamic with fetch from Plantlix API and
 fallback

---
 src/components/PlantQuiz.astro | 105 ++++++++++++++++++++++++---------
 1 file changed, 77 insertions(+), 28 deletions(-)

diff --git a/src/components/PlantQuiz.astro b/src/components/PlantQuiz.astro
index 54c5cae..5259bb4 100644
--- a/src/components/PlantQuiz.astro
+++ b/src/components/PlantQuiz.astro
@@ -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>