math.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="images/apple-touch-startup-image-640x920.png">
<title>kidzwo</title>
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,900" rel="stylesheet"> 
</head>
<html>
<body >
<div class="panel panel-right panel-reveal">
    <div class="user_login_info">
	  
                <div class="user_thumb">
           
                  <div class="user_details">
                   <p>Welcome user, <span id="username">Nathalie</span></p>
                  </div>  
                  <div class="user_avatar"><img src="images/avatar.png" alt="" title="" /></div>       
                </div>
				
                  <nav class="user-nav" onload="getAllAccueil();">
                    <ul>
                      <li><a href="features.html"><img src="images/icons/gray/love.png" alt="" title="" />level math  :<span></span><strong id="username">12</strong></a></li>
                      <li><a href="features.html"><img src="images/icons/gray/love.png" alt="" title="" />level fr  :<span></span><strong id="math">12</strong></a></li>
                      <li><a href="features.html"><img src="images/icons/gray/love.png" alt="" title="" />level arab  :<span></span><strong id="arab">12</strong></a></li>
                      <li><a href="features.html"><img src="images/icons/gray/love.png" alt="" title="" />level ang  :<span ></span><strong id="ang">5</strong></a></li>
                      <li><a href="features.html"><img src="images/icons/gray/love.png" alt="" title="" />leadrboard <span id="xx">x</span><strong></strong></a></li>
                      <li><a href="index.html"><img src="images/icons/gray/lock.png" alt="" title="" /><span id="del" onclick="javascript:alert('your accountwill be deleted ! Goodbye');">delete account : </span></a></li>
                    </ul>
                  </nav>
      </div>
    </div>
    
    <div class="navbar navbar--fixed navbar--fixed-top navbar--bg">
			<div class="navbar__col navbar__col--title">
				<a href="home.html"><img id ="im"  width="30" height="30" src="images/left.png" alt="" title="" /></a>
			</div>
				<div class="navbar__col navbar__col--icon navbar__col--icon-right">
				<a href="cours.html"><img src="images/study.png" alt="" title="" /><span class="navbar__icon-bullet">3</span></a>
			</div>
			<div class="navbar__col navbar__col--icon navbar__col--icon-right">
				<a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
			</div>
	
		
                </div>
      
          	<div id="score">
          <p >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Score: </p>
        </div>      
    <div id="display" class="well col-xs-6">
    
      <div id="try-screen">
        <p1 id="try">Try Again &nbsp;&nbsp; </p1>
        
        <p1 id="final-score"> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your score was 0.</p1>
        <button id="restart-button">RESTART</button>
      </div>
      
      <div id="working-screen">
        <div id="progressbar"></div>
		<div>
        <p id="expression">7 + 7</p>
        </div>
        
              <img width="30" ,hight="30" src="images/equal (1).png" alt="" title="" />  
		<p id="result">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 14</p>
        <div id="controls">
          <button id="tick"><i class="fa fa-check"></i></button>
          <button id="cross"><i class="fa fa-close"></i></button>
        </div>
        
      </div> <!-- end of working screen -->
        
    </div>
    
         
</body>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="js/swiper.min.js"></script>
 <script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.validate.min.js" ></script>
<script src="js/swiper.min.js"></script>

<script src="js/home.js"></script>

 <script language="JavaScript">
		  // Randomly create an expression
var tick = document.getElementById("tick");
var cross = document.getElementById("cross");
var restartButton = document.getElementById("restart-button");

var tryDisplay = document.getElementById("try-screen");
var workDisplay = document.getElementById("working-screen");

var finalScoreScreen = document.getElementById("final-score");
/*var progressScreen = document.getElementById("progress");*/
var progressBar = $("#progressbar");
var exprScreen = document.getElementById("expression");
var resScreen = document.getElementById("result");
var scoreScreen = document.getElementById("score");

var a, b, r, ir, chaos, isCorrect;
var score = 0;
var wrongAnswer = false;
var correctClick = 0;
// first, second, and result.

// Helper function to create a random member
function randomExpressionMember() {
  return Math.floor(Math.random() * 10 + 1);
}

