Enrichit le reporting SCORM/xAPI et met en conformité RGAA le player
Build and deploy / test-python (push) Successful in 5m56s
Build and deploy / test-js (push) Successful in 51s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped

SCORM/xAPI :
- Ajoute l'export SCORM 2004 (3rd/4th edition) au choix, en plus du 1.2
  par défaut : sépare completion_status/success_status (un échec reste
  "completed" au lieu de retomber à tort en "incomplete" comme force la
  1.2), remonte aussi cmi.interactions.n.* par question répondue.
- Fournit cmi.core.score.min/max (1.2 et 2004), calculé depuis les
  récompenses de quiz du jeu, pour que le LMS affiche un vrai pourcentage
  au lieu du score brut à tort étiqueté "%".
- Libellés de verbes xAPI en français en plus de l'anglais.

Accessibilité (RGAA/WCAG 2.1 AA) sur le player :
- Navigation clavier des objets de scène "au clic"/"au survol"
  (tabindex, role, Entrée/Espace, focus/blur).
- alt sur les images (nom auteur ou décoratif), aria-hidden sur les
  icônes seules, role="dialog"/aria-live sur les boîtes de dialogue/quiz.
- Landmark <main> + titre de page, respect de prefers-reduced-motion.
- Le quiz n'avance plus automatiquement après un délai fixe : bouton
  "Continuer →" explicite (RGAA 2.2.1).
