index.php
<?php
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
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']->getInputForm_infos();
if (isset($_POST['n1'])) {
$S_Calc = $GLOBALS['Ccalcul']->calcul_box();
$oJson = new Services_JSON();
header('Content-type: application/json');
echo $oJson->encode(array('result' => $S_Calc));
exit;
}
$aKeys = array(
'{input_calc}' => $sInput_calc,
'{input_infos}' => $sInput_infos
);
echo strtr(file_get_contents('templates/main_page.html'), $aKeys);
?>
<html lang="en">
<head>
<meta charset="iso-8859-1">
<title>Calcul mental</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>
{input_calc}
</div>
<div>
{input_infos}
</div>
</body>
</html>
<div class="row">
<h1>Calcul Mental</h1>
<div class="columns large-12">
<h2>Quel est le résultat de ? </h2>
<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>
<div>
<h1 class="error">FAUX !</h1>
</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>
<div class="row">
<div class="champion">Champion !!</div>
<div class="champion">Bienvenue sur mon site </div>
</div>
<?php
class Ccalcul {
function Ccalcul() {}
// Accept votresultat
function calcul_box()
{
$sChi1 = $GLOBALS['MySQL']->escape($_POST['n1']);
$sSi1 = $GLOBALS['MySQL']->escape($_POST['si1']);
$sChi2 = $GLOBALS['MySQL']->escape($_POST['n2']);
$sVotresultat_1 = $GLOBALS['MySQL']->escape($_POST['result']);
if ($sChi1 != "" && $sSi1 != "" && $sChi2 != "" && $sVotresultat_1 != "")
{
$bRf = $GLOBALS['MySQL']->res("INSERT INTO `addition` SET
`chiffre1` = '{$sChi1}',
`signe1` = '{$sSi1}',
`chiffre2` = '{$sChi2}',
`votresultat` = '{$sVotresultat_1}'
"
);
return ($bRf) ? 1 : 3;
}
}
function getInputForm_calc()
{
return file_get_contents('templates/calcul.html');
}
function getInputForm_infos()
{
return file_get_contents('templates/essai.html');
}
}
$GLOBALS['Ccalcul'] = new Ccalcul();
[javascript]
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">×</a></div>');
}
function error(){
$('.res').html('<div data-alert class="alert alert-box">Dommage ! même joueur joue encore ! <a href="#" class="close">×</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
$('#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()
},
function(data){
if (data.result == 1) {
$('.row .champion').show('slow', function () {
});
}
else {
$('.error').fadeIn('slow', function () {
$(this).delay(1000).fadeOut('slow');
});
}
}
);
chronoContinue();
$('#result').val('');
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();
})
[/javascript]
Voila, je sais pas s'il l'on peux faire mieux mais en tout cas ça marche