Cryptogram Interactive Puzzle

<!-- Cryptogram Interactive Puzzle

Solve the puzzle by replacing letters to reveal the hidden message.

Use the keyboard and mouse to move the cursor.
Type a letter to make a guess and advance the cursor.
Correct mistakes by typing over them or with backspace and delete.
-->

<body>
  <h1>Cryptogram</h1>
  <p>Solve the puzzle by replacing letters to reveal the hidden message.</p>
  <p>Use the keyboard and mouse to move the cursor.
  Type a letter to enter a guess and advance the cursor.
  Correct mistakes by typing over them or with backspace and delete.</p>

var encodeCypher = {};
    var decodeCypher = {};

var textClear = "";
    var textAlpha = "";
    var textKey = "";

var textHidden = "";
    var textSolved = "";

function setPuzzle(text) {
      textClear = text;
      textAlpha = makeAlpha(textClear);
      textKey = makeKey(textAlpha.length);
      encodeCypher = makeCypher(textAlpha, textKey);
      decodeCypher = makeCypher(textKey, textKey.toLowerCase());
      textHidden = translate(textClear, encodeCypher, true);
      textSolved = translate(textHidden, decodeCypher, true);
    }

function setGuess(cypherVal, clearVal) {
      cypherVal = cypherVal.toUpperCase();
      clearVal = clearVal.toUpperCase();
      if(decodeCypher.hasOwnProperty(cypherVal)) {
        decodeCypher[cypherVal] = clearVal;
        textSolved = translate(textHidden, decodeCypher, true);
      }
    }

function clearGuess(cypherVal) {
      cypherVal = cypherVal.toUpperCase();
      if(decodeCypher.hasOwnProperty(cypherVal)) {
        decodeCypher[cypherVal] = cypherVal.toLowerCase();
        textSolved = translate(textHidden, decodeCypher, true);
      }
    }

function makeCypher(from, to) {
      var cypher = {};
      for(var i = 0; i < from.length; ++i) {
        cypher[from.charAt(i)] = to.charAt(i);
      }
      return cypher;
    }

function scramble(alpha) {
      var arry = alpha.split("");
      for(var i = arry.length; 0 < i; --i) {
        var j = Math.floor(i * Math.random());
        var tmp = arry[i-1];
        arry[i-1] = arry[j];
        arry[j] = tmp;
      }
      return arry.join("");
    }

function makeKey(length) {
      return scramble(alphabet).substr(0, length);
    }

</script>
  <script>
    var puzzleOptions = [
    "By three methods we may learn wisdom: first, by reflection, which is noblest; second, by imitation, which is easiest; and third, by experience, which is the bitterest. --Confucius",
    "Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done. --Andy Rooney",
    "The typewriting machine, when played with expression, is no more annoying than the piano when played by a sister or near relation. --Oscar Wilde.",
    "The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency. --Bill Gates",
    ];
    setPuzzle(puzzleOptions[Math.floor(Math.random()*puzzleOptions.length)]);

var cursorPos = 0;
    var cursorBlink = true;
    var cursorTimer = null;

var puzzle = d3.selectAll("#puzzle");
    puzzle.classed("puzzle", true);

var data = puzzle.selectAll("*").data(d3.range(textSolved.length));

data.enter().append("span");
    data.exit().remove();
    data.order();

function getTextAt(i) {
      return textSolved.charAt(i);
    }

var elems = puzzle.selectAll("*");
      elems.text(getTextAt);
      elems.classed("guess", getGuessAt);
      elems.classed("error", getErrorAt);
      elems.classed("curchr", function(i) {
                    return curChr === textHidden.charAt(i).toUpperCase();
                    });
      elems.classed("solved", textSolved === textClear);
      elems.on("click", cursorUpdate);
    }

function cursorCallback() {
      var data = puzzle.selectAll("*");
      data.classed("cursor", function(d) {
                   return d === cursorPos ? cursorBlink : false; });
      cursorBlink = !cursorBlink;
    }

function setGuessAtCursor(val) {
      setGuess(textHidden.charAt(cursorPos), val);
      update();
    }

function clearGuessAtCursor() {
      clearGuess(textHidden.charAt(cursorPos));
      update();
    }

d3.selectAll("body").on("keydown", keyDownCallback);

cursorUpdate(0);

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js