Box Relatives

Thoughts about puzzles, math, coding, and miscellaneous

How to embed puzzles with the Nexus JPZ Solver

| 0 comments

So you’re aware that the Crossword Nexus JPZ Solver exists, and you know it can be embedded in websites. But how can you get it into yours? It’s a fairly easy process and I’ll walk you through it right now.

Initial Setup

  1. First you’ll need to get the code from github onto your website somehow.  If you have SSH access you can just do a git clone: go to your web root (usually ~/public_html) and enter the following command:
    git clone https://github.com/crosswordnexus/html5-crossword-solver.git html5-crossword-solver

    If you don’t, the easiest thing to do is to download the code and then unzip it in a new directory in your web root. I’m going to assume you unzipped it in ~/public_html/html5-crossword-solver. The advantage of the first method is that whenever there’s an update to the code, you can just do a

    git pull

    command, whereas the second requires you to download and unzip the code all over again if you want to update.

  2. You then need to add a few lines to the <head> of any page where you want to embed the solver:
    <link href="/html5-crossword-solver/css/crosswordnexus.css" rel="stylesheet">
    <script src="/html5-crossword-solver/js/crosswords.js"></script>
    <script src="/html5-crossword-solver/lib/jquery.js"></script>
    <script src="/html5-crossword-solver/lib/zip/zip.js"></script>
    <style>
    div.crossword { position: relative; margin: 20px auto; width: 100%; min-width: 300px; height: 400px; text-align: center; }
    </style>

    You can change the “height” (or any of the other parameters) to whatever suits you.  NOTE: If you have a WordPress site, you make these changes under Appearance -> Editor -> Header.

Embedding a puzzle

Now that you’ve got the initial setup, it’s time to actually embed a crossword.  Upload a JPZ file to somewhere on your website (let’s assume it’s in http://mywebsite.com/downloads/xw.jpz). Wherever you want to embed the crossword, add this little bit of code (replacing MY_CROSSWORD_NAME with whatever you want to call your crossword):

<div class="crossword MY_CROSSWORD_NAME"></div>

and then somewhere below that, add the following:

<script>
(function(){
var params = {
hover_enabled: false,
settings_enabled: true,
color_selected: '#FF0000',
color_word: '#FFFF00',
savegame_name: 'MY_CROSSWORD_NAME',
puzzle_file: {url: '/downloads/xw.jpz', type: 'jpz'}
};
CrosswordNexus.createCrossword($('div.MY_CROSSWORD_NAME'), params);
})();
</script>

That’s it! If you try it let me know. Also, let me know if I can improve these instructions somehow.

Leave a Reply

Required fields are marked *.