Neuste Version

frontend/src/components/QuestionCard.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function QuestionCard({ frage, antworten, onNext, isLast }) {
+export default function QuestionCard({ frage, antworten, onNext, onCheck, isLast }) {
   const [selected, setSelected] = useState([]);
   const [checked, setChecked] = useState(false); // wurde „Überprüfen“ gedrückt
 
@@ -17,7 +17,15 @@ export default function QuestionCard({ frage, antworten, onNext, isLast }) {
   const isCorrect = (idx) => antworten[idx].korrekt;
   const wasSelected = (idx) => selected.includes(idx);
 
-  const handleCheck = () => setChecked(true);
+  const handleCheck = () => {
+    setChecked(true);
+    const correct = antworten.every((antwort, idx) => {
+      return antwort.korrekt === selected.includes(idx);
+    });
+    if (onCheck) {
+      onCheck(correct);
+    }
+  };
 
   const handleNext = () => {
     setSelected([]);
@@ -26,7 +34,7 @@ export default function QuestionCard({ frage, antworten, onNext, isLast }) {
   };
 
   return (
-    <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded-xl shadow-lg transition transform hover:-translate-y-1 hover:shadow-xl">
+    <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded-xl shadow-lg transition transform hover:-translate-y-1 hover:shadow-xl animate-float-in">
       <h2 className="text-lg font-semibold mb-4">{frage}</h2>
       <div className="space-y-2">
         {antworten.map((antwort, idx) => {