Technologie de l'information et de la communication
Un peu geek mais surtout un dinosaure, de ceux qui ont soudé les composants de leur première machine, flashé la mémoire et publié dans Hebdogiciel.
La citation du jour
Si tu diffères de moi, mon frère, loin de me léser, tu m’enrichis.  (Antoine de Saint-Exupéry )
La réflexion du jour
Le doute est ma seule certitude. Mais peut-être suis-je trop scientifique ?
Activités
geek - cycliste - généalogiste - Savoir - lecteur - collectionneur - Philosophe - citoyen - marcheur - scripteur - Photographe - instituteur - enseignant en sciences - enseignant formateur - journaliste local - bénévole
Les mots clés
doc TIC * SPIP * Wikipedia * web & internet * Php * OVH * informatique * Sql * Wamp * Qwant * Firefox * LibreOffice * Thunderbird * FOAD * Buttercup * Mastodon * PeerTube * Chatons * OpenStreetMap * IrfanView * E-learning
Lorand

Site personnel de Roland Bouat. Pour les curieux : Lorand est un anagramme de Roland.

Plugin QCM pour Spip

Créer un formulaire Spip d’une question de QCM

... en s’inspirant de la chronique "Créer un formulaire de contact sous Spip"

mardi 26 mai 2020 , par Roland


Maintenant que le formulaire "contact" fonctionne (enfin !), l’étape suivante va être de créer un formulaire de toutes pièces. Transférer une compétence toute neuve est le meilleur moyen de l’intégrer quasi définitivement.

Le formulaire s’appelera "qcm_question" et sera donc appelée par la balise <formulaire|qcm_question>.

Cahier des charges

  • le formulaire affichera une question, six propositions de réponse associées à des boutons radio et un bouton de validation (type "ok")
  • quand l’utilisateur a fait son choix (un choix obligatoire évidemment) et qu’il a validé sa réponse, la question est de nouveau affichée avec la réponse donnée (en vert si c’est celle attendue, en rouge si ce n’est pas elle), la réponse attendue si celle donnée n’est pas celle attendue et un bouton pour passer à la question suivante.
  • comme ce formulaire sera utilisée dans le cadre d’un QCM   avec X questions, il sera tout de suite paramétrable.

Il devrait donc ressembler à peu près à ça avant la réponse :

et un peu à ça après la validation de la réponse.

Étape 1 : créer une simili-formulaire de test

  • Créer le fichier "qcm_question.html" dans le répertoire "formulaires" du dossier "squelettes".
  • Ouvrir le fichier "qcm_question.html" dans l’éditeur de texte
  • Dans l’optique d’utiliser ce formulaire pour un QCM  , les données seront donc contenues dans des variables : "question" pour la question, "Px" pour chacune des 6 propositions. On commence donc par les définir provisoirement pour construire le formulaire :
