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
- 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.
- 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.