| *** Généralités sur le plugin "Jeux" *** |
|---|
Auteurs : Patrice VANNEUFVILLE & Maïeul ROUQUETTE (gestion des scores)
Date : 2 décembre 2006
Compatibilité : SPIP v1.9x, SPIP v2.0
Téléchargement : disponible sur la Spip-Zone.
Langues : pour l’instant, français et un peu d’anglais ou d’italien. Vos traductions sont les bienvenues !
Description : Plugin qui permet de générer de multiples jeux à l’intérieur d’un article SPIP (qcm, mots croisés, pendu, devinettes, ...). Il parse le code des jeux tapé dans SPIP, stocke les divers éléments caractéristiques et retourne le code HTML mis en forme.
Mise en place du plugin : http://www.spip.net/fr_article3396.html
Dépendances :
Les styles CSS et les fonctions JavaScript du plugin sont insérés grâce à la balise #INSERT_HEAD qui doit absolument être présente (en un seul exemplaire) dans le header de vos squelettes (entre les balises <head> et </head> des fichiers HTML). Si vous ne trouvez pas cette balise dans vos codes et que les jeux n’ont pas l’apparence voulue, le plugin "Le Couteau Suisse" permet d’insérer automatiquement cette balise sans manipulation de votre part grâce à l’outil "Balise #INSERT_HEAD".
Surcharges :
Vous pouvez modifier l’apparence des jeux prévue par défaut en surchargeant le fichier jeux.CSS.html directement dans votre squelette. Commencez par recopier ce fichier à la racine de votre squelette, puis modifiez les différents styles en fonction de vos préférences.
De même, pour un jeu donné, vous pouvez reproduire cette surcharge avec les fichiers CSS présents dans le dossier mesplugins/jeux/styles/ à recopier/modifier dans le dossier messquelettes/styles/. A l’heure actuelle, quatre jeux possèdent un fichier de styles propre : qcm, pendu, mots croisés et sudoku.
Ce mécanisme de surcharge évite de toucher aux fichiers originaux que vous pourrez mettre à jour sans soucis à l’avenir.
L’affichage du score d’un jeu est surchargeable grâce à l’utilisation d’un fonds. Le fichier à recopier/modifier est : fonds/jeu_score.html.
Syntaxe dans l’article :
Dans le texte de l’article, le code des jeux doit se trouver entre les balises "<jeux>" et "</jeux>". Ce code est lui-même composé de séparateurs (par ex. : [titre]) placés entre les paragraphes de code.
Evitez de mélanger les séparateurs spécifiques appartenant à des jeux différents dans le code d’un jeu unique.
Les paragraphes de code peuvent parfois contenir des raccourcis typographiques.
Un exemple simple :
<jeux>
[titre]
La devinette du jour
[devinette]
Comment appelle-t-on un patron de la nouvelle économie ?
[reponse]
Un e-responsable
</jeux>
Séparateurs spéciaux :
[titre] : utile pour la plupart des jeux
[texte] : permet d’insérer un contenu placé tel quel dans le résultat du jeu, par exemple une image ou une séparation mieux marquée entre deux blagues ou deux questions d’un qcm...
[config] : certains jeux peuvent avoir besoin de paramètres de configuration (affichage, difficulté, indices, etc...). Ce séparateur est suivi de lignes sous la forme : parametre = valeur
[score] : affichage des commentaires de scores. Reportez-vous au paragraphe dédié ci-dessous.
Attention : afin d’éviter les mauvaises surprises de présentation (sommaires, rubriques, backends, ...) ou les solutions de vos jeux qui apparaissent dans les résumés d’articles, pensez bien :
soit à placer une introduction dans votre article entre les balises <intro> et </intro>
soit à remplir le descriptif de l’article.
soit activer dans le plugin Le Couteau Suisse la lame "Balise #INTRODUCTION".
Petite note aux usagers de FCKEditor ; ne pas oublier d’ajouter la ligne suivante dans fckconfig.js :
FCKConfig.ProtectedSource.Add(/<jeux[\s\S]*?\/jeux>/gi);
Liens utiles : Grâce à Olivier Gautier, visitez http://spip.ac-rouen.fr/?article37 afin d’avoir un tutoriel sur : installer le plugin jeux, créer un pendu, créer un QCM ou QRM, créer un texte à trous.
Modules actuels :
Formulaires Ajax :
Si votre version du plugin est supérieure à la 1.1 et que celle de votre SPIP est supérieure à la 2.0, alors les jeux peuvent fonctionner en Ajax. C’est à dire qu’il n’y a plus besoin de recharger toute la page lorsqu’on veut voir la correction.
Collaboration avec d’autres plugins :
Le plugin CFG (optionnel) pour la configuration des résultats
Le plugin Le Couteau Suisse (optionnel) pour la balise #INTRODUCTION et la gestion des jeux supprimés.
Le plugin Corbeille (optionnel) pour la gestion des jeux supprimés.
Le plugin Crayon (optionnel) pour éditer des jeux enregistrés en base. Le plugin vous offre une page de test : jeu.html. Si votre jeu a pour id XX, alors vous pourrez le crayonner et le tester directement en tapant l’adresse suivante : www.monsite.toto/?page=jeu&id_jeu=XX.
Remerciements :
Mathieu GIANNECCHINI : à l’origine des QCM (questions à choix multiples)
Maïeul ROUQUETTE : à l’origine des mots-croisés
François SCHREUER : à l’origine des diagrammes d’échecs
Peut-être vous ? N’hésitez pas à proposer vos projets.
Il reste encore à faire :
Ajouter de nouveaux jeux
Ajouter de nouvelles traductions
Commentaires de scores :
Afin d’afficher un commentaire en fonction du score obtenu, utilisez le séparateur optionnel [score]. Vous devez ici définir des catégories de résultats, soit en nombres de points, soit en pourcentages, selon la syntaxe suivante : "XX% :", "XXpt :" ou "XXpts :" (où XX est un nombre au début d’un paragraphe). En gros, une ligne commençant par "XXpts :" signifie : voici le commentaire affiché si vous atteignez les XX points.
Voici un premier exemple sur un jeu de 6 points, avec 5 catégories de résultats (0 point, 1 ou 2 points, 3 ou 4 points, 5 points et 6 points) :
[score]
0pt: Vous devez vraiment réviser. Recommencez !
1pt: Vous n'avez pas la moyenne. Recommencez !
3pts: Votre score peut encore être amélioré. Recommencez !
5pts: Presqu'un sans faute. Félicitations !
6pts: Vous êtes vraiment un as. Félicitations !
Voici comment sont choisis les commentaires ci-dessus en fonction du score :
| Score obtenu : | 0 pt | 1 ou 2 pts | 3 ou 4 pts | 5 pts | 6 pts |
| Commentaire : | "0pt:" | "1pt:" | "3pts:" | "5pts:" | "6pts:" |
Voici un second exemple en pourcentage avec 4 catégories :
[score]
0%: Il est urgent de réviser. Recommencez !
30%: Vous n'avez pas la moyenne... Recommencez !
50%: Ce n'est pas encore parfait... Recommencez !
100%: Vous êtes vraiment un as. Félicitations !
Voici comment sont choisis les commentaires ci-dessus en fonction du score :
| Score obtenu : | 0% à 29.99% | 30% à 49.99% | 50% à 99.99% | 100% |
| Commentaire : | "0%:" | "49%:" | "99%:" | "100%:" |
Enregistrements des scores :
Le plugin permet aussi d’enregistrer en base les scores des joueurs. Voir ici pour plus d’informations.
| *** Insérer un QCM (ou un quiz...) *** |
|---|
module : qcm.php
séparateurs obligatoires : [qcm] (ou [quiz]), [qrm]
séparateurs optionnels : [titre], [texte], [score]
plusieurs [qcm] ou [qrm] entre entre <jeux> et </jeux> : oui
paramètres de configuration par défaut :
trou=auto // taille du trou affiche en cas de proposition unique
une_par_une=non // affiche les questions une par une
solution=non // donne la(les) bonne(s) réponse(s) lors de la correction
points=oui // affiche éventuellement les points dans les questions
max_radios=5 // nombre maximal de boutons radios affiches avant le choix d'une liste deroulante
colonnes=1 // nombre de boutons (type radio ou a cocher) par ligne
[qcm] est l’abréviation de "questions à choix multiple, mais réponse unique". Moins de 5 propositions de réponse sont présentées sous forme de bouton radio et sous forme d’une liste au-delà. L’utilisateur ne peut donc choisir qu’une seule réponse à chaque question, même si plusieurs propositions peuvent être justes.
[qrm] est l’abréviation de "questions à réponses multiples". Les propositions sont présentées sous forme de cases à cocher. L’utilisateur peut donc choisir de cocher plusieurs réponses pour une même question. Par défaut, les réponses justes rapportent 1 point et les réponses fausses -1 point. Le score final ajoute les points de chaque proposition.
[quiz] est un équivalent à [qcm]
Dans le paragraphe précédé par [qcm] ou [qrm], la syntaxe est la suivante :
Q Intitulé de la question
P1 Texte de la proposition 1
P2 Texte de la proposition 2
...
Pi Texte de la proposition i
Rj (indique que la bonne réponse est la proposition j)
Donc, si la bonne réponse est la proposition 2 on indiquera "R2".
Attention, les majuscules sont requises pour : "Q, Pi et Ri".
Il est possible de préciser les points attribués à chaque réponse :
P1.-2 Texte de la proposition 1 à -2 points
P2.4 Texte de la proposition 2 à 4 points
R2
Veuillez à ce que la bonne réponse attribue toujours le nombre maximal de points.
S’il faut expliquer le choix (bon ou mauvais) de l’utilisateur lors de la correction, on peut ajouter des commentaires :
P1 Proposition 1|Et un commentaire 1 !
P2 Proposition 2|Et un commentaire 2 !
Si plusieurs bonnes réponses sont possibles, il suffit de séparer les Ri par un espace :
R1 R3 R4
En fonction du nombre de questions posées, il faut prévoir plusieurs paragraphes précédés des séparateurs "[qcm]" ou "[qrm]".
Un exemple :
<jeux>
[titre]
Un titre pour le QCM !
[qcm]
Q Une question bla bla
P1 Une proposition 1
P2 Une proposition 2
P3 Une proposition 3 (la bonne réponse)
R3 (la réponse 3 est la bonne !)
[qcm]
Q Une question encore
P1.2 Une proposition à 2 points (la bonne réponse)
P2 Une proposition 2|Lisez bien la question...
R1
[qrm]
Q Une question pour finir
P1 Une proposition 1|En effet 1 !
P2 Une proposition 2|En effet 2 !
P3 Une proposition 3|Lisez bien la question...
R1 R2
</jeux>
Cas particulier : si l’utilisateur doit lui-même taper la réponse, il suffit d’une question "Q" et d’une proposition "P". Exemple :
<jeux>
[qcm]
Q Citez une planète du système solaire :
P Mercure Vénus Terre la+Terre Mars Jupiter Saturne Uranus Neptune
</jeux>
La liste des mots valides à placer après "P" peut accepter les séparateurs usuels : retours à la ligne, tabulations, espaces, virgules, points-virgules ou points.
Pour en savoir davantage sur la syntaxe des listes de mots, lisez le paragraphe "Insérer un exercice à trous" ci-dessous.
Ici, la gestion des points et des précisions est toujours possible :
P.4 Mercure Vénus Terre la+Terre Mars Jupiter Saturne Uranus Neptune|Saviez-vous que Pluton n'est plus une planète ?
Un QCM en démo : http://www.ensemble-claudio-monteve...
| *** Insérer un exercice à trous *** |
|---|
module : trous.php
séparateurs obligatoires : [texte] & [trou]
séparateurs optionnels : [titre], [config], [score]
plusieurs [trou] entre <jeux> et </jeux> : oui
paramètres de configuration par défaut :
taille=auto // taille des trous
indices=oui // afficher les indices ?
couleurs=oui // appliquer des couleurs sur les corrections ?
solution=non // donne la(les) bonne(s) réponse(s) lors de la correction
Un exemple :
<jeux>
[texte]
Ceci est un exemple de closure (exercice à trous).
L'utilisateur doit entrer ses [trou]réponses[texte] dans les espaces vides.
Pour chaque mot manquant, plusieurs réponses correctes
peuvent être acceptées. Par exemple, ce
[trou]
trou, vide, blanc
[texte]
autorise les réponses "trou", "vide" ou "blanc".
[config]
indices = oui
solution = oui
</jeux>
Avec la correction et les couleurs :
Liste des mots :
La liste des mots à placer après [trou] peut accepter les séparateurs usuels : retours à la ligne, tabulations, espaces, virgules, points-virgules ou points.
Pour une expression comprenant des espaces, utiliser les guillemets ou le signe +
Par exemple : "afin de" est équivalent à : afin+de
Les minuscules ou majuscules peuvent être utilisées indifféremment pour les réponses ou les propositions.
Pour une expression sensible à la casse, ajouter "/M" en fin d’expression :
Par exemple : "la France/M" (ou : la+France/M)
Pour une expression régulière (RegExp), utiliser les guillemets et les virgules comme séparateur :
Par exemple : ",stylo(graphe)?,"
A propos de la casse, voici quelques expressions équivalentes :
"la France/M", la+France/M, ",la France,"
ou, sans casse : "la France", la+France, la+france, ",la france,i"
Pour un affichage lisible des indices, veillez à ce que la première expression ne soit pas une expression régulière...
| *** Insérer une poésie *** |
|---|
module : textes.php
séparateurs obligatoires : [poesie]
séparateurs optionnels : [titre], [auteur], [recueil]
plusieurs [poesie] entre <jeux> et </jeux> : non
paramètres de configuration par défaut : aucun
Un exemple :
<jeux>
[titre]
Messieurs les petits oiseaux
[poesie]
Messieurs les petits oiseaux,
On vide ici les assiettes ;
(...)
Venez donc manger et boire,
Messieurs les petits oiseaux.
[auteur]
Victor HUGO
[recueil]
L'art d'être grand père, 1877
</jeux>
| *** Insérer une citation ou une blague *** |
|---|
module : textes.php
séparateurs obligatoires : [citation] ou [blague]
séparateurs optionnels : [titre], [auteur] ou [recueil]
plusieurs [citation] ou [blague] entre <jeux> et </jeux> : oui
paramètres de configuration par défaut : aucun
Un exemple :
<jeux>
[citation]
L'amour est aveugle, il faut donc toucher.
[auteur]
Proverbe brésilien
</jeux>
| *** Insérer une devinette ou une charade *** |
|---|
module : devinettes.php
séparateurs obligatoires : [devinette] ou [charade]
séparateurs optionnels : [reponse], [titre], [texte], [config]
plusieurs [devinette] ou [charade] entre <jeux> et </jeux> : oui
paramètres de configuration par défaut :
reponse = oui // afficher la réponse ?
taille=10 // taille de la police utilisée
Deux exemples :
<jeux>
[devinette]
Comment appelle t-on un patron de la nouvelle économie ?
[reponse]
Un e-responsable
[devinette]
Quel est le point commun entre un contrôleur des impôts et un spermatozoïde ?
[reponse]
Tous les 2 ont 1 chance sur 3 millions de devenir un jour un être humain.
[config]
reponse = oui
</jeux>
<jeux>
[titre]
Pour les enfants...
[charade]
{{Mon premier}} se dirige quelque part.
{{Mon deuxième}} est la moitié d'un cheveux.
{{Mon tout}} vit à la ferme.
[reponse]
La vache
</jeux>
Note : la Librairie GD (graphique dynamique) est obligatoire sur votre serveur pour obtenir des réponses affichées à l’envers. Une image renversée est en effet créée, à condition que la ligne ’reponse = oui’ a été placée après le séparateur [config]
| *** Insérer un diagramme de positions d’échecs *** |
|---|
module : diag_echecs.php
séparateurs obligatoires : [diag_echecs]
séparateurs optionnels : [titre], [texte], [config]
plusieurs [diag_echecs] entre <jeux> et </jeux> : oui
paramètres de configuration par défaut :
taille=29 // Taille des images en pixels (29 ou 35)
blancs=blanc // Couleur des cases 'blanches'
noirs=brun // Couleur des cases 'noires'
fond=blanc // Couleur de fond de la page web
bordure=2 // Epaisseur de la bordure de l'échiquier, en pixels
police=5 // Code de la police utilisée pour les coordonnées (1 à 5)
flip=non // Faut-il retourner l'echiquier ?
coords=oui // Afficher les coordonnées ?
La position doit être décrite sous forme de notation FEN, ou bien en utilisant la forme "classique".
Exemples :
classique : B:Rg1,Dd1,Ta1,e1,Pa2,f6/N:Rb8,Pa6,f5
FEN : r1bqkbnr/pp2pppp/2n5/2p1P3/3p4/2P2N2/PP1P1PPP/RNBQKB1R
Notation "classique" : la description de la position blanche commence par "B :", celle de la position noire par "N :", et les deux sont séparées par un "/".
Il est possible de n’indiquer qu’une couleur (B ou N) pour la description. L’ordre dans cette dernière est indifférent.
Les majuscules ne sont pas non plus obligatoires
Cases en surbrillance : on peut utiliser "/sv" pour mettre du vert, "/sb" pour du bleu, "/sj" pour du jaune et "/sr" pour du rouge.
Attention : pour utiliser cette fonctionnalité, il faut obligatoirement utiliser la notation "classique".
Retournement de l’échiquier : C’est automatique en utilisant la notation FEN (et si bien entendu le trait est aux Noirs), sinon il suffit d’ajouter "/r" à la description "classique".
Les couleurs disponibles pour les cases sont actuellement : blanc, noir, gris, vert, bleu, brun, jauneclair, brunclair (ou white, black, grey, green, blue, brown, lightyellow, lightbrown).
Exemples :
<jeux>
[diag_echecs]
B:Rg1,Dd1,Ta1,e1,Pa2,f6/N:Rb8,Pa6,f5
[diag_echecs]
r1bqkbnr/pp2pppp/2n5/2p1P3/3p4/2P2N2/PP1P1PPP/RNBQKB1R
[config]
taille=35
</jeux>
<jeux>
[diag_echecs]
B:Rb6,pa3,Fh2/N:Rc8/sr:a8/sb:g3,f4,e5,d6,c7,b8
[config]
taille=35
noirs=bleu
</jeux>
Note : la Librairie GD (graphique dynamique) est obligatoire sur votre serveur pour obtenir les diagrammes.
| *** Insérer un jeu de Pendu *** |
|---|
module : pendu.php, pendu.js et pendu.CSS
séparateurs obligatoires : [pendu]
séparateurs optionnels : [titre], [texte], [config]
plusieurs [pendus] entre <jeux> et </jeux> : non
paramètres de configuration par défaut :
pendu=1 // Dessin du pendu en noir et blanc
regle=non // Afficher la règle du jeu ?
indices=non // Afficher les premières et dernières lettres?
Le pendu est essentiellement un jeu écrit en JavaScript. Il faut donc que votre navigateur et vos logiciels de protection de l’ordinateur l’autorisent.
L’implémentation de ce jeu est très simple. Il suffit de choisir éventuellement le type de pendu à afficher (voir les dossiers disponibles sous la forme : /jeux/img/penduX) grâce à la configuration pendu=X, puis de renseigner la liste de mots située après la balise [pendu]. Le mot à deviner sera alors choisi au hasard à chaque partie de pendu.
Note : La liste des mots à placer après [pendu] peut accepter les séparateurs usuels : retours à la ligne, tabulations, espaces, virgules, points-virgules ou points.
Les minuscules ou majuscules peuvent être utilisées indifféremment.
N’utilisez aucun accent car le clavier du pendu ne les propose pas au joueur.
Exemple :
<jeux>
[titre]
Thème : le Jazz...
[pendu]
morton oliver armstrong ellington whiteman henderson nichols
dorsey beiderbecke teagarden freeman kaminsky teschemacher
davis goodman wilson hampton crosby parker gillespie powell monk
clarke johnson mulligan evans hawkins basie coltrane coleman
[config]
pendu=2 // pendu en couleur
</jeux>
Note : l’insertion de JavaScript dans les articles par les plugins a été facilitée par Spip 1.9.2. Le jeu du pendu n’est donc pour l’instant pas compatible avec les versions de SPIP antérieures ou égales à 1.9.1. À vos mises à jours !
| *** Insérer une grille de mots-croisés *** |
|---|
Les caratéristiques de ce jeu ont été déplacées ici : Des grilles avec le plugin "Jeux"
| *** Insérer une grille de sudoku *** |
|---|
Les caractéristiques de ce jeu ont été déplacées ici : Des grilles avec le plugin "Jeux"
1pt:ce n’est pas ça.
0pt : presque
3pts : exact
RSS 2.0