{"id":3613,"date":"2026-08-22T17:30:20","date_gmt":"2026-08-22T17:30:20","guid":{"rendered":"https:\/\/maroczain.com\/?p=3613"},"modified":"2026-08-22T17:30:20","modified_gmt":"2026-08-22T17:30:20","slug":"3613","status":"publish","type":"post","link":"https:\/\/maroczain.com\/en\/2026\/08\/22\/3613\/","title":{"rendered":""},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>G\u00e9n\u00e9rateur d&rsquo;attestations \u2014 Maroc Zain Academy<\/title>\n<style>\n:root{\n  --navy:#07273f; --blue:#0d5e8c; --gold:#d7ad45; --cream:#fffaf0;\n  --green:#167c5a; --red:#b63838; --ink:#17212b;\n}\n*{box-sizing:border-box}\nbody{\n  margin:0;font-family:Arial,Helvetica,sans-serif;background:#eef3f7;color:var(--ink);\n}\n.app{max-width:1180px;margin:28px auto;padding:18px}\n.panel{\n  background:#fff;border-radius:20px;padding:24px;box-shadow:0 15px 45px rgba(7,39,63,.13);margin-bottom:22px\n}\nh1{margin:0;color:var(--navy);font-size:clamp(26px,4vw,42px)}\n.sub{color:#5b6a78;margin-top:8px}\n.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}\nlabel{font-weight:700;color:var(--navy)}\ninput,select{\n  width:100%;padding:13px 14px;border:1px solid #cfd9e2;border-radius:12px;margin-top:7px;font-size:15px\n}\n.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}\nbutton{\n  border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer\n}\n.primary{background:var(--navy);color:white}.gold{background:var(--gold);color:#1e2630}.light{background:#eaf2f7;color:var(--navy)}\n.status{margin-top:16px;padding:13px;border-radius:12px;font-weight:700;display:none}\n.status.ok{display:block;background:#e8f7f1;color:#126346}.status.no{display:block;background:#fff0f0;color:#9c2d2d}\n\n.certificate-wrap{display:none;margin-top:18px}\n.certificate{\n  position:relative;background:var(--cream);min-height:760px;padding:55px;border:14px solid var(--navy);\n  outline:4px solid var(--gold);outline-offset:-28px;overflow:hidden;\n}\n.certificate:before,.certificate:after{\n  content:\"\";position:absolute;width:220px;height:220px;border:18px solid rgba(215,173,69,.13);border-radius:50%\n}\n.certificate:before{left:-100px;top:-100px}.certificate:after{right:-100px;bottom:-100px}\n.ribbon{\n  text-align:center;letter-spacing:4px;font-weight:900;color:var(--gold);font-size:14px;text-transform:uppercase\n}\n.brand{text-align:center;font-size:28px;font-weight:900;color:var(--navy);margin-top:12px}\n.cert-title{text-align:center;font-family:Georgia,serif;font-size:48px;color:var(--navy);margin:35px 0 8px}\n.cert-sub{text-align:center;color:#536371;font-size:17px}\n.recipient{text-align:center;font-family:Georgia,serif;font-size:36px;font-weight:700;color:var(--blue);margin:28px 0 14px}\n.bodytext{text-align:center;max-width:780px;margin:0 auto;font-size:19px;line-height:1.7}\n.course{text-align:center;font-size:27px;font-weight:900;color:var(--navy);margin:18px 0}\n.scoreline{\n  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:22px 0\n}\n.badge{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #dcc78e;font-weight:800}\n.mention{color:var(--green)}\n.meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;align-items:end}\n.signature{text-align:center;border-top:1px solid #8c99a5;padding-top:10px}\n.idbox{text-align:center;font-size:13px;color:#596874}\n.seal{\n  position:absolute;right:65px;top:55px;width:95px;height:95px;border:5px double var(--gold);\n  border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;\n  font-size:11px;font-weight:900;color:var(--navy);transform:rotate(8deg);background:#fffdf6\n}\n.verify{margin-top:25px;text-align:center;font-size:12px;color:#66747f}\n.small{font-size:12px;color:#73818d;margin-top:8px}\n@media(max-width:750px){.grid,.meta{grid-template-columns:1fr}.certificate{padding:38px 25px}.seal{position:static;margin:0 auto 10px}.cert-title{font-size:37px}}\n@media print{\n  body{background:#fff}.app>.panel:first-child,.no-print{display:none!important}\n  .app{margin:0;padding:0;max-width:none}.panel{box-shadow:none;padding:0;margin:0}\n  .certificate-wrap{display:block!important}.certificate{min-height:100vh;page-break-inside:avoid}\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"app\">\n  <section class=\"panel no-print\">\n    <h1>G\u00e9n\u00e9rateur automatique d\u2019attestations<\/h1>\n    <div class=\"sub\">Maroc Zain Academy \u2014 d\u00e9clenchement automatique selon le score du candidat.<\/div>\n\n    <div class=\"grid\">\n      <label>Nom et pr\u00e9nom\n        <input id=\"student\" value=\"Candidat D\u00e9mo\" autocomplete=\"name\">\n      <\/label>\n      <label>Formation\n        <input id=\"course\" value=\"Agent d'Escale \u2014 Niveau Avanc\u00e9\">\n      <\/label>\n      <label>Score obtenu (%)\n        <input id=\"score\" type=\"number\" min=\"0\" max=\"100\" value=\"85\">\n      <\/label>\n      <label>Seuil de r\u00e9ussite (%)\n        <input id=\"threshold\" type=\"number\" min=\"0\" max=\"100\" value=\"70\">\n      <\/label>\n      <label>Type de document\n        <select id=\"doctype\">\n          <option>Attestation de r\u00e9ussite<\/option>\n          <option>Certificat de comp\u00e9tence<\/option>\n          <option>Certificat de fin de formation<\/option>\n        <\/select>\n      <\/label>\n      <label>Formateur \/ Direction\n        <input id=\"signatory\" value=\"Direction p\u00e9dagogique\">\n      <\/label>\n    <\/div>\n\n    <div class=\"actions\">\n      <button class=\"primary\" onclick=\"evaluateAndGenerate()\">\u00c9valuer et g\u00e9n\u00e9rer<\/button>\n      <button class=\"gold\" onclick=\"window.print()\">Imprimer \/ Enregistrer PDF<\/button>\n      <button class=\"light\" onclick=\"resetForm()\">R\u00e9initialiser<\/button>\n    <\/div>\n    <div id=\"status\" class=\"status\"><\/div>\n    <div class=\"small\">Automatique : si le score atteint le seuil, le document est g\u00e9n\u00e9r\u00e9 imm\u00e9diatement. Sinon, aucun certificat n\u2019est d\u00e9livr\u00e9.<\/div>\n  <\/section>\n\n  <section id=\"certWrap\" class=\"panel certificate-wrap\">\n    <div id=\"certificate\" class=\"certificate\">\n      <div class=\"seal\">MAROC ZAIN<br>ACADEMY<br>VALID\u00c9<\/div>\n      <div class=\"ribbon\">Excellence \u2022 Comp\u00e9tence \u2022 Professionnalisme<\/div>\n      <div class=\"brand\">MAROC ZAIN ACADEMY<\/div>\n      <div id=\"certTitle\" class=\"cert-title\">Attestation de r\u00e9ussite<\/div>\n      <div class=\"cert-sub\">La Direction p\u00e9dagogique certifie que<\/div>\n      <div id=\"certName\" class=\"recipient\"><\/div>\n      <div class=\"bodytext\">a suivi avec succ\u00e8s le parcours de formation<\/div>\n      <div id=\"certCourse\" class=\"course\"><\/div>\n      <div class=\"bodytext\">et a satisfait aux crit\u00e8res d\u2019\u00e9valuation \u00e9tablis par l\u2019Acad\u00e9mie.<\/div>\n\n      <div class=\"scoreline\">\n        <span class=\"badge\">Score : <strong id=\"certScore\"><\/strong><\/span>\n        <span class=\"badge mention\">Mention : <strong id=\"certMention\"><\/strong><\/span>\n      <\/div>\n\n      <div class=\"meta\">\n        <div class=\"idbox\">\n          D\u00e9livr\u00e9 le <strong id=\"certDate\"><\/strong><br>\n          N\u00b0 certificat : <strong id=\"certId\"><\/strong>\n        <\/div>\n        <div class=\"signature\">\n          <strong id=\"certSigner\"><\/strong><br>\n          Maroc Zain Academy\n        <\/div>\n      <\/div>\n\n      <div class=\"verify\">\n        V\u00e9rification : conserver le num\u00e9ro unique du certificat dans votre registre acad\u00e9mique.\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<script>\nfunction safeText(v){ return String(v || '').trim(); }\n\nfunction getMention(score){\n  if(score >= 95) return \"Exceptionnel\";\n  if(score >= 90) return \"Excellent\";\n  if(score >= 80) return \"Tr\u00e8s bien\";\n  if(score >= 70) return \"Bien\";\n  if(score >= 60) return \"Assez bien\";\n  return \"Non admis\";\n}\n\nfunction makeCertificateId(){\n  const d = new Date();\n  const y = d.getFullYear();\n  const stamp = Date.now().toString(36).toUpperCase();\n  const rnd = Math.random().toString(36).substring(2,7).toUpperCase();\n  return `MZA-${y}-${stamp}-${rnd}`;\n}\n\nfunction saveCertificate(record){\n  const key = \"mza_certificates\";\n  const list = JSON.parse(localStorage.getItem(key) || \"[]\");\n  list.push(record);\n  localStorage.setItem(key, JSON.stringify(list));\n}\n\nfunction generateCertificate(data){\n  const id = makeCertificateId();\n  const today = new Intl.DateTimeFormat('fr-FR', {\n    day:'2-digit', month:'long', year:'numeric'\n  }).format(new Date());\n\n  document.getElementById('certTitle').textContent = data.type;\n  document.getElementById('certName').textContent = data.student;\n  document.getElementById('certCourse').textContent = data.course;\n  document.getElementById('certScore').textContent = data.score + \"%\";\n  document.getElementById('certMention').textContent = getMention(data.score);\n  document.getElementById('certDate').textContent = today;\n  document.getElementById('certId').textContent = id;\n  document.getElementById('certSigner').textContent = data.signatory || \"Direction p\u00e9dagogique\";\n  document.getElementById('certWrap').style.display = 'block';\n\n  saveCertificate({\n    id, student:data.student, course:data.course, score:data.score,\n    mention:getMention(data.score), issued:new Date().toISOString()\n  });\n\n  return id;\n}\n\nfunction evaluateAndGenerate(){\n  const student = safeText(document.getElementById('student').value);\n  const course = safeText(document.getElementById('course').value);\n  const score = Number(document.getElementById('score').value);\n  const threshold = Number(document.getElementById('threshold').value);\n  const type = document.getElementById('doctype').value;\n  const signatory = safeText(document.getElementById('signatory').value);\n  const status = document.getElementById('status');\n\n  if(!student || !course || Number.isNaN(score) || score < 0 || score > 100){\n    status.className = 'status no';\n    status.textContent = \"Veuillez v\u00e9rifier le nom, la formation et le score.\";\n    document.getElementById('certWrap').style.display = 'none';\n    return;\n  }\n\n  if(score >= threshold){\n    const id = generateCertificate({student,course,score,type,signatory});\n    status.className = 'status ok';\n    status.textContent = `R\u00e9ussite valid\u00e9e. Attestation g\u00e9n\u00e9r\u00e9e automatiquement \u2014 ${id}`;\n    document.getElementById('certWrap').scrollIntoView({behavior:'smooth'});\n  }else{\n    status.className = 'status no';\n    status.textContent = `Score ${score}% : seuil de r\u00e9ussite ${threshold}% non atteint. Aucun certificat g\u00e9n\u00e9r\u00e9.`;\n    document.getElementById('certWrap').style.display = 'none';\n  }\n}\n\nfunction resetForm(){\n  document.getElementById('score').value = 0;\n  document.getElementById('status').className = 'status';\n  document.getElementById('certWrap').style.display = 'none';\n}\n\n\/* =========================================================\n   INT\u00c9GRATION AVEC VOTRE MOTEUR QCM\n   Appelez cette fonction lorsque votre quiz est termin\u00e9 :\n   MZA_CERTIFICATE.onQuizCompleted({\n      student: \"Nom du candidat\",\n      course: \"Chef d'Escale\",\n      score: 86,\n      threshold: 70\n   });\n   ========================================================= *\/\nwindow.MZA_CERTIFICATE = {\n  onQuizCompleted(data){\n    const score = Number(data.score || 0);\n    const threshold = Number(data.threshold ?? 70);\n\n    if(score < threshold){\n      console.log(\"MZA : score insuffisant, certificat non g\u00e9n\u00e9r\u00e9.\");\n      return false;\n    }\n\n    document.getElementById('student').value = data.student || \"Apprenant\";\n    document.getElementById('course').value = data.course || \"Formation Maroc Zain Academy\";\n    document.getElementById('score').value = score;\n    document.getElementById('threshold').value = threshold;\n    if(data.type) document.getElementById('doctype').value = data.type;\n    if(data.signatory) document.getElementById('signatory').value = data.signatory;\n\n    evaluateAndGenerate();\n    return true;\n  }\n};\n\n\/* Exemple de d\u00e9clenchement externe :\nwindow.dispatchEvent(new CustomEvent(\"mzaQuizCompleted\", {\n  detail:{ student:\"Mohamed Exemple\", course:\"Chef d'Escale\", score:88, threshold:70 }\n}));\n*\/\nwindow.addEventListener(\"mzaQuizCompleted\", e => {\n  if(e.detail) window.MZA_CERTIFICATE.onQuizCompleted(e.detail);\n});\n<\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>G\u00e9n\u00e9rateur d&rsquo;attestations \u2014 Maroc Zain Academy G\u00e9n\u00e9rateur automatique d\u2019attestations Maroc Zain Academy \u2014 d\u00e9clenchement automatique selon le score du candidat. Nom et pr\u00e9nom Formation Score obtenu (%) Seuil de r\u00e9ussite (%) Type de document Attestation de r\u00e9ussiteCertificat de comp\u00e9tenceCertificat de fin de formation Formateur \/ Direction \u00c9valuer et g\u00e9n\u00e9rer Imprimer \/ Enregistrer PDF R\u00e9initialiser Automatique [&hellip;]<\/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-3613","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\/3613","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=3613"}],"version-history":[{"count":1,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3613\/revisions"}],"predecessor-version":[{"id":3614,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/posts\/3613\/revisions\/3614"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=3613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/categories?post=3613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/tags?post=3613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}