# Eğiteknoloji Etkileşimli İçerik Player Kabuğu & MCP Sunucusu

Bu proje; **Eğiteknoloji** kurumsal marka kimliği ve renk paletine tam uyumlu, 16:9 oranını koruyarak tüm cihazlarda (akıllı tahta, tablet, mobil, masaüstü) milimetrik olarak ölçeklenen, SCORM 1.2 uyumlu ve yapay zeka ajanlarının doğrudan içerik üretebilmesi için tasarlanmış bir **Etkileşimli İçerik Player Kabuğu ve MCP (Model Context Protocol) Sunucusudur**.

---

## 🎨 1. Tasarım & Mimari Standartları

### Kurumsal Renk Paleti (Eğiteknoloji Standartları)
* **Ana Kurumsal (Primary):** `#052249` (Derin Okyanus Laciverti - Üst/alt çerçeve, kurumsal güven)
* **Ana Vurgu (Accent / CTA):** `#6cb22f` (Zümrüt Yeşili - Doğru cevaplar, onay, başarı butonları)
* **Destekleyici Mavi:** `#086cd9` (İlerleme çubukları, kart seçimi, hiperlinkler)
* **Açık Buz Mavisi:** `#8fc3ff` (Hover fonları, rozet zeminleri)
* **Açık Bölüm Fonu:** `#eaf4ff` (İçerik kartı zeminleri, bilgi kutuları)
* **Nötr Tuval Zemin:** `#f8f8f9` (Temiz ve sade açık arka plan)
* **Yüksek Kontrastlı Metin:** `#080808`

### 16:9 Otomatik Responsive Ölçekleme (Viewport Scaler)
* **Referans Çözünürlük:** `1280 x 720` px.
* `#stage-container` içerisindeki `#app-viewport`, ekran en-boy oranına göre `transform: scale(...)` ile bozulmadan, taşmadan ve bulanıklaşmadan ortalanır (letterbox / pillarbox).

### Modüler ve Opsiyonel UI Kontrolleri (`features`)
Her içerikte tüm butonların olması zorunlu değildir. İhtiyaca göre konfigürasyondan `true/false` olarak yönetilir:
```javascript
features: {
  audio: true,          // Ses açma/kapatma butonu & efektler
  navigation: true,     // İleri / Geri butonları
  playButton: false,    // Başlangıç kapak ekranı ve "Başla" butonu
  score: true,          // Skor / Puan rozeti
  timer: true,          // Süre sayacı
  lives: true,          // Can sistemi (❤️❤️❤️)
  fullscreen: true,     // Tam ekran butonu
  progressBar: true     // İlerleme çubuğu
},
initialLives: 3,        // Başlangıç can sayısı (1-5)
timerMode: "stopwatch", // "stopwatch" (kronometre) veya "countdown" (geri sayım)
timerDuration: 60       // Geri sayım saniyesi
```

### 🧠 Arka Plan Durum (State) & Telemetri API'si
Geliştiriciler veya AI ajanları içerik içinde doğrudan şu metodları çağırabilir:
* `shell.addScore(points)`: Puan ekler.
* `shell.subtractScore(points)`: Puan düşürür.
* `shell.loseLife(1)`: Bir can eksiltir. Canlar tükenince otomatik başarısızlık modalı açılır.
* `shell.gainLife(1)`: Ekstra can verir.
* `shell.startTimer("stopwatch" | "countdown", duration)`: Süreyi başlatır. Geri sayımda süre bitince "Süre Doldu" ekranı açılır.
* `shell.getTelemetryData()`: `{ score, elapsedSeconds, formattedTime, livesRemaining, isCompleted }` nesnesini döndürür. SCORM veya harici LMS raporlama için hazırdır.

### Dahili Ses Sentezleyici (Procedural Web Audio API)
Harici `.mp3` dosyalarına ihtiyaç duymadan, tarayıcının yerel Web Audio API'si ile doğru, yanlış, buton tıklama ve bölüm sonu zafer fanfarı çalar.

