PHP|Débutant :: Forums

require_once('classes/Services_JSON.php');
require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/Ccalcul.php');

$sInput_calc = $GLOBALS['Ccalcul']->getInputForm_calc();

$sInput_infos = $GLOBALS['Ccalcul']->calcul_box();
       
           
         
       
 
$aKeys = array(

  '{input_calc}' => $sInput_calc,
  '{input_infos}' => $sInput_infos
 
);
echo strtr(file_get_contents('templates/main_page.html'), $aKeys);

?>
 

  <div class="row">
    <h1>Calcul Mental</h1>
    <div class="columns large-12">
      <h2>Quel est le résultat de ? </h2>
      <div class="container" id="con1">
     
    </div>
      <div class="columns large-6">
        <form class="mental_form2" method="post" id="mental_form2" action="index.php">
          <div class="columns large-4">
            <input class="champ" type="text" name="n1" id="n1">
          </div>
          <div class="columns large-4">
            <input class="champ" type="text" name="si1" id="si1">
          </div>
          <div class="columns large-4">
            <input class="champ" type="text" name="n2" id="n2">
          </div>
          <div class="columns large-4">
            <label for="reponse">Votre réponse</label>
          </div>
          <div class="columns large-4">
            <input type="text" name="result" id="result">
          </div>
          <div class="columns large-4">
            <input type="submit"  id="validation" name="valider" value="Valider" class="button small right">
          </div>
        </form>
      </div>
      <div class="columns large-6 res">
       
      </div>
    </div>
  </div>
  <span id="chronotime">0:00:00:00</span>
  <script src="js/api.js"></script>
</body>
</html>
 

startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
  end = new Date()
  diff = end - start
  diff = new Date(diff)
  var msec = diff.getMilliseconds()
  var sec = diff.getSeconds()
  var min = diff.getMinutes()
  var hr = diff.getHours()-1
  if (min < 10){
    min = "0" + min
  }
  if (sec < 10){
    sec = "0" + sec
  }
  if(msec < 10){
    msec = "00" +msec
  }
  else if(msec < 100){
    msec = "0" +msec
  }
  document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
  timerID = setTimeout("chrono()", 10)
}

function chronoStop(){
  clearTimeout(timerID)
}
function chronoContinue(){
  start = new Date()-diff
  start = new Date(start)
  chrono()
}

function chronoStart(){
  start = new Date()
  chrono()
}

function init(){
  var n1 = 0 + Math.floor(Math.random() * 10);
  var si1 = '+';
  var n2 = 0 + Math.floor(Math.random() * 10);
  $('#n1').val(n1);
  $('#si1').val(si1);
  $('#n2').val(n2);
}
function success(){
  $('.res').html('<div data-alert class="success alert-box">Bien joué ! <a href="#" class="close">&times;</a></div>');
}
function error(){
  $('.res').html('<div data-alert class="alert alert-box">Dommage ! même joueur joue encore ! <a href="#" class="close">&times;</a></div>');
}

function check(event) {
  var n1 = $('#n1').val();
  var si1 = $('#si1').val();
  var n2 = $('#n2').val();
  var r1 = parseInt(n1) + parseInt(n2);
  var r2 = $('#result').val();
  if (r1 == r2) {
  //la soumission se fera naturellement
    success();
 
  } else {
    // ici on empêche la soumission
    event.preventDefault();
  $('#result').val('');
    error();
  }
 
}
$(document).ready(function(){
  // on défini ce que l'on veut faire sur le submit
  $('.mental_form2').on('submit', function () {
   
        $.post('index.php', {
              n1: $('#n1').val(),
              si1: $('#si1').val(),
              n2: $('#n2').val(),
              result: $('#result').val()
          });
      chronoContinue();
      $('#result').val('');
      init();
      return false;
     
      });
 
 
  // on défini l'action sur le bouton Valider
  $('#validation').click(function (event) {
    //   event.preventDefault();
    // on passe l'event pour la gestion dans check
    check(event);
    });
  init();
  chronoStart();
 
})