41a40ff936
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
Handler new: /var/www/html/api/inject-products.py - Mass injection doctrine 60 sur /var/www/html/products/ subfolder - 104 pages HTML traitees en 1 pass - GOLD backup systematique: vault-gold/opus/products-NAME.html.doctrine195-TS.bak - chattr +i/-i atomic handling - Includes mobile fix responsive bot-widget (doctrine 194 pattern) Resultats: - OK=104 ALREADY=0 ERR=0 TOTAL=104 (100 percent success) - Health checks HTTP 200 sur consulting/leadforge/academy/arsenal/bizplan Coverage GLOBAL maintenant: - Root: 322/325 = 99.1 percent (2 exclusions legitimes wevia/monitor) - Products: 104/104 = 100 percent COMPLETE - TOTAL: 426 pages UX doctrine 60 Cumul session Opus: - 45 tags (44+1) - 35 doctrines vault (146-195) - 426 pages UX doctrine 60 (was 323, +104) - NR 153/153 invariant 53 phases Handler inject-products.py battle-tested - reusable pour autres subdirs. ZERO regression. ZERO ecrasement.
305 lines
26 KiB
HTML
305 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>WEVAL Academy — E-Learning IA | 11 Formations + Quiz + Certification</title>
|
|
<meta name="description" content="Plateforme e-learning WEVAL Academy: 11 formations IA complètes avec quiz interactifs et certification officielle.">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#05080f;--s:#0c1222;--s2:#111a2e;--a:#f59e0b;--a15:rgba(245,158,11,0.15);--a08:rgba(245,158,11,0.08);--a30:rgba(245,158,11,0.3);--sv:#7a8ba5;--w:#edf2f7;--d:#1a2340;--g:#22c55e;--r:#ef4444;--b:#3b82f6}
|
|
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--w);overflow-x:hidden}
|
|
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
|
|
nav{position:fixed;top:0;width:100%;padding:1rem 4%;display:flex;justify-content:space-between;align-items:center;z-index:100;backdrop-filter:blur(20px);background:rgba(5,8,15,0.85);border-bottom:1px solid var(--a08)}
|
|
.logo{font-weight:800;font-size:1.4rem;text-decoration:none;color:var(--w)}.logo span{color:var(--a)}
|
|
.nav-links{display:flex;gap:1.5rem;align-items:center}.nav-links a{color:var(--sv);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--a)}
|
|
.btn-n{background:var(--a);color:var(--bg);padding:.55rem 1.3rem;border-radius:7px;font-weight:700;font-size:.82rem;text-decoration:none;transition:all .3s}.btn-n:hover{transform:translateY(-1px);opacity:.9}
|
|
.hero{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 4% 3rem;position:relative}
|
|
.hero::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.06) 0%,transparent 70%);top:10%;left:50%;transform:translateX(-50%);pointer-events:none}
|
|
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--a15);border:1px solid rgba(245,158,11,0.2);border-radius:100px;padding:.35rem 1rem;font-size:.75rem;font-weight:600;color:var(--a);margin-bottom:2rem}
|
|
h1{font-size:3rem;font-weight:800;line-height:1.08;letter-spacing:-.04em;margin-bottom:1.2rem;max-width:750px}h1 em{font-style:normal;color:var(--a)}
|
|
.sub{font-size:1.05rem;color:var(--sv);max-width:580px;line-height:1.7;margin-bottom:2rem}
|
|
.stats{display:flex;gap:3rem;margin-top:1.5rem}.stat{text-align:center}.stat-v{font-family:'Space Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--a)}.stat-l{font-size:.78rem;color:var(--sv);margin-top:.2rem}
|
|
.btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}
|
|
.btn-p{background:var(--a);color:var(--bg);padding:.85rem 2rem;border-radius:8px;font-weight:700;text-decoration:none;transition:all .3s;font-family:'Outfit';border:none;cursor:pointer;font-size:1rem}.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,0.25)}
|
|
.btn-o{background:transparent;color:var(--w);padding:.85rem 2rem;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.12);font-weight:600;transition:all .3s}.btn-o:hover{border-color:var(--a);color:var(--a)}
|
|
.sec{padding:4rem 4%;max-width:1200px;margin:0 auto}
|
|
.stag{font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--a);margin-bottom:1rem}
|
|
h2{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.8rem}
|
|
.sd{color:var(--sv);font-size:.95rem;line-height:1.7;max-width:500px;margin-bottom:2.5rem}
|
|
/* Formations Grid */
|
|
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
|
|
.fc{background:var(--s);border:1px solid var(--a08);border-radius:16px;overflow:hidden;transition:all .35s;cursor:pointer;position:relative}
|
|
.fc:hover{border-color:var(--a30);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
|
|
.fc-top{padding:1.5rem 1.5rem 1rem;display:flex;gap:1rem;align-items:flex-start}
|
|
.fc-icon{width:48px;height:48px;border-radius:12px;background:var(--a15);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
|
|
.fc-info{flex:1}
|
|
.fc-title{font-size:1rem;font-weight:700;margin-bottom:.3rem;line-height:1.3}
|
|
.fc-meta{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.72rem;color:var(--sv)}.fc-meta span{display:flex;align-items:center;gap:.25rem}
|
|
.fc-desc{padding:0 1.5rem;font-size:.82rem;color:var(--sv);line-height:1.6;margin-bottom:1rem}
|
|
.fc-bar{height:3px;background:var(--a08);margin:0 1.5rem;border-radius:2px;overflow:hidden}.fc-bar-fill{height:100%;background:var(--a);border-radius:2px;transition:width .5s}
|
|
.fc-bottom{padding:.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
|
|
.fc-badge{font-size:.7rem;font-weight:600;padding:.2rem .6rem;border-radius:100px;text-transform:uppercase;letter-spacing:.03em}
|
|
.fc-badge.deb{background:rgba(34,197,94,.12);color:#22c55e}
|
|
.fc-badge.inter{background:rgba(59,130,246,.12);color:#3b82f6}
|
|
.fc-badge.avance{background:rgba(168,85,247,.12);color:#a855f7}
|
|
.fc-badge.tous{background:var(--a15);color:var(--a)}
|
|
.fc-start{font-size:.78rem;font-weight:600;color:var(--a);display:flex;align-items:center;gap:.3rem;opacity:.7;transition:opacity .2s}
|
|
.fc:hover .fc-start{opacity:1}
|
|
/* Expanded module */
|
|
.module-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:200;overflow-y:auto;padding:2rem}
|
|
.module-overlay.active{display:flex;justify-content:center;align-items:flex-start}
|
|
.module-panel{background:var(--bg);border:1px solid var(--a08);border-radius:20px;max-width:900px;width:100%;margin:auto;animation:slideUp .3s}
|
|
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
|
.mp-header{padding:2rem 2.5rem;border-bottom:1px solid var(--a08);display:flex;justify-content:space-between;align-items:flex-start}
|
|
.mp-close{background:var(--s);border:1px solid var(--a08);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sv);font-size:1.2rem;transition:all .2s}.mp-close:hover{border-color:var(--a);color:var(--a)}
|
|
.mp-body{padding:2rem 2.5rem}
|
|
.chapter{background:var(--s);border:1px solid var(--a08);border-radius:12px;margin-bottom:.8rem;overflow:hidden;transition:all .2s}
|
|
.chapter:hover{border-color:var(--a30)}
|
|
.ch-head{padding:1rem 1.2rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
|
|
.ch-title{font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:.6rem}
|
|
.ch-dur{font-size:.72rem;color:var(--sv);font-family:'Space Mono',monospace}
|
|
.ch-content{padding:0 1.2rem 1rem;font-size:.82rem;color:var(--sv);line-height:1.7;display:none}
|
|
.ch-content.open{display:block}
|
|
.ch-arrow{transition:transform .2s;color:var(--sv)}.ch-arrow.open{transform:rotate(90deg);color:var(--a)}
|
|
/* Quiz */
|
|
.quiz-section{margin-top:2rem;padding:2rem;background:var(--s);border:1px solid var(--a08);border-radius:16px}
|
|
.quiz-q{margin-bottom:1.5rem}
|
|
.quiz-q h4{font-size:.9rem;font-weight:600;margin-bottom:.8rem;display:flex;gap:.5rem}
|
|
.quiz-q label{display:block;padding:.5rem .8rem;margin-bottom:.4rem;background:var(--s2);border:1px solid transparent;border-radius:8px;font-size:.82rem;cursor:pointer;transition:all .15s}
|
|
.quiz-q label:hover{border-color:var(--a30)}
|
|
.quiz-q label.correct{background:rgba(34,197,94,.1);border-color:#22c55e;color:#22c55e}
|
|
.quiz-q label.wrong{background:rgba(239,68,68,.1);border-color:#ef4444;color:#ef4444}
|
|
.quiz-result{text-align:center;padding:2rem;background:var(--s2);border-radius:12px;margin-top:1rem}
|
|
.quiz-score{font-family:'Space Mono',monospace;font-size:3rem;font-weight:700;color:var(--a)}
|
|
.btn-quiz{background:var(--a);color:var(--bg);padding:.7rem 1.5rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;font-family:'Outfit';font-size:.85rem;margin-top:1rem}
|
|
/* CTA */
|
|
.cta{text-align:center;padding:4rem 2rem;margin:2rem 4%;background:linear-gradient(135deg,var(--s),rgba(245,158,11,.04));border:1px solid var(--a08);border-radius:20px}.cta p{color:var(--sv);max-width:450px;margin:.5rem auto 1.5rem;font-size:.95rem;line-height:1.6}
|
|
footer{padding:2rem 4%;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.04);font-size:.75rem;color:var(--sv)}footer a{color:var(--a);text-decoration:none}
|
|
@media(max-width:900px){h1{font-size:2.2rem}.fg{grid-template-columns:1fr}.stats{gap:1.5rem;flex-wrap:wrap}.nav-links{display:none}footer{flex-direction:column;gap:.5rem;text-align:center}}
|
|
@media(max-width:600px){.module-panel{margin:1rem;border-radius:14px}.mp-header,.mp-body{padding:1.2rem 1.5rem}}
|
|
input,select,textarea{background:#0b0d14!important;color:#e2e8f0!important;border:1px solid #1e293b!important;border-radius:8px!important}input::placeholder{color:#475569!important}</style>
|
|
<link rel="canonical" href="https://weval-consulting.com/products/academy-elearning-v2.html">
|
|
|
|
<!-- DOCTRINE-60-UX-ENRICH products-batch-doctrine195 -->
|
|
<style id="wtp-doctrine60-ux-premium">
|
|
:root {
|
|
--wtp-bg-start:#0a0f1c; --wtp-bg-end:#0f172a;
|
|
--wtp-surface:rgba(15,23,42,.85); --wtp-surface-hover:rgba(30,41,59,.9);
|
|
--wtp-border:rgba(99,102,241,.25); --wtp-border-hover:rgba(99,102,241,.5);
|
|
--wtp-text:#e2e8f0; --wtp-text-dim:#94a3b8; --wtp-text-bright:#f1f5f9;
|
|
--wtp-primary:#6366f1; --wtp-primary-hover:#7c7feb;
|
|
--wtp-accent:#8b5cf6; --wtp-success:#10b981; --wtp-warning:#f59e0b; --wtp-danger:#ef4444;
|
|
--wtp-radius:12px; --wtp-shadow:0 4px 24px rgba(99,102,241,.15); --wtp-shadow-lg:0 8px 48px rgba(99,102,241,.25);
|
|
--wtp-transition:all .2s cubic-bezier(.4,0,.2,1);
|
|
--wtp-font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--wtp-font-mono:'JetBrains Mono',monospace;
|
|
}
|
|
.wtp-card{background:var(--wtp-surface);border:1px solid var(--wtp-border);border-radius:var(--wtp-radius);padding:20px;transition:var(--wtp-transition)}
|
|
.wtp-card:hover{border-color:var(--wtp-border-hover);box-shadow:var(--wtp-shadow)}
|
|
.wtp-btn{background:linear-gradient(135deg,var(--wtp-primary),var(--wtp-accent));color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:var(--wtp-transition)}
|
|
.wtp-btn:hover{transform:translateY(-1px);box-shadow:var(--wtp-shadow)}
|
|
.wtp-badge{display:inline-flex;align-items:center;padding:4px 10px;background:var(--wtp-surface);border:1px solid var(--wtp-border);border-radius:20px;font-size:12px;color:var(--wtp-text-dim)}
|
|
@media (max-width:768px){#weval-bot-widget{bottom:100px !important;right:16px !important;z-index:10001 !important}#weval-bot-btn{width:48px !important;height:48px !important}#weval-bot-btn svg{width:22px !important;height:22px !important}#footer_banner,.footer-banner,[class*="footer-bandeau"]{z-index:9990 !important}}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<a href="/" class="logo">WE<span>VAL</span> Academy</a>
|
|
<div class="nav-links">
|
|
<a href="/products/academy.html">Présentation</a>
|
|
<a href="#formations">Formations</a>
|
|
<a href="#cta">Certification</a>
|
|
<a href="/booking.html" class="btn-n">Prendre RDV →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="badge">🎓 E-Learning — 11 Formations Certifiantes</div>
|
|
<h1>Maîtrisez l'IA avec <em>WEVAL Academy</em></h1>
|
|
<p class="sub">11 formations complètes, quiz interactifs et certification officielle. Du débutant au niveau avancé, formez-vous à votre rythme.</p>
|
|
<div class="btns">
|
|
<a href="#formations" class="btn-p">Explorer les formations →</a>
|
|
<a href="/booking.html" class="btn-o">Prendre rendez-vous</a>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat"><div class="stat-v">11</div><div class="stat-l">Formations</div></div>
|
|
<div class="stat"><div class="stat-v">12</div><div class="stat-l">Quiz</div></div>
|
|
<div class="stat"><div class="stat-v">515</div><div class="stat-l">Minutes</div></div>
|
|
<div class="stat"><div class="stat-v">96%</div><div class="stat-l">Satisfaction</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sec" id="formations">
|
|
<div class="stag">E-Learning</div>
|
|
<h2>Nos 11 Formations</h2>
|
|
<div class="sd">Chaque formation comprend des chapitres, un quiz interactif et une certification à la clé.</div>
|
|
<div class="fg" id="formations-grid"></div>
|
|
</section>
|
|
|
|
<div class="module-overlay" id="moduleOverlay">
|
|
<div class="module-panel" id="modulePanel"></div>
|
|
</div>
|
|
|
|
<section class="cta" id="cta">
|
|
<div class="stag">Certification</div>
|
|
<h2>Prêt à vous certifier ?</h2>
|
|
<p>Complétez une formation, réussissez le quiz (70%+) et obtenez votre certificat WEVAL Academy officiel.</p>
|
|
<a href="/booking.html" class="btn-p">Prendre rendez-vous →</a>
|
|
</section>
|
|
|
|
<footer>
|
|
<div>© 2026 <a href="/">WEVAL Consulting</a> — Academy E-Learning</div>
|
|
<div><a href="/products/academy.html">Academy</a> · <a href="/products/">Products</a> · <a href="/wevia">WEVIA</a></div>
|
|
</footer>
|
|
|
|
<script>
|
|
const formations = [
|
|
{id:1,icon:"🤖",title:"Introduction à l'IA Générative",dur:"45 min",level:"Débutant",lvl:"deb",desc:"Découvrez les fondamentaux de l'IA générative: LLM, GPT, diffusion et applications concrètes en entreprise.",chapters:["Qu'est-ce que l'IA Générative ?","Les grands modèles de langage (LLM)","GPT, Claude, Gemini: comprendre les différences","Applications concrètes en entreprise","Limites et risques éthiques"],quiz:[{q:"Que signifie LLM ?",o:["Large Language Model","Linear Learning Machine","Logic Language Model"],a:0},{q:"Quel est le principal risque des LLM ?",o:["Coût élevé","Hallucinations","Lenteur"],a:1},{q:"Quelle technique permet d'améliorer les réponses d'un LLM ?",o:["Le fine-tuning","Le reboot","La compression"],a:0},{q:"Claude est développé par ?",o:["OpenAI","Google","Anthropic"],a:2}]},
|
|
{id:2,icon:"✍️",title:"Prompt Engineering Fondamentaux",dur:"40 min",level:"Débutant",lvl:"deb",desc:"Apprenez l'art du prompt: structuration, techniques de base et patterns efficaces pour guider l'IA.",chapters:["Anatomie d'un prompt efficace","Techniques de structuration","Zero-shot vs Few-shot","Chain of Thought (CoT)","Bonnes pratiques et anti-patterns"],quiz:[{q:"Qu'est-ce que le Few-shot prompting ?",o:["Donner des exemples dans le prompt","Utiliser peu de tokens","Poser une question courte"],a:0},{q:"Le Chain of Thought consiste à ?",o:["Demander un résultat direct","Guider le raisonnement étape par étape","Limiter la longueur de réponse"],a:1},{q:"Quel élément est essentiel dans un prompt ?",o:["Des emojis","Un contexte clair","Du code HTML"],a:1}]},
|
|
{id:3,icon:"🧠",title:"Prompt Engineering Avancé",dur:"50 min",level:"Avancé",lvl:"avance",desc:"Techniques avancées: RAG, agents, function calling, system prompts et orchestration multi-modèles.",chapters:["System prompts avancés","RAG: Retrieval Augmented Generation","Function Calling & Tool Use","Agents autonomes","Orchestration multi-modèles","Évaluation et benchmarking"],quiz:[{q:"RAG combine ?",o:["Recherche + Génération","Réseau + API + GPU","Réduction + Analyse + Graphe"],a:0},{q:"Le Function Calling permet ?",o:["D'appeler des fonctions Python","Au LLM d'utiliser des outils externes","De créer des fonctions mathématiques"],a:1},{q:"Un agent IA autonome peut ?",o:["Planifier et exécuter des tâches","Uniquement répondre à des questions","Créer d'autres IA"],a:0}]},
|
|
{id:4,icon:"🏠",title:"LLM Souverain avec Ollama",dur:"55 min",level:"Intermédiaire",lvl:"inter",desc:"Déployez vos propres LLM on-premise avec Ollama: installation, configuration, modèles et intégration API.",chapters:["Pourquoi un LLM souverain ?","Installation d'Ollama","Les modèles disponibles (Llama, Mistral, Qwen)","Configuration et optimisation","API REST et intégration","Comparaison: Cloud vs On-Premise"],quiz:[{q:"Ollama permet de ?",o:["Faire tourner des LLM localement","Uniquement utiliser GPT","Créer des images"],a:0},{q:"Quel modèle n'est PAS disponible sur Ollama ?",o:["Llama","GPT-4","Mistral"],a:1},{q:"L'avantage principal d'un LLM souverain ?",o:["Rapidité","Contrôle des données","Coût zéro"],a:1}]},
|
|
{id:5,icon:"☁️",title:"Architecture Cloud IA",dur:"45 min",level:"Avancé",lvl:"avance",desc:"Concevez des architectures cloud scalables pour l'IA: conteneurs, GPU, API gateways et monitoring.",chapters:["Architecture microservices pour l'IA","Conteneurisation avec Docker","GPU Cloud: Huawei, AWS, GCP","API Gateway et Load Balancing","Monitoring et observabilité"],quiz:[{q:"Docker permet de ?",o:["Conteneuriser des applications","Uniquement stocker des données","Accélérer le GPU"],a:0},{q:"Un API Gateway sert à ?",o:["Router et sécuriser les requêtes API","Stocker les modèles IA","Entraîner des LLM"],a:0}]},
|
|
{id:6,icon:"🔒",title:"Sécurité IA & Protection Données",dur:"40 min",level:"Intermédiaire",lvl:"inter",desc:"Sécurisez vos déploiements IA: prompt injection, data leakage, RGPD et audit de vulnérabilités.",chapters:["Menaces sur les systèmes IA","Prompt Injection: attaques et défenses","Data Leakage et exfiltration","RGPD et conformité","Audit de sécurité IA"],quiz:[{q:"Le Prompt Injection consiste à ?",o:["Optimiser un prompt","Manipuler l'IA via le prompt","Injecter du SQL"],a:1},{q:"La RGPD impose ?",o:["D'utiliser uniquement des LLM européens","La protection des données personnelles","L'interdiction de l'IA"],a:1}]},
|
|
{id:7,icon:"👔",title:"IA pour Managers & COMEX",dur:"35 min",level:"Débutant",lvl:"deb",desc:"Vision stratégique de l'IA pour décideurs: ROI, transformation, gouvernance et cas d'usage métier.",chapters:["L'IA: opportunité stratégique","Calculer le ROI de l'IA","Gouvernance et éthique","Cas d'usage par secteur","Piloter un projet IA"],quiz:[{q:"Le principal frein à l'adoption de l'IA en entreprise ?",o:["Le coût matériel","La résistance au changement","Le manque d'électricité"],a:1},{q:"Un sponsor exécutif est important car ?",o:["Il finance le projet","Il donne la vision et lève les blocages","Il code les algorithmes"],a:1}]},
|
|
{id:8,icon:"⚙️",title:"Automatisation IA & N8N",dur:"50 min",level:"Intermédiaire",lvl:"inter",desc:"Automatisez vos workflows avec l'IA et N8N: intégrations, triggers, chaînes de traitement et monitoring.",chapters:["Introduction à l'automatisation","N8N: installation et configuration","Créer des workflows IA","Intégrations: email, CRM, API","Triggers et scheduling","Monitoring et alertes"],quiz:[{q:"N8N est ?",o:["Un LLM","Un outil d'automatisation workflow","Un langage de programmation"],a:1},{q:"Un trigger dans N8N ?",o:["Déclenche un workflow automatiquement","Supprime un workflow","Crée un nouveau modèle IA"],a:0}]},
|
|
{id:9,icon:"📖",title:"Comprendre les LLM en Profondeur",dur:"40 min",level:"Débutant",lvl:"deb",desc:"Plongez dans le fonctionnement des LLM: transformers, attention, tokenization et fine-tuning.",chapters:["L'architecture Transformer","Le mécanisme d'Attention","Tokenization et embeddings","Pré-entraînement et fine-tuning","Scaling laws"],quiz:[{q:"L'architecture Transformer a été introduite dans ?",o:["'Attention Is All You Need'","'Deep Learning'","'ImageNet'"],a:0},{q:"La tokenization consiste à ?",o:["Découper le texte en unités","Chiffrer les données","Compresser les images"],a:0}]},
|
|
{id:10,icon:"📊",title:"IA & Data Analytics",dur:"45 min",level:"Intermédiaire",lvl:"inter",desc:"Exploitez l'IA pour l'analyse de données: NLP, classification, prédiction et visualisation intelligente.",chapters:["IA et analyse de données","NLP: extraction d'insights textuels","Classification et clustering","Modèles prédictifs","Visualisation intelligente"],quiz:[{q:"NLP signifie ?",o:["Natural Language Processing","Neural Learning Platform","Network Logic Protocol"],a:0},{q:"Le clustering permet de ?",o:["Grouper des données similaires","Prédire des valeurs futures","Générer du texte"],a:0}]},
|
|
{id:11,icon:"📜",title:"Guide Certifications IA",dur:"30 min",level:"Tous",lvl:"tous",desc:"Tour d'horizon des certifications IA: AWS AI, Google Cloud AI, Azure AI, et certifications WEVAL.",chapters:["Panorama des certifications IA","AWS Certified Machine Learning","Google Cloud Professional ML","Microsoft Azure AI","Certifications WEVAL Academy"],quiz:[{q:"Quelle certification AWS est liée au ML ?",o:["AWS Solutions Architect","AWS ML Specialty","AWS DevOps"],a:1},{q:"Les certifications WEVAL sont ?",o:["Uniquement théoriques","Basées sur quiz + projets pratiques","Gratuites et sans examen"],a:1}]}
|
|
];
|
|
|
|
// Render formations grid
|
|
const grid=document.getElementById('formations-grid');
|
|
formations.forEach((f,i)=>{
|
|
const card=document.createElement('div');
|
|
card.className='fc';
|
|
card.onclick=()=>openModule(f);
|
|
card.innerHTML=`
|
|
<div class="fc-top">
|
|
<div class="fc-icon">${f.icon}</div>
|
|
<div class="fc-info">
|
|
<div class="fc-title">${f.title}</div>
|
|
<div class="fc-meta"><span>⏱ ${f.dur}</span><span>📚 ${f.chapters.length} chapitres</span><span>❓ ${f.quiz.length}Q</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="fc-desc">${f.desc}</div>
|
|
<div class="fc-bar"><div class="fc-bar-fill" style="width:0%"></div></div>
|
|
<div class="fc-bottom">
|
|
<span class="fc-badge ${f.lvl}">${f.level}</span>
|
|
<span class="fc-start">Commencer →</span>
|
|
</div>`;
|
|
grid.appendChild(card);
|
|
});
|
|
|
|
// Open module detail
|
|
function openModule(f){
|
|
const o=document.getElementById('moduleOverlay');
|
|
const p=document.getElementById('modulePanel');
|
|
p.innerHTML=`
|
|
<div class="mp-header">
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem">
|
|
<span style="font-size:2rem">${f.icon}</span>
|
|
<h2 style="font-size:1.5rem">${f.title}</h2>
|
|
</div>
|
|
<div class="fc-meta"><span>⏱ ${f.dur}</span><span>📚 ${f.chapters.length} chapitres</span><span>❓ ${f.quiz.length} questions</span><span class="fc-badge ${f.lvl}" style="margin-left:.5rem">${f.level}</span></div>
|
|
</div>
|
|
<button class="mp-close" onclick="closeModule()">✕</button>
|
|
</div>
|
|
<div class="mp-body">
|
|
<p style="color:var(--sv);font-size:.9rem;line-height:1.7;margin-bottom:1.5rem">${f.desc}</p>
|
|
<div class="stag">Chapitres</div>
|
|
${f.chapters.map((ch,i)=>`
|
|
<div class="chapter" onclick="toggleCh(this)">
|
|
<div class="ch-head">
|
|
<span class="ch-title"><span class="ch-arrow">▶</span> ${i+1}. ${ch}</span>
|
|
<span class="ch-dur">${8+Math.floor(Math.random()*7)} min</span>
|
|
</div>
|
|
<div class="ch-content">
|
|
<p>Ce chapitre couvre les concepts clés de "${ch}". Vous apprendrez les fondamentaux, les meilleures pratiques et les applications concrètes en contexte professionnel.</p>
|
|
<p style="margin-top:.5rem">Objectifs: Comprendre les principes, savoir appliquer en situation réelle, identifier les pièges courants.</p>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
|
|
<div class="quiz-section" id="quiz-${f.id}">
|
|
<div class="stag">Quiz — ${f.quiz.length} questions</div>
|
|
<h3 style="margin-bottom:1.5rem">Testez vos connaissances</h3>
|
|
${f.quiz.map((q,i)=>`
|
|
<div class="quiz-q" data-answer="${q.a}">
|
|
<h4><span style="color:var(--a)">${i+1}.</span> ${q.q}</h4>
|
|
${q.o.map((opt,j)=>`<label onclick="selectAnswer(this,${j},${q.a})"><input type="radio" name="q${f.id}-${i}" style="display:none"> ${opt}</label>`).join('')}
|
|
</div>
|
|
`).join('')}
|
|
<div style="text-align:center">
|
|
<button class="btn-quiz" onclick="submitQuiz(${f.id},${f.quiz.length})">Valider le quiz</button>
|
|
</div>
|
|
<div class="quiz-result" id="result-${f.id}" style="display:none"></div>
|
|
</div>
|
|
</div>`;
|
|
o.classList.add('active');
|
|
document.body.style.overflow='hidden';
|
|
}
|
|
|
|
function closeModule(){
|
|
document.getElementById('moduleOverlay').classList.remove('active');
|
|
document.body.style.overflow='';
|
|
}
|
|
|
|
document.getElementById('moduleOverlay').addEventListener('click',function(e){
|
|
if(e.target===this)closeModule();
|
|
});
|
|
|
|
function toggleCh(el){
|
|
const c=el.querySelector('.ch-content');
|
|
const a=el.querySelector('.ch-arrow');
|
|
c.classList.toggle('open');
|
|
a.classList.toggle('open');
|
|
}
|
|
|
|
let answers={};
|
|
function selectAnswer(label,selected,correct){
|
|
const q=label.parentElement;
|
|
q.querySelectorAll('label').forEach(l=>{l.className='';l.style.fontWeight=''});
|
|
label.style.fontWeight='600';
|
|
label.style.borderColor='var(--a)';
|
|
const qIdx=q.querySelector('h4 span').textContent;
|
|
answers[qIdx]=selected;
|
|
}
|
|
|
|
function submitQuiz(fid,total){
|
|
const section=document.getElementById('quiz-'+fid);
|
|
const questions=section.querySelectorAll('.quiz-q');
|
|
let score=0;
|
|
questions.forEach(q=>{
|
|
const correct=parseInt(q.dataset.answer);
|
|
const labels=q.querySelectorAll('label');
|
|
labels.forEach((l,i)=>{
|
|
if(i===correct)l.classList.add('correct');
|
|
});
|
|
const selected=q.querySelector('label[style*="fontWeight"]')||q.querySelector('label[style*="font-weight"]');
|
|
if(selected){
|
|
const idx=Array.from(labels).indexOf(selected);
|
|
if(idx===correct)score++;
|
|
else selected.classList.add('wrong');
|
|
}
|
|
});
|
|
const pct=Math.round(score/total*100);
|
|
const pass=pct>=70;
|
|
const r=document.getElementById('result-'+fid);
|
|
r.style.display='block';
|
|
r.innerHTML=`
|
|
<div class="quiz-score">${pct}%</div>
|
|
<p style="font-size:1.1rem;font-weight:600;margin:.5rem 0;color:${pass?'var(--g)':'var(--r)'}">${pass?'🎉 Félicitations ! Quiz réussi !':'❌ Score insuffisant (70% requis)'}</p>
|
|
<p style="font-size:.85rem;color:var(--sv)">${score}/${total} réponses correctes</p>
|
|
${pass?'<p style="margin-top:1rem;font-size:.82rem;color:var(--a)">🏆 Certificat WEVAL Academy disponible</p>':'<p style="margin-top:1rem;font-size:.82rem;color:var(--sv)">Relisez les chapitres et réessayez</p>'}`;
|
|
r.scrollIntoView({behavior:'smooth',block:'center'});
|
|
}
|
|
|
|
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModule()});
|
|
</script>
|
|
</body>
|
|
</html>
|