docs: function (el, puzzle) {
              var output = '';
              // for each row in the puzzle
              for (var i = 0, height = puzzle.length; i < height; i++) {
                  // append a div to represent a row in the puzzle
                  var row = puzzle[i];
                  output += '<div class="wordsRow">';
                  // for each element in that row
                  for (var j = 0, width = row.length; j < width; j++) {
                      // append our button with the appropriate class
                      output += '<button class="puzzleSquare" x="' + j + '" y="' + i + '">';
                      output += row[j] || '&nbsp;';
                      output += '</button>';
                  }
                  // close our div that represents a row
                  output += '</div>';
              }
              $(el).html(output);
          }