feat: se aplican varios fix a las pruebas

README.md

@@ -22,6 +22,12 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
     - **Smart Notifications**: Recordatorios de fechas límite y alertas in-app.
     - **Global i18n**: Interfaz multilingüe (EN, ES, PT) con persistencia por usuario.
     - **Document-Based Learning**: Soporte para actividades de lectura (PDF, DOCX, PPTX).
+    - **AI English Teacher**: Persona especializada para generación de contenidos y tutoría personalizada.
+    - **AI Audio Evaluation**: Evaluación inteligente de pronunciación y contenido con feedback en lenguaje natural.
+    - **Custom AI Quizzes**: Generación de quices con contexto pedagógico y tipo de pregunta personalizable (opción múltiple, V/F, etc.).
+    - **Course Deletion**: Funcionalidad de eliminación de cursos con verificación de permisos y limpieza en cascada.
+    - **Gamified Activities**: Nuevos tipos de bloques interactivos para niños y jóvenes, incluyendo Juegos de Memoria y Puntos Calientes (Hotspots).
+    - **Gamified Activities**: Nuevos tipos de bloques interactivos para niños y jóvenes, incluyendo Juegos de Memoria y Puntos Calientes (Hotspots).
 
 ##  Requisitos del Sistema
 
@@ -282,6 +288,22 @@ Funcionalidades inteligentes 100% locales y gratuitas.
 #### POST /lessons/{id}/transcribe
 Inicia el proceso de transcripción y traducción para una lección de video/audio.
 
+#### POST /audio/evaluate
+Evalúa una respuesta oral del estudiante utilizando IA.
+
+#### POST /lessons/{id}/generate-quiz
+Genera un quiz basado en el contenido de la lección.
+- **Cuerpo ( QuizAIRequest ):**
+  ```json
+  {
+    "context": "focused on irregular verbs",
+    "quiz_type": "true-false"
+  }
+  ```
+
+#### DELETE /courses/{id}
+Elimina un curso y todos sus contenidos relacionados (módulos, lecciones, assets).
+
 - **Procesamiento Asíncrono**: Despacha una tarea en segundo plano que utiliza Whisper para transcripción y Ollama para generar la traducción y el resumen inteligente.
 - **Cuerpo de la Petición**: Vacío.
 

roadmap.md

@@ -130,7 +130,10 @@
 - [x] **Quices de Código**: Desafíos interactivos con reproductor tipo IDE (Completado)
 - [x] **Identificación Visual**: Quices de "Puntos Calientes" (Hotspots) en imágenes (Completado)
 - [ ] **Tutor de IA Integrado**: Asistente basado en RAG dentro del reproductor de lecciones
-- [x] **Evaluaciones por Audio**: Preguntas con respuesta oral para idiomas (Completado)
+- [x] **Evaluaciones por Audio**: Preguntas con respuesta oral para idiomas con feedback de IA detallado (Completado)
+- [x] **Eliminación de Cursos**: Gestión completa del ciclo de vida del contenido (Completado)
+- [x] **Quices con Contexto IA**: Generación de evaluaciones con enfoque y tipo personalizable (Completado)
+- [x] **Actividades Gamificadas**: Nuevos bloques de Juego de Memoria e Identificación Visual (Hotspots) (Completado)
 - [x] **Marcadores de Video**: Preguntas que pausan el video en timestamps específicos (Completado)
 
 ## Fase 12: Generador de Cursos "Mágico" con IA ✅
@@ -151,11 +154,9 @@
 
 ---
 
-## Estado Actual y Próximas Prioridades
+**Estado Actual**: La plataforma cuenta con un motor de IA avanzado que permite la generación de contenidos con una "Persona" docente experta, evaluaciones de audio automatizadas y quices personalizables con contexto. Se ha completado el ciclo de vida de gestión de cursos con la integración de la funcionalidad de borrado.
 
-**Madurez de la Plataforma**: El núcleo multi-tenant es estable, escalable y está optimizado para alto rendimiento con IA Local.
+**Próximas Prioridades**:
-
+1. **QA y Estabilidad**: Verificación del flujo completo de evaluación en entornos de producción.
-**Prioridades Inmediatas**:
-1. **Marcadores de Video & Audio**: Evaluaciones integradas en contenido multimedia.
 2. **IA Teaching Assistant**: Tutor RAG personalizado por curso.
 3. **Rutas de Aprendizaje**: Recomendaciones basadas en el historial.

services/cms-service/src/handlers.rs

@@ -189,6 +189,17 @@ pub struct GradingPayload {
     pub drop_count: i32,
 }
 
