Test, quizz, qcm, questionnaire sur réponse oui ou non avec affichage des résultats en popup et caclcul du score avec une va

Soyez le premier à donner votre avis sur cette source.

Vue 39 941 fois - Téléchargée 1 358 fois


Description

Je me suis bricolé mon premier script car je ne trouvais pas exactement ce que je cherchais.
Beaucoup de QCM avec plusieurs réponses possibles par question et sans note différente par question.
Ici la note pour chaque question est modifiable et ce sont des boutons radio à choix exclusif par question.
L'affichage des résultats se fait dans une fenêtre alert avec un petit message correspondant à la valeur du score calculé.
Vous pouvez le voir en ligne sur http://bdfc.fr/TestTOCer.aspx

Source / Exemple :


<html><head><title>TOC ou pas TOC</title><meta http-equiv="Content-Type"
 content="text/html; charset=ISO-8859-1"></head>
<body>
<script type="text/javascript">

var q1= 0;
var q2= 0;
var q3= 0;
var q4= 0;
var q5= 0;
var q6= 0;

//calcul du score
function calcul() {score=q1+q2+q3+q4+q5+q6;}

//commentaire du résultat
function resultat() {calcul();
					if (score<8) {alert("Ton taux de TOC est de "+score+" sur 10, comme tu es attentif à ta santé il vaut mieux ne plus TOcer pour le moment mais aller s'amuser autrement.");}
						else {alert("Ton taux de TOC est de "+score+" sur 10. Pour aujourd'hui tu peux raisonnablement TOCer :-)");}
					}

 </script>

<div align="center"><br><big style="font-style: italic;"><font style="font-family: Arial; font-weight: bold; color: rgb(102, 51, 102);">J'ai envie de TOCer mais est-ce bien pour moi?</font></big></div>
</div>

<form><p>
<!--Mise en forme de tout le texte sauf Question X-->
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">

<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 1 :</b></font>
<br>Est-ce que j'ai fait plus d'activité physique que de TOC aujourd'hui?<br>
<input type="radio" name="choix1" onclick='q1=2'>Oui<br>
<input type="radio" name="choix1" onclick='q1=0'>Non<br>

<p>
<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 2 :</b></font>
<br>Est-ce que je sais ce que je vais regarder/faire comme TOC?<br>
<input type="radio" name="choix2" onclick='q2=1'>Oui<br>
<input type="radio" name="choix2" onclick='q2=0'>Non<br>

<p>
<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 3 :</b></font>
<br>Ce que j'ai choisi comme TOC correspond à mon âge :<br>
<input type="radio" name="choix3" onclick='q3=3'>Vrai<br>
<input type="radio" name="choix3" onclick='q3=0'>Faux<br>

<p>
<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 4 :</b></font>
<br>Je vais TOCer pour apprendre quelque chose :<br>
<input type="radio" name="choix4" onclick='q4=1'>Vrai<br>
<input type="radio" name="choix4" onclick='q4=0'>Faux<br>

<p>
<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 5 :</b></font>
<br>J'ai déjà TOCer pendant 1/2h aujourd'hui :<br>
<input type="radio" name="choix5" onclick='q5=0'>Vrai<br>
<input type="radio" name="choix5" onclick='q5=1'>Faux<br>

<p>
<hr align="center" noshade="noshade"> <p><font style="color: rgb(102, 51, 102);" face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Question 6 :</b></font>
<br>Est-ce que j'ai prévu d'autres moments TOCs pour le reste de la journée?<br>
<input type="radio" name="choix6" onclick='q6=0'>Oui<br>
<input type="radio" name="choix6" onclick='q6=2'>Non<br>

<p align="center">
<input name="Submit" value="Alors aujourd'hui, TOC ou pas TOC?" onclick="resultat()" type="button"></p>
</form>

</body></html>

Conclusion :


Comme c'est mon premier code made by hand j'attends vos commentaires.
Encore merci à tous ceux qui contribue à ce site qui m'a beaucoup aidé.
Vous pouvez voir mon code en live sur http://bdfc.fr/TestTOCer.aspx

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
lundi 29 octobre 2007
Statut
Membre
Dernière intervention
16 décembre 2008

Si tu ne connais pas :
http://validator.w3.org/#validate_by_upload

Ca te permet de vérifier tes codes (soit par lien url, soit par téléchargement de ton fichier html)
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
36
ok, ta source est mieux maintenant !

;-)

a++

PS : de rien !
Messages postés
2
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
3 août 2008

J'ai fais quelques modifs conseillées par NicoMilville mais je paéfère rester sur un seul document (plutôt que séparer html, java et css) car ce questionnaire est intégrer par un appel de page hébergé ailleurs (http://bdfc.free.fr/QCM/TesTOCer.html) dans un site élaboré sous Office Live Small Business (http://bdfc.fr/TestTOCer.aspx) et je ne sais pas trop comment cela ferais si je séparais le code (j'ai ne connais en plus rien en feuille de style ;-).
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
136
jour

c'est du simple mais ca marche et c'est bien organise
je ne met pas de note mais pour un debut je trouve ca bien.
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
36
re,

En fait ce qu'il faut que tu fasse c'est que tu mette tout tes bouton radio dans le même formulaire (il ne doit y en avoir qu'un seul)...

Tu dois mettre des noms différents pour les case radio (un nom différent par question)...

Pour le fait den'avoir qu'une seul variable, tu peus avoir des valeurs différente par exemple une question qui vaut 3 points, au lieu de mettre :

q(1,2,3,4,5 ou 6) = 3;

Tu met :

q += 3;

ou :

q = q + 3;

Pour les groupes d'options différent j'avais oublié, je crois que tu peus utiliser des <optgroup></optgroup>...

Bon, maintenant j'ai d'autres impressions et idées a te soumettre pour optimiser ton code et le rendre plus portable...

Remplace :

<script language="javascript"></script>

Par :

<script type="text/javascript"></script>

Ce qui serait aussi bien c'est de séparé le code CSS, HTML et Javascript...

Tu fais un fichier javascript externe (nom_du_fichier.js) avec que du javascript dedans (pas besoin des balises <script></script>)

Tu fais un fichier CSS externe (nom_du_fichier.css) avec que du CSS dedans (pas besoin des balises <style></style>)

Et tu fais ta page html aec que des balises (sans le code javascript ni le code css, tu les incluera avecles balises <script></script> et l'attribut SRC et la balise <link /> avec l'attribut src) pas de onclick dans la page html (gestionnaire d'évènement dans le fichier.js avec les fonctions : attachEvent(exclusif IE) et addEventListener(firefox, opera, safari, netscape...)) pas d'attribut du genre :
- style
- align
- face

Tu fera tout ses style dans la feuille de style .css...

J'ai vu que dans ton code tu as des balises qui sont ouverte dans chaque <form> (deux de suite a chaque fois, c'est la deuxième qui n'est pas refermé) et qui ne sont pas refermés...

Tu utilise des balises , retire les, tu mettra le text en gros dans le css...

Je pense qu'avec ce que je vient de te dire tu as de quoi faire...

Bon courage...

a++
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.