A game for learning Sanskrit alphabet

.hc { background-color: #6dcfd1; font-size:12px; } .tg { border-collapse:collapse; border-spacing:0; text-align:center; } .tg td{ padding:10px 5px; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; border-color:black; } .tg th{ font-weight:normal; padding:10px 5px; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; border-color:black; } .tg .th{ border-color:inherit; vertical-align:middle } .tg .semivowel { background-color: #aaffb0; } .tg .gray { background-color: #cacfce; } table { font-size:14px; table-layout: fixed; } table td p:first-child { font-size:35px; margin-top: -10px} table td p:last-child { display: block; } .tg .ab { width: 60px; height:60px !important; } p { padding: unset; margin: unset; } footer { color: #cccccc; position: absolute; bottom: 0; width: 100%; text-align: right; opacity: 0.5;} table { width:100%; } .letter { font-size:140px; } .main-wrapper { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; } .main-wrapper .levy-stolbez { width: 100%; } @media (min-width: 1024px) { .main-wrapper .levy-stolbez { width: calc(100% - 220px); } } .main-wrapper .pravy-stolbez { display: flex; flex-wrap: wrap; width: 100%; padding: 20px 0 0; } @media (min-width: 1024px) { .main-wrapper .pravy-stolbez { display: block; width: 200px; margin: 0; padding: 0 0 0 20px; } } .main-wrapper .letter { width: 50%; } .main-wrapper .form { width: calc(50% - 20px); margin-right: 20px; } @media (min-width: 1024px) { .main-wrapper .form, .main-wrapper .letter { width: 100%; margin: 0; } } ( function( $ ) { $(document).ready(function() { let config = { status: false, total: 0, success: 0, mode: 'isat', letter:'' }; $('select.mode').change(function(){ config.mode = $(this).val(); }); $('td.ab').click(function(){ if(!config.status) {return;} let $this = $(this); let value = $('p:hidden', $this).text(); let letter = $('.letter').text(); console.log(value , 'value'); console.log(letter , 'letter'); if (value == letter) { $($this).addClass('checked').find('p').show(); config.success++; } config.total++; $('.total-attempt').text(config.total); $('.successful-attempt').text(config.success); if (!nextLetter()) { end(); stop(); } }); $('button.start').click(function(){ start(); nextLetter(); }); $('button.stop').click(function(){ stop(); }); function nextLetter(){ let balance = $("table td.ab:not(.checked)").length; if (balance) { let nextNum = getNextNum(); let nextLetter = $("table td.ab:not(.checked)").eq(nextNum).find('p:hidden').text(); console.log($("table td.ab:not(.checked)"), 'td.ab:not(.checked)'); console.log($("table td.ab:not(.checked)").eq(nextNum), 'nextNum'); console.log($("table td.ab:not(.checked)").eq(nextNum).find('p:hidden'), 'nextLetter'); console.log(nextLetter, 'nextLetterText'); $('.letter').text(nextLetter); } return !!balance; } function getNextNum() { let num = $("table td.ab:not(.checked)").length; console.log(num, 'num'); return Math.floor(Math.random() * num); } function start() { config.status = true; let mode = config.mode; let hideEl = mode != 'isat' ? 'p:first-child' : 'p:last-child'; $('table p').show(); $(hideEl, 'table').hide(); } function stop() { config.total = 0; config.success = 0; $('.total-attempt').text(config.total); $('.successful-attempt').text(config.success); $('table td.ab').removeClass('checked'); $('table p').show(); $('.letter').text(''); } function end() { config.status = false; let text = $('.statistic').text(); alert(text); } }); })( jQuery );