+#[derive(Deserialize)]
+pub struct QuizAIRequest {
+    pub context: Option<String>,
+    pub quiz_type: Option<String>,
+}
+
+#[derive(Deserialize)]
+pub struct ReviewTextRequest {
+    pub text: String,
+}
+
 pub async fn create_course(
     Org(org_ctx): Org,
     claims: common::auth::Claims,
@@ -1000,6 +1011,7 @@ pub async fn generate_quiz(
     claims: common::auth::Claims,
     State(pool): State<PgPool>,
     Path(id): Path<Uuid>,
+    Json(quiz_req): Json<QuizAIRequest>,
 ) -> Result<Json<serde_json::Value>, StatusCode> {
     tracing::info!("Received quiz generation request for lesson: {}", id);
     // 1. Fetch lesson
@@ -1049,6 +1061,20 @@ pub async fn generate_quiz(
         )
     };
 
+    let mut system_prompt = "You are an expert English Teacher. Generate 3 questions based on the lesson content to test the student's understanding of English grammar, vocabulary, or comprehension. Instructions can be in Spanish or English. Return ONLY a JSON object with a field 'blocks' which is an array of content blocks. Each block in the array must follow this exact structure: { \"id\": \"string-uuid\", \"type\": \"quiz\", \"title\": \"Quiz: Concept Check\", \"quiz_data\": { \"questions\": [ { \"id\": \"q-string\", \"type\": \"multiple-choice\", \"question\": \"String\", \"options\": [\"Option 1\", \"Option 2\", \"Option 3\", \"Option 4\"], \"correct\": [0], \"explanation\": \"Explain why the answer is correct.\" } ] } }. Important: 'correct' MUST be an array of integers.".to_string();
+
+    if let Some(ctx) = &quiz_req.context {
+        if !ctx.is_empty() {
+            system_prompt.push_str(&format!(" Additional Context: {}", ctx));
+        }
+    }
+
+    if let Some(qtype) = &quiz_req.quiz_type {
+        if !qtype.is_empty() {
+            system_prompt.push_str(&format!(" Question Type to use: {}. If the type is 'multiple-choice', follow the structure above. If it's something else, adapt the block 'type' (e.g., 'true-false') accordingly, but keep it within the 'blocks' array.", qtype));
+        }
+    }
+
     let mut request = client
         .post(&url)
         .json(&json!({
@@ -1056,7 +1082,7 @@ pub async fn generate_quiz(
             "messages": [
                 {
                     "role": "system",
-                    "content": "You are an expert English Teacher. Generate 3 multiple-choice questions based on the lesson content to test the student's understanding of English grammar, vocabulary, or comprehension. Instructions can be in Spanish or English. Return ONLY a JSON object with a field 'blocks' which is an array of content blocks. Each block in the array must follow this exact structure: { \"id\": \"string-uuid\", \"type\": \"quiz\", \"title\": \"Quiz: Concept Check\", \"quiz_data\": { \"questions\": [ { \"id\": \"q-string\", \"type\": \"multiple-choice\", \"question\": \"String\", \"options\": [\"Option 1\", \"Option 2\", \"Option 3\", \"Option 4\"], \"correct\": [0], \"explanation\": \"Explain why the answer is correct.\" } ] } }. Important: 'correct' MUST be an array of integers."
+                    "content": system_prompt
                 },
                 {
                     "role": "user",
@@ -3282,3 +3308,172 @@ RULES:
 
     Ok(Json(course))
 }
+
+pub async fn delete_course(
+    Org(org_ctx): Org,
+    claims: Claims,
+    State(pool): State<PgPool>,
+    headers: axum::http::HeaderMap,
+    Path(id): Path<Uuid>,
+) -> Result<StatusCode, StatusCode> {
+    let is_super_admin = claims.role == "admin"
+        && claims.org == Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap();
+
+    // 1. Check if course exists and belongs to org (or if requester is super admin)
+    let course = if is_super_admin {
+        sqlx::query_as::<_, Course>("SELECT * FROM courses WHERE id = $1")
+            .bind(id)
+            .fetch_one(&pool)
+            .await
+    } else {
+        sqlx::query_as::<_, Course>("SELECT * FROM courses WHERE id = $1 AND organization_id = $2")
+            .bind(id)
+            .bind(org_ctx.id)
+            .fetch_one(&pool)
+            .await
+    }
+    .map_err(|_| StatusCode::NOT_FOUND)?;
+
+    // 2. Additional permission check for instructors
+    if !is_super_admin && claims.role == "instructor" && course.instructor_id != claims.sub {
+        return Err(StatusCode::FORBIDDEN);
+    }
+
+    // 3. Delete course using DB function
+    let mut conn = pool
+        .acquire()
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let ip = headers
+        .get("x-forwarded-for")
+        .and_then(|h| h.to_str().ok())
+        .or_else(|| headers.get("x-real-ip").and_then(|h| h.to_str().ok()))
+        .map(|s| s.to_string());
+
+    let ua = headers
+        .get("user-agent")
+        .and_then(|h| h.to_str().ok())
+        .map(|s| s.to_string());
+
+    crate::db_util::set_session_context(
+        &mut conn,
+        Some(claims.sub),
+        Some(org_ctx.id),
+        ip,
+        ua,
+        Some("USER_EVENT".to_string()),
+    )
+    .await
+    .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let success = sqlx::query_scalar::<_, bool>("SELECT fn_delete_course($1, $2)")
+        .bind(id)
+        .bind(course.organization_id)
+        .fetch_one(&mut *conn)
+        .await
+        .map_err(|e| {
+            tracing::error!("Delete course failed: {}", e);
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    if !success {
+        return Err(StatusCode::NOT_FOUND);
+    }
+
+    log_action(
+        &pool,
+        org_ctx.id,
+        claims.sub,
+        "DELETE",
+        "Course",
+        id,
+        json!({ "title": course.title }),
+    )
+    .await;
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn review_text(
+    _: Org,
+    _claims: Claims,
+    State(_pool): State<PgPool>,
+    Json(payload): Json<ReviewTextRequest>,
+) -> Result<Json<serde_json::Value>, StatusCode> {
+    if payload.text.trim().is_empty() {
+        return Err(StatusCode::BAD_REQUEST);
+    }
+
+    // Configuration
+    let provider = env::var("AI_PROVIDER").unwrap_or_else(|_| "openai".to_string());
+    let client = reqwest::Client::new();
+
+    let (url, auth_header, model) = if provider == "local" {
+        let base_url =
+            env::var("LOCAL_OLLAMA_URL").unwrap_or_else(|_| "http://localhost:11434".to_string());
+        let model = env::var("LOCAL_LLM_MODEL").unwrap_or_else(|_| "llama3".to_string());
+        (
+            format!("{}/v1/chat/completions", base_url),
+            "".to_string(),
+            model,
+        )
+    } else {
+        let api_key = env::var("OPENAI_API_KEY").map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+        (
+            "https://api.openai.com/v1/chat/completions".to_string(),
+            format!("Bearer {}", api_key),
+            "gpt-4o".to_string(),
+        )
+    };
+
+    let system_prompt = "You are an expert English Teacher and Editor. Analyze the following text and provide suggestions for improvement. Focus on: 1. Grammar and spelling. 2. Tone (should be professional yet encouraging). 3. Clarity and conciseness. 4. Better vocabulary choices. Return ONLY a JSON object with a field 'suggestion' containing the improved version of the text, and a field 'comments' which is a brief list of what was improved.";
+
+    let mut request = client
+        .post(&url)
+        .json(&json!({
+            "model": model,
+            "messages": [
+                {
+                    "role": "system",
+                    "content": system_prompt
+                },
+                {
+                    "role": "user",
+                    "content": payload.text
+                }
+            ],
+            "response_format": { "type": "json_object" }
+        }));
+
+    if !auth_header.is_empty() {
+        request = request.header("Authorization", auth_header);
+    }
+
+    let response = request.send().await.map_err(|e| {
+        tracing::error!("Text review request failed: {}", e);
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    if !response.status().is_success() {
+        let err_body = response.text().await.unwrap_or_default();
+        tracing::error!("Text review API error: {}", err_body);
+        return Err(StatusCode::INTERNAL_SERVER_ERROR);
+    }
+
+    let review_data: serde_json::Value = response
+        .json()
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    
+    let content_str = review_data["choices"][0]["message"]["content"]
+        .as_str()
+        .unwrap_or("{}");
+
+    let parsed_review: serde_json::Value = serde_json::from_str(content_str).unwrap_or(json!({
+        "suggestion": payload.text,
+        "comments": "No suggestions available at this time."
+    }));
+
+    Ok(Json(parsed_review))
+}

services/cms-service/src/main.rs

@@ -87,7 +87,9 @@ async fn main() {
         )
         .route(
             "/courses/{id}",
-            get(handlers::get_course).put(handlers::update_course),
+            get(handlers::get_course)
+                .put(handlers::update_course)
+                .delete(handlers::delete_course),
         )
         .route("/courses/{id}/publish", post(handlers::publish_course))
         .route("/courses/{id}/outline", get(handlers::get_course_outline))
@@ -140,6 +142,7 @@ async fn main() {
         .route("/users", get(handlers::get_all_users))
         .route("/users/{id}", axum::routing::put(handlers::update_user))
         .route("/audit-logs", get(handlers::get_audit_logs))
+        .route("/api/ai/review-text", post(handlers::review_text))
         .route("/api/assets/upload", post(handlers::upload_asset))
         .route("/api/assets/{id}", delete(handlers::delete_asset))
         .route("/courses/{id}/assets", get(handlers::get_course_assets))

web/experience/package-lock.json

@@ -568,6 +568,7 @@
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -630,6 +631,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
       "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.50.0",
         "@typescript-eslint/types": "8.50.0",
@@ -1103,6 +1105,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1513,6 +1516,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2211,6 +2215,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2373,6 +2378,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3797,6 +3803,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -5138,6 +5145,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5338,6 +5346,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -5349,6 +5358,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -6291,6 +6301,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6468,6 +6479,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx

@@ -301,9 +301,9 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                                     return (
                                                         <HotspotPlayer
                                                             title={block.title}
-                                                            description={block.content || ""}
+                                                            description={block.description || ""}
-                                                            imageUrl={block.url || ""}
+                                                            imageUrl={block.imageUrl || ""}
-                                                            hotspots={block.metadata?.hotspots || []}
+                                                            hotspots={block.hotspots || []}
                                                             onComplete={(score) => handleBlockComplete(block.id, score)}
                                                         />
                                                     );
@@ -311,7 +311,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                                     return (
                                                         <MemoryPlayer
                                                             title={block.title}
-                                                            pairs={block.metadata?.pairs || []}
+                                                            pairs={block.pairs || []}
                                                             onComplete={(score) => handleBlockComplete(block.id, score)}
                                                         />
                                                     );

web/experience/src/components/blocks/HotspotPlayer.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useRef } from "react";
 import Image from "next/image";
 import { Search, CheckCircle, XCircle, MousePointer2 } from "lucide-react";
+import { getImageUrl } from "@/lib/api";
 
 interface Hotspot {
     id: string;
@@ -90,7 +91,7 @@ export default function HotspotPlayer({
                 className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
             >
                 <Image
-                    src={imageUrl}
+                    src={getImageUrl(imageUrl)}
                     alt={title}
                     fill
                     className="object-cover transition-transform duration-700 group-hover:scale-[1.02]"

web/experience/src/components/blocks/MemoryPlayer.tsx

@@ -13,7 +13,7 @@ interface MemoryCard {
 
 interface MemoryPlayerProps {
     title: string;
-    pairs: { id: string, content: string }[];
+    pairs: { left: string, right: string, id?: string }[];
     onComplete: (score: number) => void;
 }
 
@@ -30,9 +30,10 @@ export default function MemoryPlayer({
     const initializeGame = useCallback(() => {
         const gameCards: MemoryCard[] = [];
         initialPairs.forEach((pair, idx) => {
-            // Add two of each
+            const pairId = pair.id || idx.toString();
-            gameCards.push({ id: idx * 2, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
+            // Add two of each (Left and Right)
-            gameCards.push({ id: idx * 2 + 1, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
+            gameCards.push({ id: idx * 2, content: pair.left, pairId: pairId, isFlipped: false, isMatched: false });
+            gameCards.push({ id: idx * 2 + 1, content: pair.right, pairId: pairId, isFlipped: false, isMatched: false });
         });
 
         // Shuffle

web/experience/src/lib/api.ts

@@ -74,6 +74,15 @@ export interface Block {
     initialCode?: string;
     keywords?: string[];
     timeLimit?: number;
+    description?: string;
+    imageUrl?: string;
+    hotspots?: {
+        id: string;
+        x: number;
+        y: number;
+        radius: number;
+        label: string;
+    }[];
     metadata?: any;
 }
 

web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx

@@ -13,6 +13,9 @@ import ShortAnswerBlock from "@/components/blocks/ShortAnswerBlock";
 import DocumentBlock from "@/components/blocks/DocumentBlock";
 import VideoMarkerBlock from "@/components/blocks/VideoMarkerBlock";
 import AudioResponseBlock from "@/components/blocks/AudioResponseBlock";
+import HotspotBlock from "@/components/blocks/HotspotBlock";
+import MemoryBlock from "@/components/blocks/MemoryBlock";
+import Modal from "@/components/Modal";
 import {
     Save,
     X,
@@ -42,6 +45,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
     const [dueDate, setDueDate] = useState<string>("");
     const [importantDateType, setImportantDateType] = useState<string>("");
 
+    const [isAIQuizModalOpen, setIsAIQuizModalOpen] = useState(false);
+    const [aiQuizContext, setAiQuizContext] = useState("");
+    const [aiQuizType, setAiQuizType] = useState("multiple-choice");
+
     const [editValue, setEditValue] = useState("");
 
 
@@ -156,7 +163,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
         }
     };
 
-    const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response') => {
+    const addBlock = (type: Block['type']) => {
         const newBlock: Block = {
             id: Math.random().toString(36).substr(2, 9),
             type,
@@ -170,6 +177,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
             ...(type === 'document' && { url: "", title: "" }),
             ...(type === 'video_marker' && { url: "", title: "Video Interactivo", markers: [] }),
             ...(type === 'audio-response' && { prompt: "Ask a question for the student to record their answer...", keywords: [], timeLimit: 60 }),
+            ...(type === 'hotspot' && { imageUrl: "", description: "Find the following items...", hotspots: [] }),
+            ...(type === 'memory-match' && { pairs: [{ id: "1", left: "Term A", right: "Match A" }] }),
         };
         setBlocks([...blocks, newBlock]);
     };
@@ -206,11 +215,21 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
     };
 
     const handleGenerateQuiz = async () => {
+        setIsAIQuizModalOpen(true);
+    };
+
+    const handleConfirmGenerateQuiz = async (e: React.FormEvent) => {
+        e.preventDefault();
         if (!lesson) return;
+        setIsAIQuizModalOpen(false);
         setIsGeneratingQuiz(true);
         try {
-            const newBlocks = await cmsApi.generateQuiz(lesson.id);
+            const newBlocks = await cmsApi.generateQuiz(lesson.id, {
+                context: aiQuizContext,
+                quiz_type: aiQuizType
+            });
             setBlocks([...blocks, ...newBlocks]);
+            setAiQuizContext("");
         } catch {
             alert("Failed to generate quiz.");
         } finally {
@@ -598,6 +617,27 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                     onChange={(updates) => updateBlock(block.id, updates)}
                                 />
                             )}
+                            {block.type === 'hotspot' && (
+                                <HotspotBlock
+                                    id={block.id}
+                                    title={block.title}
+                                    description={block.description}
+                                    imageUrl={block.imageUrl}
+                                    hotspots={block.hotspots || []}
+                                    editMode={editMode}
+                                    courseId={params.id}
+                                    onChange={(updates) => updateBlock(block.id, updates)}
+                                />
+                            )}
+                            {block.type === 'memory-match' && (
+                                <MemoryBlock
+                                    id={block.id}
+                                    title={block.title}
+                                    pairs={block.pairs || []}
+                                    editMode={editMode}
+                                    onChange={(updates) => updateBlock(block.id, updates)}
+                                />
+                            )}
                         </div>
                     </div>
                 ))}
@@ -677,6 +717,20 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                     <span className="text-2xl group-hover:scale-110 transition-transform">🎤</span>
                                     <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Audio</span>
                                 </button>
+                                <button
+                                    onClick={() => addBlock('hotspot')}
+                                    className="flex flex-col items-center gap-2 p-6 glass hover:border-amber-500/50 transition-all group w-32"
+                                >
+                                    <span className="text-2xl group-hover:scale-110 transition-transform">🔍</span>
+                                    <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Hotspot</span>
+                                </button>
+                                <button
+                                    onClick={() => addBlock('memory-match')}
+                                    className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
+                                >
+                                    <span className="text-2xl group-hover:scale-110 transition-transform">🧠</span>
+                                    <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Memory</span>
+                                </button>
 
                                 <div className="w-px h-12 bg-white/5"></div>
 
@@ -693,6 +747,76 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                     </div>
                 )}
             </div>
+
+            <Modal
+                isOpen={isAIQuizModalOpen}
+                onClose={() => !isGeneratingQuiz && setIsAIQuizModalOpen(false)}
+                title="AI Quiz Customization"
+            >
+                <form onSubmit={handleConfirmGenerateQuiz} className="space-y-6">
+                    <div className="p-4 rounded-xl bg-purple-500/5 border border-purple-500/10">
+                        <p className="text-xs text-purple-300 leading-relaxed font-medium">
+                            Tell the AI what to focus on and what type of questions you prefer.
+                        </p>
+                    </div>
+
+                    <div>
+                        <label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
+                            Focus / Context
+                        </label>
+                        <textarea
+                            autoFocus
+                            value={aiQuizContext}
+                            onChange={(e) => setAiQuizContext(e.target.value)}
+                            placeholder="e.g. Focus on past tense verbs, or use vocabulary related to travel..."
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white h-24 resize-none"
+                            disabled={isGeneratingQuiz}
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
+                            Question Type
+                        </label>
+                        <select
+                            value={aiQuizType}
+                            onChange={(e) => setAiQuizType(e.target.value)}
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white appearance-none font-bold"
+                            disabled={isGeneratingQuiz}
+                        >
+                            <option value="multiple-choice">Multiple Choice</option>
+                            <option value="true-false">True / False</option>
+                            <option value="vocabulary">Vocabulary Focus</option>
+                            <option value="grammar">Grammar Focus</option>
+                        </select>
+                    </div>
+
+                    <div className="flex gap-3 pt-2">
+                        <button
+                            type="button"
+                            onClick={() => setIsAIQuizModalOpen(false)}
+                            disabled={isGeneratingQuiz}
+                            className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all text-sm font-medium"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={isGeneratingQuiz}
+                            className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
+                        >
+                            {isGeneratingQuiz ? (
+                                <>
+                                    <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                                    Generating...
+                                </>
+                            ) : (
+                                "Generate Quiz"
+                            )}
+                        </button>
+                    </div>
+                </form>
+            </Modal>
         </div >
     );
 }

web/studio/src/app/page.tsx

@@ -5,7 +5,7 @@ import { cmsApi, Course, Organization } from "@/lib/api";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { useTranslation } from "@/context/I18nContext";
-import { Plus, BookOpen, Download, Upload, Sparkles, Wand2 } from "lucide-react";
+import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
 import OrganizationSelector from "@/components/OrganizationSelector";
 import Modal from "@/components/Modal";
 
@@ -140,6 +140,23 @@ export default function StudioDashboard() {
     reader.readAsText(file);
   };
 
+  const handleDeleteCourse = async (e: React.MouseEvent, courseId: string, title: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!confirm(t('confirm_delete_course') || `Are you sure you want to delete "${title}"? This action cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      await cmsApi.deleteCourse(courseId);
+      setCourses(prev => prev.filter(c => c.id !== courseId));
+    } catch (err) {
+      console.error("Delete failed", err);
+      alert("Failed to delete course");
+    }
+  };
+
   return (
     <div className="min-h-screen bg-[#0f1115] text-white p-8">
       <div className="max-w-7xl mx-auto">
@@ -201,6 +218,13 @@ export default function StudioDashboard() {
                       >
                         <Download size={18} />
                       </button>
+                      <button
+                        onClick={(e) => handleDeleteCourse(e, course.id, course.title)}
+                        className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-400 transition-all"
+                        title="Delete Course"
+                      >
+                        <Trash2 size={18} />
+                      </button>
                     </div>
                     <h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
                     <p className="text-sm text-gray-400 line-clamp-2">{course.description || "No description provided."}</p>

web/studio/src/components/blocks/DescriptionBlock.tsx

@@ -2,9 +2,9 @@
 
 import { useState, useRef } from "react";
 import ReactMarkdown from "react-markdown";
-import { Bold, Italic, Link as LinkIcon, Image as ImageIcon, FileText, Eye, PenLine } from "lucide-react";
+import { Bold, Italic, Link as LinkIcon, Image as ImageIcon, FileText, Eye, PenLine, Sparkles, Wand2, Check, X as CloseIcon } from "lucide-react";
 import AssetPickerModal from "../AssetPickerModal";
-import { Asset, getImageUrl } from "@/lib/api";
+import { Asset, getImageUrl, cmsApi } from "@/lib/api";
 
 interface DescriptionBlockProps {
     id: string;
@@ -19,8 +19,30 @@ export default function DescriptionBlock({ id, title, content, editMode, courseI
     const [showPreview, setShowPreview] = useState(false);
     const [isAssetPickerOpen, setIsAssetPickerOpen] = useState(false);
     const [pickerType, setPickerType] = useState<"image" | "file">("image");
+    const [isReviewing, setIsReviewing] = useState(false);
+    const [suggestion, setSuggestion] = useState<{ suggestion: string, comments: string } | null>(null);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+    const handleReviewText = async () => {
+        if (!content.trim() || isReviewing) return;
+        setIsReviewing(true);
+        try {
+            const data = await cmsApi.reviewText(content);
+            setSuggestion(data);
+        } catch (err) {
+            console.error("Content review failed", err);
+            alert("Failed to review content");
+        } finally {
+            setIsReviewing(false);
+        }
+    };
+
+    const applySuggestion = () => {
+        if (!suggestion) return;
+        onChange({ content: suggestion.suggestion });
+        setSuggestion(null);
+    };
+
     const insertMarkdown = (prefix: string, suffix: string = "") => {
         const textarea = textareaRef.current;
         if (!textarea) return;
@@ -99,6 +121,16 @@ export default function DescriptionBlock({ id, title, content, editMode, courseI
                                     >
                                         <FileText size={14} />
                                     </button>
+                                    <div className="w-px h-3 bg-white/10 mx-1" />
+                                    <button
+                                        onClick={handleReviewText}
+                                        disabled={isReviewing}
+                                        className={`p-1.5 rounded-md transition-all flex items-center gap-1.5 text-xs font-bold ${isReviewing ? 'bg-indigo-500/20 text-indigo-300 animate-pulse' : 'hover:bg-indigo-500/20 text-indigo-400 hover:text-indigo-300'}`}
+                                        title="AI Suggest Improvements"
+                                    >
+                                        <Sparkles size={14} className={isReviewing ? 'animate-spin' : ''} />
+                                        {isReviewing ? 'Analyzing...' : 'AI Suggest'}
+                                    </button>
                                 </div>
                             )}
                         </div>
@@ -138,6 +170,54 @@ export default function DescriptionBlock({ id, title, content, editMode, courseI
                             </div>
                         </div>
                     )}
+                    {suggestion && (
+                        <div className="bg-indigo-500/10 border border-indigo-500/30 rounded-2xl p-6 space-y-4 animate-in fade-in slide-in-from-top-4 duration-500 shadow-xl shadow-indigo-500/5">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <Wand2 size={16} className="text-indigo-400" />
+                                    <span className="text-xs font-black uppercase tracking-widest text-indigo-300">AI Teacher Suggestions</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <button
+                                        onClick={() => setSuggestion(null)}
+                                        className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400 transition-colors"
+                                    >
+                                        <CloseIcon size={14} />
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">Improved Version</span>
+                                    <div className="p-4 bg-black/40 rounded-xl border border-white/5 text-sm text-gray-300 leading-relaxed italic">
+                                        {suggestion.suggestion}
+                                    </div>
+                                </div>
+                                <div className="space-y-3">
+                                    <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">Key Changes</span>
+                                    <div className="text-xs text-gray-400 leading-relaxed pl-1 whitespace-pre-line">
+                                        {suggestion.comments}
+                                    </div>
+                                    <div className="pt-4 flex gap-3">
+                                        <button
+                                            onClick={applySuggestion}
+                                            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-lg transition-all shadow-lg shadow-indigo-500/20 flex items-center gap-2 group active:scale-95"
+                                        >
+                                            <Check size={14} className="group-hover:scale-110 transition-transform" />
+                                            Apply Changes
+                                        </button>
+                                        <button
+                                            onClick={() => setSuggestion(null)}
+                                            className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white text-xs font-bold rounded-lg border border-white/10 transition-all active:scale-95"
+                                        >
+                                            Dismiss
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
                 </div>
             ) : (
                 <div className="prose prose-invert max-w-none prose-p:text-gray-300 prose-p:leading-relaxed prose-p:text-lg prose-headings:text-white prose-a:text-blue-400 prose-img:rounded-xl">

web/studio/src/components/blocks/HotspotBlock.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState, useRef } from "react";
+import Image from "next/image";
+import { Search, MapPin, Plus, Trash2, Image as ImageIcon, Crosshair } from "lucide-react";
+import AssetPickerModal from "../AssetPickerModal";
+import { Asset, getImageUrl } from "@/lib/api";
+
+interface Hotspot {
+    id: string;
+    x: number;
+    y: number;
+    radius: number;
+    label: string;
+}
+
+interface HotspotBlockProps {
+    id: string;
+    title?: string;
+    description?: string;
+    imageUrl?: string;
+    hotspots?: Hotspot[];
+    editMode: boolean;
+    courseId: string;
+    onChange: (updates: { title?: string; description?: string; imageUrl?: string; hotspots?: Hotspot[] }) => void;
+}
+
+export default function HotspotBlock({
+    id,
+    title,
+    description,
+    imageUrl,
+    hotspots = [],
+    editMode,
+    courseId,
+    onChange
+}: HotspotBlockProps) {
+    const [isAssetPickerOpen, setIsAssetPickerOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleImageSelect = (asset: Asset) => {
+        const url = asset.storage_path.replace('uploads/', '/assets/');
+        onChange({ imageUrl: url });
+        setIsAssetPickerOpen(false);
+    };
+
+    const handleImageClick = (e: React.MouseEvent) => {
+        if (!editMode || !containerRef.current || !imageUrl) return;
+
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+
+        const newHotspot: Hotspot = {
+            id: Math.random().toString(36).substr(2, 9),
+            x,
+            y,
+            radius: 5,
+            label: "New Hotspot"
+        };
+
+        onChange({ hotspots: [...hotspots, newHotspot] });
+    };
+
+    const updateHotspot = (index: number, updates: Partial<Hotspot>) => {
+        const newHotspots = [...hotspots];
+        newHotspots[index] = { ...newHotspots[index], ...updates };
+        onChange({ hotspots: newHotspots });
+    };
+
+    const removeHotspot = (index: number) => {
+        const newHotspots = hotspots.filter((_, i) => i !== index);
+        onChange({ hotspots: newHotspots });
+    };
+
+    if (!editMode) {
+        return (
+            <div className="space-y-4" id={id}>
+                <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-amber-500/20 text-amber-500">
+                        <Search size={20} />
+                    </div>
+                    <div>
+                        <h3 className="text-lg font-bold text-white transition-colors">{title || "Image Hunt"}</h3>
+                        <p className="text-xs text-gray-500 uppercase tracking-widest font-black">{description || "Find the hidden spots!"}</p>
+                    </div>
+                </div>
+                <div className="relative aspect-video rounded-2xl overflow-hidden border border-white/5 bg-black/40">
+                    {imageUrl ? (
+                        <Image src={getImageUrl(imageUrl)} alt={title || ""} fill className="object-cover opacity-50" />
+                    ) : (
+                        <div className="absolute inset-0 flex items-center justify-center text-gray-600 italic text-sm">No image provided.</div>
+                    )}
+                    <div className="absolute inset-0 flex items-center justify-center backdrop-blur-[2px]">
+                        <div className="text-center space-y-2">
+                            <Crosshair className="w-12 h-12 text-white/20 mx-auto" />
+                            <p className="text-xs font-bold text-white/40 uppercase tracking-widest">Interactive Game Preview (Switch to Student View to Play)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6" id={id}>
+            <div className="p-6 glass border-white/5 bg-white/5 space-y-6 rounded-3xl">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Game Title</label>
+                            <input
+                                type="text"
+                                value={title || ""}
+                                onChange={(e) => onChange({ title: e.target.value })}
+                                placeholder="e.g. Parts of the Body..."
+                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:border-amber-500/50 focus:outline-none"
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Student Instructions</label>
+                            <input
+                                type="text"
+                                value={description || ""}
+                                onChange={(e) => onChange({ description: e.target.value })}
+                                placeholder="e.g. Find and click on the following items..."
+                                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm focus:border-amber-500/50 focus:outline-none"
+                            />
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Game Image</label>
+                        {!imageUrl ? (
+                            <button
+                                onClick={() => setIsAssetPickerOpen(true)}
+                                className="w-full aspect-video rounded-2xl border-2 border-dashed border-white/10 hover:border-amber-500/50 hover:bg-amber-500/5 transition-all flex flex-col items-center justify-center gap-2 group"
+                            >
+                                <ImageIcon className="text-gray-600 group-hover:text-amber-500 transition-colors" size={32} />
+                                <span className="text-xs font-bold text-gray-500 uppercase tracking-widest group-hover:text-amber-300">Choose Image</span>
+                            </button>
+                        ) : (
+                            <div className="relative aspect-video rounded-2xl overflow-hidden group">
+                                <Image src={getImageUrl(imageUrl)} alt="Hotspot base" fill className="object-cover" />
+                                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+                                    <button onClick={() => setIsAssetPickerOpen(true)} className="p-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-all"><ImageIcon size={18} /></button>
+                                    <button onClick={() => onChange({ imageUrl: undefined })} className="p-2 bg-red-500/20 hover:bg-red-500/40 rounded-lg text-red-400 transition-all"><Trash2 size={18} /></button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {imageUrl && (
+                    <div className="space-y-4 pt-4 border-t border-white/5">
+                        <div className="flex items-center justify-between">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Define Hotspots (Click on the image below)</label>
+                            <span className="text-[10px] font-bold text-amber-500 bg-amber-500/10 px-2 py-1 rounded uppercase tracking-widest">{hotspots.length} Defined</span>
+                        </div>
+
+                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                            <div className="lg:col-span-2">
+                                <div
+                                    ref={containerRef}
+                                    onClick={handleImageClick}
+                                    className="relative aspect-video rounded-2xl overflow-hidden border-2 border-white/10 cursor-crosshair shadow-2xl"
+                                >
+                                    <Image src={getImageUrl(imageUrl)} alt="Define Hotspots" fill className="object-cover select-none" />
+                                    {hotspots.map((h, idx) => (
+                                        <div
+                                            key={h.id}
+                                            className="absolute group/pin"
+                                            style={{
+                                                left: `${h.x}%`,
+                                                top: `${h.y}%`,
+                                                transform: 'translate(-50%, -50%)',
+                                            }}
+                                        >
+                                            <div
+                                                className="bg-amber-500/30 border-2 border-amber-400 rounded-full flex items-center justify-center relative transition-transform hover:scale-110"
+                                                style={{
+                                                    width: `${h.radius * 2}vw`,
+                                                    height: `${h.radius * 2}vw`,
+                                                    maxWidth: '100px',
+                                                    maxHeight: '100px'
+                                                }}
+                                            >
+                                                <div className="bg-amber-500 rounded-full p-1 text-black shadow-lg">
+                                                    <MapPin size={12} strokeWidth={3} />
+                                                </div>
+                                                <div className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover/pin:opacity-100 transition-opacity">
+                                                    {h.label}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="space-y-3 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
+                                {hotspots.length === 0 ? (
+                                    <div className="h-full flex flex-col items-center justify-center text-center p-6 border-2 border-dashed border-white/5 rounded-2xl">
+                                        <Plus className="text-gray-700 mb-2" size={24} />
+                                        <p className="text-xs text-gray-600 font-bold uppercase tracking-widest">Click on the image to add hotspots</p>
+                                    </div>
+                                ) : (
+                                    hotspots.map((h, idx) => (
+                                        <div key={h.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-3 animate-in fade-in slide-in-from-right-4 duration-300">
+                                            <div className="flex items-center justify-between">
+                                                <span className="text-[10px] font-black text-amber-500 uppercase tracking-widest">Hotspot #{idx + 1}</span>
+                                                <button onClick={() => removeHotspot(idx)} className="p-1 hover:bg-red-500/20 text-red-500 rounded transition-colors"><Trash2 size={12} /></button>
+                                            </div>
+                                            <div className="space-y-2">
+                                                <input
+                                                    type="text"
+                                                    value={h.label}
+                                                    onChange={(e) => updateHotspot(idx, { label: e.target.value })}
+                                                    placeholder="Item name..."
+                                                    className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-xs font-bold focus:border-amber-500/50 focus:outline-none"
+                                                />
+                                                <div className="flex items-center gap-3">
+                                                    <label className="text-[9px] font-black uppercase tracking-widest text-gray-600">Radius</label>
+                                                    <input
+                                                        type="range"
+                                                        min="2"
+                                                        max="15"
+                                                        value={h.radius}
+                                                        onChange={(e) => updateHotspot(idx, { radius: parseInt(e.target.value) })}
+                                                        className="flex-1 accent-amber-500 h-1 bg-white/10 rounded-lg appearance-none cursor-pointer"
+                                                    />
+                                                    <span className="text-[10px] font-bold text-gray-400 w-6">{h.radius}%</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <AssetPickerModal
+                isOpen={isAssetPickerOpen}
+                onClose={() => setIsAssetPickerOpen(false)}
+                courseId={courseId}
+                filterType="image"
+                onSelect={handleImageSelect}
+            />
+        </div>
+    );
+}

web/studio/src/components/blocks/MemoryBlock.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { Brain, Plus, Trash2, HelpCircle } from "lucide-react";
+
+interface MatchingPair {
+    left: string;
+    right: string;
+    id?: string;
+}
+
+interface MemoryBlockProps {
+    id: string;
+    title?: string;
+    pairs?: MatchingPair[];
+    editMode: boolean;
+    onChange: (updates: { title?: string; pairs?: MatchingPair[] }) => void;
+}
+
+export default function MemoryBlock({ id, title, pairs = [], editMode, onChange }: MemoryBlockProps) {
+    const addPair = () => {
+        const newPair: MatchingPair = {
+            id: Math.random().toString(36).substr(2, 9),
+            left: "",
+            right: ""
+        };
+        onChange({ pairs: [...pairs, newPair] });
+    };
+
+    const updatePair = (index: number, updates: Partial<MatchingPair>) => {
+        const newPairs = [...pairs];
+        newPairs[index] = { ...newPairs[index], ...updates };
+        onChange({ pairs: newPairs });
+    };
+
+    const removePair = (index: number) => {
+        const newPairs = pairs.filter((_, i) => i !== index);
+        onChange({ pairs: newPairs });
+    };
+
+    if (!editMode) {
+        return (
+            <div className="space-y-4" id={id}>
+                <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20">
+                        <Brain size={24} />
+                    </div>
+                    <div>
+                        <h3 className="text-xl font-black tracking-tight text-white uppercase tracking-[0.1em]">{title || "Memory Match"}</h3>
+                        <p className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Brain Training Exercise</p>
+                    </div>
+                </div>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    {Array.from({ length: Math.min(pairs.length * 2, 8) }).map((_, i) => (
+                        <div key={i} className="h-24 rounded-2xl bg-white/5 border-2 border-dashed border-white/5 flex items-center justify-center">
+                            <HelpCircle className="text-white/5" size={32} />
+                        </div>
+                    ))}
+                </div>
+                <div className="text-center py-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
+                    <p className="text-[10px] font-bold text-indigo-300 uppercase tracking-widest">Memory Game with {pairs.length} pairs defined</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6" id={id}>
+            <div className="p-8 glass border-white/5 bg-white/5 space-y-8 rounded-3xl">
+                <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 pl-1">Game Description / Title</label>
+                    <input
+                        type="text"
+                        value={title || ""}
+                        onChange={(e) => onChange({ title: e.target.value })}
+                        placeholder="e.g. Vocabulary Memory Match..."
+                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
+                    />
+                </div>
+
+                <div className="space-y-4">
+                    <div className="flex items-center justify-between pl-1">
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Pairs to Match</label>
+                        <span className="text-[10px] font-bold text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded-md uppercase tracking-widest">{pairs.length} Pairs</span>
+                    </div>
+
+                    <div className="space-y-3">
+                        {pairs.map((pair, idx) => (
+                            <div key={pair.id || idx} className="grid grid-cols-1 sm:grid-cols-9 gap-4 p-4 bg-black/20 rounded-2xl border border-white/5 group animate-in slide-in-from-left-4 duration-300">
+                                <div className="sm:col-span-4 space-y-1">
+                                    <span className="text-[9px] font-black uppercase tracking-tight text-gray-600 pl-1">Card A</span>
+                                    <input
+                                        value={pair.left}
+                                        onChange={(e) => updatePair(idx, { left: e.target.value })}
+                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
+                                        placeholder="Term, Image URL, or Word..."
+                                    />
+                                </div>
+                                <div className="sm:col-span-1 flex items-center justify-center pt-4 sm:pt-0">
+                                    <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
+                                        <div className="w-1 h-1 rounded-full bg-indigo-500" />
+                                    </div>
+                                </div>
+                                <div className="sm:col-span-3 space-y-1">
+                                    <span className="text-[9px] font-black uppercase tracking-tight text-gray-600 pl-1">Card B</span>
+                                    <input
+                                        value={pair.right}
+                                        onChange={(e) => updatePair(idx, { right: e.target.value })}
+                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
+                                        placeholder="Matching Item..."
+                                    />
+                                </div>
+                                <div className="sm:col-span-1 flex items-end justify-end pb-1 pr-1">
+                                    <button
+                                        onClick={() => removePair(idx)}
+                                        className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all"
+                                    >
+                                        <Trash2 size={16} />
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+
+                        <button
+                            onClick={addPair}
+                            className="w-full py-6 border-dashed border-2 border-white/5 text-gray-500 hover:text-indigo-400 hover:border-indigo-500/30 hover:bg-indigo-500/5 transition-all font-black text-[10px] uppercase tracking-widest rounded-3xl flex flex-col items-center gap-2 group"
+                        >
+                            <div className="p-2 rounded-xl bg-white/5 group-hover:bg-indigo-500/20 transition-all">
+                                <Plus size={20} />
+                            </div>
+                            <span>Add New Memory Pair</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

web/studio/src/lib/api.ts

@@ -44,16 +44,17 @@ export interface QuizQuestion {
 
 export interface Block {
     id: string;
-    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match';
+    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match' | 'hotspot';
     title?: string;
     content?: string;
     url?: string;
+    description?: string; // For hotspot or general info
     media_type?: 'video' | 'audio';
     config?: Record<string, unknown>;
     quiz_data?: {
         questions: QuizQuestion[];
     };
-    pairs?: { left: string; right: string }[];
+    pairs?: { left: string; right: string; id?: string }[];
     items?: string[];
     prompt?: string;
     correctAnswers?: string[];
@@ -65,6 +66,14 @@ export interface Block {
         options: string[];
         correctIndex: number;
     }[];
+    hotspots?: {
+        id: string;
+        x: number;
+        y: number;
+        radius: number;
+        label: string;
+    }[];
+    imageUrl?: string;
 }
 
 export interface Lesson {
@@ -279,7 +288,8 @@ export const cmsApi = {
     getLesson: (id: string): Promise<Lesson> => apiFetch(`/lessons/${id}`),
     updateLesson: (id: string, payload: Partial<Lesson>): Promise<Lesson> => apiFetch(`/lessons/${id}`, { method: 'PUT', body: JSON.stringify(payload) }),
     summarizeLesson: (id: string): Promise<Lesson> => apiFetch(`/lessons/${id}/summarize`, { method: 'POST' }),
-    generateQuiz: (id: string): Promise<Block[]> => apiFetch(`/lessons/${id}/generate-quiz`, { method: 'POST' }),
+    generateQuiz: (id: string, payload: { context?: string, quiz_type?: string }): Promise<Block[]> => apiFetch(`/lessons/${id}/generate-quiz`, { method: 'POST', body: JSON.stringify(payload) }),
+    reviewText: (text: string): Promise<{ suggestion: string, comments: string }> => apiFetch('/api/ai/review-text', { method: 'POST', body: JSON.stringify({ text }) }),
     deleteModule: (id: string): Promise<void> => apiFetch(`/modules/${id}`, { method: 'DELETE' }),
     deleteLesson: (id: string): Promise<void> => apiFetch(`/lessons/${id}`, { method: 'DELETE' }),
     reorderModules: (payload: { items: { id: string, position: number }[] }): Promise<void> => apiFetch('/modules/reorder', { method: 'POST', body: JSON.stringify(payload) }),
@@ -301,6 +311,8 @@ export const cmsApi = {
         body: JSON.stringify(data)
     }),
 
+    deleteCourse: (id: string): Promise<void> => apiFetch(`/courses/${id}`, { method: 'DELETE' }),
+
     async generateCourse(prompt: string, targetOrgId?: string): Promise<Course> {
         return apiFetch(`/courses/generate`, {
             method: 'POST',