Comme l'indique le titre je voudrais avoir un bouton score en bas de ma page m'indiquant le score du QCM 1 réponse juste vaut 3 point et une réponse fausse voit -1 point et qu'une seule réponse par question est autorisée
(Je sais q'u'es Javascript on peut voir les réponses, mais c'est un projet scolaire, donc menfou :))
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>QCM NSI</title>
<script language="javascript">
</script>
<link rel="stylesheet" href="styleqcm.css">
</head>
<body>
<form name="qcm">
<center><h1><mark><u>QCM NSI</u></mark></h1></center>
<h3>Bonjour et bienvenue dans le meilleur QCM d'NSI au monde, constitué de 10 questions dont UNE seule réponse par question est acceptée, sinon la réponse à la question sera considérée comme fausse et ne vous apportera AUCUN point. </h3>
<center><h1> <mark> <label id="LblClignotant">Good Luck :)</label> </mark> </h1></center>
<strong>Question 1 </strong>:
On donne ci-dessous un programme écrit en python :
<p id = "prg1"|>
a = 10<BR>
for index in range(4):<BR>
a = a + index<BR>
print(a)<BR>
</p>
Quelle valeur est affichée après exécution ?
<ul>
<li><input type="checkbox" name="question1" value="a"> 12.
<li><input type="checkbox" name="question1" value="b"> 14.
<li><input type="checkbox" name="question1" value="c"> 16.
<li><input type="checkbox" name="question1" value="d"> 13.
</ul>
<input type="button" value="correction" onclick="correction1()">
<input type="button" value="corrigé" onclick="corrige1()">
<BR>
<BR>
<BR>
<strong>Question 2 </strong> :
en quelle année le langage python est-il apparu ?
<ul>
<li><input type="checkbox" name="question2" value="a"> 1780.
<li><input type="checkbox" name="question2" value="b"> 1930.
<li><input type="checkbox" name="question2" value="c"> 2002.
<li><input type="checkbox" name="question2" value="d"> 1989.
</ul>
<input type="button" value="correction" onclick="correction2()">
<input type="button" value="corrigé" onclick="corrige2()">
<BR>
<BR>
<BR>
<strong>Question 3 :</strong>
La langage HTML est un langage de :
<ul>
<li><input type="checkbox" name="question3" value="a"> Programmation.
<li><input type="checkbox" name="question3" value="b"> Ecriture.
<li><input type="checkbox" name="question3" value="c"> Description.
<li><input type="checkbox" name="question3" value="d"> Localisation.
</ul>
<input type="button" value="correction" onclick="correction3()">
<input type="button" value="corrigé" onclick="corrige3()">
<BR>
<BR>
<BR>
<strong>Question 4 :</strong>
En quelle année le langage HTML est-il apparu ? :
<ul>
<li><input type="checkbox" name="question4" value="a"> 1990.
<li><input type="checkbox" name="question4" value="b"> 1969.
<li><input type="checkbox" name="question4" value="c"> 2020.
<li><input type="checkbox" name="question4" value="d"> 1991.
</ul>
<input type="button" value="correction" onclick="correction4()">
<input type="button" value="corrigé" onclick="corrige4()">
<BR>
<BR>
<BR>
<strong>Question 5 :</strong>
L'inventeur du langage Python est :
<ul>
<li><input type="checkbox" name="question5" value="a"> Elon Musk.
<li><input type="checkbox" name="question5" value="b"> Guido van Rossum.
<li><input type="checkbox" name="question5" value="c"> Yoshiro Nakamatsu.
<li><input type="checkbox" name="question5" value="d"> Gollum Ofthering.
</ul>
<input type="button" value="correction" onclick="correction5()">
<input type="button" value="corrigé" onclick="corrige5()">
<BR>
<BR>
<BR>
<strong>Question 6 :</strong>
Cette table de vérité est le table de :
<BR>
<p id = "prg1"|>
<span id='marge'/>0 0 0<BR>
<span id='marge'/>0 1 1<BR>
<span id='marge'/>1 0 1<BR>
<span id='marge'/>1 1 0<BR>
</p>
<ul>
<li><input type="checkbox" name="question6" value="a"> AND.
<li><input type="checkbox" name="question6" value="b"> XOR.
<li><input type="checkbox" name="question6" value="c"> OR.
<li><input type="checkbox" name="question6" value="d"> NON A.
</ul>
<input type="button" value="correction" onclick="correction6()">
<input type="button" value="corrigé" onclick="corrige6()">
<BR>
<BR>
<BR>
<strong>Question 7 :</strong>
Quel est le nom du programme dans python qui sert à dessiner des formes géométriques ? :
<ul>
<li><input type="checkbox" name="question7" value="a"> Spyder
<li><input type="checkbox" name="question7" value="b"> Twitter
<li><input type="checkbox" name="question7" value="c"> Turtle
<li><input type="checkbox" name="question7" value="d"> Shark
</ul>
<input type="button" value="correction" onclick="correction7()">
<input type="button" value="corrigé" onclick="corrige7()">
<BR>
<BR>
<BR>
<strong>Question 8 :</strong>
Comment s'écrit le nombre 671 en binaire ? :
<ul>
<li><input type="checkbox" name="question8" value="a"> 1
<li><input type="checkbox" name="question8" value="b"> 1010100001
<li><input type="checkbox" name="question8" value="c"> 1010011110
<li><input type="checkbox" name="question8" value="d"> 1010011111
</ul>
<input type="button" value="correction" onclick="correction8()">
<input type="button" value="corrigé" onclick="corrige8()">
<BR>
<BR>
<BR>
<strong>Question 9 : </strong>
Ceci est un programme pour échanger les valeurs de deux variables, completez les petits pointillés :
<p id = "prg1"|>
A = input("Donner la valuer de A:")<BR>
B = input("Donner la valeur de B:")<BR>
<span id='marge2'/>.....<BR>
<span id='marge2'/>.....<BR>
<span id='marge2'/>.....<BR>
print("A = : " , A)<BR>
print("B = : " , B) <BR>
</p>
<ul>
<span id='marge2'/>A = C
<li><input type="checkbox" name="question9" value="a"> B = C<BR> <span id='marge2'/>A = C<BR>
<BR>
<span id='marge2'/>C = A
<li><input type="checkbox" name="question9" value="b"> A = B<BR> <span id='marge2'/>B = C<BR>
<BR>
<span id='marge2'/>A = A
<li><input type="checkbox" name="question9" value="c"> B = B<BR> <span id='marge2'/>C = C<BR>
<BR>
<span id='marge2'/>C = A
<li><input type="checkbox" name="question9" value="d"> A = B<BR> <span id='marge2'/>C = A
</ul>
<input type="button" value="correction" onclick="correction9()">
<input type="button" value="corrigé" onclick="corrige9()">
<BR>
<BR>
<BR>
<strong>Question 10 : </strong>
L'intensité de chaque couleur est donnée par un entier compris entre :
<ul>
<li><input type="checkbox" name="question10" value="a"> 0 et 256
<li><input type="checkbox" name="question10" value="b"> 0 et 258
<li><input type="checkbox" name="question10" value="c"> 0 et 255
<li><input type="checkbox" name="question10" value="d"> 12 et 12.1
</ul>
<input type="button" value="correction" onclick="correction10()">
<input type="button" value="corrigé" onclick="corrige10()">
<BR>
<BR>
<BR>
Pour <strong>TOUT</strong> effacer <input type="reset" value="effacer">
<BR>
<BR>
<input type="button" value="Score" onclick="getScore()">
</form>
<script src="scriptqcm.js"></script>
</body>
</html>
LE SCRIPT
function correction1() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question1")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question1")[2].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction2() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question2")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question2")[3].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction3() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question3")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question3")[2].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction4() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question4")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question4")[0].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction5() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question5")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question5")[1].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction6() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question6")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question6")[1].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction7() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question7")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question7")[2].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction8() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question8")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question8")[3].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction9() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question9")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question9")[1].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
function correction10() {
var s = 0;
for (index=0; index <=3;index++) {
s = s + document.getElementsByName("question10")[index].checked;
}
console.log(s);
if (s == 0) {
alert("vous n'avez pas répondu, vous n'obtenez aucun point");
}
else if (s ==1) {
if (document.getElementsByName("question10")[2].checked) {
alert("bravo, c'est une bonne réponse, vous obtenez 3 points");
}
else { alert (" C'est une réponse fausse, vous perdez 1 point");
}
}
else {
alert("vous avez coché "+s+" réponses alors qu'il n'y a qu'une bonne réponse, vous perdez 1 point");
}
}
var signe = -1;
var clignotementFading = function(){
var obj = document.getElementById('LblClignotant');
if (obj.style.opacity >= 0.96){
signe = -1;
}
if (obj.style.opacity <= 0.04){
signe = 1;
}
obj.style.opacity = (obj.style.opacity * 1) + (signe * 0.04);
};
periode = setInterval(clignotementFading, 85 );
Bonjour
avez vous une question? où est ce que vous bloquez?
Je vous conseille de virer tout les 'alert' qui est une fonction bloquante indiquant une alerte et non le fonctionnement normal du programme par exemple en écrivant directement dans la page(évitez aussi document.write bien sûr).
Sinon pour additionner des valeurs en Javascript et en programmation en général vous devez utiliser le symbole '+', du moment que vos variables sont bien identifiées de 'type' numérique.
Autre chose dans un formulaire si le script doit fonctionner dans la page vous devez désactiver le comportement du bouton d'envoi(submit) par défaut qui redirige(voir attribut method) vers une autre page où la même ce qui reviens à supprimer toute présente de script(celui ci étant effectué à nouveau) et bien sûr supprimer toutes les valeurs indiquées par le formulaire.
à moins de les traiter séparément(envoi vers une autre page affichant les résultats ou traitement serveur PHP etc...) le formulaire ne doit pas être validé(ce qui envoit les données des champs vers une autre page).
En regardant votre script je me rends compte que vous n'avez pas vraiment compris les fonctions.
Vous écrivez 10 fonction correction de façon identique(quelle perte de temps) si ce n'est pour un détail.
Ne serais il pas plus simple d'utiliser un paramètre et une seule fonction à la place des 10 que vous avez?
Bref vous n'avez pas fait grand chose et ce que vous avez est plutôt mal fait, recommencer en suivant par exemple les explications du cours ou simplement en apprenant comment marchent les fonction s en JavaScript.
Je bloque, désolé je sais c'est brouillon, mais je commence a peine, avec un prof qui n'est pas prof de Code à la base (il est prof de Maths), donc c'est vachement compliqué.
Je dois lui rendre sous peu, j'ai tout fait sauf le bouton Score et je ne vois pas comment le réaliser. Pouvez-vous m'aider ?
Et puis comment il veut un bouton sous chaque question ba je vois pas comment mettre une seule fonction qui en fait 10 :/
Autre chose, les balises li, ça se ferme (sont gentils les navigateurs), s'il n'y a qu'une seule réponse possible, alors il faut utiliser des types radio et pas checkbox.
Un score, c'est juste une variable à incrémenter si une réponse donnée est correcte, c'est pratiquement ce qu'il y a de plus facile à faire ici, je ne comprends même pas ce qui te pose problème.
Avec la commande ci-dessus en gros, je peux faire en sorte juste en changeant le numéro que ça corrige toutes les questions ? (Et après je l’incorpore dans les boutons)
Ba j'ai commencé le html il y a quelques jours pas plus, je sais pas ce qui est "facile" ou "difficile", je veux juste un bouton qui calcule le score en fonction des points que ça rapporte.
Oui, c'est le principe d'une fonction, En changeant les deux paramètres, donc le name du groupe de checkbox (à changer en radio), et l'indice de la bonne réponse dans le groupe.
Pour la question 2, ce sera
correction('question2', 3)
Et un début de fonctions pourrait se faire alors
const NOMBRE_QUESTIONS = 10;
var score = 0;
var questions = [];
function correction(question_name, reponse_index) {
if (!questions.includes(question_name)) {
questions.push(question_name);
var items = document.getElementsByName(question_name);
var checked_index = -1;
for (i=0; i<items.length; i++) {
if (items[i].checked) {
checked_index = i;
break;
}
}
if (checked_index == -1) {
// Pas de sélection faite
console.log("Pas de choix sélectionné");
}
else if (checked_index == reponse_index) {
// Bonne réponse
console.log("Bonne réponse");
items[reponse_index].parentNode.style.color = "green";
score++;
}
else {
// Mauvaise réponse
items[reponse_index].parentNode.style.color = "green";
items[reponse_index].parentNode.style.textDecoration = "underline";
items[checked_index].parentNode.style.color = "orange";
items[checked_index].parentNode.style.textDecoration = "line-through";
console.log("Muavaise réponse");
}
}
else {
// Réponse déjà donnée
console.log("Question déjà effectuée");
}
}
function getScore() {
if (questions.length < NOMBRE_QUESTIONS) {
console.log("Toutes les questions n'ont pas été validées !");
}
else {
console.log("Le score est de " + score + " points.");
}
}
Bon, perso, je suis une bouse en javascript, mais ce qui est fait avec la variable score est tellement simple et logique que je ne vois pas en quoi cela te pose souci.
"Marche pas" ne veut rien dire en programmation, si ça ne marche pas, c'est que tu dois avoir une erreur quelque part, donc zieuter la console web du navigateur pour voir ce qui cloche.
Bah forcément, il n'affiche que des choses dans la console, et là il y a 2 questions, alors que la constante NOMBRE_QUESTION est initialisée à 10, dans la fonction getScore, le score ne sera affiché que si 10 questions ont été faites, mets 2 comme valeur de NOMBRE_QUESTION, et tu auras bien le score dans la console.
Alors, x) là ça marche et tout parce que j'ai mis alert au lieu de console.log, maiiiissss que pour une seule question la 2, je ne vois pas pourquoi et aussi j'aimerai bien que une réponse fausse fasse perdre 1 point et qu'une réponse juste fasse gagner 3 points et dans le code je vois pas de nombres
score++ c'est augmenter le score de 1, tu devrais tout de même savoir ça....
Si on peut perdre au maximum 10 points en échouant à toutes les questions, j'imagine qu'au départ il doit y avoir un capital score de 10, sinon il pourrait y avoir un score négatif.
Je vous ai déjà dit que ce n'est pas de ma faute, j'ai commencé le html il y a quelques jours pas plus et le prof n'est pas à l'aise il nous a juste donné ça en disant débrouillez-vous avec des consignes précises qu'il a trouvé sur une activité d'autres professeurs d'un autre lycée. score- - c'est pour baisser le score de 1 du coup ou rien avoir ? et du coup le fait que ça marche que sur la question 2, comment le régler ??
Merci quand même déjà d'avoir prit de votre temps pour me répondre, c'est gentil.
Il faut changer toutes les fonctions dans les onclick, je t'avais mit un exemple pour la question 1 et 2.
Remonte plus en amont dans la discussion.
A toi de changer le reste, ce qui n'est pas bien difficile.
Pour l'incrémentation, décrémentation, etc.
https://www.w3schools.com/js/js_operators.asp
Pas d'erreur ici.
Remontre ton html, et transforme tes checkbox en radio, cela peut se faire avec ton éditeur de texte en un tour de main avec l'option remplacer dans le menu de l'éditeur
type="checkbox"
par
type="radio"
.
Du moins si tu utilises un éditeur de texte ou ide digne de ce nom.
Oui j'utilise NotePad++ et c'est déjà fait. En fait le problème est que dès que je coche une seule réponse fausse le résultat devrait être de 29 / 30 mais la ça me met 25/30 ??
Pour cette raison que ton barème de points est bancal, pourquoi donc enlever 1 point pour une mauvaise réponse ? Alors que ne pas ajouter ou soustraire de points serait plus logique.
Pourquoi alors tu as 25 points au lieu de 26 ? Aucune idée, mais vérifie quand même ce que tu affirmes.
Je sais que c'est pas logique mais c'est ses consignes, au pire pas très grave je vais faire comme vous dites 1 réponse juste = 1 point et réponse fausse pas de points. Merci pour votre aide précieuse