### SCORM 1.2 Desteği
* `imsmanifest.xml` paketi hazırdır.
* `core/scorm-api.js` aracılığıyla LMS mevcutsa `cmi.core.score.raw`, `cmi.core.lesson_status` verilerini otomatik iletir; LMS yoksa bağımsız (mock) modda sessizce çalışmaya devam eder.

---

## 🚀 2. MCP (Model Context Protocol) Kurulumu ve Entegrasyonu

Bu MCP sunucusu; **Antigravity IDE**, **Claude Desktop**, **Cursor** veya herhangi bir MCP istemcisine bağlanabilir.

### `mcp_config.json` veya `claude_desktop_config.json` Tanımı:

```json
{
  "mcpServers": {
    "egiteknoloji-interactive": {
      "command": "node",
      "args": [
        "d:\\wamp64\\www\\mcp\\etkilesimli-icerik\\mcp-server\\server.js"
      ]
    }
  }
}
```

---

## 🛠️ 3. MCP Sunucusunun Sunduğu Yetenekler (Tools)

| Tool Adı | Açıklama |
| :--- | :--- |
| `get_framework_specs` | 16:9 boyut kurallarını, Eğiteknoloji renk kodlarını, SCORM ve ses API'sini döndürür. |
| `list_activity_templates` | Desteklenen etkinlik türlerini (`matching`, `quiz`) ve beklenen JSON veri şemalarını listeler. |
| `scaffold_interactive_activity` | Yapay zeka ajanının ürettiği sorular/kavramlar ile sıfırdan çalışan, paketlenmiş 16:9 SCORM projesi oluşturur. |

---

## 💡 4. Yapay Zeka Ajanına Verilebilecek Örnek İstemler

MCP bağlandıktan sonra ajana şu şekilde komut verebilirsiniz:

> *"Bana 4. sınıf Fen Bilgisi 'Besinlerimiz ve Görevleri' konusu için 4 çiftli bir Eğiteknoloji eşleştirme oyunu hazırla. Ses olsun, süre sayacı olmasın, skor aktif olsun."*

Ajan arka planda:
1. `get_framework_specs` ile renk ve kuralları inceler.
2. `scaffold_interactive_activity` tool'unu çağırarak içeriği tek seferde üretir.
3. Çıktı olarak WAMP veya yerel klasörde doğrudan LMS'e yüklenebilecek SCORM hazır bir paket teslim eder.

---

## 📂 5. Klasör Hiyerarşisi

```
etkilesimli-icerik/
├── index.html                  # Canlı demo & etkinlik değiştirici (Eşleştirme + Quiz)
├── imsmanifest.xml             # SCORM 1.2 manifest dosyası
├── logo_colorful_with_white_text.png
├── logo_icon_colorful.png
├── core/
│   ├── shell.css               # Eğiteknoloji tasarım sistemi & 16:9 ölçekleyici stilleri
│   ├── shell.js                # Shell yönetimi, timer, skor, navigasyon, responsive ölçekleyici
│   ├── audio-synth.js          # Dahili Web Audio API ses motoru
│   └── scorm-api.js            # SCORM 1.2 LMS wrapper & mock
├── activities/
│   ├── matching/               # 1. Örnek: Tıkla-Eşleştir (Click to Pair) Oyunu
│   │   ├── matching.css
│   │   └── matching.js
│   └── quiz/                   # 2. Örnek: Çoktan Seçmeli Test Motoru
│       ├── quiz.css
│       └── quiz.js
└── mcp-server/                 # MCP Sunucusu (Antigravity & AI Ajan Entegrasyonu)
    ├── package.json
    └── server.js
```

---

## 🖥️ 6. Canlı Önizleme
Tarayıcınızda doğrudan `d:\wamp64\www\mcp\etkilesimli-icerik\index.html` dosyasını açabilir veya WAMP sunucunuz aktifse `http://localhost/mcp/etkilesimli-icerik/` adresinden test edebilirsiniz.