Enrichit le reporting SCORM/xAPI et met en conformité RGAA le player
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:
+91
-4
@@ -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
@@ -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 }},
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user