How to create conditional chat in blogger post

Back>

With some javascript, your blogger post can response to the user's typing, as if some intelligent robot is chatting with the user. Here is the

Example

<div id="stage">
<h1>Show Your Spells</h1>

<small class="warning">Dragon: You can't win, my spell has O(NlogN) and O(1).</small>

<p>Try typing "bubble sort"!</p>
</div>


<style>
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

#stage{
  font-size:20px;
  padding:1em;
  font-family:"Share Tech Mono", monospace;
  text-align:center;
  background:#112211 url('https://hosted.eightarms.co.uk/2013/11/21/monitor.png');
  color:#17f741;
  text-shadow:0 0 3px #6eff89;
  height: 700px;
  width: 100%;
}

.warning{

  bottom:10px;
  right:10px;
  width:20%;
  text-align:right;
}

.cheat{
  color:#d8ff00;
  text-shadow:0 0 6px #6eff89;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
var cheats = [{
  code : "bubble", // the cheat code you have to type
  cheat : "bubble sort? O(N^2) and O(1). Don't make me laugh...", // the cheat (must change to be a function at some point)
  complete : 0 // keeps an eye out for how many of the letters have been typed
},{
  code : "insertion",
  cheat : "insertion sort, speed O(N) to O(N^2), with O(1) space. You will never get O(N), I swear to the chaotic array!",
  complete : 0
},{
  code : "shell",
  cheat : "O(NlogN) and O(1), I wish you had mastered shellsort, hehehe...",
  complete : 0
},{
  code : "quick",
  cheat : "quicksort, Wicked code. O(NlogN) speed, but O(lgN) consumption wears you down quickly",
  complete : 0
},{
  code : "3way",
  cheat : "3-way quicksort with O(N) to O(NlogN) speed and O(lgN) space! You can't possibly know this magic. So, get out of here!",
  complete : 0
},{
  code : "merge",
  cheat : "O(NlogN) and O(N), is merge sort the best you can do?",
  complete : 0
},{
  code : "heap",
  cheat : "O(NlogN) and O(1), heap sort vs heap sort, it is tie, not win!",
  complete : 0
},{
  code : "lsd",
  cheat : "LSD string sort operates at O(NW) and O(N), it beats heap sort on array of small numbers. Did fire dragon pass you this art?",
  complete : 0
},];

document.onkeydown = function (e) {
  var keyPress;

  if (typeof event !== 'undefined') {
    keyPress = event.keyCode;
  }
  else if (e) {
    keyPress = e.which;
  }
  letter = String.fromCharCode(keyPress).toLowerCase();

  for(var i = 0; i < cheats.length; i ++){
    cheat_code = cheats[i].code;
    characters_complete = cheats[i].complete;
    if(cheat_code.charAt(characters_complete) == letter){
      cheats[i].complete ++;
      if(cheats[i].complete == cheats[i].code.length){
        show_cheat(cheats[i].cheat);
        cheats[i].complete = 0;
      }
    }
    else{
      cheats[i].complete = 0;
    }
  }
  return false;
};

function show_cheat(text){
  $("#stage").append("<h1 class='cheat'>" + text + "</h1>").find(".cheat").delay(6000).fadeOut("slow");
}
</script>