<html> <head> <!-- TODO fix number sizes for mobile TODO fix single digit numbers --> <script src="js/global.js"></script> <style> body { display: flex; flex-direction: column; height: 100vh; } #top, #middle, #bottom { display: flex; justify-content: center; } #top { height: 33%; align-items: flex-end; } #middle { flex: 1; align-items: center; } #bottom { height: 33%; align-items: flex-start; } #left-number, #right-number { font-size: 10vw; } #left-number { display: flex; justify-content: flex-end; padding-right: 3vw; } #right-number { padding-left: 3vw; } #answer { border-bottom: solid 0.5vw black; min-width: 150px; display: flex; align-items: flex-end; justify-content: center; } #less-than { margin-right: 2vw; } #new-problem { display: none; } #greater-than { margin-right: 2vw; } #score { position: absolute; bottom: 0; right: 1vh; font-size: 8vh; } #correct, #incorrect { display: none; } </style> </head> <body class="no-select"> <script> window.uuid = 'ec646932-ff31-11ea-adc1-0242ac120002'; window.score = parseInt(localStorage.getItem(`${uuid}::score`)) || 0; window.incorrectAnswer = false; function newProblem() { if (!window.incorrectAnswer) { window.left = Math.floor(Math.random() * 101); do { window.right = Math.floor(Math.random() * 101); } while(window.right === window.left); } document.getElementById('left-number').innerHTML = window.left; document.getElementById('right-number').innerHTML = window.right; reset(); } function correct() { window.score += 1; localStorage.setItem(`${window.uuid}::score`, window.score); document.getElementById('correct').style.display = 'block'; document.getElementById('incorrect').style.display = 'none'; } function incorrect() { window.incorrectAnswer = true; document.getElementById('correct').style.display = 'none'; document.getElementById('incorrect').style.display = 'block'; } function updateScore() { document.getElementById('score').innerText = window.score; } function hideAnswerButtons() { document.getElementById('new-problem').style.display = 'block'; document.getElementById('less-than').style.display = 'none'; document.getElementById('greater-than').style.display = 'none'; } function reset() { window.incorrectAnswer = false; document.getElementById('new-problem').style.display = 'none'; document.getElementById('less-than').style.display = 'block'; document.getElementById('greater-than').style.display = 'block'; document.getElementById('correct').style.display = 'none'; document.getElementById('incorrect').style.display = 'none'; document.getElementById('answer').classList.remove('solid-less-than'); document.getElementById('answer').classList.remove('solid-greater-than'); } function selectLessThan() { hideAnswerButtons(); document.getElementById('answer').classList.remove('solid-greater-than'); document.getElementById('answer').classList.add('solid-less-than'); if (window.left < window.right) { correct(); } else { incorrect(); } updateScore(); } function selectGreaterThan() { hideAnswerButtons(); document.getElementById('answer').classList.remove('solid-less-than'); document.getElementById('answer').classList.add('solid-greater-than'); if (window.left > window.right) { correct(); } else { incorrect(); } updateScore(); } window.addEventListener('load', () => { updateScore(); newProblem(); }); </script> <div id="top"> <div id="left-number"></div> <div id="answer" class="icon-9"></div> <div id="right-number"></div> </div> <div id="middle"> <div id="correct" class="solid-check icon-9 icon-green"></div> <div id="incorrect" class="solid-times icon-9 icon-red"></div> </div> <div id="bottom"> <div id="less-than" class="button solid-less-than icon-7" onclick="selectLessThan()"></div> <div id="new-problem" class="button solid-sync-alt icon-7" onclick="newProblem()"></div> <div id="greater-than" class="button solid-greater-than icon-7" onclick="selectGreaterThan()"></div> </div> <div id="score">0</div> </body> </html>