Création d'Applications Éducatives Interactives

Types d'applications

Appuyez sur ↓ pour voir chaque type en détail

Type A : Visualiseur de Cours

• Usage : Affichage structuré du cours
• Fonctionnalités :
• Navigation par sections
• Recherche dans le contenu
• Annotations personnelles
• Export PDF
• Détection : > 70% de contenu théorique

Type B : Exerciseur Interactif

• Usage : Pratique avec correction automatique
• Fonctionnalités :
• Affichage des exercices
• Vérification automatique
• Feedback immédiat
• Suivi de progression
• Détection : > 70% d'exercices/questions

Type C : Quiz Interactif

• Usage : Évaluation chronométrée
• Fonctionnalités :
• Questions QCM/ouvertes
• Timer configurable
• Score final
• Historique des tentatives
• Détection : Questionnaire/évaluation

Type D : Application Mixte (Recommandé)

• Usage : Parcours pédagogique complet
• Fonctionnalités :
• Cours + exercices intégrés
• Progression guidée
• Tableau de bord
• Statistiques d'apprentissage
• Détection : Contenu mixte (défaut)

Phase 1 : Analyse de la ressource

• Lecture du fichier LaTeX
• Détection : sections, exercices, formules
• Extraction : titre, niveau, thème
• Choix automatique : Type B (Exerciseur)

Appuyez sur ↓ pour voir l'analyse détaillée

Patterns LaTeX détectés

PATTERNS = {
    'title': r'\\title\{(.*?)\}',
    'section': r'\\section\{(.*?)\}',
    'exercice': r'\\begin\{exercice\}(.*?)\\end\{exercice\}',
    'question': r'\\question\{(.*?)\}',
    'niveau': r'niveau.*?(\d+(?:ème|ere|nde)|Terminale)',
    'theme': r'theme\{(.*?)\}'
}

Phase 3 : Initialisation du projet

Appuyez sur ↓ pour voir la structure

Structure du projet Flask

Phase 4 : Génération du code

Appuyez sur ↓ pour voir des exemples de code

Exemple Backend : app.py

from flask import Flask, render_template, jsonify, request
from config import Config
import json

app = Flask(__name__)
app.config.from_object(Config)

# Chargement du contenu éducatif
def load_content():
    with open('data/content.json', 'r', encoding='utf-8') as f:
        return json.load(f)

CONTENT = load_content()

@app.route('/')
def index():
    """Page principale"""
    return render_template('index.html',
                         title=CONTENT['metadata']['title'])

@app.route('/api/check/', methods=['POST'])
def check_answer(exercise_id):
    """Vérifier une réponse"""
    data = request.get_json()
    # Logique de vérification...
    return jsonify({'correct': True, 'feedback': 'Bravo !'})

Exemple Frontend : CSS moderne

:root {
    --primary-color: #4F46E5;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --background: #F9FAFB;
    --surface: #FFFFFF;
}

.exercise-card {
    background: var(--surface);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.exercise-card:hover {
    transform: translateY(-2px);
}

Exemple Frontend : JavaScript ES6+

// API Client
class ExerciseAPI {
    constructor() {
        this.baseURL = window.location.origin;
    }

    async checkAnswer(exerciseId, answer) {
        const response = await fetch(
            `${this.baseURL}/api/check/${exerciseId}`,
            {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ answer })
            }
        );
        return await response.json();
    }
}

const api = new ExerciseAPI();

Contenu structuré : content.json

{
  "metadata": {
    "title": "Exercices sur les Vecteurs",
    "level": "Seconde",
    "theme": "Vecteurs",
    "type": "exercices"
  },
  "exercises": [
    {
      "id": 1,
      "question": "Calculer les coordonnées du vecteur AB...",
      "type": "input",
      "answer": "(3; 4)",
      "hint": "Utilisez la formule...",
      "solution": "Détail de la solution...",
      "feedback_correct": "Excellent !",
      "feedback_wrong": "Revérifiez vos calculs."
    }
  ]
}

Phase 5 : Tests automatisés

• Tests de routes
• Tests des API
• Tests de validation
• Couverture de code > 80%

Appuyez sur ↓ pour voir un exemple de test

Exemple : test_app.py

import pytest
from app import app

@pytest.fixture
def client():
    app.config['TESTING'] = True
    with app.test_client() as client:
        yield client

def test_index_page(client):
    """Test de la page d'accueil"""
    response = client.get('/')
    assert response.status_code == 200
    assert b'Application' in response.data

def test_check_answer_correct(client):
    """Test de vérification - réponse correcte"""
    response = client.post('/api/check/1', json={
        'answer': '(3; 4)'
    })
    assert response.status_code == 200
    data = response.get_json()
    assert data['correct'] == True

Phase 6 : Packaging en exécutable

• Exécutable standalone
• Templates et static inclus
• Données embarquées
• Aucune dépendance externe

Appuyez sur ↓ pour voir le script de build

Script de build : build_exe.py

import PyInstaller.__main__
import os
import shutil

APP_NAME = "EducationalApp"

def build():
    """Construire l'exécutable"""
    args = [
        'app.py',
        '--name', APP_NAME,
        '--onefile',  # Un seul fichier
        '--add-data', 'templates;templates',
        '--add-data', 'static;static',
        '--add-data', 'data;data',
        '--hidden-import', 'flask',
        '--hidden-import', 'jinja2',
        '--clean',
    ]

    PyInstaller.__main__.run(args)
    print(f"✅ Build terminé : dist/{APP_NAME}.exe")

if __name__ == '__main__':
    build()

Utilisation

# Construire l'exécutable
python build/build_exe.py

# L'exécutable sera dans dist/EducationalApp.exe

Fonctionnalités avancées

Appuyez sur ↓ pour voir chaque fonctionnalité

Rendu LaTeX (MathJax)

<!-- Dans base.html -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!-- Configuration -->
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']]
  }
};
</script>

Sauvegarde de progression (localStorage)

class ProgressManager {
    constructor(appId) {
        this.appId = appId;
        this.storageKey = `edu_app_${appId}_progress`;
    }

    saveProgress(data) {
        localStorage.setItem(this.storageKey, JSON.stringify(data));
    }

    loadProgress() {
        const data = localStorage.getItem(this.storageKey);
        return data ? JSON.parse(data) : null;
    }
}

Mode hors ligne (PWA)

// Service Worker basique
const CACHE_NAME = 'edu-app-v1';
const urlsToCache = [
  '/',
  '/static/css/main.css',
  '/static/js/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

Exemple concret : Exercices sur les vecteurs

Appuyez sur ↓ pour voir le processus

Processus automatique

Fonctionnalités de l'application

Cas d'usage pédagogiques

Appuyez sur ↓ pour voir chaque cas

Mathématiques

Sciences

Langues

Histoire-Géo