- Avertissement de contraste dans l'éditeur de style de dialogue.
- Déclaration d'accessibilité téléchargeable depuis la modale d'export.
This commit is contained in:
william
2026-09-06 00:17:51 +02:00
parent f7a50e5afe
commit c504ace167
36 changed files with 1581 additions and 79 deletions
+91 -4
View File
@@ -113,7 +113,23 @@
<div class="modal-content">
<div class="box">
<h2 class="title is-4">Exporter « {{ game.name }} » en Web/SCORM</h2>
<p class="hint mb-4">Construit un paquet SCORM 1.2 (imsmanifest.xml + page web autonome, aucun serveur requis) : importe le .zip obtenu directement dans ton LMS (Moodle...) — le score et le statut de la partie remontent automatiquement.</p>
<p class="hint mb-4">Construit un paquet SCORM (imsmanifest.xml + page web autonome, aucun serveur requis) : importe le .zip obtenu directement dans ton LMS (Moodle...) — le score et le statut de la partie remontent automatiquement.</p>
<!-- Version SCORM (voir db/games/get_scorm_version.py) : 1.2 par
défaut (compatibilité la plus large), 2004 pour séparer
complétion et réussite (un "échoué" reste "completed" au lieu
de retomber en "incomplete", limite propre à la 1.2). -->
<div class="field mb-4">
<label class="label is-small">Version SCORM</label>
<div class="control">
<div class="select is-small">
<select id="scormVersionSelect" onchange="window.forgeSaveScormVersion()">
<option value="1.2">1.2 (compatibilité la plus large)</option>
<option value="2004">2004 (3rd/4th edition — sépare complétion et réussite)</option>
</select>
</div>
</div>
<span class="hint" id="scormVersionSaveStatus"></span>
</div>
<!-- Suivi xAPI (voir publish/build_scorm_package.py, routes/publish/
xapi_settings.py) : greffé sur le SCORM ci-dessus, jamais à sa
place — un réglage jamais renseigné (endpoint vide) désactive
@@ -143,15 +159,39 @@
</div>
</div>
</details>
<!-- Seuil de réussite (voir db/games/get_success_threshold.py) :
s'applique même sans xAPI configuré, c'est ce qui détermine si
le SCORM classique (cmi.core.lesson_status) reporte "passed"
ou "failed" plutôt que juste "completed" — indépendant du bloc
xAPI ci-dessus, jamais retapé à chaque export non plus. -->
<details class="propGroup mb-4" id="scoringSettingsGroup">
<summary>Seuil de réussite</summary>
<div class="propGroupBody">
<p class="help mb-2">% de bonnes réponses au quiz requis pour que la partie soit reportée "Réussie" plutôt que "Échouée" (SCORM et xAPI). Sans question posée, la partie reste juste "Terminée".</p>
<div class="field">
<label class="label is-small">Seuil (%)</label>
<div class="control"><input class="input is-small" type="number" min="0" max="100" step="1" id="successThreshold"></div>
</div>
<div class="field is-grouped" style="align-items:center;">
<div class="control"><button type="button" class="button is-small" onclick="window.forgeSaveScoringSettings()">Enregistrer</button></div>
<span class="hint" id="scoringSaveStatus"></span>
</div>
</div>
</details>
<div id="scormProgress" style="display:none;">
<p class="hint" id="scormStepText">Préparation du jeu...</p>
<div class="passwordStrengthBar" style="margin-top:10px;"><div class="passwordStrengthFill strong" id="scormProgressFill" style="width:100%; animation:forgePublishPulse 1.2s ease-in-out infinite;"></div></div>
</div>
<div id="scormError" class="notification is-danger" style="display:none;"></div>
<div id="scormDone" class="notification is-success" style="display:none;">Téléchargement lancé — importe directement le .zip dans ton LMS.</div>
<div class="field mt-4" style="display:flex; justify-content:flex-end; gap:8px;">
<button type="button" class="button is-small" onclick="window.forgeCloseScormModal()">Fermer</button>
<button type="button" class="button primary is-small" id="scormExportButton" onclick="window.forgeStartScormExport()">Exporter (Web/SCORM)</button>
<div class="field mt-4" style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
<!-- Déclaration d'accessibilité (voir publish/accessibility_declaration.py)
— pas un bouton d'export, un simple lien de téléchargement direct. -->
<a href="{{ url_for('accessibility_declaration_get', slug=game.slug) }}" class="hint" style="font-size:12px;">📄 Déclaration d'accessibilité</a>
<div style="display:flex; gap:8px;">
<button type="button" class="button is-small" onclick="window.forgeCloseScormModal()">Fermer</button>
<button type="button" class="button primary is-small" id="scormExportButton" onclick="window.forgeStartScormExport()">Exporter (Web/SCORM)</button>
</div>
</div>
</div>
</div>
@@ -172,6 +212,49 @@
var xapiPasswordHint = document.getElementById('xapiPasswordHint');
var xapiSaveStatus = document.getElementById('xapiSaveStatus');
var successThreshold = document.getElementById('successThreshold');
var scoringSaveStatus = document.getElementById('scoringSaveStatus');
var scormVersionSelect = document.getElementById('scormVersionSelect');
var scormVersionSaveStatus = document.getElementById('scormVersionSaveStatus');
function forgeLoadScormVersion() {
fetch("{{ url_for('scorm_version_get', slug=game.slug) }}")
.then(function (r) { return r.json(); })
.then(function (json) { scormVersionSelect.value = json.scorm_version; });
}
window.forgeSaveScormVersion = function () {
scormVersionSaveStatus.textContent = 'Enregistrement...';
fetch("{{ url_for('scorm_version_set', slug=game.slug) }}", {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ scorm_version: scormVersionSelect.value }),
})
.then(function (r) { return r.json(); })
.then(function (json) { scormVersionSaveStatus.textContent = json.ok ? 'Enregistré ✓' : 'Échec de l\'enregistrement.'; })
.catch(function () { scormVersionSaveStatus.textContent = 'Échec de l\'enregistrement.'; });
};
function forgeLoadScoringSettings() {
fetch("{{ url_for('scoring_settings_get', slug=game.slug) }}")
.then(function (r) { return r.json(); })
.then(function (json) { successThreshold.value = json.success_threshold_percent; });
}
window.forgeSaveScoringSettings = function () {
scoringSaveStatus.textContent = 'Enregistrement...';
fetch("{{ url_for('scoring_settings_set', slug=game.slug) }}", {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ success_threshold_percent: parseInt(successThreshold.value, 10) }),
})
.then(function (r) { return r.json(); })
.then(function (json) {
scoringSaveStatus.textContent = json.ok ? 'Enregistré ✓' : 'Échec de l\'enregistrement.';
if (json.ok) forgeLoadScoringSettings();
})
.catch(function () { scoringSaveStatus.textContent = 'Échec de l\'enregistrement.'; });
};
function forgeLoadXapiSettings() {
fetch("{{ url_for('xapi_settings_get', slug=game.slug) }}")
.then(function (r) { return r.json(); })
@@ -213,7 +296,11 @@
errorBox.style.display = 'none';
doneBox.style.display = 'none';
xapiSaveStatus.textContent = '';
scoringSaveStatus.textContent = '';
scormVersionSaveStatus.textContent = '';
forgeLoadXapiSettings();
forgeLoadScoringSettings();
forgeLoadScormVersion();
modal.classList.add('is-active');
};
+25 -2
View File
@@ -60,6 +60,19 @@
50% { box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15); }
}
.forgeHighlight{ animation: forgeHighlightPulse 1.1s ease-in-out infinite; }
/* RGAA/WCAG 2.3.3 (confort) : un utilisateur sensible aux animations
(prefers-reduced-motion, réglage système) ne doit jamais voir un
clignotement en boucle infinie — remplacé par un simple contour fixe. */
@media (prefers-reduced-motion: reduce) {
.forgeHighlight{ animation:none; box-shadow:0 0 0 3px rgba(255, 196, 0, 0.9); }
}
/* RGAA/WCAG 4.1.2 : texte réservé aux lecteurs d'écran, invisible à
l'écran mais jamais display:none (qui le retirerait aussi de l'arbre
d'accessibilité) — voir templates/play.html, le <h1> caché du titre. */
.srOnly{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 3.5 (Confort) — verrouillage d'un élément après décision : grisé +
inerte, posé/enlevé par une action "Modifier un élément → Désactivé". */
.forgeDisabled{ opacity:0.45; filter:grayscale(60%); pointer-events:none; }
@@ -69,7 +82,8 @@
</style>
</head>
<body>
<div id="playRoot">
<main id="playRoot">
<h1 class="srOnly">{{ game.name }}</h1>
<div id="playFrame">
{% for s in screens_data %}
<!-- Un seul moteur d'écran désormais (jeu_2d) : objets déjà entièrement
@@ -96,7 +110,7 @@
<div id="emptyState">Aucun écran défini pour l'instant — retourne dans l'éditeur pour en créer un.</div>
{% endif %}
</div>
</div>
</main>
<script>
// Données injectées par Jinja (côté serveur) — tout le reste du moteur
@@ -127,6 +141,15 @@
// paquet sans réglage LRS renvoie `null` ici, xapi-client.js ne fait
// alors rien.
window.FORGE_XAPI_CONFIG = {{ xapi_config_json|safe }};
// Seuil de réussite (voir db/games/get_success_threshold.py) : % de
// bonnes réponses au quiz requis pour un statut de fin "reussi" plutôt
// que "echoue" (SCORM lesson_status ET xAPI, voir dialogue-box-controller.js).
window.FORGE_SUCCESS_THRESHOLD_PERCENT = {{ success_threshold_percent|tojson }};
// Score max possible du quiz (voir db/quests/reward_budget.py) : permet
// au SCORM 1.2 de fournir cmi.core.score.min/max en plus du score brut
// (voir static/js/play/offline/scorm-api.js), pour qu'un LMS calcule un
// vrai pourcentage au lieu d'afficher le score brut à tort étiqueté "%".
window.FORGE_MAX_QUIZ_SCORE = {{ max_quiz_score|tojson }};
{% else %}
var FORGE_PLAY_URLS = {
runtimePayload: {{ runtime_payload_url|tojson }},
+6
View File
@@ -408,6 +408,12 @@
</div>
</div>
</div>
<!-- RGAA/WCAG 1.4.3 : ces couleurs sont libres, sans aucune
garde-fou avant — un texte blanc sur fond blanc était
possible sans le moindre avertissement. Rempli par
checkDialogueBoxContrast() (scene-editor.js), appelée à
chaque changement de couleur ci-dessus. -->
<p class="help" id="dboxContrastWarning" style="color:#e0524d;"></p>
</div>
</details>
{% endif %}