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

• 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 QCM Questionnaire à Choix Multiple 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.

• Créer le fichier "qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " dans le répertoire "formulaires" du dossier "squelettes".
• Ouvrir le fichier "qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " dans l’éditeur de texte
• Dans l’optique d’utiliser ce formulaire pour un QCM QCM Questionnaire à Choix Multiple , 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 QCM Questionnaire à Choix Multiple " par exemple. Donc un modèle "qcm QCM Questionnaire à Choix Multiple " 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.

[(#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 QCM Questionnaire à Choix Multiple 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 PHP Hypertext Preprocessor Voir Wikipedia 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à !

<?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.

• 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 PHP Hypertext Preprocessor Voir Wikipedia PHP de "qcm_question.php PHP Hypertext Preprocessor Voir Wikipedia PHP ".

function formulaires_qcm_question_verifier_dist(){ 
	if (count($erreurs))
		$erreurs['message_erreur'] = 'La saisie contient des erreurs !';
	return $erreurs;
}

• 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 PHP Hypertext Preprocessor Voir Wikipedia PHP " bien sûr.

        function formulaires_qcm_question_traiter_dist(){
                return array('message_ok'=>'');
        }

• 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].

Mise en forme minimale :

• dans le modèle "qcm QCM Questionnaire à Choix Multiple .html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) "
  • Consigne en italique.
  • Question en gras.
• dans le formulaire qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte)  :
  • 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.

Bonne utilisation