// Create current expression
function createExpression() {
  a = randomExpressionMember();
  b = randomExpressionMember();
  // correct answer;
  r = a + b;
  
 
  // create a random result within the proximity of the number
  chaos = Math.floor(Math.random() * (Math.round(r * 0.7)) * 1.5 + Math.round(r/2) + 1);
  //console.log("chaos", chaos)
  if (chaos === r) { chaos += 1; };
  // make sure r is not the same as chaos
  
  // run a coin flip to see whether to display the correct or incorrect answer
  
  
  isCorrect = Math.round(Math.random()) ? true : false;
  // check whether what's displayed is true or not.
  console.log("Is Correct r displayed", isCorrect)
  return a, b, r, chaos, isCorrect; // add another variable to track if the expr should be true or not
}


function displayProgressBar() {
    // animate progress bar
    progressBar.width(0).animate(
        {
            width: "100%"
        },
        500 * 30,
        "linear",
        function() { 

          restart();

        }
    );
}


function displayExpression(a, b, r, chaos, isCorrect) {
  // Input the values in the fields.
  exprScreen.textContent = a + " + " + b;
  
  if (isCorrect) {
    resScreen.textContent = "  " + r;
  } else {
    resScreen.textContent = "  " + chaos;
  }
  
  scoreScreen.textContent = "Score: " + score;

}


function restart() {
  // clear screen
  progressBar.finish(); //test
  finalScoreScreen.textContent = "Your score was " + score + ".";
  if(score);
  scoreScreen.style.display = "none";
  workDisplay.style.display = "none";
  tryDisplay.style.display = "block";
  // Working with score
  wrongAnswer = false;
  score = 0;
  scoreScreen.textContent = "Score: " + score;
}

function runPlayerTurn() {
  createExpression();
  displayExpression(a, b, r, chaos, isCorrect);
  displayProgressBar();
  // take input and decide what to do next - increase the score or not. restart the game if they are wrong.
  
}

// Attach event listeners to buttons
tick.addEventListener("click", function() {
  console.log("clicked tick");
  progressBar.stop();
  // ATTENTION TO THIS: Cross can also be the right answer.
  if (isCorrect) {
  /*
   if(score)
  {
	      var string2 = removeSpaces(document.getElementById('score').value);
		   var url = adresse +'registertizen/'+string2;
		   var method = 'GET';
		   
		   var xhr = new XMLHttpRequest(); 
		   xhr.open(method, url);
		   //callback
		   xhr.onload = function() {
		    var status = xhr.status;
		    if ((status == 200) && (string1 == score)) {
				document.getElementById('success').innerHTML = "Form is validated Successfully";
		    var userJson = JSON.parse(xhr.responseText) ;
		    localStorage.setItem("userName", string2);
		    window.open("./home.html",'_self');
		    //window.location.replace = "../generic.html";
		    setuser(userJson.result);
		// successHandler && successHandler(xhr.response);
		    } else {
		    document.getElementById('error').innerHTML = "Please enter a valid captcha."; 
		     errorHandler && errorHandler(status);
		    }
		   };
		   xhr.send();
  }
  */
    score += 1;
    console.log("correct answer");
    runPlayerTurn();
 
  } else {
    // exit the game? do nothing?
    wrongAnswer = true;
    console.log("incorrect answer");
    restart();
  }
}, false);

cross.addEventListener("click", function() {
  console.log("clicked cross");
  progressBar.stop();
  // ATTENTION TO THIS: Cross can also be the right answer.
  if (!isCorrect) {
    score += 1;
    runPlayerTurn();
  } else {
    // exit the game? do nothing?
    wrongAnswer = true;
    restart();
  }
}, false);

restartButton.addEventListener("click", function() {
  runPlayerTurn();
  tryDisplay.style.display = "none";
  workDisplay.style.display = "block";
  scoreScreen.style.display = "block";
}, false);

// testing
createExpression();
displayExpression(a, b, r, chaos);

// can create the first screen

function runGame() {
  //maybe don't need this yet.
 // while (!wrongAnswer) {
    runPlayerTurn();
    console.log("looped");
 // }
  
  // display start?
  // runTurns until the answer is wrong.
  // reset the game if the player is wrong.
}
// Happens every move (set) 
// calculate the answer. Randomize how the answer is displayed: half the times the correct answer and half the times an answer that is around that but not correct.
// Start with + then add -

// have a timer to go back each time the expression is displayed.

runGame();
  
		  </script>
		 <script type="text/javascript">
	               var  x =	document.getElementById("math").innerHTML =json.result[0].levelmath;
	alert(x);
		 
		 </script>
		  
</html>