🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../l7-pro-2-e-learning-2023-Epolleke/README.md

# English Vocabulary Learning Application

🎓 Een interactieve webapplicatie voor het oefenen van Engelse woordjes met realtime feedback.

## 📋 Projectbeschrijving

Dit project is een complete e-learning applicatie waarmee studenten Engelse woordjes kunnen leren en oefenen. De applicatie biedt realtime feedback zonder pagina herladingen, dankzij het gebruik van AJAX, JSON, en PHP backend.

### ✨ Belangrijkste Functies

- ✅ **Realtime woordcontrole** - Instant feedback met AJAX/JSON
- ✅ **Meerdere categorieën** - Animals, Food, Verbs, Colors, etc.
- ✅ **Moeilijkheidsniveaus** - Beginner, Intermediate, Advanced
- ✅ **Voortgangsregistratie** - Automatische tracking van scores
- ✅ **Mastery systeem** - Woorden worden beheerst na 3 correcte antwoorden
- ✅ **Statistieken dashboard** - Overzicht van prestaties
- ✅ **Responsive design** - Werkt op desktop, tablet en mobiel
- ✅ **Video tutorial** - Ingebouwde instructievideo

## 🛠️ Technische Stack

- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **Backend**: PHP 7.4+ / 8.2
- **Database**: MySQL 5.7+ / MariaDB 10.3+ / MySQL 8.0
- **AJAX**: Fetch API voor asynchrone communicatie
- **Data Format**: JSON voor API responses
- **Deployment**: Docker / XAMPP / WAMP / MAMP

## 📦 Installatie

### 🐳 Optie 1: Docker (Aanbevolen)

**Voordelen**: Snelle setup, geen conflicten, consistent op elk systeem

```powershell
# Start alle services met één commando
docker-compose up -d

# Open de applicatie
# Website: http://localhost
# phpMyAdmin: http://localhost:8080
```

**Zie [DOCKER.md](DOCKER.md) voor complete Docker instructies.**

---

### 💻 Optie 2: XAMPP/WAMP/MAMP

### 💻 Optie 2: XAMPP/WAMP/MAMP

#### Vereisten

- **XAMPP** / **WAMP** / **MAMP** of vergelijkbare lokale server
  - Apache 2.4+
  - PHP 7.4+ / 8.2
  - MySQL 5.7+ / MariaDB 10.3+
- Moderne webbrowser (Chrome, Firefox, Safari, Edge)

#### Stap 1: Download Project

```powershell
# Clone de repository
git clone https://github.com/jouw-gebruikersnaam/l7-pro-2-e-learning-2023-Epolleke.git

# Or download as ZIP en pak uit
```

#### Stap 2: Project Plaatsen

1. Kopieer de projectmap naar je webserver directory:
   - **XAMPP**: `C:\xampp\htdocs\english-learning`
   - **WAMP**: `C:\wamp64\www\english-learning`
   - **MAMP**: `/Applications/MAMP/htdocs/english-learning`

#### Stap 3: Database Configureren

1. Start Apache en MySQL via XAMPP/WAMP/MAMP
2. Open phpMyAdmin: `http://localhost/phpmyadmin`
3. Importeer de database:
   - Klik op "Import"
   - Selecteer `database/schema.sql`
   - Klik "Go"

**Of gebruik deze SQL query:**

```sql
-- Importeer het complete schema
source C:/path/to/project/database/schema.sql;
```

#### Stap 4: Database Verbinding Configureren

**Let op**: Als je Docker gebruikt, is dit niet nodig! Docker configureert dit automatisch.

Open `php/config.php` en pas aan indien nodig:

```php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');  // Vaak leeg bij XAMPP
define('DB_NAME', 'english_learning_app');
```

#### Stap 5: Test de Applicatie

1. Open je browser
2. Ga naar: `http://localhost/english-learning`
3. De applicatie zou nu moeten werken!

## 🎯 Gebruik

