Please see this image to read the actual assignment
I need to make this crossword puzzle, I am totally new in IT, however I have been trying very hard to make this as I have to submit this as an assignment to get a job in web development. I am having a hard time deciding to use a HTML table with background color changed for the puzzle or do I make a javascript multidimensional array to make this crossword.
<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
#leftBox{
float: left;
width:50%
height: 50%;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
padding:20px;
}
table{
padding:20px;
}
</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input id="butt" type="submit" value="Clear All"></td></tr>
<tr><td><input id="butt" type="submit" value="Check"></td></tr>
<tr><td><input id="butt" type="submit" value="Solve"></td></tr>
<tr><td><input id="butt" type="submit" value="Clue"></td></tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:330px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
#leftBox{
float: left;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
}
</style>
<script>
function initializeScreen(){
var puzzelTable = document.getElementById("puzzel");
var puzzelArrayData = preparePuzzelArray();
for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
var cell = row.insertCell(-1);
if(rowData[j] != 0){
cell.innerHTML = rowData[j];
}else{
cell.innerHTML = "1";
cell.style.backgroundColor = "black";
}
}
}
}
function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, '?', 0, '?', 0, 0, 0, 0],
[0, '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'],
[0, 0, 0, 0, 0, 0, '?', 0, 0, 0, '?'],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
return items;
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input id="butt" type="submit" value="Clear All"></td></tr>
<tr><td><input id="butt" type="submit" value="Check"></td></tr>
<tr><td><input id="butt" type="submit" value="Solve"></td></tr>
<tr><td><input id="butt" type="submit" value="Clue"></td></tr>
</table>
</body>
</html>I know I'm not supposed to do this, but I loved the challenge so I came with a solution in this JSFiddle
It uses the following markup
<div id="puzzle_container">
<table id="puzzle">
</table>
</div>
<div id="hints_container">
<h3>Vertical</h3>
<div id="vertical_hints_container"></div>
<h3>Horizontal</h3>
<div id="horizontal_hints_container"></div>
</div>
<div id="buttons_container">
<button id="clear_all">Clear All</button>
<button id="check">Check</button>
<button id="solve">Solve</button>
<button id="clue">Clue</button>
</div>
And jQuery.