18008 sujets

Questions générales et questions de débutants

[Résolu] Recharger un formulaire HTML sans recharger la page

Bonjour

Mon programme propose des multiplications à résoudre affichées dans un formulaire.
La réponse de l'utilisateur est vérifiée lorsqu'on clic sur submit


<div class="container">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <form id="idFormulaire" ng-submit="correction()">
                <div class="form-group">
                        <label style="font-size: 40px;">{{int1}}</label>
                        <label style="font-size: 40px;">x </label>
                        <label style="font-size: 40px;"> {{int2}}</label>
                        <label style="font-size: 40px;">=</label>
                        <input type="text" ng-model="reponse" id="idReponse"></input>
                        <button type="button" class="btn btn-success" ng-click="correction()" >OK</button>
                </div>
            </form>
    </div>
    <div>
        <img src="../template/edit.png" id="imageid" style="display:none"/>
    </div>
           <h1>{{message}}</h1>
</div>


Je souhaite pouvoir afficher une nouvelle opération à résoudre (ré afficher un formulaire) sans rafraîchir toute la page (F5).

Quelle est la meilleure solution ?

Merci
Bonjour,

Visiblement ton code fait appel à des fonctions javascript.
Je pense que c'est la solution la plus simple pour des calculs mathématiques.
Tu peux générer une nouvelle opération avec javascript également, en mettant à jour les champs de ton formulaire (int1 et int2).
Il faut que tu utilises des input au lieu des label, et que tu leurs donne un id pour accéder à leur valeur.
Pour changer la valeur d'un input, utilises document.getElementById('int1').value = le_nombre_que_tu_veux

On utilise ajax pour mettre à jour une partie de la page, lorsque l'on a besoin d'accéder à la base de données par exemple.
Modifié par taspeur (01 Dec 2017 - 17:16)
Grosso modo le fonctionnement d'ajax, c'est du javascript qui va appeler un script PHP (ou autre). Ce script va exécuter des choses coté serveur, et renvoyer des informations (le plus souvent au format json, ou html également), que je javascript récupère, et peut ensuite intégrer dans la page html

C'est tout de meme beaucoup plus complexe que du javascript pur.
Et dans ton cas je n'en vois pas l'utilité.
Si ton but est uniquement de changer l'opération, tu as juste deux nombres aléatoire à générer.
En javascript c'est très simple
Je t'ai fait un morceau de code qui vérifie le résultat d'une multiplication.
Et un bouton pour générer une nouvelle opération.
Cela génère un chiffre entre 1 et 9.
Dans le code javascript, 9 correspond aux nombres de possibilités, et 1 le chiffre de départ. Tu peux changer ces parametres

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8" />
    <title>Math</title>
  </head>

  <body>

    <script>
      function check(){
        var response = 'MAUVAISE REPONSE';
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;
        var x = document.getElementById('x').value;
        
        if(a*b==x){
          response = 'BONNE REPONSE';
        }
        
        document.getElementById('reponse').value = response;
      }
      
      function newOpe(){
        document.getElementById('a').value = Math.floor(Math.random() * 9) + 1;
        document.getElementById('b').value = Math.floor(Math.random() * 9) + 1;
      }
    </script>

    <form>
      <input type="number" id="a" name="a" value="7" readonly /> x <input type="number" id="b" name="b" value="5" readonly /> = <input type="number" id="x" name="x" /><br/>
      <button type="button" onclick="check()" >Vérifier</button><br/>
      <output id="reponse" name="reponse"></output><br/>
      <button type="button" onclick="newOpe()" >Nouvelle opération</button>
    </form>
    
  </body>
  
</html>

Modifié par taspeur (04 Dec 2017 - 10:59)
ci dessous le resultat final :


<html ng-app="myApp">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

</head>


<body ng-controller="MainCtrl">
	<div class="jumbotron text-center">
		<h1>Revises les multiplications</h1>
		<p>Saisies le resultat de l'operation dans la zone de saisie.</p>
		<p>Pour valider ta reponse appuies sur la touche Entree ou cliques sur le bouton vert OK.</p>
		<p>Pour recommencer appuies sur le bouton bleu Ecnore</p>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-3">
			<img src="../template/edit.png" id="imageid" style="display:none"/>
			</div>
			<div class="col-md-6">
				<form id="idFormulaire" ng-submit="correction()" ng-init="multiplication()">
					<div class="form-group">
						<label style="font-size: 40px;">{{int1}}</label>
						<label style="font-size: 40px;">x </label>
						<label style="font-size: 40px;"> {{int2}}</label>
						<label style="font-size: 40px;">=</label>
						<input type="text" ng-model="reponse" id="idReponse"></input>
						<button type="button" class="btn btn-success" ng-click="correction()" >OK</button>
						<button type="button" class="btn btn-primary" ng-click="multiplication()">Encore</button>
					</div>
				</form>
				<h1>{{message}}</h1>
			</div>
			<div class="col-md-3" id="idErreurs">
				<h1> Tes erreurs : </h1>
				<ul>
					<li ng-repeat="error in errors">{{error}}</li>
				</ul>
			</div>
		</div>
	</div>
	

