crossword-layout-generator
Version:
Generates a crossword layout from any list of answers given in a JSON format.
96 lines (79 loc) • 3.54 kB
HTML
<html>
<head>
<title>Crossword Layout Generator</title>
<meta charset="utf-8">
<meta name="description" content="An open source crossword layout generator.">
<meta name="author" content="Michael Wehar">
<script src="src/layout_generator.js"></script>
<style>
div.footer{
width: 400px;
font-size: 15px;
color: #444444;
max-height: 99999999px;
}
</style>
</head>
<body>
<center>
<br><br>
<h1>Crossword Layout Generator</h1>
<h2>Enter a list of words below</h2><br><br>
<textarea id="words" rows="9" cols="35" autofocus="autofocus" style="font-size: 16px;" placeholder="Enter words on separate lines..."></textarea><br><br><br><br>
<button onclick="button_clicked();" style="font-size: 14px; cursor: pointer;">Generate Layout</button><br><br><br>
<div id="content" style="font-family: 'Courier New', Courier, monospace"></div><br>
<h3><a href="https://github.com/MichaelWehar/Crossword-Layout-Generator">View Source Code (MIT License)</a><br><br><br>
<a href="https://projectboard.engineering.com/project/crossword-layout-generator---open-source">Short Article @ ProjectBoard</a></h3><br><br>
<div class="footer">
<br><hr><br>
<center>
Related pages: <a href="https://WordofTheHour.org">Word of The Hour</a>, <a href="http://michaelwehar.com/spellchecker/">Spell Checker</a>
<br>
<p style="padding: 7px;">Created by: Michael Wehar.</p>
<br><br>
</center>
</div>
</center>
<script>
function convert_to_json(word_list){
var json_data = [];
for(let i in word_list){
if(word_list[i].length > 0){
json_data[i] = {"answer": word_list[i].toLowerCase()};
}
}
return json_data;
}
function create_word_search(alphabet, table){
var tableArray = table.split("");
for(let i = 0; i < tableArray.length; i++){
if(tableArray[i] == '-'){
var randomIndex = Math.floor(alphabet.length * Math.random());
tableArray[i] = alphabet[randomIndex];
}
}
return tableArray.join("");
}
function button_clicked(){
// Input data
var word_list = document.getElementById("words").value.replace(/[ \r\n,;:-]+/g, ",").split(",");
if(word_list[0] != ""){
var input_json = convert_to_json(word_list);
// Output data
var layout = generateLayout(input_json);
var rows = layout.rows;
var cols = layout.cols;
var table = layout.table; // table as two-dimensional array
var output_html = layout.table_string; // table as plain text (with HTML line breaks)
var output_json = layout.result; // words along with orientation, position, startx, and starty
// Word search data
var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var word_search = create_word_search(alphabet, output_html);
// Display result
document.getElementById("content").innerHTML = "<h3>Output JSON</h3><br>" + JSON.stringify(output_json) + "<br><br><h3>Output Html</h3><br>" + output_html + "<br><h3>Extra Output: Word Search</h3><br>" + word_search + "<br>";
}
}
</script>
<br><br>
</body>
</html>