← Retour

DriveWise — Conduite économique et sécuritaire / Fuel-Efficient and Safe Driving

> Projet démonstrateur indépendant — portfolio de conception pédagogique.

> Independent portfolio demonstration — instructional design portfolio.

Module e-learning interactif, bilingue (FR/EN), inspiré des bonnes pratiques Articulate Storyline : navigation claire, scénarios décisionnels, feedback immédiat, progression et évaluation. Aucune marque, logo ou contenu confidentiel.

Lancement local (sans serveur)


# Option A — double-clic
# Ouvrir drivewise-portfolio/index.html dans Chrome / Firefox / Edge

# Option B — serveur local optionnel
npx serve .
# ou
python -m http.server 8000

Aucune étape de build.

Modifier les textes FR/EN

Tous les libellés sont dans un seul fichier :


js/content.js  →  var DW_CONTENT = { fr: {...}, en: {...} }

La langue choisie est conservée en localStorage (drivewise_v1.lang) et reste active toute la session sans effacer la progression.

Structure


drivewise-portfolio/
├── index.html
├── README.md
├── LICENSE
├── css/styles.css
├── js/content.js     # tout le bilingue FR/EN
├── js/storage.js     # localStorage : langue, progression, réponses, engagement
├── js/app.js         # rendu central des écrans, navigation, quiz, aria-live
├── assets/icons/
├── assets/illustrations/
├── docs/
│   ├── accessibility.md
│   ├── instructional-design.md
│   └── portfolio-case-study.md
└── screenshots/.gitkeep

Parcours (17 étapes)

  1. Accueil (choix FR/EN) → 2. Mission → 3. Contexte (3 livraisons) → 4. 4 leviers (cartes) → 5. Checklist pré-départ → 6. Scénario départ pressé → 7. Anticiper la route → 8. Scénario trafic dense → 9. Conduite souple → 10. Observation de la route → 11. Scénario livraison reportée → 12. Gérer les distractions → 13. Intro quiz → 14. Quiz 5 questions (80 % = 4/5) → 15. Résultats → 16. Engagement → 17. Conclusion
    • Leviers et Distractions : l’utilisateur doit consulter toutes les cartes avant de continuer (suivi visitedLevers / visitedDistractions).
    • Checklist / Souplesse / Observation : activités à choix multiples avec feedback non punitif et bouton Réessayer.
    • Scénarios : choix unique, feedback immédiat dans aria-live="polite".
    • Quiz : 5 questions, une seule bonne réponse, score affiché seulement à la fin, bouton Reprendre le quiz (reset quiz seul).

    Publication GitHub Pages

    
git init
git add .
git commit -m "feat: DriveWise portfolio demo"
git branch -M main
git remote add origin https://github.com/<user>/drivewise-portfolio.git
git push -u origin main
# Settings → Pages → Source: main / root

    URL : https://<user>.github.io/drivewise-portfolio/

    Tests d’accessibilité WCAG 2.1 AA (prioritaires)

    Voir docs/accessibility.md pour la matrice complète (critère → fichier → test clavier).

    Résumé rapide :

    • Clavier : Tab / Shift+Tab, Entrée/Espace pour activer, Échap ferme les panneaux (pas de piège).
    • Focus : indicateur 3 px (:focus-visible), contraste ≥ 3:1.
    • Skip link : Tab au chargement → « Passer au contenu principal ».
    • Reflow 320 px : DevTools → 320 px, aucun scroll horizontal.
    • Espacement texte : bookmarklet line-height 1.5 / letter-spacing 0.12em / word-spacing 0.16em.
    • Contraste : vérifier avec Axe / Lighthouse / Colour Contrast Analyser (4,5:1 texte, 3:1 UI).
    • Lecteur d’écran : NVDA / VoiceOver — vérifier aria-live="polite" pour feedbacks et score.

    Données & vie privée

    • Aucune donnée personnelle, aucun appel réseau.
    • localStorage seul : langue, progression, réponses, engagement. Effacé via « Recommencer le module » (confirmation) ou devtools.

    Crédits

    Illustrations SVG originales (géométriques, sans photo client). Palette : #123047 · #127C70 · #C65B16 · #F8FAFC.

    — Conçu comme démonstration de conception pédagogique, non affilié à une entreprise.

← Retour