<script type="text/javascript">
    angular.module("myApp", [])
			.controller("MainCtrl", ["$scope",function ($scope) {
				$scope.errors = [];
				$scope.multiplication = function(){
					$scope.int1 = randomIntFromInterval(0,10);
					$scope.int2 = randomIntFromInterval(0,10);
					$scope.resultat = $scope.int1 * $scope.int2;
				}
				$scope.correction = function(){
					if ($scope.reponse == $scope.resultat) {
						document.getElementById("imageid").src="gagne.jpg";
						document.getElementById("imageid").style.display="block";
						$scope.message = "Bravo !";
					}	else {
							document.getElementById("imageid").src="perdu.jpg";
							document.getElementById("imageid").style.display="block";
							$scope.message = "Erreur c'etait :" + $scope.resultat;
							$scope.errors.push($scope.int1 + "x" + $scope.int2 + "=" + $scope.resultat);
					}
				};
		}]);

		function randomIntFromInterval(min,max)
		{
    	return Math.floor(Math.random()*(max-min+1)+min);
		}
</script>

<script type="text/javascript">
	$(document).ready(function(){
		$('idReponse').select();
	});
</script>

</body>
</html>
Sympa avec les erreurs qui s'affichent sur le côté Smiley smile

Evidemment j'ai fait exprès de faire une erreur, je connais mes tables par coeur Smiley lapin
Oui c'est la base Smiley biggrin Le jeu s'adresse aux élèves de CM1 !
Par contre pour certaines exécutions la liste des erreurs ne se met pas a jour et n'affiche pas les nouvelles erreurs..... Why ?
Modifié par wannel (04 Dec 2017 - 17:11)
Hello,
C'est une très bonne idée d'utiliser Angular pour cette page et du coup autant l'utiliser à fond.
Tu peux améliorer un peu ton script en faisant les modifications suivantes :

<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <style>
        .form-group {
            display: flex;
            align-items: center;
            font-size: 40px;
        }
        .form-group input[type="text"] {
            width: 80px;
            border: 0;
            border-bottom: 2px solid black;
            outline: none;
            text-align: center;
        }
        .form-group button {
            margin-left: 20px;
        }
    </style>

</head>


<body ng-controller="MainCtrl">
<div class="jumbotron text-center">
    <h1>Revises les multiplications</h1>
    <p>Saisies le resultat de l'operation dans la zone de saisie.</p>
    <p>Pour valider ta reponse appuies sur la touche Entree ou cliques sur le bouton vert OK.</p>
    <p>Pour recommencer appuies sur le bouton bleu Encore</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <img ng-src="{{resultImgSrc}}" ng-show="resultImgSrc"/>
        </div>
        <div class="col-md-6">
            <form ng-submit="correction()" ng-init="multiplication()">
                <div class="form-group">
                    <label for="reponse">{{int1}} × {{int2}} =</label>
                    <input autocomplete="off" type="text" ng-model="reponse" id="reponse">
                    <button class="btn btn-success">OK</button>
                    <button type="button" class="btn btn-primary" ng-click="reset()">Encore</button>
                </div>
            </form>
            <h1>{{message}}</h1>
        </div>
        <div class="col-md-3">
            <h1> Tes erreurs : </h1>
            <ul>
                <li ng-repeat="error in errors track by $index">{{error}}</li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">
    angular.module("myApp", [])
        .controller("MainCtrl", ["$scope",function ($scope) {
            $scope.errors = [];
            $scope.reponse = null;
            $scope.message = null;
            $scope.resultImgSrc = 'edit.png';
            $scope.multiplication = function(){
                $scope.int1 = $scope.randomIntFromInterval(0,10);
                $scope.int2 = $scope.randomIntFromInterval(0,10);
                $scope.resultat = $scope.int1 * $scope.int2;
            };
            $scope.correction = function(){
                if (parseInt($scope.reponse) === $scope.resultat) {
                    $scope.resultImgSrc = "gagne.jpg";
                    $scope.message = "Bravo !";
                }	else {
                    $scope.resultImgSrc = "perdu.gif";
                    $scope.message = "Erreur c'était : " + $scope.resultat;
                    var responseText = $scope.int1 + " × " + $scope.int2 + " = " + $scope.resultat;
                    if($.inArray(responseText, $scope.errors) === -1) {
                        $scope.errors.push(responseText);
                    }
                }
            };
            $scope.reset = function() {
                $scope.resultImgSrc = null;
                $scope.message = null;
                $scope.reponse = null;
                $scope.multiplication();

            };
            $scope.randomIntFromInterval = function(min,max) {
                return Math.floor(Math.random()*(max-min+1)+min);
            }
        }]);
</script>

</body>
</html>
Meilleure solution
Sujet clos
Aller à