-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
94 lines (79 loc) · 3.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<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="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://makeprojects.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>