fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add interactive Plant Quiz component in cooperation with Plantlix.de

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 04:21:45 +02:00
parent 1ec938651d
commit 7f32dd9440
2 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlantQuiz.astro
+46
View File
@@ -0,0 +1,46 @@
---
// src/components/PlantQuiz.astro
---
<section class="py-24 bg-stone-950">
<div class="max-w-4xl mx-auto px-6 text-center">
<span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Spielerisch lernen</span>
<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="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>
</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>
</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>
</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>
</section>
src/pages/index.astro
+2
View File
@@ -8,6 +8,7 @@ import Projects from '../components/Projects.astro';
import Events from '../components/Events.astro';
import Biodiversity from '../components/Biodiversity.astro';
import PlantOfTheWeek from '../components/PlantOfTheWeek.astro';
import PlantQuiz from '../components/PlantQuiz.astro';
import FAQ from '../components/FAQ.astro';
import Footer from '../components/Footer.astro';
import SubpageMauer from '../components/SubpageMauer.astro';
@@ -28,6 +29,7 @@ import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
<Events />
<Biodiversity />
<PlantOfTheWeek />
<PlantQuiz />
<FAQ />
<Footer />
</div>