Production

README.md

@@ -1,47 +1,75 @@
-# Polyglot Quiz App
+# Polyglot Boost App
 
-A simple web-based quiz app for learning French and Spanish. The app fetches questions from local JSON files and provides instant feedback and scoring.
+A modern web-based app for learning Kinyarwanda, French, and Spanish through quizzes and flashcards. The app features instant feedback, scoring, and a beautiful, responsive UI. No backend required—all data is local.
 
 ## Features
-- Choose between French and Spanish quizzes
-- Multiple-choice questions
-- Progressive difficulty (Easy, Medium, Hard) with color badges
-- Leaderboard: stores and displays top 10 high scores
-- Celebratory confetti animation for high scores or finishing 25+ questions
-- Progress bar and score tracking
-- Responsive and modern UI
-- No backend required (all data is local)
+
+- **Language Support:** Kinyarwanda, French, Spanish
+- **Quiz Mode:** Multiple-choice questions, progressive difficulty, color badges
+- **Flashcards:** Interactive flashcards with flip, navigation, and review tracking
+- **Leaderboard:** Top 10 high scores, confetti celebration for achievements
+- **Login & Account:** Simple local login/registration to track progress
+- **Progress Tracking:** Score, progress bar, reviewed flashcard count
+- **Modern UI:** Sidebar navigation, attractive cards, mobile-friendly
+- **No Backend:** All data stored locally in JSON and browser storage
 
 ## How to Use
 
 1. **Download or Clone the Repository**
-   - Place the `index.html`, `styles.css`, `script.js`, and the `questions` folder (with `french.json` and `spanish.json`) in the same directory.
+
+   - Place all files and folders in the same directory.
 
 2. **Open the App**
+
    - Open `index.html` in your web browser (double-click or right-click and choose "Open with browser").
 
-3. **Select a Language**
-   - Use the language dropdown at the top to choose either French or Spanish.
+3. **Login or Register**
+
+   - Create an account or log in to track your learning progress.
+
+4. **Select a Language & Mode**
 
-4. **Take the Quiz**
-   - Answer the questions. Your progress, score, and question difficulty will be displayed.
-   - Use the leaderboard to see top scores and celebrate with confetti for high achievements!
-   - At the end, see your final score and restart if you wish.
+   - Choose Kinyarwanda, French, or Spanish. Switch between Quiz and Flashcards using the sidebar.
+
+5. **Learn & Track Progress**
+   - Answer quiz questions, review flashcards, and see your score and review count update in real time.
 
 ## Folder Structure
+
 ```
 polyglot-boost-app/
 ├── index.html
-├── styles.css
-├── script.js
+├── landing.css
+├── landing.js
+├── README.md
+├── data/
+├── flashcards/
+│   ├── flashcards.css
+│   ├── flashcards.html
+│   ├── flashcards.js
+│   └── flashcards.json
+├── images/
 ├── questions/
 │   ├── french.json
+│   ├── ikinyarwanda.json
 │   └── spanish.json
+├── quiz/
+│   ├── confetti.js
+│   ├── leaderboardManager.js
+│   ├── quiz.html
+│   ├── script.js
+│   ├── site.webmanifest
+│   └── styles.css
+├── survey/
+│   └── survey.html
 ```
 
 ## Customization
-- To add more questions, edit the `french.json` or `spanish.json` files in the `questions` folder.
-- To add more languages, create a new JSON file in the same format and update the language selector in `index.html` and `script.js`.
+
+- To add more questions, edit the relevant JSON files in the `questions` or `flashcards` folders.
+- To add more languages, create a new JSON file and update the language selector and logic in the app.
+- To change the look, edit the CSS files for each module.
 
 ## Credits
+
 - Developed by Benjamin, 2025.

index.html

@@ -37,7 +37,7 @@ <h1>Learn Kinyarwanda with Interactive Flashcards</h1>
             </div>
         </div>
         <div class="hero-image">
-            <img src="/Landing/hero-image.png" alt="Kinyarwanda Flashcards Preview">
+            <img src="/images/hero-image.png" alt="Kinyarwanda Flashcards Preview">
         </div>
     </section>