Crossword-Generator/example.html at master · satchamo/Crossword-Generator · GitHub

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crossword</title>
<style type="text/css">
#crossword {
    text-align:center;
}

.crossword {
    border-collapse:collapse;
    font-family:"Courier New", Courier, monospace;
    margin-left:auto;
    margin-right:auto;
    clear:both;
    margin-top:10px;
    margin-bottom:10px;
}

.crossword td {
    border:1px solid black;
    padding:0;
    margin:0;
    vertical-align:middle;
    padding:0;
    text-align:center;
    width:30px;
    height:30px;
}

.crossword .no-border {
    border:none;
}

#clues {
    margin:auto;
}

#clues td {
    vertical-align:top;
}
</style>
<script type="text/javascript" src="crossword.js"></script>

<script type="text/javascript">
window.onload = function(){
    // words[i] correlates to clues[i]
    var words = ["dog", "cat", "bat", "elephant", "kangaroo"];
    var clues = ["Man's best friend", "Likes to chase mice", "Flying mammal", "Has a trunk", "Large marsupial"];

    // Create crossword object with the words and clues
    var cw = new Crossword(words, clues);

    // create the crossword grid (try to make it have a 1:1 width to height ratio in 10 tries)
    var tries = 10;
    var grid = cw.getSquareGrid(tries);

    // report a problem with the words in the crossword
    if(grid == null){
        var bad_words = cw.getBadWords();
        var str = [];
        for(var i = 0; i < bad_words.length; i++){
            str.push(bad_words[i].word);
        }
        alert("Shoot! A grid could not be created with these words:\n" + str.join("\n"));
        return;
    }

    // turn the crossword grid into HTML
    var show_answers = true;
    document.getElementById("crossword").innerHTML = CrosswordUtils.toHtml(grid, show_answers);

    // make a nice legend for the clues
    var legend = cw.getLegend(grid);
    addLegendToPage(legend);
};

function addLegendToPage(groups){
    for(var k in groups){
        var html = [];
        for(var i = 0; i < groups[k].length; i++){
            html.push("<li><strong>" + groups[k][i]['position'] + ".</strong> " + groups[k][i]['clue'] + "</li>");
        }
        document.getElementById(k).innerHTML = html.join("\n");
    }
}
</script>

</head>

<body>
    <div id="crossword"></div>
    <table id="clues">
        <thead>
            <tr>
                <th>Across</th>
                <th>Down</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><ul id="across"></ul></td>
                <td><ul id="down"></ul></td>
            </tr>
        </tbody>
    </table>

</body>
</html>