### Practice Session Starten

1. **Selecteer Categorie**: Kies een woordcategorie (bijv. Animals, Food)
2. **Kies Moeilijkheidsgraad**: Beginner, Intermediate, of Advanced
3. **Aantal Woorden**: Bepaal hoeveel woorden je wilt oefenen (5-50)
4. **Start Practice Session**: Klik om te beginnen

### Woordjes Oefenen

1. Je ziet een Engels woord op het scherm
2. Typ de Nederlandse vertaling in het invoerveld
3. Klik "Check Answer" of druk Enter
4. Krijg direct feedback (correct/incorrect)
5. Het systeem gaat automatisch naar het volgende woord

### Statistieken Bekijken

- Scroll naar de "Your Progress" sectie
- Bekijk je totale scores en voortgang
- Zie welke woorden je beheerst hebt
- Check je success rate

## 📁 Projectstructuur

```
l7-pro-2-e-learning-2023-Epolleke/
├── index.html                 # Hoofdpagina
├── css/
│   └── style.css             # Stylesheet
├── js/
│   └── app.js                # JavaScript applicatie logica
├── php/
│   ├── config.php            # Database configuratie
│   ├── get_words.php         # API: Woorden ophalen
│   ├── check_answer.php      # API: Antwoord controleren
│   ├── get_categories.php    # API: Categorieën ophalen
│   └── get_stats.php         # API: Statistieken ophalen
├── database/
│   ├── schema.sql            # Database schema + voorbeelddata
│   └── database_model.md     # Database documentatie (ERD)
├── docs/
│   └── video_script.md       # Script voor instructievideo
└── README.md                 # Deze documentatie
```

## 🗃️ Database Model

### Entiteiten

#### 1. **CATEGORIES** (Categorieën)
- `category_id` (PK)
- `category_name`
- `description`

#### 2. **WORDS** (Woorden)
- `word_id` (PK)
- `english_word`
- `dutch_translation`
- `category_id` (FK)
- `difficulty_level`

#### 3. **USER_PROGRESS** (Voortgang)
- `progress_id` (PK)
- `session_id`
- `word_id` (FK)
- `attempts`
- `correct`
- `is_mastered`

#### 4. **PRACTICE_SESSIONS** (Sessies)
- `session_log_id` (PK)
- `session_id`
- `start_time`
- `total_words`
- `correct_answers`
- `score_percentage`

### Relaties

- **CATEGORY → WORDS** (1:N)
- **WORDS → USER_PROGRESS** (1:N)
- **SESSION → USER_PROGRESS** (1:N)

Zie `database/database_model.md` voor volledig ERD en uitleg.

## 🎥 Instructievideo

De applicatie bevat een sectie voor een instructievideo. Om deze te activeren:

1. Maak een instructievideo volgens het script in `docs/video_script.md`
2. Upload de video naar YouTube
3. Kopieer de video ID uit de YouTube URL
4. Vervang `VIDEO_ID` in `index.html` regel 36:

```html
<iframe src="https://www.youtube.com/embed/JOUW_VIDEO_ID">
```

**Voorbeeld:**
- YouTube URL: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
- Video ID: `dQw4w9WgXcQ`

## 🔧 API Endpoints

### GET `/php/get_words.php`
Haal woorden op uit de database

**Parameters:**
- `category` (optional): Filter op categorie ID
- `difficulty` (optional): beginner, intermediate, advanced
- `limit` (optional): Maximum aantal woorden (default: 10)

**Response:**
```json
{
  "success": true,
  "data": [
    {
      "word_id": 1,
      "english_word": "cat",
      "dutch_translation": "kat",
      "difficulty_level": "beginner",
      "category_name": "Animals"
    }
  ],
  "count": 1
}
```

### POST `/php/check_answer.php`
Controleer het antwoord van de gebruiker

**Body:**
```json
{
  "word_id": 1,
  "answer": "kat",
  "session_id": "session_123456"
}
```

