KISS-quiz - Le truc avec de l'AJAX et d'autres trucs

Posté le 13/02/2018

Le développement le plus con du monde, KISS jusqu'à son nom !

Dans le cadre d'un projet à la con, je me suis retrouvé face à la problématique d'un quiz simple. L'idée était d'avoir un truc pas trop moche ( = "fluide"), sans traitement à la clé (simple message du genre "Vous avez fais X erreurs"), et sans restriction en entrée.

Au final, j'ai décidé de bricoler avec reveal.js. Le principal soucis que j'ai rencontré était de pouvoir charger dynamiquement les questions, sans tout rendre disponible dans le fichier source. D'où l'ajout en AJAX. En gros, chaque réponse déclenche le chargement de la question suivante, avec un effet de transition au passage.

On se retrouve donc avec un truc qui hérite de la personnalisation d'interface de reveal.js (voir le fichier README.md pour plus d'info), avec la possibilité de gérer des questions enrichies (support des balises de code, de la mise en forme HTML, des images, ...), d'un nombre illimité de propositions de réponses (avec les mêmes possibilités de mise en forme), et d'autres conneries en tout genre.

La marche à suivre !

  • git clone https://framagit.org/Erase/KISS-quiz.git
  • Ouvrir le fichier /inc/inc.banque.php
  • Modifier/ajouter des questions
  • Ouvrir le fichier /inc/inc.final.php
  • Modifier le texte final qui s'affichera selon le nombre d'erreurs
  • Et c'est tout

C'est con hein ?
La démo c'est par ici : http://demo.green-effect.fr/KISS-quiz/
Les sources c'est par là : https://framagit.org/Erase/KISS-quiz
Pour les questions, les remarques et tout, passez par Framagit ou sinon par le mail présent en fichier README.md

(Photo by Alessio)

a11y.css

Posté le 22/01/2018

Sur les Internets, on parle régulièrement d'accessibilité et de code valide. Ce n'est jamais simple à gérer, mais cela répond à une nécessité bien réelle ! Amélioration du référencement, adaptation des sites internets aux outils luttant contre les handicapes, bonnes pratiques, ...

Bien sûr, il existe des outils en ligne pour vérifier la validité de son code HTML et CSS, tel que le validateur mis à disposition par le W3C. Mais c'est globalement imbitable, et implique d'aller se rendre sur le site, de copier/coller son lien, et donc de perdre un temps monstrueux de quelques secondes.

Or, les développeurs sont des fainéants, c'est bien connu.

C'est là qu'intervient a11y.css (prononcez "Alix")

Cet outil proposé par Gaël Poupard se résume en une feuille de style CSS que l'on injecte à sa page, permettant de mettre en avant les erreurs à la con.

A partir du site du projet, vous pouvez renseigner quelques paramètres (niveau d'erreur à afficher, langue), ce qui a pour effet de vous proposer d'ajouter un bookmarklet à votre navigateur.

Ainsi, à chaque fois que vous consultez une page, un clic et pouf, tout s'illumine. Ou pas selon la propreté de votre code.

C'est pratique, c'est utile et c'est bon pour la planète.

(Photo by Daniel Beilinson)