<!DOCTYPE html>
<html>

<head>
    <title>
        The numbers game - Math game - golibrary.co
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style>
        .boundary {
            height: 100px;
            width: 100px;
            min-height: 100px;
            background: #669900;
            font-weight: bold;
            font-size: 200%;
            color: #000000;
        }
        
        .select {
            margin: auto;
            
            left: 20%;
            top: 30%;
        }
        
        .sprite {
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background: url('fruits.jpg') -91px 0;
        }
        
        ;
        .dropdown {
            margin: auto;
        }
        
		input {
			border: 5px solid white; 
			-webkit-box-shadow: 
			  inset 0 0 8px  rgba(0,0,0,0.1),
					0 0 16px rgba(0,0,0,0.1); 
			-moz-box-shadow: 
			  inset 0 0 8px  rgba(0,0,0,0.1),
					0 0 16px rgba(0,0,0,0.1); 
			box-shadow: 
			  inset 0 0 8px  rgba(0,0,0,0.1),
					0 0 16px rgba(0,0,0,0.1); 
			
			background: rgba(255,255,255,0.5);
			margin: 0 0 10px 0;
		}

    </style>
</head>

<body onload='createTable()'>
    <center><select  align="center" class="dropdown" id="dd" onchange='createTable()'>
<option value="3x3 Number Grid">3x3 Number Grid</option>
<option value="5x5 Number Grid">5x5 Number Grid</option>
<!--option value="7x7 Magic Square">7x7 Magic Square</option>
<option value="9x9 Magic Square">9x9 Magic Square</option-->
</select></center>
    <br><br>
    <center><pre><h2>Find and fill appropriate numbers against the symbols in the grid such that
sum of numbers across rows and cols equals that shown in the grids</h2></pre></center>
    <table id="tab" class="select" border="1" cellpadding="0" cellspacing="0">
    </table>
</body>

</html>
<script>
    var gridSizes = [3, 5],
        today = new Date();
    seed = today.getTime(),
        MAXNUM = 20, symbolMapLength = 0,
        symbolMap = new Array();
    var pixMap = ['☯', '✪', '✿', '✔', '✘'];

    function check() {
        for (var i = 0; i < symbolMapLength; i++) {
            if (parseInt($('#val' + i).val()) !== symbolMap[pixMap[i]]) {
                alert("You are wrong, Please try again!!");
                return false;
            }
        }
        alert("You got it correct. Good work!!");
    }

    function createTable() {
        var gridSize = gridSizes[document.getElementById("dd").selectedIndex] + 1,
            table = document.getElementById('tab'),
            numCount = 1,
            x = '0',
            y = Math.floor(gridSize / 2).toString(),
            numRows = document.getElementById('tab').rows.length;
        initVal = 1, count = 0,
            gridSolution = new Array();

			if ($("#symbols").length > 0)
			{
				$("#symbols").remove();
			}

		symbolMapLength = 0;
        for (var i = 0; i < gridSize; i++) {
            gridSolution[i] = new Array(gridSize).fill(0); // fill 0's in the 2D gridMap containing the numbers
        }
        while (numRows !== 0) {
            table.deleteRow(0);
            numRows--;
        }
        table.height = table.width = gridSize * 100;
        var numbers = new Array();
        for (var i = 0; i < gridSize - 1; i++) {
            numbers.push(randNum(MAXNUM));
        }
        for (var row = 0; row < gridSize; row++) {
            var tr = document.createElement('tr');
            for (var col = 0; col < gridSize; col++) {
                var td = document.createElement('td');
                td.align = 'center';
                td.className = 'boundary';
                if ((col + 1) % gridSize === 0 || (row + 1) % gridSize === 0) {
                    td.style.background = 'yellow';
                }
                td.id = row.toString() + col.toString();
                tr.appendChild(td);
            }
            document.getElementById('tab').appendChild(tr);
        }
        var j = 0,
            missingValuesFound = false;
        while (count < (gridSize - 1) * (gridSize - 1)) {
            var cell_id = randNum((gridSize - 1) * (gridSize - 1));
            var x = parseInt(cell_id / (gridSize - 1));
            var y = cell_id % (gridSize - 1);
            var cell = $('#tab tr:eq(' + x + ') td:eq(' + y + ')');
            if (cell.html().trim().length === 0) {
                //cell.html(numbers[j]);
                gridSolution[x][y] = (numbers[j]);
                if (!missingValuesFound) {
                    symbolMap[pixMap[j]] = numbers[j];
                    symbolMapLength++;
                }
                cell.html(pixMap[j]);
                j++;
                count++;
                if (j % (gridSize - 1) === 0) {
                    j = 0;
                    missingValuesFound = true;
                }
            }
        }
        //console.log(symbolMap);
        createTextFields(symbolMap);
        var sum = function(arr) {
            return arr.reduce(function(a, b) {
                return a + b;
            }, 0);
        };
        var colSum = gridSolution.map(function(row, i) {
            return sum(gridSolution.map(function(row) {
                return row[i];
            }));
        });
        for (var row = 0; row < gridSize - 1; row++) {
            gridSolution[row][gridSize - 1] = gridSolution[row].reduce(function(a, b) {
                return a + b;
            });
            $('#tab tr:eq(' + row + ') td:eq(' + (gridSize - 1) + ')').html(gridSolution[row][gridSize - 1]);
            $('#tab tr:eq(' + (gridSize - 1) + ') td:eq(' + (row) + ')').html(colSum[row]);
        }
    }

    function createTextFields(symbolMap) {
        var div = document.createElement('div');
        div.id = 'symbols';
        $('#tab').append(div);
        var string = '';
        for (var t = 0; t < symbolMapLength; t++) {
            string += "Enter value for "+pixMap[t] + '?&nbsp;<input type=text' + ' id=val' + t + ' class=align' + t + ' size=10 maxlength=3></input>';
        }
        document.getElementById('symbols').innerHTML = string + '<input type=button value=Check name=check onclick = check();><\/input>';
		$('#val0').focus();
    }

    function rnd() {
        // generate some random seed here
        seed = (seed * 9301 + 49297) % 233280;
        return seed / (233280.0);
    }

    function randNum(number) {
        //this will return the truncated random number
        return Math.floor(rnd() * number);
    }
</script>