more quotes

README.md

@@ -1,22 +1,23 @@
 # Bitcoin Myth Buster
 
-Eine interaktive Web-App, die häufige Missverständnisse über Bitcoin aufklärt.
+Bitcoin Myth Buster ist eine interaktive Bildungsplattform, die darauf abzielt, häufige Missverständnisse über Bitcoin zu entlarven und aufzuklären. Die App bietet Benutzern die Möglichkeit, ihr Wissen über Bitcoin durch ein unterhaltsames und informatives Quiz-Format zu testen.
 
 ## Features
 
-- 30+ sorgfältig recherchierte Bitcoin-Mythen und Fakten
-- Interaktives Ja/Nein Quiz-Format
-- Detaillierte Erklärungen zu jedem Thema
-- Moderne, responsive Benutzeroberfläche
-- Optimiert für Desktop und Mobile
+- **Umfassende Inhalte**: Über 30 sorgfältig recherchierte Mythen und Fakten rund um Bitcoin.
+- **Interaktives Quiz**: Ein Ja/Nein-Format, das Benutzer herausfordert und gleichzeitig lehrreich ist.
+- **Detaillierte Erklärungen**: Zu jedem Mythos gibt es umfassende Erklärungen, die Benutzer aufklären und informieren.
+- **Moderne Benutzeroberfläche**: Ein ansprechendes Design mit modernen UI-Techniken wie Glassmorphism und ansprechenden Animationen.
+- **Responsives Design**: Optimiert für die Nutzung auf Desktop und mobilen Geräten.
 
 ## Technologien
 
-- React 18
-- TypeScript
-- Vite
-- Sass
-- Framer Motion für Animationen
+- **React 18**: Für die Erstellung der Benutzeroberfläche.
+- **TypeScript**: Zur Verbesserung der Codequalität und Wartbarkeit.
+- **Vite**: Für schnelle Entwicklungs- und Build-Prozesse.
+- **Sass**: Für erweiterte Styling-Optionen.
+- **Framer Motion**: Für ansprechende und flüssige Animationen.
+- **Speech Synthesis API**: Ermöglicht es der App, Erklärungen vorzulesen.
 
 ## Installation
 
@@ -36,12 +37,20 @@ npm run dev
 
 ## Deployment
 
-Die App wird automatisch via GitHub Actions auf GitHub Pages deployed, wenn Änderungen auf den main Branch gepusht werden.
+Die App wird automatisch über GitHub Actions auf GitHub Pages bereitgestellt, wenn Änderungen am Hauptbranch vorgenommen werden.
 
 ## Lizenz
 
-MIT
+Dieses Projekt steht unter der MIT-Lizenz.
 
 ## Beitragen
 
-Vorschläge und Pull Requests sind willkommen. Für größere Änderungen erstellen Sie bitte zuerst ein Issue, um zu diskutieren, was Sie ändern möchten.
+Beiträge sind willkommen! Bitte erstellen Sie ein Issue, um größere Änderungen zu diskutieren, bevor Sie einen Pull Request einreichen. Wir freuen uns über Vorschläge zur Verbesserung der Benutzererfahrung oder zur Erweiterung der Inhalte.
+
+## Zielgruppe
+
+Diese App richtet sich an alle, die mehr über Bitcoin erfahren möchten, sei es Anfänger oder erfahrene Benutzer, die ihr Wissen auffrischen möchten.
+
+## Kontakt
+
+Für Fragen oder Anregungen wenden Sie sich bitte an [Ihre E-Mail-Adresse].

src/App.tsx

@@ -4,6 +4,7 @@ import { ExplanationPopup } from './components/ExplanationPopup/ExplanationPopup
 import StartAnimation from './components/StartAnimation/StartAnimation';
 import { EducationalInsight } from './components/EducationalInsight';
 import { myths } from './data/myths';
+import { quotes, Quote } from './data/quotes';
 import { initializeButtonEffects } from './utils/buttonEffects';
 import './styles/main.scss';
 