[(#REM) <-- DEB qcm_question -->]
#SET{question,"Comment s'appelle ce site ?"}
#SET{P1,"codep41-ffct.org"}
#SET{P2,"ffct.org"}
#SET{P3,"ffct-centre.org"}
#SET{P4,"lorand.org"}
#SET{P5,"nouan-rando.org"}
#SET{P6,"spip.net"}
  • Ensuite, construction du formulaire proprement dit :
<div class='ajax'>	
	<form action='#ENV{action}'>
		#ACTION_FORMULAIRE{#ENV{action}}
		<input type='radio' id='choix1' name='reponse' value='p1'><label for='choix1'>#ENV{p1}</label>
		<input type='radio' id='choix2' name='reponse' value='p2'><label for='choix2'>#ENV{p2}</label>
		<input type='radio' id='choix3' name='reponse' value='p3'><label for='choix3'>#ENV{p3}</label>
		<input type='radio' id='choix4' name='reponse' value='p4'><label for='choix4'>#ENV{p4}</label>
		<input type='radio' id='choix5' name='reponse' value='p5'><label for='choix5'>#ENV{p5}</label>
		<input type='radio' id='choix6' name='reponse' value='p6'><label for='choix6'>#ENV{p6}</label>
		<input type='submit' name='ok' value='Validation' />
	</form>
	<BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
		Réponse choisie : #ENV{#ENV{reponse}}<br />
		#SET{rep, #ENV{#ENV{reponse}}}
	</BOUCLE_choixok>
 
</div>
[(#REM) <-- FIN qcm_question -->]
  • Le formulaire affichera les six propositions et renverra la valeur correspondant à la case cochée.
  • ce serait encore mieux si les données (questions et propositions) étaient définies avant cet envoi, depuis le squelette "qcm  " par exemple. Donc un modèle "qcm  " inclus dans un article va transmettre les données au formulaire "qcm_question". Les transmissions de données entre squelettes, fichiers à inclure, modèles, formulaires... ne sont jamais simples. Il va probablement falloir s’accrocher sérieusement et sans doute ramer quelque peu.

Étape 1 bis : Créer un formulaire fonctionnel

[(#REM) <-- DEB qcm -->]
#SET{question,"Comment s'appelle ce site ?"}
#SET{p1,"codep41-ffct.org"}
#SET{p2,"ffct.org"}
#SET{p3,"ffct-centre.org"}
#SET{p4,"lorand.org"}
#SET{p5,"nouan-rando.org"}
#SET{p6,"spip.net"}
#SET{repattendue,"p4"}
Sélectionner (cocher) la bonne réponse.<br />
<strong>#GET{question}</strong><br />
[(#FORMULAIRE_QCM_QUESTION{#GET{p1}, #GET{p2}, #GET{p3}, #GET{p4}, #GET{p5}, #GET{p6}, #GET{repattendue}})]
[(#REM) <-- DEB qcm -->]
  • Quelques commentaires :
    • comme il est prévu d’utiliser cet outil pour un QCM   qui comprendra donc plusieurs questions, autant prévoir tout de suite les paramètres.
    • La variable "question" contiendra la question complètement formulée.
    • Les variables p1 à p6 contiendront les propositions sous forme de phrases complètes ou d’expressions.
    • La variable "repattendue" contient l’identification de la proposition attendue "p...". Son utilisation sera vue plus tard.
    • C’est le squelette qui affiche la consigne "Sélectionner (cocher) la bonne réponse." ainsi que la question.
    • Le formulaire est appelée avec les six propositions et la référence de la réponse attendue.
  • Évidemment, le formulaire "qcm_question" doit donc être modifié sérieusement en conséquence.
[(#REM) <-- DEB qcm_question -->]
<div class='ajax'>	
	<form action='#ENV{action}'>
		#ACTION_FORMULAIRE{#ENV{action}}
		<input type='radio' id='choix1' name='reponse' value='p1'><label for='choix1'>#ENV{p1}</label><br />
		<input type='radio' id='choix2' name='reponse' value='p2'><label for='choix2'>#ENV{p2}</label><br />
		<input type='radio' id='choix3' name='reponse' value='p3'><label for='choix3'>#ENV{p3}</label><br />
		<input type='radio' id='choix4' name='reponse' value='p4'><label for='choix4'>#ENV{p4}</label><br />
		<input type='radio' id='choix5' name='reponse' value='p5'><label for='choix5'>#ENV{p5}</label><br />
		<input type='radio' id='choix6' name='reponse' value='p6'><label for='choix6'>#ENV{p6}</label><br />
		<input type='submit' name='ok' value='Validation' />
	</form>
	<BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
		Réponse choisie : #ENV{#ENV{reponse}}<br />
		Réponse attendue : #ENV{#ENV{repattendue}}<br />
		#SET{rep, #ENV{#ENV{reponse}}}
		<BOUCLE_verifreponse(CONDITION){si #ENV{reponse}|==#ENV{#ENV{repattendue}}}
			Bravo ! 
		</BOUCLE_verifreponse>
			Dommage.
		<//B_verifreponse>
	</BOUCLE_choixok>
</div>
[(#REM) <-- DEB qcm_question -->]
  • le formulaire recevra les variables depuis la fonction "charger" de "qcm_question.php" : "p1" à "p6" ainsi que "repattendue" et renverra la variable "reponse" avec la proposition choisie par le candidat.
  • Pour que le formulaire commence à fonctionner, il est maintenant indispensable de définir la fonction "charger" avec la passation des variables : tout part de là !

Étape 2 : définir la fonction charger

<?php
	function formulaires_qcm_question_charger_dist($p1, $p2, $p3, $p4, $p5, $p6, $repattendue){
		$valeurs = array('p1'=>$p1, 'p2'=>$p2, 'p3'=>$p3, 'p4'=>$p4, 'p5'=>$p5, 'p6'=>$p6, 'reponse'=>'p0', 'repattendue'=>$repattendue);
 		return $valeurs;
	}
?>
  • Plutôt classique et minimal : transmission des variables communiquées par l’appel du formulaire. Il y a les six propositions et la réponse attendue. La variable "reponse" contiendra... la réponse.

Étape 3 : vérifier la saisie

  • une seule erreur est possible : ne pas cocher un bouton radio avant de valider la réponse. Donc, négligeable. Au cas où (?), on laisse traîner un message par là. Évidemment la fonction "verifier" est ajoutée dans le php de "qcm_question.php".
function formulaires_qcm_question_verifier_dist(){ 
	if (count($erreurs))
		$erreurs['message_erreur'] = 'La saisie contient des erreurs !';
	return $erreurs;
}

Étape 4 : traiter la réponse

  • La réponse est prise en compte dans "qcm_question". Ici, on se contentera de vider le message, histoire de faire un travail propre. Le code de la fonction est ajoutée à "qcm_question.php" bien sûr.
        function formulaires_qcm_question_traiter_dist(){
                return array('message_ok'=>'');
        }

Étape 5 : afficher les données saisies

  • Comparaison de la réponse donnée et de celle attendue.
  • Une première boucle "condition" s’assure qu’une réponse a été donnée.
  • La deuxième boucle "condition" imbriquée dans la première donne le résultat.
	<BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
		#SET{rep, #ENV{reponse}}
		#SET{repcorrecte, #ENV{repattendue}}
		Réponse choisie : #ENV{#GET{rep}}<br />
		Réponse attendue : #ENV{#GET{repcorrecte}}<br />
		<BOUCLE_verifreponse(CONDITION){si #ENV{reponse}|=={#ENV{repattendue}}}>
			Bravo ! 
		</BOUCLE_verifreponse>
			Dommage.
		<//B_verifreponse>
	</BOUCLE_choixok>
  • Petite remarque : il aurait été possible de ne pas utiliser de #SET. Les réponses (celle choisie et celle attendue) auraient alors été : #ENV{#ENV{reponse}} et #ENV{#ENV{repattendue}} avec un #ENV dans un #ENV [1].

Étape 6 : mettre en forme

Mise en forme minimale :

  • dans le modèle "qcm  .html"
    • Consigne en italique.
    • Question en gras.
  • dans le formulaire qcm_question.html :
    • Réponse choisie soit en rouge si ce n’est pas celle attendue soit en vert dans l’autre cas. Si la réponse est bonne, ce n’est pas la peine d’afficher la réponse attendue.
    • Affichage du message "Bravo !" en gras. On laisse "Dommage..." en affichage normal.
  • Utiliser "editable" pour cacher les boutons-radio une fois la réponse validée.

Test du formulaire

Bonne utilisation


Sélectionner (cocher) la bonne réponse.
Comment s'appelle ce site ?








MAJ : ...


[1Dire que certains trouvent que Spip est vraiment basique... !


Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?

Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Brèves
1er juin – Les "bizarreries" continuent...

Déjà un mois que je me bagarre avec elles ! Le progrès principal est la probable identification. Il s’agit des mises à jour Apache, MySql, PHP, qui (...)

1er mai – Bizarrerie sur mon site

Depuis que le site a été restauré, il semblerait qu’il y ait eu un bug lors de la restauration, bug ne concernant que certaines informations (dont, (...)

4 mars 2019 – Fin de Spip3.0

Le support et la maintenance de SPIP 3.0 prendront fin le 30 juin 2019. Il n’y aura plus de mise à jour pour cette version, ni corrections de bugs (...)