Algorithm to generate sudoku
0
/
462
- Initilialize the 9×9 sudoku 2D array (matrix) with all zeroes.
- Have an outer loop which runs until the generated sudoku is solved by the solver algorithm (coming next).
- Have a nested inner loop with index “i” running for values between 1 to 9.
- Pickup a random cell in the grid to place a number.
- Check if the generated sudoku so far is valid (Read here) and the cell isn’t occupied already, if yes, assign the value of i to the cell. If not, check if other values of i generate a valid sudoku.
- Check if sudoku is solvable. If yes, make a tentative assignment to the selected cell number with the value of i. If not, skip the assignment and backtrack.
- Repeat the previous 3 steps until the algorithm is able to solve the complete sudoku and save this configuration in the matrix but don’t display yet.
- Based on the difficulty level, select the number of cells which will be left blank in the sudoku configuration obtained in step 7 and show the generated board to the user as it’s solveable.
- Find empty location in the matrix, which can be assigned a value from 1 to 9.
- Loop through values 1 to 9, having index i.
- Assign the value of i to the empty location found in step 1, provided that the sudoku is valid.
- Recursively, try solving sudoku again after step 3. If solving fails, reject the last cell assignment and reset is back to zero. If solving is successful return true.
// algorithm to solve sudoku recursively
function solveSudoku() {
var cell_no = findEmptyLocation(); //find an empty cell location
if (cell_no == -1) //this means all the locations have been assigned values and sudoku is solved
{
return true;
}
for (var num = 1; num <= 9; num++) {
if (chkValid(cell_no, num) == false) //if it looks promising and meets the sudoku row, column and box assignments, make a tentative assignment
{
board[cell_no] = num;
// solve recursively from this position
if (solveSudoku() == true) //this means sudoku solved successfully for this level only, so return true to previous call
return true;
else {
board[cell_no] = 0; // solving failed, try again
}
}
}
return false; //puzzle solving failed, backtrack from this point
}
// this function finds the empty cell location on the board
function findEmptyLocation() {
for (var index = 0; index < 81; index++) {
if (board[index] == 0) //cell free
{
return index;
}
//else loop continues
}
return -1;
}
- If all boxes (3×3 grids) contain no duplicates and thus unique numbers between 1-9
- All rows contain no duplicates and thus unique numbers between 1-9
- All columns contain no duplicates and thus unique numbers between 1-9
var isValidSudoku = function(board) {
for (let i = 0; i < 9; i++) {
let row = new Set(), col = new Set(), sqr = new Set();
for (let j = 0; j < 9; j++) {
let rowc = board[i][j];
let colc = board[j][i];
let sqrc = board[Math.floor(i / 3) * 3 + Math.floor(j / 3)][(i % 3) * 3 + j % 3];
if (row.has(rowc) || col.has(colc) || sqr.has(sqrc)) return false;
if (rowc !== ".") row.add(rowc);
if (colc !== ".") col.add(colc);
if (sqrc !== ".") sqr.add(sqrc);
}
}
return true;
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Golibrary.co - Sudoku</title>
<script type="text/javascript">
function init(){box_indices[0]=new Array(0,1,2,9,10,11,18,19,20),box_indices[1]=new Array(3,4,5,12,13,14,21,22,23),box_indices[2]=new Array(6,7,8,15,16,17,24,25,26),box_indices[3]=new Array(27,28,29,36,37,38,45,46,47),box_indices[4]=new Array(30,31,32,39,40,41,48,49,50),box_indices[5]=new Array(33,34,35,42,43,44,51,52,53),box_indices[6]=new Array(54,55,56,63,64,65,72,73,74),box_indices[7]=new Array(57,58,59,66,67,68,75,76,77),box_indices[8]=new Array(60,61,62,69,70,71,78,79,80),row_indices[0]=new Array(0,1,2,3,4,5,6,7,8),row_indices[1]=new Array(9,10,11,12,13,14,15,16,17),row_indices[2]=new Array(18,19,20,21,22,23,24,25,26),row_indices[3]=new Array(27,28,29,30,31,32,33,34,35),row_indices[4]=new Array(36,37,38,39,40,41,42,43,44),row_indices[5]=new Array(45,46,47,48,49,50,51,52,53),row_indices[6]=new Array(54,55,56,57,58,59,60,61,62),row_indices[7]=new Array(63,64,65,66,67,68,69,70,71),row_indices[8]=new Array(72,73,74,75,76,77,78,79,80),col_indices[0]=new Array(0,9,18,27,36,45,54,63,72),col_indices[1]=new Array(1,10,19,28,37,46,55,64,73),col_indices[2]=new Array(2,11,20,29,38,47,56,65,74),col_indices[3]=new Array(3,12,21,30,39,48,57,66,75),col_indices[4]=new Array(4,13,22,31,40,49,58,67,76),col_indices[5]=new Array(5,14,23,32,41,50,59,68,77),col_indices[6]=new Array(6,15,24,33,42,51,60,69,78),col_indices[7]=new Array(7,16,25,34,43,52,61,70,79),col_indices[8]=new Array(8,17,26,35,44,53,62,71,80),resetPuzzleBoard(),gameStart=!1,document.onkeydown=kbdhandler,doclear();for(var e=1;3>=e;e++)document.getElementById("bradio"+e).checked=!1;isLevelSelected=!1,document.getElementById("bpause").value="Pause"}function pause(){isPaused^=1;var e=document.getElementById("bpause");1==gameStart&&1==isLevelSelected&&0==onceSolved&&(1==isPaused?(clearInterval(timerVal),e.value="Resume",locked=1):(e.value="Pause",timerVal=setInterval(showTime,1e3),locked=0))}function resetPuzzleBoard(){for(var e=0;81>e;e++)pboard[e]=0}function kbdhandler(e){if(0==locked){e||(e=window.event);var r=document.getElementById("c"+curr_cell),o=e.keyCode,t=curr_cell;switch(o){case LEFT:curr_cell%9>0?t--:t+=8;break;case UP:curr_cell+1>=1&&9>=curr_cell+1?t+=72:t-=9;break;case RIGHT:(curr_cell+1)%9==0?t-=8:t++;break;case DOWN:curr_cell+1>=72&&80>=curr_cell+1?t-=72:t+=9}if(set(t),48==o)reset();else if(o>=49&&57>=o&&1==gameStart){var l=chkValid(curr_cell,o-48);0==l?(""==r.value&&filled++,r.value=o-48,81==filled&&showScore(),board[curr_cell]=r.value<<4|init_digit_mask):animate()}}}function showScore(){var e=0,r=60*hours+minutes+Math.ceil(seconds/60);e=1e3*coins/r,document.getElementById("txt").value="",clearInterval(timerVal),alert("Bingo! you are such a genius, your score is : "+Math.ceil(e)+"\n You finished the game in time(hh:min:secs) "+hours+":"+minutes+":"+seconds),hours=minutes=seconds=0}function animate(){rowCell=document.getElementById("c"+rowId),colCell=document.getElementById("c"+colId),boxCell=document.getElementById("c"+boxId),value=setInterval(blink,500)}function blink(){toggle*=-1,locked=1,1==toggle?(rowCell&&(rowCell.style.backgroundColor="#ffff00"),colCell&&(colCell.style.backgroundColor="#ffff00"),boxCell&&(boxCell.style.backgroundColor="#ffff00")):(rowCell&&(rowCell.style.backgroundColor=prevColor),colCell&&(colCell.style.backgroundColor=prevColor),boxCell&&(boxCell.style.backgroundColor=prevColor)),counter++,4==counter&&(counter=0,clearInterval(value),locked=0)}function set(e){if(0==locked){var r=document.getElementById("c"+e),o=document.getElementById("c"+curr_cell);o.style.backgroundColor="#cc9999",r.style.backgroundColor="#afafaf",curr_cell=e}}function lock(){if(0==locked&&0==onceSolved){var e=document.getElementById("c"+curr_cell);0!=board[curr_cell]?(e.style.border="0px",e.style.height="100%",e.style.width="100%",e.style.textAlign="center",e.style.fontWeight="bold",e.style.color="green",e.style.fontSize=25,e.style.backgroundColor="#cc9999",board[curr_cell]=board[curr_cell]|lock_mask):e.focus()}}function setdigit(e){if(0==locked){var r=document.getElementById("c"+curr_cell),o=chkValid(curr_cell,e);1==gameStart?((board[curr_cell]&lock_mask)!=lock_mask&&0==o&&(board[curr_cell]=e<<4|init_digit_mask,""==r.value&&filled++,r.value=e,r.focus(),81==filled&&showScore()),1==o&&animate()):alert("Please select start before proceeding")}}function doclear(){curr_cell=0;var e=null;document.getElementById("bpause").value="Pause";for(var r=0;81>r;r++){board[r]=init_digit_mask;var o=document.getElementById("c"+r);o.value="",e=o.style.backgroundColor,o.style.backgroundColor="#cc9999",o.style.border="0px",o.style.height="100%",o.style.width="100%",o.style.backgroundColor="transparent",o.style.textAlign="center",o.style.fontWeight="bold",o.style.color="blue",o.style.fontSize=25}var t=document.getElementById("c"+curr_cell);t.focus(),t.style.backgroundColor="#afafaf",document.getElementById("txt").value="",clearInterval(timerVal),hours=minutes=seconds=0}function reset(){if(0==locked){var e=document.getElementById("c"+curr_cell);(board[curr_cell]&lock_mask)!=lock_mask&&(board[curr_cell]=0,e.value="",e.focus(),filled--)}}function rnd(){return seed=(9301*seed+49297)%233280,seed/233280}function randNum(e){return Math.floor(rnd()*e)}function toggleLevelSelectors(){gameStart===!0?(document.getElementById("bradio1").setAttribute("disabled","true"),document.getElementById("bradio2").setAttribute("disabled","true"),document.getElementById("bradio3").setAttribute("disabled","true")):(document.getElementById("bradio1").removeAttribute("disabled"),document.getElementById("bradio2").removeAttribute("disabled"),document.getElementById("bradio3").removeAttribute("disabled"))}function create(){var e=0,r=!0,o=!1;if(onceSolved=!1,isLevelSelected===!1)alert("Please select a level before starting");else{doclear(),resetPuzzleBoard(),gameStart=!0,toggleLevelSelectors();do{r=!0;for(var t=1;9>=t;t++){1==r&&(doclear(),r=!1),e=randNum(81);var l=t;if(0==chkValid(e,l)&&0==board[e]){board[e]=l,pboard[e]=l;document.getElementById("c"+e)}else t>0&&t--}if(o=solveSudoku(),0==o)alert("failed to solve puzzle at cell no "+e);else{rand_num_of_cells=initialGivens+randNum(remaining);for(var n=0;rand_num_of_cells>n;n++){var a=randNum(81),c=document.getElementById("c"+a);c.value;pboard[a]=board[a],c.style.border="0px",c.style.height="100%",c.style.width="100%",c.style.backgroundColor="transparent",c.style.textAlign="center",c.style.fontWeight="bold",c.style.color="green",c.style.fontSize=25}}}while(1!=o);for(var d=0;81>d;d++)tboard[d]=board[d];filled=0;for(var i=0;81>i;i++){if(0!=pboard[i]){var s=document.getElementById("c"+i);s.value=pboard[i],s.style.border="0px",s.style.height="100%",s.style.width="100%",s.style.backgroundColor="transparent",s.style.textAlign="center",s.style.fontWeight="bold",s.style.color="green",s.style.fontSize=25,filled++}board[i]=pboard[i]}showLabels(filled),timerVal=setInterval(showTime,1e3)}}function showLabels(e){var r=document.getElementById("lab1");r&&document.body.removeChild(r);var o=document.createElement("label");o.id="lab1",o.style.margin="100px;",o.style.padding="10px;",o.innerHTML="Givens : "+e,o.style.color="black",o.style.fontWeight="bold",o.style.fontSize=20,o.style.top=620,o.style.left=520;var t=document.createElement("label");coins=81-e,t.id="lab2",t.innerHTML="Empty : "+coins,t.style.color="black",t.style.fontWeight="bold",t.style.fontSize=20,t.style.top=620,t.style.left=650,document.body.appendChild(o),document.body.appendChild(t)}function chkValid(e,r){var o=usedInRow(e,r),t=usedInCol(e,r),l=usedInBox(e,r);return 0==o&&0==t&&0==l?!1:!0}function solveSudoku(){var e=findEmptyLocation();if(-1==e)return!0;for(var r=1;9>=r;r++)if(0==chkValid(e,r)){if(board[e]=r,1==solveSudoku())return!0;board[e]=0}return!1}function findEmptyLocation(){for(var e=0;81>e;e++)if(0==board[e])return e;return-1}function usedInRow(e,r){for(var o=Math.floor(e/9),t=0;9>t;t++){var l=board[row_indices[o][t]];if(l==r||l>>4==r)return rowId=row_indices[o][t],!0}return rowId=-1,!1}function usedInCol(e,r){for(var o=e-9*Math.floor(e/9),t=0;9>t;t++){var l=board[col_indices[o][t]];if(l==r||l>>4==r)return colId=col_indices[o][t],!0}return colId=-1,!1}function usedInBox(e,r){for(var o=Math.floor(e/27),t=Math.floor((e-9*Math.floor(e/9))/3),l=0;9>l;l++){var n=3*o+t,a=board[box_indices[n][l]];if(a==r||a>>4==r)return boxId=box_indices[n][l],!0}return boxId=-1,!1}function resetGame(){doclear(),gameStart=!1,toggleLevelSelectors()}function hint(){var e=0,r=["easy","medium","difficult"];if(gameStart===!0){for(var o=0,t=1;3>=t;t++)document.getElementById("bradio"+t).checked===!0&&(e=t);switch(r[e-1]){case"easy":o=randNum(22),showPartialsOnBoard(o);break;case"medium":o=randNum(19),showPartialsOnBoard(o);break;case"difficult":o=randNum(16),showPartialsOnBoard(o)}}else alert("Please start the game by hitting the create button first")}function showPartialsOnBoard(e){for(var r=0;e>r;r++){var o=randNum(e);""===document.getElementById("c"+o).value&&(document.getElementById("c"+o).value=tboard[o],tboard[o]=tboard[o]<<4|lock_mask,board[o]=tboard[o],document.getElementById("c"+o).style.backgroundColor="#FFA100")}}function solve(){var e=0;if(0==onceSolved&&gameStart===!0){for(e=0;81>e;e++)""===document.getElementById("c"+e).value&&(document.getElementById("c"+e).value=tboard[e],tboard[e]=tboard[e]<<4|lock_mask,board[e]=tboard[e]);onceSolved=!0,document.getElementById("txt").value="",clearInterval(timerVal),hours=minutes=seconds=0,gameStart=!1}}function showTime(){var e=document.getElementById("txt");59==seconds?(minutes++,59==minutes&&hours++,seconds=0):seconds++,seconds=seconds%10===seconds?"0"+seconds:seconds,0==hours?e.value=minutes+":"+seconds:e.value=hours+":"+minutes+":"+seconds}function level(e){var r=document.getElementById("bradio"+e);r.checked=!0;for(var o=1;3>=o;o++)o!=e&&(document.getElementById("bradio"+o).checked=!1);isLevelSelected=!0,1==e&&(initialGivens=45,remaining=10),2==e&&(initialGivens=30,remaining=10),3==e&&(initialGivens=15,remaining=15)}var board=new Array(81),tboard=new Array(81),pboard=new Array(81),box_indices=new Array(9),row_indices=new Array(9),col_indices=new Array(9),init_digit_mask=0,lock_mask=1,curr_cell=0,locked=0,onceSolved=!1,today=new Date,seed=today.getTime(),isComplete=!1,rand_num_of_cells=0,rowId=0,colId=0,boxId=0,counter=0,isPaused=0,prevColor="#cc9999",rowCell,colCell,boxCell,LEFT=37,RIGHT=39,UP=38,DOWN=40,toggle=-1,value=0,hours=0,minutes=0,seconds=0,timerVal=0,initialGivens=0,filled=0,isLevelSelected,gameStart,coins=0,remaining=0;window.onload=init;
</script>
<style type="text/css">
.digit {border:0px; width:100%; height: 100%; background-color:transparent; text-align:center; font-weight:bold; color:blue; font-size:25}
.digitLock {border:0px; width:100%; height: 100%; background-color:transparent; text-align:center; font-weight:bold; color:green; font-size:25}
.bcontrol {font-weight:bold; font-size:15}
.bdigit {font-weight:bold; font-size:15}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
.conHeight {
height:250px;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</style>
</head>
<body>
<?php
?>
<h2 style = "top:150px; left:410px"> SuDoKu</h2>
<div style="border:3px solid red; height:100%;width:300px;padding:5px;"><br><br>
<b>Levels: </b>
<input type="radio" id="bradio1" onclick='level(1)'><b>Easy</b></input>
<input type="radio" id="bradio2" onclick='level(2)'><b>Medium</b></input>
<input type="radio" id="bradio3" onclick='level(3)'><b>Difficult</b></input><br><br><br>
<b>Timer: </b><input id="txt" readonly size="10" style="background:gray;line-height:30px;"></input>
</div>
<br><br><br>
<div id="con" class="conHeight" style="background-color:#eeeeee; width:50%; height:410px;">
<table border = "2" width = "100%" height = "100%" cellpadding = "0" cellspacing = "0">
<tr>
<td rowspan = "3" width = "100" align = "left" valign = "top" bgcolor = "#339933">
<table border = "1" height = "410" width = "100" cellpadding = "0" cellspacing = "0"><tr><td>
<h3>  Controls</h3>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bcreate" value="Create" onclick="create()"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bclear" value="Clear" onclick="resetGame()"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" id="bpause" name="bpause" value="Pause" onclick="pause()"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="block" value="Lock" onclick="lock()"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="breset" value="Reset" onclick="reset()"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bhint" value="Hint" onclick="hint();"><br><br>
   <input type="button" style = "height: 25px; width: 75px" class="bcontrol" name="bsolve" value="Solve" onclick="solve();"><br>
</table></tr></td>
</td>
<td rowspan = "3" width = "350" align = "center" valign = "top" bgcolor = "#cc9999">
<table border = "1" height = "410" width = "390" cellpadding = "0" cellspacing = "0">
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c0" value=" " size="1" readonly onclick="set(0)"></td>
<td><input class="digit" type="text" id="c1" value=" " size="1" readonly onclick="set(1)"></td>
<td><input class="digit" type="text" id="c2" value=" " size="1" readonly onclick="set(2)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c9" value=" " size="1" readonly onclick="set(9)"></td>
<td><input class="digit" type="text" id="c10" value=" " size="1" readonly onclick="set(10)"></td>
<td><input class="digit" type="text" id="c11" value=" " size="1" readonly onclick="set(11)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c18" value=" " size="1" readonly onclick="set(18)"></td>
<td><input class="digit" type="text" id="c19" value=" " size="1" readonly onclick="set(19)"></td>
<td><input class="digit" type="text" id="c20" value=" " size="1" readonly onclick="set(20)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c3" value=" " size="1" readonly onclick="set(3)"></td>
<td><input class="digit" type="text" id="c4" value=" " size="1" readonly onclick="set(4)"></td>
<td><input class="digit" type="text" id="c5" value=" " size="1" readonly onclick="set(5)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c12" value=" " size="1" readonly onclick="set(12)"></td>
<td><input class="digit" type="text" id="c13" value=" " size="1" readonly onclick="set(13)"></td>
<td><input class="digit" type="text" id="c14" value=" " size="1" readonly onclick="set(14)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c21" value=" " size="1" readonly onclick="set(21)"></td>
<td><input class="digit" type="text" id="c22" value=" " size="1" readonly onclick="set(22)"></td>
<td><input class="digit" type="text" id="c23" value=" " size="1" readonly onclick="set(23)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c6" value=" " size="1" readonly onclick="set(6)"></td>
<td><input class="digit" type="text" id="c7" value=" " size="1" readonly onclick="set(7)"></td>
<td><input class="digit" type="text" id="c8" value=" " size="1" readonly onclick="set(8)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c15" value=" " size="1" readonly onclick="set(15)"></td>
<td><input class="digit" type="text" id="c16" value=" " size="1" readonly onclick="set(16)"></td>
<td><input class="digit" type="text" id="c17" value=" " size="1" readonly onclick="set(17)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c24" value=" " size="1" readonly onclick="set(24)"></td>
<td><input class="digit" type="text" id="c25" value=" " size="1" readonly onclick="set(25)"></td>
<td><input class="digit" type="text" id="c26" value=" " size="1" readonly onclick="set(26)"></td>
</tr>
</table>
</td>
</tr>
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c27" value=" " size="1" readonly onclick="set(27)"></td>
<td><input class="digit" type="text" id="c28" value=" " size="1" readonly onclick="set(28)"></td>
<td><input class="digit" type="text" id="c29" value=" " size="1" readonly onclick="set(29)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c36" value=" " size="1" readonly onclick="set(36)"></td>
<td><input class="digit" type="text" id="c37" value=" " size="1" readonly onclick="set(37)"></td>
<td><input class="digit" type="text" id="c38" value=" " size="1" readonly onclick="set(38)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c45" value=" " size="1" readonly onclick="set(45)"></td>
<td><input class="digit" type="text" id="c46" value=" " size="1" readonly onclick="set(46)"></td>
<td><input class="digit" type="text" id="c47" value=" " size="1" readonly onclick="set(47)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c30" value=" " size="1" readonly onclick="set(30)"></td>
<td><input class="digit" type="text" id="c31" value=" " size="1" readonly onclick="set(31)"></td>
<td><input class="digit" type="text" id="c32" value=" " size="1" readonly onclick="set(32)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c39" value=" " size="1" readonly onclick="set(39)"></td>
<td><input class="digit" type="text" id="c40" value=" " size="1" readonly onclick="set(40)"></td>
<td><input class="digit" type="text" id="c41" value=" " size="1" readonly onclick="set(41)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c48" value=" " size="1" readonly onclick="set(48)"></td>
<td><input class="digit" type="text" id="c49" value=" " size="1" readonly onclick="set(49)"></td>
<td><input class="digit" type="text" id="c50" value=" " size="1" readonly onclick="set(50)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c33" value=" " size="1" readonly onclick="set(33)"></td>
<td><input class="digit" type="text" id="c34" value=" " size="1" readonly onclick="set(34)"></td>
<td><input class="digit" type="text" id="c35" value=" " size="1" readonly onclick="set(35)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c42" value=" " size="1" readonly onclick="set(42)"></td>
<td><input class="digit" type="text" id="c43" value=" " size="1" readonly onclick="set(43)"></td>
<td><input class="digit" type="text" id="c44" value=" " size="1" readonly onclick="set(44)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c51" value=" " size="1" readonly onclick="set(51)"></td>
<td><input class="digit" type="text" id="c52" value=" " size="1" readonly onclick="set(52)"></td>
<td><input class="digit" type="text" id="c53" value=" " size="1" readonly onclick="set(53)"></td>
</tr>
</table>
</td>
</tr>
<tr width = "100%" height = "33%">
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c54" value=" " size="1" readonly onclick="set(54)"></td>
<td><input class="digit" type="text" id="c55" value=" " size="1" readonly onclick="set(55)"></td>
<td><input class="digit" type="text" id="c56" value=" " size="1" readonly onclick="set(56)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c63" value=" " size="1" readonly onclick="set(63)"></td>
<td><input class="digit" type="text" id="c64" value=" " size="1" readonly onclick="set(64)"></td>
<td><input class="digit" type="text" id="c65" value=" " size="1" readonly onclick="set(65)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c72" value=" " size="1" readonly onclick="set(72)"></td>
<td><input class="digit" type="text" id="c73" value=" " size="1" readonly onclick="set(73)"></td>
<td><input class="digit" type="text" id="c74" value=" " size="1" readonly onclick="set(74)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c57" value=" " size="1" readonly onclick="set(57)"></td>
<td><input class="digit" type="text" id="c58" value=" " size="1" readonly onclick="set(58)"></td>
<td><input class="digit" type="text" id="c59" value=" " size="1" readonly onclick="set(59)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c66" value=" " size="1" readonly onclick="set(66)"></td>
<td><input class="digit" type="text" id="c67" value=" " size="1" readonly onclick="set(67)"></td>
<td><input class="digit" type="text" id="c68" value=" " size="1" readonly onclick="set(68)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c75" value=" " size="1" readonly onclick="set(75)"></td>
<td><input class="digit" type="text" id="c76" value=" " size="1" readonly onclick="set(76)"></td>
<td><input class="digit" type="text" id="c77" value=" " size="1" readonly onclick="set(77)"></td>
</tr>
</table>
</td>
<td width = "33%">
<table border = "1" cellpadding = "0" cellspacing = "0" height = "133" width = "130">
<tr>
<td><input class="digit" type="text" id="c60" value=" " size="1" readonly onclick="set(60)"></td>
<td><input class="digit" type="text" id="c61" value=" " size="1" readonly onclick="set(61)"></td>
<td><input class="digit" type="text" id="c62" value=" " size="1" readonly onclick="set(62)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c69" value=" " size="1" readonly onclick="set(69)"></td>
<td><input class="digit" type="text" id="c70" value=" " size="1" readonly onclick="set(70)"></td>
<td><input class="digit" type="text" id="c71" value=" " size="1" readonly onclick="set(71)"></td>
</tr>
<tr>
<td><input class="digit" type="text" id="c78" value=" " size="1" readonly onclick="set(78)"></td>
<td><input class="digit" type="text" id="c79" value=" " size="1" readonly onclick="set(79)"></td>
<td><input class="digit" type="text" id="c80" value=" " size="1" readonly onclick="set(80)"></td>
</tr>
</table>
</td>
</tr>
</td></tr></table>
</td>
<td rowspan = "3" width = "100" align = "right" valign = "top" bgcolor = "#339933">
<table border = "1" height = "410" width = "100" cellpadding = "0" cellspacing = "0"><tr><td>
<h3 align = "center">KeyPad</h3>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but1" value="1" onclick="setdigit(1)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but2" value="2" onclick="setdigit(2)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but3" value="3" onclick="setdigit(3)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but4" value="4" onclick="setdigit(4)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but5" value="5" onclick="setdigit(5)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but6" value="6" onclick="setdigit(6)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but7" value="7" onclick="setdigit(7)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but8" value="8" onclick="setdigit(8)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but9" value="9" onclick="setdigit(9)"><br>
<input type="button" style = "margin-top: 5px; margin-left:10px; height: 25px; width: 75px" class="bdigit" name="but10" value="_" onclick="setdigit(null)"><br>
</td></tr></table>
</td>
</tr>
</table>
</div>
<br><br>
</body>
</html>