Créer une fonction pour comptabiliser des points sur plusieurs pages de QCM
MaxS64
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
MaxS64 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
MaxS64 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je débute en JavaScript (depuis moins de dix jours) et voici ma demande.
Je suis en train de créer un QCM.
J'ai créé une fonction en JS pour valider la bonne réponse d'une question du QCM.
J'ai aussi créé un bouton-lien pour passer à la page suivante dans laquelle sera posée une autre question et ainsi de suite.
Ce que j'aimerais savoir, c'est s'il existe une méthode pour comptabiliser les points obtenus par l'utilisateur sur les différentes pages.
Je mets ce que j'ai écrit si cela peut éclairer mon propos...
Merci à ceux qui voudront bien répondre... en espérant avoir été assez clair...
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {font-size: 100%;}
body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
h1 {margin-top: 0; text-align: center; background: moccasin; border-radius: 25px;}
h2 {margin-top: 0; text-align: center;}
ol, ul, li {padding: 0; margin: 1em;}
div#colonne1 {
float: left;
width: 160px;
padding: 1px 0;
background: -webkit-linear-gradient(top left, lightblue, white);
background: -o-linear-gradient(top left, lightblue, white);
background: -moz-linear-gradient(top left, lightblue, white);
background: linear-gradient(to top left, lightblue, white);
border-radius: 25px
}
div#colonne2 {
float: right;
width: 300px;
padding: 1px 0;
background: burlywood;
border-radius: 25px
}
div#centre {
padding: 1px 20px;
margin-left: 170px;
margin-right: 310px;
background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
background: linear-gradient(to bottom right, #800080,#FFFFFF);
border-radius: 25px
}
img.displayed {
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto
}
input {
width: 100px;
background: burlywood;
border-radius: 5px
}
</style>
<SCRIPT LANGAGE="JavaScript">
let erreurs = 0;
function verif() {
erreurs = 0;
if (form.rep1.value != "di") erreurs++;
message(erreurs);
};
function message(erreurs) {
if (erreurs == 0) alert ('Bravo !');
if (erreurs == 1) alert ('À recommencer !');
};
</SCRIPT>
<body>
<div id="centre">
Il est temps de faire des exercices sur l'étymologie !
<form name=form>
<p>
Coche quelle est la racine commune aux mots suivants : diurne, midi, mercredi.
</p>
<input id= "di" name="rep1" type="radio" value="di">
<label for="di">"di"</label>
<br>
<input id= "di" name="rep1" type="radio" value="mi">
<label for="mi">"mi"</label>
<br>
<BR>
<DIV ALIGN=center>
<INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT>
</form>
<form method="POST" action="étymologie2.html">
<input type="submit" name="Ok" value="Ok" >
</form>
</DIV>
</body>
Oui, ça ne ressemble peut-être pas à grand-chose, je débute :)
Merci.
Je débute en JavaScript (depuis moins de dix jours) et voici ma demande.
Je suis en train de créer un QCM.
J'ai créé une fonction en JS pour valider la bonne réponse d'une question du QCM.
J'ai aussi créé un bouton-lien pour passer à la page suivante dans laquelle sera posée une autre question et ainsi de suite.
Ce que j'aimerais savoir, c'est s'il existe une méthode pour comptabiliser les points obtenus par l'utilisateur sur les différentes pages.
Je mets ce que j'ai écrit si cela peut éclairer mon propos...
Merci à ceux qui voudront bien répondre... en espérant avoir été assez clair...
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {font-size: 100%;}
body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
h1 {margin-top: 0; text-align: center; background: moccasin; border-radius: 25px;}
h2 {margin-top: 0; text-align: center;}
ol, ul, li {padding: 0; margin: 1em;}
div#colonne1 {
float: left;
width: 160px;
padding: 1px 0;
background: -webkit-linear-gradient(top left, lightblue, white);
background: -o-linear-gradient(top left, lightblue, white);
background: -moz-linear-gradient(top left, lightblue, white);
background: linear-gradient(to top left, lightblue, white);
border-radius: 25px
}
div#colonne2 {
float: right;
width: 300px;
padding: 1px 0;
background: burlywood;
border-radius: 25px
}
div#centre {
padding: 1px 20px;
margin-left: 170px;
margin-right: 310px;
background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
background: linear-gradient(to bottom right, #800080,#FFFFFF);
border-radius: 25px
}
img.displayed {
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto
}
input {
width: 100px;
background: burlywood;
border-radius: 5px
}
</style>
<SCRIPT LANGAGE="JavaScript">
let erreurs = 0;
function verif() {
erreurs = 0;
if (form.rep1.value != "di") erreurs++;
message(erreurs);
};
function message(erreurs) {
if (erreurs == 0) alert ('Bravo !');
if (erreurs == 1) alert ('À recommencer !');
};
</SCRIPT>
<body>
<div id="centre">
Il est temps de faire des exercices sur l'étymologie !
<form name=form>
<p>
Coche quelle est la racine commune aux mots suivants : diurne, midi, mercredi.
</p>
<input id= "di" name="rep1" type="radio" value="di">
<label for="di">"di"</label>
<br>
<input id= "di" name="rep1" type="radio" value="mi">
<label for="mi">"mi"</label>
<br>
<BR>
<DIV ALIGN=center>
<INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT>
</form>
<form method="POST" action="étymologie2.html">
<input type="submit" name="Ok" value="Ok" >
</form>
</DIV>
</body>
Oui, ça ne ressemble peut-être pas à grand-chose, je débute :)
Merci.
A voir également:
- Créer une fonction pour comptabiliser des points sur plusieurs pages de QCM
- Créer un lien pour partager des photos - Guide
- Créer une carte avec des points - Guide
- Fonction si et - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un compte google - Guide
1 réponse
Bonjour,
Pour commencer, merci d'utiliser la coloration syntaxique pour poster ton code
explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, n'importe qui qui regardera le code source de la page à travers son navigateur connaitre la bonne réponse à mettre ....
On ne fait jamais le QCM en javascript seulement.... à minima on utilise un langage serveur tel que le PHP.
Mais si tu veux juste t'entrainer et faire mumuse avec le javascript, dans ce cas, pour transmettre le nombre de poins tu peux utiliser les variables GET.
Mais je vois dans ton code que tu utilises un formulaire en POST ..... j'en déduis donc que tu as bien du php derrière .. non ?
Sinon aucun intérêt.
Pour commencer, merci d'utiliser la coloration syntaxique pour poster ton code
explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, n'importe qui qui regardera le code source de la page à travers son navigateur connaitre la bonne réponse à mettre ....
On ne fait jamais le QCM en javascript seulement.... à minima on utilise un langage serveur tel que le PHP.
Mais si tu veux juste t'entrainer et faire mumuse avec le javascript, dans ce cas, pour transmettre le nombre de poins tu peux utiliser les variables GET.
Mais je vois dans ton code que tu utilises un formulaire en POST ..... j'en déduis donc que tu as bien du php derrière .. non ?
Sinon aucun intérêt.
En fait, oui, je m'entraîne au javascript et je ne connais rien encore au PHP.
Pour le formulaire en POST, il n'y a sûrement, comme tu le dis, aucun intérêt. J'ai attrapé ce bout de code quelque part, sans tout analyser. J'ai vu que ça marchait... Je me suis dit que je comprendrais plus tard...
Merci pour l'info sur les variables GET, je vais me renseigner pour avancer.