Pouvez vous m'aider à comprendre une fonction

Fermé
carla954 Messages postés 3 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 6 juin 2018 - Modifié le 6 juin 2018 à 16:47
jordane45 Messages postés 38309 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 6 juin 2018 à 18:42
Bonjour à tous,
Je suis en Terminale S en option ISN (Informatique et Science du Numérique), je suis donc débutante en javascript, un ami à créer un quizz (en javascript), mais je ne comprends pas son code, est ce que quelqu'un pourrait m'expliquer comment il a fait, je comprends l'idée généralement mais pas le code à proprement parler. Merci de votre aide, je vous joins son code.
--------------------------------------------------------------------------------------------------------------
var current_index = 0 ;

var questionnaireEN = new Array();
 
//QUESTION 1
questionnaireEN[0] = new Array();
questionnaireEN[0][0] = "Comment dit-on jaune en anglais ?";
questionnaireEN[0][1] = "images/EnQuiz1";
questionnaireEN[0][2] = new Array("yellow","red","cat","blue");

questionnaireEN[0][3] = "yellow";
 
 
//QUESTION 2
questionnaireEN[1] = new Array();
questionnaireEN[1][0] = "Comment dis-tu ton prénom en anglais?";
questionnaireEN[1][1] = "images/monImage.png";
questionnaireEN[1][2] = new Array("I am...","I live in...","My name is...","Blue...");

questionnaireEN[1][3] = "My name is...";
 
 
//QUESTION 3
questionnaireEN[2] = new Array();
questionnaireEN[2][0] = "Comment dit-tu le chffre trois en anglais? ";
questionnaireEN[2][1] = "images/monImage.png";
questionnaireEN[2][2] = new Array("one","two","blue","three");

questionnaireEN[2][3] = "three";

//QUESTION 4
questionnaireEN[3] = new Array();
questionnaireEN[3][0] = "Comment dit-on salut en anglais ?";
questionnaireEN[3][1] = "images/EnQuiz1";
questionnaireEN[3][2] = new Array("november","yes","blue","hello");

questionnaireEN[3][3] = "hello";
 
//QUESTION 5
questionnaireEN[4] = new Array();
questionnaireEN[4][0] = "Comment dit-on cochon en anglais ?";
questionnaireEN[4][1] = "images/EnQuiz1";
questionnaireEN[4][2] = new Array("cow","pig","birds","blue");

questionnaireEN[4][3] = "pig";

//QUESTION 6
questionnaireEN[5] = new Array();
questionnaireEN[5][0] = "Comment dit-on septembre en anglais ?";
questionnaireEN[5][1] = "images/EnQuiz1";
questionnaireEN[5][2] = new Array("january","july","august","september");

questionnaireEN[5][3] = "september";

//QUESTION 7
questionnaireEN[6] = new Array();
questionnaireEN[6][0] = "Comment dit-on Je vis à... en anglais ?";
questionnaireEN[6][1] = "images/EnQuiz1";
questionnaireEN[6][2] = new Array("I like to do...","I live in...","I was born in...","My name is...");

questionnaireEN[6][3] = "I live in...";

//QUESTION 8
questionnaireEN[7] = new Array();
questionnaireEN[7][0] = "Comment dit-on ours en anglais ?";
questionnaireEN[7][1] = "images/EnQuiz1";
questionnaireEN[7][2] = new Array("dog","fish","blue","bears");

questionnaireEN[7][3] = "bears";

//QUESTION 9
questionnaireEN[8] = new Array();
questionnaireEN[8][0] = "Comment dit-on marron en anglais ?";
questionnaireEN[8][1] = "images/EnQuiz1";
questionnaireEN[8][2] = new Array("grey","black","brown","white");

questionnaireEN[8][3] = "brown";

//QUESTION 10
questionnaireEN[9] = new Array();
questionnaireEN[9][0] = "Comment dit-on poney en anglais ?";
questionnaireEN[9][1] = "images/EnQuiz1";
questionnaireEN[9][2] = new Array("november","i live in...","poney","blue");

questionnaireEN[9][3] = "poney";

