Maroc Zain Academy \u2014 1 Million Question Engine<\/title>\n<style>\n:root{\n --navy:#071d3a;--blue:#0f5f9a;--gold:#e9c84a;--bg:#f4f7fb;--card:#fff;\n --text:#1b2638;--muted:#6f7d90;--border:#e5ebf3;--success:#1f9d66;--danger:#bf3b32;\n}\n*{box-sizing:border-box}\nbody{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}\n.wrap{max-width:1400px;margin:auto;padding:24px}\n.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:26px;padding:34px;display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:center}\n.hero h1{font-size:40px;margin:0 0 12px}.hero p{opacity:.9;max-width:800px}\n.hero-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px}\n.hero-card strong{display:block;font-size:34px}\n.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}\n.tab{border:0;background:#fff;padding:12px 15px;border-radius:12px;cursor:pointer;font-weight:800;border:1px solid var(--border)}\n.tab.active{background:var(--navy);color:#fff}\n.panel{display:none}.panel.active{display:block}\n.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 10px 26px rgba(20,48,80,.06)}\n.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}\n.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}\nlabel{font-weight:700;font-size:14px}\nselect,input,textarea{width:100%;padding:11px;border:1px solid #d9e2ec;border-radius:10px;margin-top:6px}\n.btn{border:0;border-radius:11px;padding:12px 16px;font-weight:800;cursor:pointer}\n.btn-blue{background:var(--blue);color:#fff}.btn-gold{background:var(--gold);color:var(--navy)}.btn-soft{background:#edf5fc;color:var(--blue)}\n.q{margin-top:18px}.scenario{background:#f1f6fb;border-left:4px solid var(--blue);padding:13px;border-radius:8px}\n.opt{display:block;padding:11px;border:1px solid var(--border);border-radius:10px;margin:8px 0;cursor:pointer}\n.opt:hover{background:#f7fafc}\n.result{font-size:24px;font-weight:900;margin-top:18px}\n.metric{font-size:28px;font-weight:900;color:var(--blue)}\n.small{font-size:13px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid var(--border);text-align:left}th{font-size:12px;text-transform:uppercase;color:var(--muted)}\n.pill{display:inline-block;padding:6px 9px;border-radius:999px;background:#edf6ff;color:var(--blue);font-size:12px;font-weight:800}\n.note{background:#fff8dc;border:1px solid #f1dc7e;padding:13px;border-radius:11px;color:#735f00}\n@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero,.two{grid-template-columns:1fr}}\n@media(max-width:600px){.grid{grid-template-columns:1fr}.wrap{padding:14px}.hero h1{font-size:30px}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n<section class=\"hero\">\n <div>\n <span class=\"pill\" style=\"background:rgba(255,255,255,.15);color:#fff\">MAROC ZAIN ACADEMY LMS<\/span>\n <h1>1 Million Question Engine<\/h1>\n <p>Moteur HTML de d\u00e9monstration pour g\u00e9n\u00e9rer des examens uniques \u00e0 partir de sc\u00e9narios, m\u00e9tiers, niveaux, comp\u00e9tences et types d’\u00e9valuation.<\/p>\n <\/div>\n <div class=\"hero-card\">\n <strong>1 000 000<\/strong>\n <span>capacit\u00e9 cible de cas et questions<\/span>\n <p class=\"small\" style=\"color:#fff;opacity:.8\">La page g\u00e9n\u00e8re des variantes localement. Pour une vraie banque d’un million, utilisez une base de donn\u00e9es c\u00f4t\u00e9 serveur.<\/p>\n <\/div>\n<\/section>\n\n<div class=\"tabs\">\n <button class=\"tab active\" data-tab=\"dashboard\">\ud83d\udcca Dashboard<\/button>\n <button class=\"tab\" data-tab=\"qcm\">\u2705 QCM avanc\u00e9s<\/button>\n <button class=\"tab\" data-tab=\"written\">\u270d\ufe0f Examen \u00e9crit<\/button>\n <button class=\"tab\" data-tab=\"oral\">\ud83c\udf99\ufe0f Examen oral<\/button>\n <button class=\"tab\" data-tab=\"bank\">\ud83d\uddc3 Banque<\/button>\n<\/div>\n\n<section id=\"dashboard\" class=\"panel active\">\n <div class=\"grid\">\n <div class=\"card\"><div class=\"small\">Capacit\u00e9 cible<\/div><div class=\"metric\">1 000 000<\/div><\/div>\n <div class=\"card\"><div class=\"small\">M\u00e9tiers<\/div><div class=\"metric\">12+<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Niveaux<\/div><div class=\"metric\">5<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Types d’\u00e9valuation<\/div><div class=\"metric\">8<\/div><\/div>\n <\/div>\n <div class=\"card\">\n <h2>Architecture de g\u00e9n\u00e9ration<\/h2>\n <p><strong>M\u00e9tier \u2192 Module \u2192 Comp\u00e9tence \u2192 Niveau \u2192 Sc\u00e9nario \u2192 Question \u2192 R\u00e9ponses \u2192 Explication \u2192 Variante<\/strong><\/p>\n <div class=\"note\">Cette version HTML est id\u00e9ale pour d\u00e9monstration et prototype. Pour enregistrer durablement scores, utilisateurs et 1 000 000 de questions, il faut la connecter \u00e0 WordPress\/MySQL ou \u00e0 une API.<\/div>\n <\/div>\n<\/section>\n\n<section id=\"qcm\" class=\"panel\">\n <div class=\"card\">\n <h2>G\u00e9n\u00e9rateur QCM<\/h2>\n <div class=\"grid\">\n <label>M\u00e9tier\n <select id=\"domain\">\n <option>Chef d’Escale<\/option><option>Agent d’Escale<\/option><option>Chef de Cabine<\/option>\n <option>Fret & Cargo<\/option><option>Agence de Voyages<\/option><option>OCC & Dispatch<\/option>\n <option>Op\u00e9rations au sol<\/option><option>R\u00e9servation<\/option><option>Commercial<\/option>\n <option>Management<\/option><option>Finance<\/option><option>H\u00f4tellerie & Tourisme<\/option>\n <\/select>\n <\/label>\n <label>Niveau\n <select id=\"level\"><option value=\"1\">1 \u2014 Initial<\/option><option value=\"2\">2 \u2014 Interm\u00e9diaire<\/option><option value=\"3\">3 \u2014 Professionnel<\/option><option value=\"4\">4 \u2014 Avanc\u00e9<\/option><option value=\"5\">5 \u2014 Expert<\/option><\/select>\n <\/label>\n <label>Nombre\n <select id=\"count\"><option>5<\/option><option>10<\/option><option>20<\/option><option>30<\/option><option>40<\/option><\/select>\n <\/label>\n <label>Type\n <select id=\"qtype\"><option value=\"decision\">D\u00e9cision op\u00e9rationnelle<\/option><option value=\"priority\">Priorisation<\/option><option value=\"error\">D\u00e9tection d’erreur<\/option><option value=\"client\">Relation client<\/option><\/select>\n <\/label>\n <\/div>\n <br>\n <button class=\"btn btn-blue\" onclick=\"generateExam()\">G\u00e9n\u00e9rer un examen unique<\/button>\n <\/div>\n <div id=\"exam\"><\/div>\n<\/section>\n\n<section id=\"written\" class=\"panel\">\n <div class=\"card\">\n <h2>Examen \u00e9crit \u2014 \u00c9tude de cas complexe<\/h2>\n <p id=\"writtenScenario\"><\/p>\n <ol>\n <li>Identifiez les risques critiques.<\/li>\n <li>Proposez un plan d’action chronologique.<\/li>\n <li>D\u00e9finissez les parties prenantes \u00e0 coordonner.<\/li>\n <li>R\u00e9digez la communication op\u00e9rationnelle et client.<\/li>\n <li>Justifiez votre d\u00e9cision finale.<\/li>\n <li>Proposez 5 KPI de retour d’exp\u00e9rience.<\/li>\n <\/ol>\n <textarea id=\"writtenText\" rows=\"18\" placeholder=\"R\u00e9digez votre r\u00e9ponse structur\u00e9e...\"><\/textarea>\n <br><br>\n <button class=\"btn btn-blue\" onclick=\"evaluateWritten()\">\u00c9valuer la structure<\/button>\n <button class=\"btn btn-soft\" onclick=\"newWritten()\">Nouveau cas<\/button>\n <div id=\"writtenResult\"><\/div>\n <\/div>\n<\/section>\n\n<section id=\"oral\" class=\"panel\">\n <div class=\"two\">\n <div class=\"card\">\n <h2>Oral Engine<\/h2>\n <p id=\"oralScenario\"><\/p>\n <div class=\"note\" id=\"oralQuestion\">Pr\u00e9sentez vos trois priorit\u00e9s imm\u00e9diates et justifiez leur ordre.<\/div>\n <br>\n <textarea id=\"oralNotes\" rows=\"10\" placeholder=\"Notes de pr\u00e9paration...\"><\/textarea>\n <br><br>\n <button class=\"btn btn-blue\" onclick=\"startTimer()\">D\u00e9marrer 3 min<\/button>\n <button class=\"btn btn-soft\" onclick=\"nextOral()\">Question suivante<\/button>\n <p id=\"timer\"><\/p>\n <\/div>\n <div class=\"card\">\n <h2>Grille jury<\/h2>\n <label>Analyse \/20 <input type=\"range\" id=\"r1\" min=\"0\" max=\"20\" value=\"15\"><\/label>\n <label>D\u00e9cision \/25 <input type=\"range\" id=\"r2\" min=\"0\" max=\"25\" value=\"18\"><\/label>\n <label>Leadership \/20 <input type=\"range\" id=\"r3\" min=\"0\" max=\"20\" value=\"15\"><\/label>\n <label>Communication \/15 <input type=\"range\" id=\"r4\" min=\"0\" max=\"15\" value=\"12\"><\/label>\n <label>Ma\u00eetrise m\u00e9tier \/15 <input type=\"range\" id=\"r5\" min=\"0\" max=\"15\" value=\"12\"><\/label>\n <label>Posture \/5 <input type=\"range\" id=\"r6\" min=\"0\" max=\"5\" value=\"4\"><\/label>\n <br><button class=\"btn btn-gold\" onclick=\"scoreOral()\">Calculer la note<\/button>\n <div id=\"oralResult\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"bank\" class=\"panel\">\n <div class=\"card\">\n <h2>Structure de la banque de questions<\/h2>\n <table>\n <thead><tr><th>Champ<\/th><th>Exemple<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>M\u00e9tier<\/td><td>Chef d’Escale<\/td><\/tr>\n <tr><td>Module<\/td><td>Gestion des irr\u00e9gularit\u00e9s<\/td><\/tr>\n <tr><td>Comp\u00e9tence<\/td><td>D\u00e9cision op\u00e9rationnelle<\/td><\/tr>\n <tr><td>Niveau<\/td><td>5 \u2014 Expert<\/td><\/tr>\n <tr><td>Type<\/td><td>QCM sc\u00e9nario<\/td><\/tr>\n <tr><td>Sc\u00e9nario<\/td><td>Retard + limitation \u00e9quipage + correspondances<\/td><\/tr>\n <tr><td>Question<\/td><td>Quelle action prioriser ?<\/td><\/tr>\n <tr><td>Bonne r\u00e9ponse<\/td><td>B<\/td><\/tr>\n <tr><td>Explication<\/td><td>Justification m\u00e9tier<\/td><\/tr>\n <tr><td>Langue<\/td><td>FR \/ AR \/ EN<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n<\/section>\n\n<\/div>\n\n<script>\nconst scenarios=[\n \"Vol retard\u00e9 de {d} minutes avec {cx} passagers en correspondance, {um} UMNR et {prm} PRM.\",\n \"Incident technique \u00e0 H-{h} avec \u00e9quipage proche de sa limitation et porte \u00e0 lib\u00e9rer rapidement.\",\n \"Saturation d'escale : trois vols perturb\u00e9s simultan\u00e9ment, bagages en anomalie et forte pression client.\",\n \"Panne DCS \u00e0 H-{h} sur un vol complet avec correspondances courtes et contraintes ATC.\",\n \"AOG avec changement avion potentiel, groupes VIP, passagers vuln\u00e9rables et capacit\u00e9 h\u00f4tel limit\u00e9e.\"\n];\nconst questions=[\n \"Quelle est la priorit\u00e9 op\u00e9rationnelle la plus appropri\u00e9e ?\",\n \"Quelle d\u00e9cision doit \u00eatre prise en premier ?\",\n \"Quel encha\u00eenement d'actions r\u00e9duit le mieux le risque ?\",\n \"Quelle r\u00e9ponse combine au mieux s\u00e9curit\u00e9, ponctualit\u00e9 et exp\u00e9rience client ?\",\n \"Quelle action doit \u00eatre trac\u00e9e avant communication d\u00e9finitive ?\"\n];\n\nfunction rand(min,max){return Math.floor(Math.random()*(max-min+1))+min}\nfunction makeScenario(){\n return scenarios[rand(0,scenarios.length-1)]\n .replace(\"{d}\",rand(30,240)).replace(\"{cx}\",rand(8,90))\n .replace(\"{um}\",rand(0,8)).replace(\"{prm}\",rand(0,6)).replace(\"{h}\",rand(10,60));\n}\nfunction makeQuestion(i){\n const good=\"Analyser les risques, confirmer les contraintes critiques, coordonner les acteurs et tracer la d\u00e9cision\";\n const wrong=[\n \"Agir imm\u00e9diatement sans confirmer les contraintes\",\n \"Traiter uniquement l'aspect client\",\n \"Attendre la r\u00e9solution compl\u00e8te avant toute communication\"\n ];\n let opts=[...wrong,good].sort(()=>Math.random()-.5);\n return {id:i,scenario:makeScenario(),question:questions[rand(0,questions.length-1)],opts,correct:opts.indexOf(good)};\n}\nlet current=[];\n\nfunction generateExam(){\n const n=parseInt(document.getElementById(\"count\").value);\n current=Array.from({length:n},(_,i)=>makeQuestion(i));\n const box=document.getElementById(\"exam\");\n box.innerHTML=current.map((q,i)=>`\n <div class=\"card q\">\n <span class=\"pill\">Question ${i+1}<\/span>\n <div class=\"scenario\">${q.scenario}<\/div>\n <h3>${q.question}<\/h3>\n ${q.opts.map((o,j)=>`<label class=\"opt\"><input type=\"radio\" name=\"q${i}\" value=\"${j}\"> ${String.fromCharCode(65+j)}. ${o}<\/label>`).join(\"\")}\n <\/div>`).join(\"\")+`<button class=\"btn btn-blue\" onclick=\"scoreExam()\">Corriger<\/button><div id=\"score\"><\/div>`;\n}\nfunction scoreExam(){\n let ok=0;\n current.forEach((q,i)=>{\n const x=document.querySelector(`input[name=\"q${i}\"]:checked`);\n if(x && parseInt(x.value)===q.correct) ok++;\n });\n const pct=Math.round(ok\/current.length*100);\n document.getElementById(\"score\").innerHTML=`<div class=\"result\">Score : ${pct}% \u2014 ${ok}\/${current.length}<\/div><div class=\"note\">${pct>=80?\"Niveau expert valid\u00e9 sur cette d\u00e9monstration.\":\"Poursuivez l'entra\u00eenement. Seuil expert recommand\u00e9 : 80%.\"}<\/div>`;\n}\n\nfunction newWritten(){document.getElementById(\"writtenScenario\").innerHTML=\"<strong>Situation :<\/strong> \"+makeScenario()+\" Vous devez produire un plan d'action complet, document\u00e9 et argument\u00e9.\"}\nfunction evaluateWritten(){\n const t=document.getElementById(\"writtenText\").value.trim().toLowerCase();\n let s=0;\n if(t.length>300)s+=20;if(t.length>800)s+=15;if(t.length>1400)s+=10;\n const keys=[\"risque\",\"occ\",\"maintenance\",\"\u00e9quipage\",\"passager\",\"communication\",\"priorit\u00e9\",\"d\u00e9cision\",\"bagage\",\"correspondance\",\"slot\",\"tra\u00e7abilit\u00e9\",\"kpi\"];\n keys.forEach(k=>{if(t.includes(k))s+=4});\n s=Math.min(100,s);\n document.getElementById(\"writtenResult\").innerHTML=`<div class=\"result\">\u00c9valuation indicative : ${s}\/100<\/div><div class=\"note\">Cette note mesure la structure et la pr\u00e9sence d'\u00e9l\u00e9ments cl\u00e9s. Une vraie correction doit \u00eatre faite par un formateur ou un moteur IA connect\u00e9.<\/div>`;\n}\n\nconst oralQs=[\n \"Pr\u00e9sentez vos trois priorit\u00e9s imm\u00e9diates et justifiez leur ordre.\",\n \"Que faites-vous si le commandant refuse l'heure estim\u00e9e propos\u00e9e ?\",\n \"Comment traitez-vous les passagers vuln\u00e9rables et les correspondances ?\",\n \"Quelles informations transmettez-vous \u00e0 l'OCC dans les cinq premi\u00e8res minutes ?\",\n \"Quelles actions incluez-vous dans le retour d'exp\u00e9rience ?\"\n];\nlet oq=0, timer=null, sec=180;\nfunction nextOral(){oq=(oq+1)%oralQs.length;document.getElementById(\"oralQuestion\").textContent=oralQs[oq]}\nfunction startTimer(){\n clearInterval(timer);sec=180;\n timer=setInterval(()=>{sec--;let m=Math.floor(sec\/60),s=sec%60;document.getElementById(\"timer\").innerHTML=\"<strong>Temps restant : \"+m+\":\"+String(s).padStart(2,\"0\")+\"<\/strong>\";if(sec<=0){clearInterval(timer);document.getElementById(\"timer\").innerHTML=\"<strong>Temps \u00e9coul\u00e9.<\/strong>\"}},1000)\n}\nfunction scoreOral(){\n let total=0;for(let i=1;i<=6;i++) total+=parseInt(document.getElementById(\"r\"+i).value);\n document.getElementById(\"oralResult\").innerHTML=`<div class=\"result\">Note orale : ${total}\/100<\/div><div class=\"note\">${total>=80?\"Admis \u2014 niveau expert\":\"\u00c0 consolider\"}<\/div>`;\n}\ndocument.getElementById(\"oralScenario\").innerHTML=\"<strong>Mise en situation :<\/strong> \"+makeScenario();\nnewWritten();\n\ndocument.querySelectorAll(\".tab\").forEach(b=>b.addEventListener(\"click\",()=>{\n document.querySelectorAll(\".tab\").forEach(x=>x.classList.remove(\"active\"));\n document.querySelectorAll(\".panel\").forEach(x=>x.classList.remove(\"active\"));\n b.classList.add(\"active\");document.getElementById(b.dataset.tab).classList.add(\"active\");\n}));\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Maroc Zain Academy \u2014 1 Million Question Engine MAROC ZAIN ACADEMY LMS 1 Million Question Engine Moteur HTML de d\u00e9monstration pour g\u00e9n\u00e9rer des examens uniques \u00e0 partir de sc\u00e9narios, m\u00e9tiers, niveaux, comp\u00e9tences et types d’\u00e9valuation. 1 000 000 capacit\u00e9 cible de cas et questions La page g\u00e9n\u00e8re des variantes localement. Pour une vraie banque d’un […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3896","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=3896"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896\/revisions"}],"predecessor-version":[{"id":3897,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896\/revisions\/3897"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3896,"date":"2026-08-23T11:40:44","date_gmt":"2026-08-23T11:40:44","guid":{"rendered":"https:\/\/maroczain.com\/?p=3896"},"modified":"2026-08-23T11:40:44","modified_gmt":"2026-08-23T11:40:44","slug":"3896","status":"publish","type":"post","link":"https:\/\/maroczain.com\/en\/2026\/08\/23\/3896\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\nMaroc Zain Academy \u2014 1 Million Question Engine<\/title>\n<style>\n:root{\n --navy:#071d3a;--blue:#0f5f9a;--gold:#e9c84a;--bg:#f4f7fb;--card:#fff;\n --text:#1b2638;--muted:#6f7d90;--border:#e5ebf3;--success:#1f9d66;--danger:#bf3b32;\n}\n*{box-sizing:border-box}\nbody{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}\n.wrap{max-width:1400px;margin:auto;padding:24px}\n.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:26px;padding:34px;display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:center}\n.hero h1{font-size:40px;margin:0 0 12px}.hero p{opacity:.9;max-width:800px}\n.hero-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px}\n.hero-card strong{display:block;font-size:34px}\n.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}\n.tab{border:0;background:#fff;padding:12px 15px;border-radius:12px;cursor:pointer;font-weight:800;border:1px solid var(--border)}\n.tab.active{background:var(--navy);color:#fff}\n.panel{display:none}.panel.active{display:block}\n.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 10px 26px rgba(20,48,80,.06)}\n.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}\n.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}\nlabel{font-weight:700;font-size:14px}\nselect,input,textarea{width:100%;padding:11px;border:1px solid #d9e2ec;border-radius:10px;margin-top:6px}\n.btn{border:0;border-radius:11px;padding:12px 16px;font-weight:800;cursor:pointer}\n.btn-blue{background:var(--blue);color:#fff}.btn-gold{background:var(--gold);color:var(--navy)}.btn-soft{background:#edf5fc;color:var(--blue)}\n.q{margin-top:18px}.scenario{background:#f1f6fb;border-left:4px solid var(--blue);padding:13px;border-radius:8px}\n.opt{display:block;padding:11px;border:1px solid var(--border);border-radius:10px;margin:8px 0;cursor:pointer}\n.opt:hover{background:#f7fafc}\n.result{font-size:24px;font-weight:900;margin-top:18px}\n.metric{font-size:28px;font-weight:900;color:var(--blue)}\n.small{font-size:13px;color:var(--muted)}\ntable{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid var(--border);text-align:left}th{font-size:12px;text-transform:uppercase;color:var(--muted)}\n.pill{display:inline-block;padding:6px 9px;border-radius:999px;background:#edf6ff;color:var(--blue);font-size:12px;font-weight:800}\n.note{background:#fff8dc;border:1px solid #f1dc7e;padding:13px;border-radius:11px;color:#735f00}\n@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero,.two{grid-template-columns:1fr}}\n@media(max-width:600px){.grid{grid-template-columns:1fr}.wrap{padding:14px}.hero h1{font-size:30px}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n<section class=\"hero\">\n <div>\n <span class=\"pill\" style=\"background:rgba(255,255,255,.15);color:#fff\">MAROC ZAIN ACADEMY LMS<\/span>\n <h1>1 Million Question Engine<\/h1>\n <p>Moteur HTML de d\u00e9monstration pour g\u00e9n\u00e9rer des examens uniques \u00e0 partir de sc\u00e9narios, m\u00e9tiers, niveaux, comp\u00e9tences et types d’\u00e9valuation.<\/p>\n <\/div>\n <div class=\"hero-card\">\n <strong>1 000 000<\/strong>\n <span>capacit\u00e9 cible de cas et questions<\/span>\n <p class=\"small\" style=\"color:#fff;opacity:.8\">La page g\u00e9n\u00e8re des variantes localement. Pour une vraie banque d’un million, utilisez une base de donn\u00e9es c\u00f4t\u00e9 serveur.<\/p>\n <\/div>\n<\/section>\n\n<div class=\"tabs\">\n <button class=\"tab active\" data-tab=\"dashboard\">\ud83d\udcca Dashboard<\/button>\n <button class=\"tab\" data-tab=\"qcm\">\u2705 QCM avanc\u00e9s<\/button>\n <button class=\"tab\" data-tab=\"written\">\u270d\ufe0f Examen \u00e9crit<\/button>\n <button class=\"tab\" data-tab=\"oral\">\ud83c\udf99\ufe0f Examen oral<\/button>\n <button class=\"tab\" data-tab=\"bank\">\ud83d\uddc3 Banque<\/button>\n<\/div>\n\n<section id=\"dashboard\" class=\"panel active\">\n <div class=\"grid\">\n <div class=\"card\"><div class=\"small\">Capacit\u00e9 cible<\/div><div class=\"metric\">1 000 000<\/div><\/div>\n <div class=\"card\"><div class=\"small\">M\u00e9tiers<\/div><div class=\"metric\">12+<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Niveaux<\/div><div class=\"metric\">5<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Types d’\u00e9valuation<\/div><div class=\"metric\">8<\/div><\/div>\n <\/div>\n <div class=\"card\">\n <h2>Architecture de g\u00e9n\u00e9ration<\/h2>\n <p><strong>M\u00e9tier \u2192 Module \u2192 Comp\u00e9tence \u2192 Niveau \u2192 Sc\u00e9nario \u2192 Question \u2192 R\u00e9ponses \u2192 Explication \u2192 Variante<\/strong><\/p>\n <div class=\"note\">Cette version HTML est id\u00e9ale pour d\u00e9monstration et prototype. Pour enregistrer durablement scores, utilisateurs et 1 000 000 de questions, il faut la connecter \u00e0 WordPress\/MySQL ou \u00e0 une API.<\/div>\n <\/div>\n<\/section>\n\n<section id=\"qcm\" class=\"panel\">\n <div class=\"card\">\n <h2>G\u00e9n\u00e9rateur QCM<\/h2>\n <div class=\"grid\">\n <label>M\u00e9tier\n <select id=\"domain\">\n <option>Chef d’Escale<\/option><option>Agent d’Escale<\/option><option>Chef de Cabine<\/option>\n <option>Fret & Cargo<\/option><option>Agence de Voyages<\/option><option>OCC & Dispatch<\/option>\n <option>Op\u00e9rations au sol<\/option><option>R\u00e9servation<\/option><option>Commercial<\/option>\n <option>Management<\/option><option>Finance<\/option><option>H\u00f4tellerie & Tourisme<\/option>\n <\/select>\n <\/label>\n <label>Niveau\n <select id=\"level\"><option value=\"1\">1 \u2014 Initial<\/option><option value=\"2\">2 \u2014 Interm\u00e9diaire<\/option><option value=\"3\">3 \u2014 Professionnel<\/option><option value=\"4\">4 \u2014 Avanc\u00e9<\/option><option value=\"5\">5 \u2014 Expert<\/option><\/select>\n <\/label>\n <label>Nombre\n <select id=\"count\"><option>5<\/option><option>10<\/option><option>20<\/option><option>30<\/option><option>40<\/option><\/select>\n <\/label>\n <label>Type\n <select id=\"qtype\"><option value=\"decision\">D\u00e9cision op\u00e9rationnelle<\/option><option value=\"priority\">Priorisation<\/option><option value=\"error\">D\u00e9tection d’erreur<\/option><option value=\"client\">Relation client<\/option><\/select>\n <\/label>\n <\/div>\n <br>\n <button class=\"btn btn-blue\" onclick=\"generateExam()\">G\u00e9n\u00e9rer un examen unique<\/button>\n <\/div>\n <div id=\"exam\"><\/div>\n<\/section>\n\n<section id=\"written\" class=\"panel\">\n <div class=\"card\">\n <h2>Examen \u00e9crit \u2014 \u00c9tude de cas complexe<\/h2>\n <p id=\"writtenScenario\"><\/p>\n <ol>\n <li>Identifiez les risques critiques.<\/li>\n <li>Proposez un plan d’action chronologique.<\/li>\n <li>D\u00e9finissez les parties prenantes \u00e0 coordonner.<\/li>\n <li>R\u00e9digez la communication op\u00e9rationnelle et client.<\/li>\n <li>Justifiez votre d\u00e9cision finale.<\/li>\n <li>Proposez 5 KPI de retour d’exp\u00e9rience.<\/li>\n <\/ol>\n <textarea id=\"writtenText\" rows=\"18\" placeholder=\"R\u00e9digez votre r\u00e9ponse structur\u00e9e...\"><\/textarea>\n <br><br>\n <button class=\"btn btn-blue\" onclick=\"evaluateWritten()\">\u00c9valuer la structure<\/button>\n <button class=\"btn btn-soft\" onclick=\"newWritten()\">Nouveau cas<\/button>\n <div id=\"writtenResult\"><\/div>\n <\/div>\n<\/section>\n\n<section id=\"oral\" class=\"panel\">\n <div class=\"two\">\n <div class=\"card\">\n <h2>Oral Engine<\/h2>\n <p id=\"oralScenario\"><\/p>\n <div class=\"note\" id=\"oralQuestion\">Pr\u00e9sentez vos trois priorit\u00e9s imm\u00e9diates et justifiez leur ordre.<\/div>\n <br>\n <textarea id=\"oralNotes\" rows=\"10\" placeholder=\"Notes de pr\u00e9paration...\"><\/textarea>\n <br><br>\n <button class=\"btn btn-blue\" onclick=\"startTimer()\">D\u00e9marrer 3 min<\/button>\n <button class=\"btn btn-soft\" onclick=\"nextOral()\">Question suivante<\/button>\n <p id=\"timer\"><\/p>\n <\/div>\n <div class=\"card\">\n <h2>Grille jury<\/h2>\n <label>Analyse \/20 <input type=\"range\" id=\"r1\" min=\"0\" max=\"20\" value=\"15\"><\/label>\n <label>D\u00e9cision \/25 <input type=\"range\" id=\"r2\" min=\"0\" max=\"25\" value=\"18\"><\/label>\n <label>Leadership \/20 <input type=\"range\" id=\"r3\" min=\"0\" max=\"20\" value=\"15\"><\/label>\n <label>Communication \/15 <input type=\"range\" id=\"r4\" min=\"0\" max=\"15\" value=\"12\"><\/label>\n <label>Ma\u00eetrise m\u00e9tier \/15 <input type=\"range\" id=\"r5\" min=\"0\" max=\"15\" value=\"12\"><\/label>\n <label>Posture \/5 <input type=\"range\" id=\"r6\" min=\"0\" max=\"5\" value=\"4\"><\/label>\n <br><button class=\"btn btn-gold\" onclick=\"scoreOral()\">Calculer la note<\/button>\n <div id=\"oralResult\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"bank\" class=\"panel\">\n <div class=\"card\">\n <h2>Structure de la banque de questions<\/h2>\n <table>\n <thead><tr><th>Champ<\/th><th>Exemple<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>M\u00e9tier<\/td><td>Chef d’Escale<\/td><\/tr>\n <tr><td>Module<\/td><td>Gestion des irr\u00e9gularit\u00e9s<\/td><\/tr>\n <tr><td>Comp\u00e9tence<\/td><td>D\u00e9cision op\u00e9rationnelle<\/td><\/tr>\n <tr><td>Niveau<\/td><td>5 \u2014 Expert<\/td><\/tr>\n <tr><td>Type<\/td><td>QCM sc\u00e9nario<\/td><\/tr>\n <tr><td>Sc\u00e9nario<\/td><td>Retard + limitation \u00e9quipage + correspondances<\/td><\/tr>\n <tr><td>Question<\/td><td>Quelle action prioriser ?<\/td><\/tr>\n <tr><td>Bonne r\u00e9ponse<\/td><td>B<\/td><\/tr>\n <tr><td>Explication<\/td><td>Justification m\u00e9tier<\/td><\/tr>\n <tr><td>Langue<\/td><td>FR \/ AR \/ EN<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n<\/section>\n\n<\/div>\n\n<script>\nconst scenarios=[\n \"Vol retard\u00e9 de {d} minutes avec {cx} passagers en correspondance, {um} UMNR et {prm} PRM.\",\n \"Incident technique \u00e0 H-{h} avec \u00e9quipage proche de sa limitation et porte \u00e0 lib\u00e9rer rapidement.\",\n \"Saturation d'escale : trois vols perturb\u00e9s simultan\u00e9ment, bagages en anomalie et forte pression client.\",\n \"Panne DCS \u00e0 H-{h} sur un vol complet avec correspondances courtes et contraintes ATC.\",\n \"AOG avec changement avion potentiel, groupes VIP, passagers vuln\u00e9rables et capacit\u00e9 h\u00f4tel limit\u00e9e.\"\n];\nconst questions=[\n \"Quelle est la priorit\u00e9 op\u00e9rationnelle la plus appropri\u00e9e ?\",\n \"Quelle d\u00e9cision doit \u00eatre prise en premier ?\",\n \"Quel encha\u00eenement d'actions r\u00e9duit le mieux le risque ?\",\n \"Quelle r\u00e9ponse combine au mieux s\u00e9curit\u00e9, ponctualit\u00e9 et exp\u00e9rience client ?\",\n \"Quelle action doit \u00eatre trac\u00e9e avant communication d\u00e9finitive ?\"\n];\n\nfunction rand(min,max){return Math.floor(Math.random()*(max-min+1))+min}\nfunction makeScenario(){\n return scenarios[rand(0,scenarios.length-1)]\n .replace(\"{d}\",rand(30,240)).replace(\"{cx}\",rand(8,90))\n .replace(\"{um}\",rand(0,8)).replace(\"{prm}\",rand(0,6)).replace(\"{h}\",rand(10,60));\n}\nfunction makeQuestion(i){\n const good=\"Analyser les risques, confirmer les contraintes critiques, coordonner les acteurs et tracer la d\u00e9cision\";\n const wrong=[\n \"Agir imm\u00e9diatement sans confirmer les contraintes\",\n \"Traiter uniquement l'aspect client\",\n \"Attendre la r\u00e9solution compl\u00e8te avant toute communication\"\n ];\n let opts=[...wrong,good].sort(()=>Math.random()-.5);\n return {id:i,scenario:makeScenario(),question:questions[rand(0,questions.length-1)],opts,correct:opts.indexOf(good)};\n}\nlet current=[];\n\nfunction generateExam(){\n const n=parseInt(document.getElementById(\"count\").value);\n current=Array.from({length:n},(_,i)=>makeQuestion(i));\n const box=document.getElementById(\"exam\");\n box.innerHTML=current.map((q,i)=>`\n <div class=\"card q\">\n <span class=\"pill\">Question ${i+1}<\/span>\n <div class=\"scenario\">${q.scenario}<\/div>\n <h3>${q.question}<\/h3>\n ${q.opts.map((o,j)=>`<label class=\"opt\"><input type=\"radio\" name=\"q${i}\" value=\"${j}\"> ${String.fromCharCode(65+j)}. ${o}<\/label>`).join(\"\")}\n <\/div>`).join(\"\")+`<button class=\"btn btn-blue\" onclick=\"scoreExam()\">Corriger<\/button><div id=\"score\"><\/div>`;\n}\nfunction scoreExam(){\n let ok=0;\n current.forEach((q,i)=>{\n const x=document.querySelector(`input[name=\"q${i}\"]:checked`);\n if(x && parseInt(x.value)===q.correct) ok++;\n });\n const pct=Math.round(ok\/current.length*100);\n document.getElementById(\"score\").innerHTML=`<div class=\"result\">Score : ${pct}% \u2014 ${ok}\/${current.length}<\/div><div class=\"note\">${pct>=80?\"Niveau expert valid\u00e9 sur cette d\u00e9monstration.\":\"Poursuivez l'entra\u00eenement. Seuil expert recommand\u00e9 : 80%.\"}<\/div>`;\n}\n\nfunction newWritten(){document.getElementById(\"writtenScenario\").innerHTML=\"<strong>Situation :<\/strong> \"+makeScenario()+\" Vous devez produire un plan d'action complet, document\u00e9 et argument\u00e9.\"}\nfunction evaluateWritten(){\n const t=document.getElementById(\"writtenText\").value.trim().toLowerCase();\n let s=0;\n if(t.length>300)s+=20;if(t.length>800)s+=15;if(t.length>1400)s+=10;\n const keys=[\"risque\",\"occ\",\"maintenance\",\"\u00e9quipage\",\"passager\",\"communication\",\"priorit\u00e9\",\"d\u00e9cision\",\"bagage\",\"correspondance\",\"slot\",\"tra\u00e7abilit\u00e9\",\"kpi\"];\n keys.forEach(k=>{if(t.includes(k))s+=4});\n s=Math.min(100,s);\n document.getElementById(\"writtenResult\").innerHTML=`<div class=\"result\">\u00c9valuation indicative : ${s}\/100<\/div><div class=\"note\">Cette note mesure la structure et la pr\u00e9sence d'\u00e9l\u00e9ments cl\u00e9s. Une vraie correction doit \u00eatre faite par un formateur ou un moteur IA connect\u00e9.<\/div>`;\n}\n\nconst oralQs=[\n \"Pr\u00e9sentez vos trois priorit\u00e9s imm\u00e9diates et justifiez leur ordre.\",\n \"Que faites-vous si le commandant refuse l'heure estim\u00e9e propos\u00e9e ?\",\n \"Comment traitez-vous les passagers vuln\u00e9rables et les correspondances ?\",\n \"Quelles informations transmettez-vous \u00e0 l'OCC dans les cinq premi\u00e8res minutes ?\",\n \"Quelles actions incluez-vous dans le retour d'exp\u00e9rience ?\"\n];\nlet oq=0, timer=null, sec=180;\nfunction nextOral(){oq=(oq+1)%oralQs.length;document.getElementById(\"oralQuestion\").textContent=oralQs[oq]}\nfunction startTimer(){\n clearInterval(timer);sec=180;\n timer=setInterval(()=>{sec--;let m=Math.floor(sec\/60),s=sec%60;document.getElementById(\"timer\").innerHTML=\"<strong>Temps restant : \"+m+\":\"+String(s).padStart(2,\"0\")+\"<\/strong>\";if(sec<=0){clearInterval(timer);document.getElementById(\"timer\").innerHTML=\"<strong>Temps \u00e9coul\u00e9.<\/strong>\"}},1000)\n}\nfunction scoreOral(){\n let total=0;for(let i=1;i<=6;i++) total+=parseInt(document.getElementById(\"r\"+i).value);\n document.getElementById(\"oralResult\").innerHTML=`<div class=\"result\">Note orale : ${total}\/100<\/div><div class=\"note\">${total>=80?\"Admis \u2014 niveau expert\":\"\u00c0 consolider\"}<\/div>`;\n}\ndocument.getElementById(\"oralScenario\").innerHTML=\"<strong>Mise en situation :<\/strong> \"+makeScenario();\nnewWritten();\n\ndocument.querySelectorAll(\".tab\").forEach(b=>b.addEventListener(\"click\",()=>{\n document.querySelectorAll(\".tab\").forEach(x=>x.classList.remove(\"active\"));\n document.querySelectorAll(\".panel\").forEach(x=>x.classList.remove(\"active\"));\n b.classList.add(\"active\");document.getElementById(b.dataset.tab).classList.add(\"active\");\n}));\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Maroc Zain Academy \u2014 1 Million Question Engine MAROC ZAIN ACADEMY LMS 1 Million Question Engine Moteur HTML de d\u00e9monstration pour g\u00e9n\u00e9rer des examens uniques \u00e0 partir de sc\u00e9narios, m\u00e9tiers, niveaux, comp\u00e9tences et types d’\u00e9valuation. 1 000 000 capacit\u00e9 cible de cas et questions La page g\u00e9n\u00e8re des variantes localement. Pour une vraie banque d’un […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-3896","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=3896"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896\/revisions"}],"predecessor-version":[{"id":3897,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3896\/revisions\/3897"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}