...
 
Commits (2)
<!doctype html>
<html>
<head>
<title>Conticini</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="conticini.css" type="text/css" media="screen" />
<link rel="icon" href="conticini.png" type="image/png" />
</head>
<body style="font-size: 120%;">
<h1>Configurazione</h1>
<div style="display: grid">
<div>
<label for="min_operando">Valore minimo degli operandi:</label>
<input type="number" id="min_operando" min="0" max="49" style="width: 2em;"
onchange="localStorage.setItem('MIN_OPERANDO', document.getElementById('min_operando').value);">
</div>
<div>
<label for="max_operando">Valore massimo degli operandi:</label>
<input type="number" id="max_operando" min="0" max="49" style="width: 2em;"
onchange="localStorage.setItem('MAX_OPERANDO', document.getElementById('max_operando').value);">
</div>
<div>
<label for="min_expected">Valore minimo del risultato:</label>
<input type="number" id="min_expected" min="0" max="99" style="width: 2em;"
onchange="localStorage.setItem('MIN_EXPECTED', document.getElementById('min_expected').value);">
</div>
<div>
<label for="max_expected">Valore massimo del risultato:</label>
<input type="number" id="max_expected" min="0" max="99" style="width: 2em;"
onchange="localStorage.setItem('MAX_EXPECTED', document.getElementById('max_expected').value);">
</div>
<fieldset>
<legend>Operazioni permesse</legend>
<div>
<label for="disable_plus">+</label>
<input type="checkbox" id="disable_plus" checked
onchange="localStorage.setItem('DISABLE_PLUS', !document.getElementById('disable_plus').checked);">
</div>
<div>
<label for="disable_minus">-</label>
<input type="checkbox" id="disable_minus" checked
onchange="localStorage.setItem('DISABLE_MINUS', !document.getElementById('disable_minus').checked);">
</div>
<div>
<label for="enable_times">&times;</label>
<input type="checkbox" id="enable_times"
onchange="localStorage.setItem('ENABLE_TIMES', document.getElementById('enable_times').checked);">
</div>
<div>
<label for="enable_div">:</label>
<input type="checkbox" id="enable_div"
onchange="localStorage.setItem('ENABLE_DIV', document.getElementById('enable_div').checked);">
</div>
</fieldset>
<div>
<label for="ok_timeout">Tempo (ms) di ricarica quando la risposta è giusta:</label>
<input type="number" id="ok_timeout" min="1000" max="10000" step="250" style="width: 5em;"
onchange="localStorage.setItem('OK_TIMEOUT', document.getElementById('ok_timeout').value);">
</div>
<div>
<label for="ko_timeout">Tempo (ms) di ricarica quando la risposta è sbagliata:</label>
<input type="number" id="ko_timeout" min="1000" max="10000" step="250" style="width: 5em;"
onchange="localStorage.setItem('KO_TIMEOUT', document.getElementById('ko_timeout').value);">
</div>
<div>
<label for="msg_check">Testo del pulsante per il controllo:</label>
<input type="text" id="msg_check" maxlength="50" size="30"
onchange="localStorage.setItem('MSG_CHECK', document.getElementById('msg_check').value);">
</div>
<div>
<label for="msg_ok">Testo del pulsante quando la risposta è giusta:</label>
<input type="text" id="msg_ok" maxlength="50" size="30"
onchange="localStorage.setItem('MSG_OK', document.getElementById('msg_ok').value);">
</div>
<div>
<label for="msg_ko">Testo del pulsante quando la risposta è sbagliata:</label>
<input type="text" id="msg_ko" maxlength="50" size="30"
onchange="localStorage.setItem('MSG_KO', document.getElementById('msg_ko').value);">
</div>
</div>
<script type="text/javascript" src="globals.js"></script>
<script type="text/javascript">
document.getElementById('min_operando').value = Conticini.cfg.MIN_OPERANDO;
document.getElementById('min_operando').max = Conticini.cfg.MAX_OPERANDO;
document.getElementById('max_operando').value = Conticini.cfg.MAX_OPERANDO;
document.getElementById('max_operando').min = Conticini.cfg.MIN_OPERANDO;
document.getElementById('min_expected').value = Conticini.cfg.MIN_EXPECTED;
document.getElementById('min_expected').max = Conticini.cfg.MAX_EXPECTED;
document.getElementById('max_expected').value = Conticini.cfg.MAX_EXPECTED;
document.getElementById('max_expected').min = Conticini.cfg.MIN_EXPECTED;
document.getElementById('disable_plus').checked = localStorage.getItem('DISABLE_PLUS') || true;
document.getElementById('disable_minus').checked = localStorage.getItem('DISABLE_MINUS') || true;
document.getElementById('enable_times').checked = localStorage.getItem('ENABLE_TIMES') || false;
document.getElementById('enable_div').checked = localStorage.getItem('ENABLE_DIV') || false;
document.getElementById('ok_timeout').value = Conticini.cfg.OK_TIMEOUT;
document.getElementById('ko_timeout').value = Conticini.cfg.KO_TIMEOUT;
document.getElementById('msg_check').value = Conticini.cfg.MSG_CHECK;
document.getElementById('msg_ok').value = Conticini.cfg.MSG_OK;
document.getElementById('msg_ko').value = Conticini.cfg.MSG_KO;
</script>
<p class="footnote"><a href="conticini.html">Torna al programma</a> &mdash; Copyright (C) 2020 by Mattia Monga &mdash;
GPLv3 <a href="https://gitlab.com/mmonga/conticini">Gitlab</a></p>
</body>
</html>
......@@ -36,7 +36,7 @@
<!-- Load ONNX.js -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/onnxjs/dist/onnx.min.js"></script>
<script type="text/javascript" src="nn.js"></script>
<p class="footnote">Copyright (C) 2020 by Mattia Monga &mdash;
<p class="footnote"><a href="cfg.html">Personalizza</a> &mdash; Copyright (C) 2020 by Mattia Monga &mdash;
GPLv3 <a href="https://gitlab.com/mmonga/conticini">Gitlab</a></p>
</body>
</html>
......@@ -9,11 +9,11 @@ Conticini.reset_canvases = function () {
var isMobile = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
const canvasDim = 0.9*(Conticini.CONTICINO.clientWidth / 2);
setupCanvas(Conticini.CIFRA_D);
setupCanvas(Conticini.CIFRA_U);
setup_canvas(Conticini.CIFRA_D);
setup_canvas(Conticini.CIFRA_U);
Conticini.check_msg();
function setupCanvas(canvas){
function setup_canvas(canvas){
// Setup canvas ..
const ctx = canvas.getContext('2d');
......@@ -28,11 +28,11 @@ Conticini.reset_canvases = function () {
// mouse/touch events ..
canvas.addEventListener((isMobile ? 'touchstart' : 'mousedown'), function(e) {
drawing = ctx.canvas.id;
lastPos = getMousePos(canvas, e);
lastPos = get_mouse_pos(canvas, e);
mousePos = lastPos;
});
canvas.addEventListener((isMobile ? 'touchmove' : 'mousemove'), function(e) {
mousePos = getMousePos(canvas, e);
mousePos = get_mouse_pos(canvas, e);
});
canvas.addEventListener((isMobile ? 'touchend' : 'mouseup'), function(e) {
drawing = null;
......@@ -50,16 +50,16 @@ Conticini.reset_canvases = function () {
};
})();
function drawLoop() {
window.requestAnimFrame(drawLoop);
renderCanvas(ctx);
function draw_loop() {
window.requestAnimFrame(draw_loop);
render_canvas(ctx);
}
drawLoop();
draw_loop();
}
// helper functions ..
function getMousePos(canvasDom, touchOrMouseEvent) {
function get_mouse_pos(canvasDom, touchOrMouseEvent) {
const rect = canvasDom.getBoundingClientRect();
return {
x: (isMobile ? touchOrMouseEvent.touches[0].clientX : touchOrMouseEvent.clientX) - rect.left,
......@@ -67,7 +67,7 @@ Conticini.reset_canvases = function () {
};
}
function renderCanvas(ctx) {
function render_canvas(ctx) {
if (drawing === ctx.canvas.id) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
......
......@@ -13,20 +13,26 @@ var Conticini = {
// Feel free to configure these
cfg: {
MIN_OPERANDO: 0,
MAX_OPERANDO: 9,
MIN_EXPECTED: 0,
MAX_EXPECTED: 20,
OPS: ['+', '-'],
OK_TIMEOUT: 5000, // milliseconds
KO_TIMEOUT: 3000, // milliseconds
MSG_CHECK: "CONTROLLA",
MSG_OK: "BENISSIMO!",
MSG_KO: "HAI SCRITTO MALE, RIPROVA!",
MIN_OPERANDO: localStorage.getItem('MIN_OPERANDO') || 0,
MAX_OPERANDO: localStorage.getItem('MAX_OPERANDO') || 9,
MIN_EXPECTED: localStorage.getItem('MIN_EXPECTED') || 0,
MAX_EXPECTED: localStorage.getItem('MAX_EXPECTED') || 20,
OPS: [localStorage.getItem('DISABLE_PLUS') === 'true' ? null : '+',
localStorage.getItem('DISABLE_MINUS') === 'true' ? null : '-',
localStorage.getItem('ENABLE_TIMES') === 'true' ? '*' : null,
localStorage.getItem('ENABLE_DIV') === 'true' ? '/' : null,
].filter((x) => x !== null),
OK_TIMEOUT: localStorage.getItem('OK_TIMEOUT') || 5000,
KO_TIMEOUT: localStorage.getItem('KO_TIMEOUT') || 3000,
MSG_CHECK: localStorage.getItem('MSG_CHECK') || "CONTROLLA",
MSG_OK: localStorage.getItem('MSG_OK') || "BENISSIMO!",
MSG_KO: localStorage.getItem('MSG_KO') || "HAI SCRITTO MALE, RIPROVA!",
},
// expected result
expected: null,
};
......@@ -8,12 +8,17 @@ Conticini.randomize = function() {
op_dx = Math.floor(Conticini.cfg.MIN_OPERANDO
+ Math.random()*(Conticini.cfg.MAX_OPERANDO - Conticini.cfg.MIN_OPERANDO + 1));
op = Conticini.cfg.OPS[Math.floor(Math.random()*Conticini.cfg.OPS.length)];
Conticini.expected = eval(op_sx + op + op_dx);
Conticini.expected = Math.floor(eval(op_sx + op + op_dx));
} while (Conticini.expected < Conticini.cfg.MIN_EXPECTED || Conticini.expected > Conticini.cfg.MAX_EXPECTED);
Conticini.OPERANDO_SX.innerHTML = "" + op_sx;
Conticini.OPERANDO_DX.innerHTML = "" + op_dx;
Conticini.OPERATORE.innerHTML = op;
if (op === '/')
Conticini.OPERATORE.innerHTML = ':';
else if (op === '*')
Conticini.OPERATORE.innerHTML = '&times;';
else
Conticini.OPERATORE.innerHTML = op;
Conticini.reset_canvases();
};
......