**Response:**
```json
{
  "success": true,
  "correct": true,
  "correct_answer": "kat",
  "english_word": "cat",
  "progress": {
    "attempts": 3,
    "correct": 3,
    "is_mastered": true
  }
}
```

### GET `/php/get_categories.php`
Haal alle categorieën op

**Response:**
```json
{
  "success": true,
  "data": [
    {
      "category_id": 1,
      "category_name": "Animals",
      "description": "Words related to animals",
      "word_count": 8
    }
  ]
}
```

### GET `/php/get_stats.php`
Haal statistieken op voor een sessie

**Parameters:**
- `session_id`: Unieke sessie ID

**Response:**
```json
{
  "success": true,
  "stats": {
    "total_attempts": 15,
    "total_correct": 12,
    "mastered_words": 3,
    "success_rate": 80.00
  },
  "recent_words": [...]
}
```

## 🐛 Troubleshooting

### Database Connectie Fout

**Probleem:** "Database connection failed"

**Oplossing:**
1. Controleer of MySQL draait in XAMPP/WAMP
2. Verifieer database credentials in `php/config.php`
3. Controleer of database `english_learning_app` bestaat

### AJAX Fouten

**Probleem:** "Failed to fetch words"

**Oplossing:**
1. Controleer of Apache draait
2. Verifieer dat je via localhost toegang hebt
3. Check browser console voor specifieke errors (F12)

### Geen Woorden Beschikbaar

**Probleem:** "No words found"

**Oplossing:**
1. Importeer `database/schema.sql` opnieuw
2. Voeg handmatig woorden toe via phpMyAdmin
3. Check of de categorie/difficulty filters correct zijn

### Styling Werkt Niet

**Probleem:** Pagina heeft geen styling

**Oplossing:**
1. Controleer of `css/style.css` bestaat
2. Verifieer pad in `index.html`
3. Hard refresh: Ctrl + F5 (Windows) of Cmd + Shift + R (Mac)

## 📚 Leerdoelen

Na het voltooien van dit project beheers je:

- [x] PHP en MySQL verbindingen opzetten
- [x] Apache/MySQL/PHP omgeving configureren
- [x] AJAX requests maken met Fetch API
- [x] JSON data verwerken
- [x] Database modelleren (ERD)
- [x] Conceptueel vs Fysiek model
- [x] Database entiteiten, attributen, instanties
- [x] Unique identifiers (Primary Keys)
- [x] Foreign key relaties leggen
- [x] Realtime applicaties zonder page refresh
- [x] Video's embedden in websites

## 🔐 Beveiliging

**Let op:** Dit is een educatief project. Voor productie gebruik:

- [ ] Implementeer authenticatie en autorisatie
- [ ] Gebruik prepared statements (al geïmplementeerd)
- [ ] Voeg input validatie toe
- [ ] Implementeer rate limiting
- [ ] Gebruik HTTPS
- [ ] Sla wachtwoorden gehasht op
- [ ] Implementeer CSRF tokens

## 🤝 Bijdragen

Dit is een schoolproject, maar suggesties zijn welkom!

1. Fork het project
2. Maak een feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit je changes (`git commit -m 'Add some AmazingFeature'`)
4. Push naar de branch (`git push origin feature/AmazingFeature`)
5. Open een Pull Request

## 📝 Licentie

Dit project is gemaakt voor educatieve doeleinden als onderdeel van de ROC Midden Nederland opleiding.

## 👤 Auteur

**Ciana**
- School: ROC Midden Nederland
- Opleiding: ICT
- Project: L7 Pro 2 E-Learning 2023

## 🙏 Acknowledgments

- ROC Midden Nederland voor de opdracht
- Alle docenten voor de begeleiding
- Online resources voor inspiratie

---

**Happy Learning! 🎓📚**

Voor vragen of problemen, maak een issue aan in de GitHub repository.

🎯 Available Actions