| marp | true |
|---|---|
| theme | default |
| _class | lead |
| _paginate | false |
| paginate | true |
| backgroundColor | |
| style | section { font-size: 22px; color: #333; line-height: 1.6; padding: 60px 80px; } footer { width: 100%; text-align: right; font-size: 14px; color: #888; } .logo-header { display: flex; justify-content: space-between; align-items: center; position: absolute; top: 40px; left: 60px; right: 60px; } .logo-header img { height: 140px; margin: 0; margin-left:10px; margin-right:10px } h1 { color: #088dc7; font-size: 2.8em; margin-top: 100px; text-align: left; } h2 { color: #088dc7; font-size: 2em; border-bottom: 2px solid #088dc7; margin-bottom: 40px;} h3 { text-align: left; color: #444; margin-top: 0; } .sommaire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .sommaire-item { display: flex; align-items: center; background: #f4faff; border-radius: 12px; padding: 15px 20px; border-left: 5px solid #088dc7; } .sommaire-num { background: #088dc7; color: white; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-weight: bold; margin-right: 15px; flex-shrink: 0; } .img-container { display: flex; flex-direction: column; align-items: center; height: 100%; } .img-methodo { width: 85%; height: auto; max-height: 450px; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .dt-card { background: #f0f7fa; padding: 30px; border-radius: 10px; border-top: 6px solid #088dc7; text-align: left; margin-top: 20px; width: 100%; } /* --- FIX COULEURS TECH STACK --- */ .tech-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .badge-simple { padding: 8px 18px; border-radius: 6px; font-weight: 600; background-color: #545353ff; /* Gris foncé unique */ color: #ffffff !important; font-size: 0.85em; border: 1px solid #222; } .maquette-grid { display: flex; gap: 15px; justify-content: center; align-items: flex-start; height: 350px; } |
Réalisé par : Solidev 26
Encadré par : M. ESSARRAJ Fouad
Filière : Développement Mobile et Web
- La formatrice Fatine souhaite un système simple pour créer et gérer des QCM personnalisables, avec correction automatique et affichage du score final.
- Le formateur Youssef souhaite un QCM structuré par session et objectif, lié au professeur, avec un calcul automatique des résultats.
- L’administrateur Hamouda souhaite une plateforme fiable avec des données validées, un QCM structuré et sécurisé, ainsi qu’une interface simple pour faciliter la gestion des candidats.
- Comment pourrions-nous permettre aux formateurs de générer des QCM par objectif en quelques clics, tout en garantissant une correction instantanée pour l'étudiant ?
- Comment pourrions-nous structurer l'interface pour que la liaison entre une question, un professeur et un objectif de session soit totalement transparente ?
-Comment pourrions-nous concevoir une interface administrateur simple, claire et ergonomique permettant une gestion efficace des candidats et des QCM ?
Interface Administration
- Base de données: MySQL
- Framework: Laravel 12
- Architecture: N-Tiers Controller: Requêtes HTTP Service: Logique métier Model: Base de données
- Architecture: MVC
- Blade :Templates réutilisables (components, layouts).
- AJAX : Interactions dynamiques (ex: Modales) sans rechargement de page.
- Alpine.js : Librairie JavaScript pour les interactions dynamiques.
- Spatie : Librairie pour la gestion des permissions et rôles.
- Vite : Outil de build rapide.
- Lucide : Librairie d'icônes.
- Tailwind CSS :Développement rapide, responsive.
- Objectifs atteints : Application QCM fonctionnelle et responsive.
- Compétences : Maîtrise du cycle Agile et de la stack Full-stack.
- Perspectives : Intégration d'un module d'IA pour l'analyse prédictive.