scips/guess_math.html

## guess_math.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Small game to guess additions">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .show {display: block}
    .hide {display: none}
  </style>
  <script>
    class MathSchool {
      constructor(selectors){
        this.questions = {
          current: 0,
          items: [],
          result: 0,
        };
        this.limits = {
          questions: 10,
          minNumber: 1,
          maxNumber: 10,
          maxSum: 19
        };
        this.selectors = selectors || {
          question: '',
          answer: '',
          bad: '',
          good: ''
        };
        this.waitFinished = true;
      }

      generateQuestions(numberOfQuestions){
        var randoms = new Uint8Array(numberOfQuestions*2);
        window.crypto.getRandomValues(randoms);
        var questions = [];
        var intervalSize = Math.abs(this.limits.maxNumber - this.limits.minNumber);
        let getValidNumber = (x) => {
          return (x%intervalSize)+this.limits.minNumber;
        };
        for (var i=0; i < numberOfQuestions*2; i+=2) {
          var x = getValidNumber(randoms[i]);
          var y = getValidNumber(randoms[i+1]);
          questions.push({x:x, y:y});
        }
        return questions;
      }

      getQuestion(){
        const elem = this.questions.items[this.questions.current];
        return elem.x + ' + ' + elem.y;
      }

      getAnswer() {
        return document.querySelector(this.selectors.answer).value;
      }

      waitBetweenKeyPress() {
        this.waitFinished = true;
      }

      handleEvent(event) {
        if(!this.waitFinished) return;
        switch(event.key){
          case 'Enter':
            this.waitFinished = false;
            setTimeout(this.waitBetweenKeyPress.bind(this), 100);
            if (this.checkIfValid()) {
              this.next();
            } else {
              this.bad();
            }
            break;
        }
      }

      bad() {
        document.querySelector(this.selectors.bad).classList.remove('hide');
      }

      run() {
        this.questions.items = this.generateQuestions(this.limits.questions);

        window.addEventListener("keyup", this);

        this.askQuestion();
      }

      askQuestion() {
        document.querySelector(this.selectors.question).innerHTML =  game.getQuestion();
      }

      checkIfValid() {
        const elem = this.questions.items[this.questions.current];
        console.log((elem.x + elem.y), '==',  this.getAnswer())
        if ((elem.x + elem.y) == this.getAnswer()) {
          return true;
        }
        return false;
      }

      next() {
        if (this.questions.current + 1 >= this.limits.questions) {
          return this.end();
        }
        this.questions.current++;
        this.askQuestion();
      }

      end() {
        window.removeEventListener('keyup', this);
      }
    };

    document.addEventListener("DOMContentLoaded",function onReady(event){
      game = new MathSchool({question: '.js-question', answer: '.js-answer', bad: '.js-bad', good: '.js-good'});
      game.run();
      document.querySelector('.js-restart').addEventListener('click', function(){
        game.run();
      });
    });
  </script>
</head>
<body>
  <form class="js-form">
    <div class="js-question"></div>
    <label>Réponse: <input type="text" name="answer" class="js-answer"/></label>
  </form>
  <div class="js-bad hide">: (</div>
  <div class="js-good hide">: )</div>
  <div><a href="#" class="js-restart">Restart</a></div>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Small game to guess additions">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
	.show {display: block}
	.hide {display: none}
	</style>
	<script>
	class MathSchool {
	constructor(selectors){
	this.questions = {
	current: 0,
	items: [],
	result: 0,
	};
	this.limits = {
	questions: 10,
	minNumber: 1,
	maxNumber: 10,
	maxSum: 19
	};
	this.selectors = selectors \|\| {
	question: '',
	answer: '',
	bad: '',
	good: ''
	};
	this.waitFinished = true;
	}

	generateQuestions(numberOfQuestions){
	var randoms = new Uint8Array(numberOfQuestions*2);
	window.crypto.getRandomValues(randoms);
	var questions = [];
	var intervalSize = Math.abs(this.limits.maxNumber - this.limits.minNumber);
	let getValidNumber = (x) => {
	return (x%intervalSize)+this.limits.minNumber;
	};
	for (var i=0; i < numberOfQuestions*2; i+=2) {
	var x = getValidNumber(randoms[i]);
	var y = getValidNumber(randoms[i+1]);
	questions.push({x:x, y:y});
	}
	return questions;
	}

	getQuestion(){
	const elem = this.questions.items[this.questions.current];
	return elem.x + ' + ' + elem.y;
	}

	getAnswer() {
	return document.querySelector(this.selectors.answer).value;
	}

	waitBetweenKeyPress() {
	this.waitFinished = true;
	}

	handleEvent(event) {
	if(!this.waitFinished) return;
	switch(event.key){
	case 'Enter':
	this.waitFinished = false;
	setTimeout(this.waitBetweenKeyPress.bind(this), 100);
	if (this.checkIfValid()) {
	this.next();
	} else {
	this.bad();
	}
	break;
	}
	}

	bad() {
	document.querySelector(this.selectors.bad).classList.remove('hide');
	}

	run() {
	this.questions.items = this.generateQuestions(this.limits.questions);

	window.addEventListener("keyup", this);

	this.askQuestion();
	}

	askQuestion() {
	document.querySelector(this.selectors.question).innerHTML = game.getQuestion();
	}

	checkIfValid() {
	const elem = this.questions.items[this.questions.current];
	console.log((elem.x + elem.y), '==', this.getAnswer())
	if ((elem.x + elem.y) == this.getAnswer()) {
	return true;
	}
	return false;
	}

	next() {
	if (this.questions.current + 1 >= this.limits.questions) {
	return this.end();
	}
	this.questions.current++;
	this.askQuestion();
	}

	end() {
	window.removeEventListener('keyup', this);
	}
	};

	document.addEventListener("DOMContentLoaded",function onReady(event){
	game = new MathSchool({question: '.js-question', answer: '.js-answer', bad: '.js-bad', good: '.js-good'});
	game.run();
	document.querySelector('.js-restart').addEventListener('click', function(){
	game.run();
	});
	});
	</script>
	</head>
	<body>
	<form class="js-form">
	<div class="js-question"></div>
	<label>Réponse: <input type="text" name="answer" class="js-answer"/></label>
	</form>
	<div class="js-bad hide">: (</div>
	<div class="js-good hide">: )</div>
	<div><a href="#" class="js-restart">Restart</a></div>


	</body>
	</html>