JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<canvas id="canvas" style="width:100px;height:100px;background:grey;"></canvas>

<div class="q"></div>
<div class="a"></div>
<input id="answerInput" type="text"></input><button id="checkBtn">check!</button><button id="nextBtn">next »</button>
<div class="debug"></div>

CSS

.debug {color:red;}

JavaScript

// для начала данные можно в локальный базе хранить, без профилей

// Написать себе прогу для выучивания пересемножения двузначных чисел

function log(message) {
    console.log(message);
    $(".debug").html($(".debug").html()+'<br/>'+message);
}
if(typeof(localStorage) === "undefined") {
    log('Sorry! No Web Storage support..');
}

var pairs;
function savePairs() {
    localStorage.pairs = JSON.stringify(pairs);
}
function restorePairs() {
    pairs = JSON.parse(localStorage.pairs);
}



function keyForPair(x, y) {
    return (x <= y ? x+','+y : y+','+x);
}

var current_app_version = 141;
log("Current app version is " + current_app_version);
if(current_app_version !== Number(localStorage.current_app_version) || !localStorage || !localStorage.pairs) {
    log('Setting up the localStorage');
    localStorage.current_app_version = current_app_version;
    pairs = {};
    for( var i = 0; i<100; ++i) {
        for( var j = i; j<100; ++j) {
            var key = keyForPair(i, j);
            pairs[key] = {fail: 0, success: 0};
            //log("Setting pair with key = " + key);
        }
    }
    savePairs();
    log(localStorage.pairs);
} else {
    restorePairs();
}

function checkAnswer(x, y, a) {
    var key = keyForPair(x, y);
    if(x*y === a) {
        pairs[key].success++;
        //log("Correct!");
    } else {
        pairs[key].fail++;
        //log("Fail!"+x+","+y+","+a);
    }
    savePairs();
}

function failProbability(x, y) {
    var key = keyForPair(x, y);
    return pairs[key].fail / (pairs[key].fail + pairs[key].success + 1);
}

var x, y;
function selectQuestion() {
    x = Math.ceil(Math.random()*99);
    y = Math.ceil(Math.random()*99);
    var maxFailProbability = { key: keyForPair(x,y), probability: failProbability(x,y) };
    var x0 = x, y0 = y;
    for(var i = -2; i <= 2; ++i) {
        for(var j = -2; j <= 2; ++j) {
            var testx = (x0 + i)%99 + 1;
            var testy = (y0 + j)%99 + 1;
           ...