Bonjour et bienvenue sur cette partie ou nous allons voir comment fonctionne les conditions dans JavaScript et cela nous allons le faire en construisant une application web qui permettra de faire un test de calcule.
C’est quoi une condition.
Une condition va comme son nom l’indiquer effectuer une action si une certaine condition est rempli. Mais dans le monde de la programmation il existe plusieurs conditions comme le IF, Else, Else If et les Switch.
Alors pour créer une condition il suffit d’utiliser un if ou nous allons placer une condition et si la condition est True alors on exécute le code sinon on ne fait rien. Dans notre exemple nous allons créer une variable age qui contient la valeur 18 et quand la valeur est plus grande que 17 alors on affiche un message dans la console.
let age = 18;
if(age>17){
console.log('adult');
}
Ici si la condition n’est pas remplie alors le code ne sera pas exécuter et on passe à la suite. Mais si on veut on peut exécuter un certain code si la condition n’est pas remplie avec le ELSE. Dison que l’age est plus petit que 18 alors je veux afficher « kid » dans la console.
let age = 15;
if(age>17){
console.log('adult');
}else{
console.log('kid');
}
Donc si la personne est plus jeune que 18 ans alors c’est un enfant mais si je veux encore plus de condition c’est possible avec la condition ELSE IF qui veut simplement dire sinon si. Et donc nous allons dire que sinon si la personne à plus de 12 ans alors c’est un teenager
let age = 15;
if(age>17){
console.log('adult');
}else if(age>12){
console.log('teenager');
}else{
console.log('kid');
}
Les Switch
Une autre façon de crée des conditions sont les switches ou nous allons placer un résultat et puis nous allons définir des cas pour certaine condition et donc si la condition du switch est remplie alors on exécute un certain code. Nous allons utiliser l’exemple d’un feu de Traffic qui reçois l’option 1 pour rouge 2 pour orange et 3 pour vert
let option = 1;
switch(option){
case 1:
console.log('red');
break;
case 2:
console.log('orange');
break;
case 3:
console.log('green');
break;
}
Alors comme vous pouvez le voir utiliser la condition est plutôt simple dans JavaScript. Désormais nous allons créer notre application de test qui met en pratique ce que nous venons de voir.
Mise en place
Alors avant de commencer nous allons avoir besoin de 2 fichiers un fichier index.html et un fichier que je vais nommer code.js qui contiendra notre code javascript.
Dans le fichier html nous allons créer la structure de notre application qui est comme suite.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Maths Test</title>
</head>
<body>
<div class="container" style="background-color: rgb(167, 182, 223);margin-top:50px; border-radius:25px">
<div class="p-3 text-center text-white font-weight-bold">
<!-- affiche le score du joueur -->
<h2>TUTO <span style="color:brown;">DE</span> RIEN</h2>
<div id="score">
<p class="m-0">Score : 20/20</p>
<p class="m-0">Expression : x </p>
<p class="m-0">Level : 1</p>
</div>
</div>
<div id="levelSetup">
<!-- affiche le niveau de difficulté -->
<div class="d-flex justify-content-between p-5">
<div class="border border-dark p-2">
<p class="text-center bg-dark text-white p-3 mb-2 font-weight-bold">Difficulty</p>
<button class="btn btn-primary" value='+' onclick="setExpression(this)">+</button>
<button class="btn btn-primary" value='-' onclick="setExpression(this)">-</button>
<button class="btn btn-primary" value='x' onclick="setExpression(this)">x</button>
<button class="btn btn-primary" value='/' onclick="setExpression(this)">/</button>
</div>
<div class="border border-dark p-2">
<p class="text-center bg-dark text-white p-3 mb-2 font-weight-bold">Level</p>
<button class="btn btn-primary" value="1" onclick="setLevel(this)">1</button>
<button class="btn btn-primary" value="2" onclick="setLevel(this)">2</button>
<button class="btn btn-primary" value="3" onclick="setLevel(this)">3</button>
<button class="btn btn-primary" value="4" onclick="setLevel(this)">4</button>
<button class="btn btn-primary" value="5" onclick="setLevel(this)">5</button>
</div>
</div>
</div>
<div id="Calcule" >
<!-- affiche le calcule à faire -->
<div class="input-group input-group-lg p-5">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size: 40px;">5 x 8 =</span>
</div>
<input type="number" id="playerInput" class="form-control" style="font-size: 40px;">
<div class="input-group-append">
<button class="btn btn-success" style="font-size: 40px;" onclick="setUserInput()">validate</button>
</div>
</div>
</div>
<div id="result" >
<!-- affiche le résulat si bon ou mauvais -->
<div class="p-5">
<div class="p-3 text-center bg-success text-white" style="font-size: 40px;">5 x 8 = 40 good Job !</div>
</div>
</div>
</div>
</body>
</html>
L’objectif de l’application
Le but de notre application c’est de sélectionner une expression de calcule et un niveau. Ces options vont générer des exercices de calcule pour l’utilisateur.
Quand l’utilisateur donne une réponse alors un message s’affiche pour dire que le résultat est bon ou pas. Et si ça réponse est bonne lui donne 1 pions. Une fois que l’utilisateur à répondu à 20 questions le score final s’affiche et le test terminé.
Pour cela nous allons devoir faire pas mal de modificaiton sur notre page HTML grace au javaScript et donc nous allons associer notre fichier html et javascript avec la balise script sinon rien ne changera.
Les variables
Dans notre fichier JavaScript nous allons déclarer quelque variable que nous allons utiliser.
let number1 = 1;
let number2 = 2;
let userInput = 0;
let result = 0;
let expression = '';
let level = 0;
let randomRange = 0;
let score = 0;
let counter = 0;
Les deux variable Numbers vont contenir les valeurs générer aléatoirement par javascript selon le niveau sélectionner par l’utilisateur.
Le userInput va comme sont nom l’indique contenir le nombre indiquer par l’utilisateur. Ce nombre sera comparé avec la valeur qui se trouvera dans result qui va calculer le nombre1 et nombre2 selon l’expression sélectionner.
Pour finir nous avons le score qui affichera le score de l’utilisateur et le Counter va compter le nombre de test effectuer.
Afficher les options
Alors durant le test nous allons masquer les options mais quand on début la page il faudra afficher les options afin que l’utilisateur puisse sélectionner l’expression et le niveau.
document.getElementById('levelSetup').innerHTML=`
<div class="d-flex justify-content-between p-5">
<div class="border border-dark p-2">
<p class="text-center bg-dark text-white p-3 mb-2 font-weight-bold">Difficulty</p>
<button class="btn btn-primary" value='+' onclick="setExpression(this)">+</button>
<button class="btn btn-primary" value='-' onclick="setExpression(this)">-</button>
<button class="btn btn-primary" value='x' onclick="setExpression(this)">x</button>
<button class="btn btn-primary" value='/' onclick="setExpression(this)">/</button>
</div>
<div class="border border-dark p-2">
<p class="text-center bg-dark text-white p-3 mb-2 font-weight-bold">Level</p>
<button class="btn btn-primary" value="1" onclick="setLevel(this)">1</button>
<button class="btn btn-primary" value="2" onclick="setLevel(this)">2</button>
<button class="btn btn-primary" value="3" onclick="setLevel(this)">3</button>
<button class="btn btn-primary" value="4" onclick="setLevel(this)">4</button>
<button class="btn btn-primary" value="5" onclick="setLevel(this)">5</button>
</div>
</div>
`;
Récupérer les informations d’utilisateur
L’objectif c’est de récupère les valeurs des boutons et les stocker dans les variables prévues pour ces valeurs. Pour faire cela nous allons créer une fonction qui récupère ces valeurs des boutons.
La première fonction va récupère l’expression que l’utilisateur à sélectionner.
function setExpression(ex){
expression = ex.value;
startTestQuestion();
}
Dans notre bouton d’expression il y a un événement onClick qui fais appel à cette fonction et notre bouton a aussi une valeur. Grace au this dans l’appel de la fonction dans le bouton on transmet toutes les informations de notre bouton a la fonction puis on récupère uniquement la valeur avec .value qui sera stocké dans expression.
La prochaine fonction qui serra appeler startTestQuestion est une fonction que nous allons créer un peut plus tard.
La seconde fonction va récupérer le niveau sélectionner par l’utilisateur et dans cette fonction nous allons utiliser un switch pour définir le randomRange.
function setLevel(lev){
level = lev.value;
switch(level){
case '1':
randomRange = 11;
break;
case '2':
randomRange = 101;
break;
case '3':
randomRange = 1001;
break;
case '4':
randomRange = 10001;
break;
case '5':
randomRange = 100001;
break;
}
startTestQuestion();
}
Contrôler si le test peut commencer
Avec la fonction starTestQuestion nous allons contrôler que l’utilisateur à bien sélectionner une expression et un niveau si c’est le cas alors on démarre le test. Après la condition on lance la fonction qui affiche le score.
function startTestQuestion(){
if(expression != '' && level > 0){
calculateTest();
}
showScoreInformation();
}
Afficher le score et les options
Il faut afficher à l’utilisateur les options qu’il a sélectionner et sont score
function showScoreInformation(){
document.getElementById('score').innerHTML=`
<p class="m-0">Score : ${score}/20</p>
<p class="m-0">Expression : ${expression} </p>
<p class="m-0">Level : ${level}</p>
`;
}
Préparer le test
Super les conditions sont remplies on peut afficher le t’est à l’utilisateur, ou plutôt mettre en place le test et puis l’afficher. Et ici aussi nous allons utiliser les swith pour calculer le résultat mais avant de calculer nous allons définir le nombre 1 et 2 avec une fonction de Math qui va génère un nombre aléatoire entre 0 et la valeur qui se trouve dans randomRange. Et quand tout est fini on peut enfin afficher le test.
function calculateTest(){
document.getElementById('result').innerHTML='';
number1 = Math.floor(Math.random()*(randomRange));
number2 = Math.floor(Math.random()*(randomRange));
switch(expression){
case '+':
result = number1 + number2;
break;
case '-':
result = number1 - number2;
break;
case 'x':
result = number1 * number2;
break;
case '/':
result = number1 / number2;
break;
};
testQuestion();
}
Afficher le test
Vu que le test commence nous allons masquer les options et afficher le test à l’écran avec les valeurs stocker dans les variables nombre1 et 2 ainsi que l’expression.
function testQuestion(){
//hide level and expression option
document.getElementById('levelSetup').innerHTML='';
//show math question
document.getElementById('Calcule').innerHTML= `
<div class="input-group input-group-lg p-5">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size: 40px;">${number1} ${expression} ${number2} =</span>
</div>
<input type="number" id="playerInput" class="form-control" style="font-size: 40px;">
<div class="input-group-append">
<button class="btn btn-success" style="font-size: 40px;" onclick="setUserInput()">validate</button>
</div>
</div>
`;
}
Récupérer le résultat de l’utilisateur.
Le bouton validâtes va faire appel a la fonction setUserInput qui va vérifier si l’utilisateur à bien indiquer un résultat et le stocker dans la variable user input et puis lancer la fonction checkUserRsult
function setUserInput(){
let inputUserResult = parseFloat(document.getElementById('playerInput').value);
console.log(inputUserResult);
if(!isNaN(inputUserResult)){
userInput = inputUserResult;
checkUserResult();
}else{
alert('Oeps no number found in input !')
}
}
Afficher le résultat du test.
Ici nous allons contrôler le résultat de l’utilisateur et le résultat calculer par le system. Si la réponse est bonne on afficher un message que c’est bon et on augmente le score de 1. Cependant si le test n’est pas bon on affiche un message que le test n’est pas bon.
À la fin de cette condition on monte le conteur de 1 et on affiche le score. Désormais nous allons créer un nouveau contrôle qui va contrôler si le Counter est < que 20 alors on refaire un test mais on attend 3 sec avant d’affiche le prochain test sinon on arrête et on affiche le score final
function checkUserResult(){
document.getElementById('Calcule').innerHTML='';
if (userInput == result.toFixed(2){
document.getElementById('result').innerHTML=`
<div class="p-5">
<div class="p-3 text-center bg-success text-white" style="font-size: 40px;">${number1} ${expression} ${number2} = ${userInput} good Job !</div>
</div>
`;
score++;
}else {
document.getElementById('result').innerHTML=`
<div class="p-5">
<div class="p-3 text-center bg-danger text-white" style="font-size: 40px;">${number1} ${expression} ${number2} = ${userInput} is not correct it should be ${result} !</div>
</div>
`;
}
counter++;
showScoreInformation();
if(counter < 20){
setTimeout(calculateTest,3000)
}else{
document.getElementById('score').innerHTML='';
document.getElementById('result').innerHTML=`
<div class="p-5">
<div class="p-3 text-center bg-warning text-white" style="font-size: 40px;">Test done your Score is ${score}/20</div>
</div>
`;
}
}
Conclusion :
Voila nous somme arriver à la fin de notre application et je vous invite à créer une nouvelle option dans les expressions qui mixe les 4 expressions, j’espère que cette application vous plait et on se retrouve dans une prochaine partie ou nous allons voir comment fonctionne les boucles.
Bonjour
Je viens de découvrir ce tuto et c’est exactement ce que e voulais faire sauf que….
je viens d’apprendre de coder et que jamais je n’aurais trouver ça.
C’est génial de faire une apli pour les enfants qui leur apprend à faire des opérations, le vocabulaire.
Ayant fait du bénévolat dans ce domaine et apprenant à coder, cela fait parti de mes projets.
Je vais étudier votre tuto studieusement et voir ce que je peux faire à mon niveau.
Merci beaucoup je trouve que c’est bien fait et bien expliqué.
Ps: Il y a un « e » à la fin de calcul ?
Bien à vous