Word Puzzle Generator
<!–
http://html2canvas.min.js
http://jspdf.umd.min.js –>
https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}
#container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
}
#top-section {
position: relative;
background-color: #153257;
color: #fff;
padding: 10px;
text-align: left;
border-radius: 5px 5px 0 0;
margin-top: 20px;
}
#fileInput {
margin-right: 10px;
}
#generateButton,
#downloadButton {
background-color: #fff;
color: #153257;
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
#body-section {
background-color: #fff;
border-radius: 0 0 10px 10px;
font-family: ‘Gochi Hand’;
}
h1 {
margin: 0;
font-size: 45px;
text-shadow: 1px 2px 1px grey;
}
p {
margin-top: 0;
font-size: larger;
}
table {
border-collapse: collapse;
margin: 10px 0;
width: 100%;
table-layout: fixed;
}
td {
border: 2px solid #c8cbcc;
width: 20%;
height: 40px;
text-align: center;
font-size: 18px;
font-weight: bolder;
font-family: ‘Acme’;
color: #032a33;
}
.solution-table {
margin-top: 10px;
width: auto;
}
.solution-table td {
color: #b9b9b9;
font-size: 10px;
height: 20px;
width: 20px
}
.solution-table .highlight {
color: #002227;
}
.solution-heading {
margin-bottom: 20px;
text-align: center;
}
.single-solution-box > h1 {
margin: 20px 0 0 0;
font-size: 20px;
}
.solution-span {
font-family: ‘Kristi’;
font-size: 70px;
text-shadow: 1px 1px #0865b7;
}
.word-list {
margin: 20px 0;
font-weight: bold;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.word-list span {
width: 18%;
box-sizing: border-box;
text-align: left;
text-transform: uppercase;
line-height: 30px;
font-family: ‘Acme’;
}
.puzzle-box, .solution-box {
padding: 50px 30px 30px 30px;
page-break-after: always;
}
.solution-box {
padding: 20px;
}
.single-solution-box {
margin: 0 10px;
}
.solution-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media print {
#top-section {
display:none;
}
.solution-table td {
color: #b9b9b9;
}
}
Generate Word Puzzles
Download PDF
function initGeneration() {
var fileInput = document.getElementById(‘fileInput’);
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var fileContent = e.target.result;
generateWordPuzzles(fileContent);
};
reader.readAsText(file);
} else {
alert(‘Please select a file.’);
}
}
function generateWordPuzzles(fileContent) {
var puzzleContainer = document.getElementById(‘puzzle-container’);
puzzleContainer.innerHTML = “”;
var solutionContainer = document.getElementById(‘solution-container’);
solutionContainer.innerHTML = “”;
const SOL_PER_PAGE = 4;
var currPuzzleNum = 0;
var solutionBox;
var solutionsWrapper;
try {
var jsonData = JSON.parse(fileContent);
jsonData.puzzles.forEach(puzzle => {
var puzzleBox = document.createElement(‘div’);
puzzleBox.classList.add(‘puzzle-box’);
// Puzzle Title
var puzzleTitle = document.createElement(‘h1’);
puzzleTitle.textContent = puzzle.title;
puzzleBox.appendChild(puzzleTitle);
// Puzzle Heading
var puzzleHeading = document.createElement(‘p’);
puzzleHeading.textContent = puzzle.heading;
puzzleBox.appendChild(puzzleHeading);
// Puzzle Table
var puzzleTable = document.createElement(‘table’);
puzzleTable.innerHTML = “”;
var grid = createEmptyGrid(jsonData.size);
puzzle.words.forEach(word => placeWordRandomly(word.toUpperCase(), grid));
fillEmptyCells(grid);
for (var i = 0; i < jsonData.size; i++) {
var row = puzzleTable.insertRow();
for (var j = 0; j < jsonData.size; j++) {
var cell = row.insertCell();
cell.textContent = grid[i][j].letter;
}
}
puzzleBox.appendChild(puzzleTable);
// Word List
// Word List
var wordListContainer = document.createElement('div');
wordListContainer.classList.add('pagebreak');
var wordList = document.createElement('div');
wordList.classList.add('word-list');
var wordsPerColumn = Math.ceil(puzzle.words.length / 5);
for (var i = 0; i < 5; i++) {
var wordColumn = puzzle.words.slice(i * wordsPerColumn, (i + 1) * wordsPerColumn);
var columnSpan = document.createElement('span');
columnSpan.innerHTML = wordColumn.join('
‘);
wordList.appendChild(columnSpan);
}
wordListContainer.appendChild(wordList);
puzzleBox.appendChild(wordListContainer);
puzzleContainer.appendChild(puzzleBox);
// Solution Table
if (currPuzzleNum % SOL_PER_PAGE == 0) {
solutionBox = document.createElement(‘div’);
solutionBox.classList.add(‘solution-box’);
var puzzleSolnTitle = document.createElement(‘div’);
puzzleSolnTitle.classList.add(“solution-heading”);
var solnTag = document.createElement(‘span’);
solnTag.classList.add(“solution-span”);
solnTag.innerHTML= “Solution”;
puzzleSolnTitle.appendChild(solnTag);
solutionBox.appendChild(puzzleSolnTitle);
solutionsWrapper = document.createElement(‘div’);
solutionsWrapper.classList.add(“solution-wrapper”);
solutionBox.appendChild(solutionsWrapper);
}
var puzzleSolutionBox = document.createElement(‘div’);
puzzleSolutionBox.classList.add(‘single-solution-box’);
puzzleSolutionBox.appendChild(puzzleTitle.cloneNode(true));
var solutionTable = document.createElement(‘table’);
solutionTable.classList.add(‘solution-table’);
for (var i = 0; i < jsonData.size; i++) {
var row = solutionTable.insertRow();
for (var j = 0; j < jsonData.size; j++) {
var cell = row.insertCell();
cell.textContent = grid[i][j].letter;
if (grid[i][j].isPartOfWord) {
cell.classList.add('highlight');
}
}
}
puzzleSolutionBox.appendChild(solutionTable);
solutionsWrapper.appendChild(puzzleSolutionBox);
solutionBox.appendChild(solutionsWrapper);
// solutionBox.appendChild(wordListContainer.cloneNode(true));
solutionContainer.appendChild(solutionBox);
currPuzzleNum++;
});
} catch (error) {
console.log(error);
console.log('Error parsing JSON file. Please make sure the file is in the correct format.');
}
}
function createEmptyGrid(size) {
var grid = [];
for (var i = 0; i < size; i++) {
grid[i] = [];
for (var j = 0; j grid[0].length) {
return false;
}
for (var i = 0; i < word.length; i++) {
if (grid[startRow][startCol + i].letter !== '') {
return false;
}
}
for (var i = 0; i grid.length) {
return false;
}
for (var i = 0; i < word.length; i++) {
if (grid[startRow + i][startCol].letter !== '') {
return false;
}
}
for (var i = 0; i grid.length || startCol + word.length > grid[0].length) {
return false;
}
for (var i = 0; i < word.length; i++) {
if (grid[startRow + i][startCol + i].letter !== '') {
return false;
}
}
for (var i = 0; i < word.length; i++) {
grid[startRow + i][startCol + i] = {
letter: word.charAt(i),
isPartOfWord: true
};
}
return true;
}
function fillEmptyCells(grid) {
for (var i = 0; i < grid.length; i++) {
for (var j = 0; j < grid[i].length; j++) {
if (grid[i][j].letter === '') {
grid[i][j] = {
letter: getRandomLetter(),
isPartOfWord: false
};
}
}
}
}
function getRandomLetter() {
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var randomIndex = Math.floor(Math.random() * alphabet.length);
return alphabet.charAt(randomIndex);
}
function downloadPDF() {
var element = document.getElementById('body-section');
html2pdf(element, {
margin: 5,
filename: 'square_table_example.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait' }
});
}
Short Notes 