added keystroke arrows and strings on score and index rendered image

public/scripts/functions.js

@@ -39,8 +39,8 @@ function populateHoneycomb( honeyCells , index){
     var renderedHoneyComb = document.getElementById("renderedHoneyComb");
     renderedHoneyComb.innerHTML="";
 
-    honeyComb.innerHTML = "<div class='honeycombIndex'>"+index+"</div>";
-    honeyComb.innerHTML += "<div class='honeycombScore'>"+honeyCells.score+"</div>";
+    honeyComb.innerHTML = "<div class='honeycombIndex'>Index: "+index+"</div>";
+    honeyComb.innerHTML += "<div class='honeycombScore'>Score:"+honeyCells.score+"</div>";
 
 
     for (var i = honeyCells.height - 1; i >= 0; i--) {
@@ -248,4 +248,19 @@ function loadRankingJs(scriptName) {
 function ringTheBell(){
 	document.getElementById("bell").play();
 }
+
+document.onkeydown = checkKey;
+
+function checkKey(e) {
+
+    e = e || window.event;
+
+    if ( document.getElementById("controlBar").className.indexOf("visible") != -1 ) {
+	    if (e.keyCode == '37') {
+	       slideBack();
+	    }else if(e.keyCode == '39') {
+	       slideForward();
+	    }
+	}
+}
 // jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};