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
La connaissance s’acquiert par l’expérience, tout le reste n’est que de l’information.  (Albert Einstein )
La réflexion du jour
Savoir est une chose. Partager son savoir en est une autre. Mais peut-on prétendre savoir sans partager ?
Activités
bénévole - geek - cycliste (cyclotouriste) - généalogiste - photographe - collectionneur - écrivain - enseignant - autres (divers)
Les mots clés
doc TIC * courriels * réseaux sociaux * chats * navigateurs * web & internet * informatique * Formation à distance * Chatons * E-learning * Logiciel libre * vidéoconférence * Sécurité * courrielleurs * fil d’informations * messagerie instantanée
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 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.

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

[(#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.

É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 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à !

É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

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

        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 :

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.