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>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>- 1 Probably JavaScript, I'm assuming it will have some sort of functionality. – Spencer Wieczorek Commented Sep 22, 2015 at 23:38
- yes it will, please see the image in the link drive.google./file/d/0B00URazV5RS1djB2NFZrclMwb0k/… – Prasad K Commented Sep 22, 2015 at 23:43
- I saw it, do you have a question over something specific to the assignment? All you asked is whether to use JS or HTML for crossword. – Spencer Wieczorek Commented Sep 23, 2015 at 0:01
- I like more the second option, defining the puzzle with an array. It looks more extensible. But rememeber that this munity is for asking more specific questions. – Alvaro Flaño Larrondo Commented Sep 23, 2015 at 0:38
5 Answers
Reset to default 8I 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.
<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#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;
}
td{
height: 30px;
width: 30px;
}
#leftBox{
float: left;
}
#rightBox{
float: left;
clear:left;
}
.butt{
height:50px;
width: 107px;
}
#puzzel{
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
.inputBox{
width: 40px;
height:40px;
border: 1px solid black;
text-align: center;
}
#hintsTable{
width: 480px;
float: left;
clear: left;
}
</style>
<script>
//Globals
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword
function initializeScreen(){
var puzzelTable = document.getElementById("puzzel");
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){
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: lowercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
}else{
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint(){
document.getElementById("txt_0_4").placeholder = "1";
document.getElementById("txt_2_6").placeholder = "2";
document.getElementById("txt_3_1").placeholder = "3";
document.getElementById("txt_3_9").placeholder = "4";
document.getElementById("txt_6_2").placeholder = "5";
document.getElementById("txt_9_0").placeholder = "6";
}
//Stores ID of the selected cell into currentTextInput
function textInputFocus(txtID123){
currentTextInput = txtID123;
}
//Returns Array
function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, 'p', 0, 0, 0, 0, 0],
[0, 0, 0, 0, 'u', 0, 0, 0, 0, 0 ],
[0, 0, 0, 0, 'n', 0, 'b', 0, 0, 0],
[0, 'h', 'y', 'd', 'e', 'r', 'a', 'b', 'a', 'd'],
[0, 0, 0, 0, 0, 0, 'n', 0, 0, 'e'],
[0, 0, 0, 0, 0, 0, 'g', 0, 0, 'l'],
[0, 0, 'm', 'u', 'm', 'b', 'a', 'i', 0, 'h'],
[0, 0, 0, 0, 0, 0, 'l', 0, 0, 'i'],
[0, 0, 0, 0, 0, 0, 'o', 0, 0, 0],
['k', 'a', 's', 'h', 'm', 'i','r', 0, 0, 0],
[0, 0, 0, 0, 0, 0, 'e', 0, 0, 0]
];
return items;
}
//Clear All Button
function clearAllClicked(){
currentTextInput = '';
var puzzelTable = document.getElementById("puzzel");
puzzelTable.innerHTML = '';
initializeScreen();
}
//Check button
function checkClicked(){
for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
var rowData = puzzelArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
if(rowData[j] != 0){
var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
if(selectedInputTextElement.value != puzzelArrayData[i][j]){
selectedInputTextElement.style.backgroundColor = 'red';
}else{
selectedInputTextElement.style.backgroundColor = 'white';
}
}
}
}
}
//Clue Button
function clueClicked(){
if (currentTextInput != null){
var temp1 = currentTextInput;
var token = temp1.split("_");
var row = token[1];
var column = token[2];
document.getElementById(temp1).value = puzzelArrayData[row][column];
//checkClicked();
}
}
//Solve Button
function solveClicked(){
if (currentTextInput != null){
var temp1 = currentTextInput;
var token = temp1.split("_");
var row = token[1];
var column = token[2];
// Print elements on top
for(j = row; j >= 0; j--){
if(puzzelArrayData[j][column] != 0){
document.getElementById('txt' + '_' + j + '_' + column).value = puzzelArrayData[j][column];
}else break;
}
// Print elements on right
for(i = column; i< puzzelArrayData[row].length; i++){
if(puzzelArrayData[row][i] != 0){
document.getElementById('txt' + '_' + row + '_' + i).value = puzzelArrayData[row][i];
}else break;
}
// Print elements below
for(m = row; m< puzzelArrayData.length; m++){
if(puzzelArrayData[m][column] != 0){
document.getElementById('txt' + '_' + m + '_' + column).value = puzzelArrayData[m][column];
}else break;
}
// Print elements on left
for(k = column; k >= 0; k--){
if(puzzelArrayData[row][k] != 0){
document.getElementById('txt' + '_' + row + '_' + k).value = puzzelArrayData[row][k];
}else break;
}
// Done!
}
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input class="butt" type="submit" value="Clear All" onclick="clearAllClicked()"></td>
<td><input class="butt" type="submit" value="Check" onclick="checkClicked()"></td>
<td><input class="butt" type="submit" value="Solve" onclick="solveClicked()"></td>
<td><input class="butt" type="submit" value="Clue" onclick="clueClicked()"></td></tr>
</table>
</div>
<table id="hintsTable">
<tr>
<td><strong>Horizontal:</strong></td><td><strong>Vertical:</strong></td>
</tr>
<tr>
<td>3. Cultural Hub (Hyderabad)</td><td>1. Education Hub (Pune)</td>
</tr>
<tr>
<td>5. India's financial capital (Mumbai)</td><td>2. Information Technology Hub (Bangalore)</td>
</tr>
<tr>
<td>6. Saffron region (Kashmir)</td><td>4. Capital of India (Delhi)</td>
</table>
</body>
</html>Done!! && Done!! Thanks again Alvaro Flaño Larrondo.
Please take a look at Exolve (https://github./viresh-ratnakar/exolve) for setting up interactively solvable crosswords very easily. Exolve is open source and free (MIT license).
With Exolve, setting up an interactively solvable crossword (with or without solutions provided) is something as simple as editing the following plain text within an HTML file:
<script>
const puzzleText = `
======REPLACE WITH YOUR PUZZLE BELOW======
exolve-begin
exolve-width: 3
exolve-height: 3
exolve-grid:
ACE
R.R
EAR
exolve-across:
1 Clue for ACE (3)
3 Clue for EAR (3)
exolve-down
1 Clue for ARE (3)
2 Clue for ERR (3)
exolve-end
======REPLACE WITH YOUR PUZZLE ABOVE======
`;
</script>
Here is my variant.
It is under the MIT license. Source
DEMO
<!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>