function compare(a,b){
    var alert ;
 if (a == b){
  alert=("Bravo ! C'est la bonne reponse, passons a la question suivante ! ");
     
  if ( current_index+1 == questionnaireEN.length){
   alert=("Questionnaire Finis, on revient au debut");
   show_quizz(0);
  }else{
   show_quizz((current_index+1));
  }
 }else{
  alert=("Dommage, c'est une mauvaise reponse ! Essaye encore !");
 }
    document.getElementById("phrase").innerHTML = alert
}
 function show_quizz(index){
current_index = index;
document.getElementById("question").innerHTML = questionnaireEN[index][0];

reponses = document.getElementById("reponses");
reponses.innerHTML = "";
for (var i = 0; i < questionnaireEN[index][2].length ; i++){
 reponses.innerHTML += "<input type='button' value='"+questionnaireEN[index][2][i]+"' onclick=\"compare(\'"+questionnaireEN[index][2][i]+"\',\'"+questionnaireEN[index][3]+"\');\" />  " ;

  
    
}
 
}

1 réponse

jordane45 Messages postés 38309 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
6 juin 2018 à 17:22
Bonjour,
Quelle parti ne comprends tu pas ?

Sachant que, en gros,
Il créé des question dans un array.
Chaque Question est elle même un array de la forme
questionnaireEN[8] = new Array();
questionnaireEN[8][0] = "Comment dit-on marron en anglais ?";
questionnaireEN[8][1] = "images/EnQuiz1";
questionnaireEN[8][2] = new Array("grey","black","brown","white");
questionnaireEN[8][3] = "brown";

Dans cet array se trouvent (dans l'ordre )
Le texte de la question
Une image
Les réponses possible
La Bonne réponse

La fonction show_quizz permet de choisir une question parmi celles disponibles ( il les prend dans l'ordre )
Cela génère l'affichage de la question et un bouton pour les réponses
Bouton qui lance la fonction compare dans laquelle il compare la réponse sélectionnée avec la bonne réponse.

Si mauvaise réponse : Affichage du message :

Dommage, c'est une mauvaise reponse ! Essaye encore !


Si bonne réponse, affichage du message

Bravo ! C'est la bonne reponse, passons a la question suivante

puis affichage d'une nouvelle question si on est pas encore arrivé à la fin..

0
carla954 Messages postés 3 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 6 juin 2018
6 juin 2018 à 17:27
Merci de votre réponse si rapide, cela m'aide beaucoup, cependant , je ne comprends toujours pas le "array" a quoi sert t'il, est une variable ? Il me semble que normalement il crée un tableau, est ce le cas ici ?
Merci
Cordialement
Carla
0
carla954 Messages postés 3 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 6 juin 2018
6 juin 2018 à 17:29
Aussi, je ne comprends pas ce bout la
--------------------------------------------------------------------------------------------------------------------------------------------
function show_quizz(index){
current_index = index;
document.getElementById("question").innerHTML = questionnaire[index][0];

reponses = document.getElementById("reponses");
reponses.innerHTML = "";
for (var i = 0; i < questionnaire[index][2].length ; i++){
reponses.innerHTML += "<input type='button' value='"+questionnaire[index][2][i]+"' onclick=\"compare(\'"+questionnaire[index][2][i]+"\',\'"+questionnaire[index][3]+"\');\" /> ";

-------------------------------------------------------------------------------------------------------------------------------------------------------
Je comprends ce qu'il permet de faire mais pas comment il fonctionne...
Pourriez vous m'expliquer plus en détail ?
merci
0
jordane45 Messages postés 38309 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
6 juin 2018 à 18:42
Déjà... la première chose à faire quand on ne comprend pas un terme est de regarder sur le net.
Un "Array" (traduction en français : "tableau" ) est un type de variable.
Jette un oeil ici : http://www.aliasdmc.fr/coursjavas/cours_javascript70.html

Ensuite, quelle partie de la fonction ne comprends tu pas au juste ??
Par exemple :
document.getElementById("question").innerHTML = questionnaire[index][0];

Signifie : Je prends la valeur contenu dans la variable questionnaire ligne = index et colonne = 0
et je l'affiche dans l'élément html dont l'id est "question"

Ensuite,

reponses = document.getElementById("reponses");
reponses.innerHTML = "";
for (var i = 0; i < questionnaire[index][2].length ; i++){
reponses.innerHTML += "<input type='button' value='"+questionnaire[index][2][i]+"' onclick=\"compare(\'"+questionnaire[index][2][i]+"\',\'"+questionnaire[index][3]+"\');\" /> ";

Je stocke dans l'élément html dont l'id est "reponses", la liste des réponses contenues dans la variable questionnaire (dont l'index est le même que celui de la question....) et les affiche.
  • index : c'est le NUMERO DE LA QUESTION


Je te rappel que les réponses sont contenues dans l'array dans la colonne [2]
D'où le :
questionnaire[index][2]


Quoi qu'il en soit ce code est des plus simples.
Pour le comprendre il suffit de savoir ce qu'est un ARRAY et comment on le manipule.
0