@@ -13,6 +14,8 @@ function App() {
   const [isAnswerCorrect, setIsAnswerCorrect] = useState(false);
   const [showStartAnimation, setShowStartAnimation] = useState(true);
   const [showQuote, setShowQuote] = useState(false);
+  const [randomQuote, setRandomQuote] = useState<Quote | null>(null);
+  const [displayedQuotes, setDisplayedQuotes] = useState<Set<number>>(new Set());
 
   useEffect(() => {
     const cleanup = initializeButtonEffects();
@@ -23,13 +26,33 @@ function App() {
     const isCorrect = answer === myths[currentQuestionIndex].isMyth;
     setIsAnswerCorrect(isCorrect);
     setShowExplanation(true);
+    setRandomQuote(getRandomQuote());
   };
 
   const handleCloseExplanation = () => {
     setShowExplanation(false);
     setShowQuote(true);
   };
 
+  const getRandomQuote = () => {
+    if (displayedQuotes.size === quotes.length) {
+      // Alle Zitate wurden angezeigt, zurücksetzen
+      setDisplayedQuotes(new Set());
+    }
+
+    let randomIndex;
+    let randomQuote;
+    do {
+      randomIndex = Math.floor(Math.random() * quotes.length);
+      randomQuote = quotes[randomIndex];
+    } while (displayedQuotes.has(randomQuote.id));
+
+    // Füge das Zitat zu den angezeigten Zitaten hinzu
+    setDisplayedQuotes(prev => new Set(prev).add(randomQuote.id));
+
+    return randomQuote;
+  };
+
   if (showStartAnimation) {
     return <StartAnimation onComplete={() => setShowStartAnimation(false)} />;
   }
@@ -43,14 +66,26 @@ function App() {
         />
         {showExplanation && (
           <ExplanationPopup
-          explanation={myths[currentQuestionIndex].explanation}
-          isOpen={showExplanation}
-          isCorrect={isAnswerCorrect}
-          onClose={handleCloseExplanation}
-          sourceIds={myths[currentQuestionIndex].sourceIds} // Stelle sicher, dass dies übergeben wird
-        />
+            explanation={myths[currentQuestionIndex].explanation}
+            isOpen={showExplanation}
+            isCorrect={isAnswerCorrect}
+            onClose={handleCloseExplanation}
+            sourceIds={myths[currentQuestionIndex].sourceIds}
+          />
         )}
       </div>
+      {showQuote && randomQuote && (
+        <div className="quote-display">
+          <p>{randomQuote.text}</p>
+          <p>- {randomQuote.author}</p>
+        </div>
+      )}
+      {showQuote && (
+        <>
+          <div className="overlay" />
+          <button onClick={() => setShowQuote(false)} className="close-quote">Close Quote</button>
+        </>
+      )}
       {showQuote && (
         <>
           <div className="overlay" />

src/data/quotes.ts

@@ -114,5 +114,45 @@ export const quotes: Quote[] = [
     id: 22,
     text: "Bitcoin-Mining ist wie ein globaler Wettbewerb - die Belohnung wird alle vier Jahre halbiert, um Bitcoin knapp zu halten.",
     author: "Saifedean Ammous"
+  },
+  {
+    id: 23,
+    text: "Bitcoin ist nicht nur Geld für das Internet. Es ist das Internet des Geldes.",
+    author: "Andreas Antonopoulos"
+  },
+  {
+    id: 24,
+    text: "Bitcoin ist eine Wette auf die Zukunft der Menschheit.",
+    author: "Naval Ravikant"
+  },
+  {
+    id: 25,
+    text: "Bitcoin ist Gold 2.0.",
+    author: "Cameron Winklevoss"
+  },
+  {
+    id: 26,
+    text: "Wir haben nie daran gezweifelt, dass Bitcoin die beste Investition ist.",
+    author: "Tyler Winklevoss"
+  },
+  {
+    id: 27,
+    text: "Bitcoin verändert alles für das Bessere.",
+    author: "Jack Dorsey"
+  },
+  {
+    id: 28,
+    text: "Bitcoin ist eine brillante Idee.",
+    author: "Elon Musk"
+  },
+  {
+    id: 29,
+    text: "Bitcoin ist besser als Währung.",
+    author: "Bill Gates"
+  },
+  {
+    id: 30,
+    text: "Bitcoin ist eine Versicherung gegen die Korruption der Fiat-Währungen.",
+    author: "Chamath Palihapitiya"
   }
 ];