{"id":401,"date":"2015-05-16T09:08:26","date_gmt":"2015-05-16T16:08:26","guid":{"rendered":"http:\/\/alexboisvert.com\/musings\/?p=401"},"modified":"2015-05-16T09:08:26","modified_gmt":"2015-05-16T16:08:26","slug":"how-to-embed-puzzles-with-the-nexus-jpz-solver","status":"publish","type":"post","link":"https:\/\/alexboisvert.com\/musings\/2015\/05\/16\/how-to-embed-puzzles-with-the-nexus-jpz-solver\/","title":{"rendered":"How to embed puzzles with the Nexus JPZ Solver"},"content":{"rendered":"

So you’re aware that the Crossword Nexus JPZ Solver<\/a> 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.
\n
\nInitial Setup<\/strong><\/p>\n

    \n
  1. First you’ll need to get the code from github<\/a> onto your website somehow.\u00a0 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:\n
    git clone https:\/\/github.com\/crosswordnexus\/html5-crossword-solver.git html5-crossword-solver<\/pre>\n
    If you don’t, the easiest thing to do is to download the code<\/a> 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<\/p>\n
    git pull<\/pre>\n
    command, whereas the second requires you to download and unzip the code all over again if you want to update.<\/li>\n
  2. You then need to add a few lines to the <head> of any page where you want to embed the solver:
    \n<link href=\"\/html5-crossword-solver\/css\/crosswordnexus.css\" rel=\"stylesheet\">
    \n<script src=\"\/html5-crossword-solver\/js\/crosswords.js\"><\/script>
    \n<script src=\"\/html5-crossword-solver\/lib\/jquery.js\"><\/script>
    \n<script src=\"\/html5-crossword-solver\/lib\/zip\/zip.js\"><\/script>
    \n<style>
    \ndiv.crossword { position: relative; margin: 20px auto; width: 100%; min-width: 300px; height: 400px; text-align: center; }
    \n<\/style><\/code>
    \nYou can change the “height” (or any of the other parameters) to whatever suits you.\u00a0 NOTE: If you have a WordPress site, you make these changes under Appearance -> Editor -> Header.<\/li>\n<\/ol>\n
    Embedding a puzzle<\/strong><\/p>\n
    Now that you’ve got the initial setup, it’s time to actually embed a crossword.\u00a0 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):<\/p>\n
    <div class=\"crossword MY_CROSSWORD_NAME\"><\/div><\/code><\/p>\n
    and then somewhere below that, add the following:<\/p>\n
    <script>
    \n(function(){
    \nvar params = {
    \nhover_enabled: false,
    \nsettings_enabled: true,
    \ncolor_selected: '#FF0000',
    \ncolor_word: '#FFFF00',
    \nsavegame_name: 'MY_CROSSWORD_NAME',
    \npuzzle_file: {url: '\/downloads\/xw.jpz', type: 'jpz'}
    \n};
    \nCrosswordNexus.createCrossword($('div.MY_CROSSWORD_NAME'), params);
    \n})();
    \n<\/script><\/code><\/p>\n
    That’s it!  If you try it let me know.  Also, let me know if I can improve these instructions somehow.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[],"class_list":["post-401","post","type-post","status-publish","format-standard","hentry","category-coding","category-puzzles"],"_links":{"self":[{"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/posts\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":1,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/posts\/401\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexboisvert.com\/musings\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}