Guiding the user through god mode key entry

README.md

@@ -1,18 +1,53 @@
-# "React" Assignment
+# Iconomation Assignment
 
-Create a learning resource that gives the user feedback – in other words, responds to the user's input/actions. Actions could include:
+Create an animation that walks the viewer through some process, using only icons/emoticons/emoji. See http://bfl-itp.github.io/iconomation/ for a demo. Even without knowing *any* JavaScript, the code in [`index.html`](index.html) and [`scripts/iconomation.js`](scripts/iconomation.js) should be enough to get you started. What's included on the page:
 
-* Clicking
-* Typing
-* Scrolling
+* [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout)
+* [jQuery](http://jquery.com/) – see these docs in particular:
+    * [`.animate()`](http://api.jquery.com/animate/)
+    * [`.css()`](http://api.jquery.com/css/)
+    * [Easing functions](http://jqueryui.com/easing/)
+* [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
+* [Emoji CSS](http://afeld.github.io/emoji-css/)
 
-or lack of any of those things. Feel free to pick a new subject, or dive deeper with one you've already used.
+Feel free to add any images or [other icon libraries](http://weloveiconfonts.com/) you need.
 
-## Examples
 
-1. [Operation](http://en.wikipedia.org/wiki/Operation_(game)), which uses sound to inform the player they are doing something wrong.
+User Studies: Direct Transcripts
+------------
 
-    [![Operation](http://img.youtube.com/vi/_6MAkLJ79LE/0.jpg)](http://www.youtube.com/watch?v=_6MAkLJ79LE)
+**User 1**
 
-1. An essay helper, where the user needs the their entry in a [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) to have five paragraphs and be 300-500 words.
-1. An essay helper which prompts the user to make sure they are still paying attention if they haven't written anything in a few minutes, but has the option to pause (for dinner, bathroom breaks, and The Voice).
+IDDQD... I don't know why it did not...
+I'm refreshing
+I'm really confused as to why it's not doing anything
+I pressed keys that were on the screen, and then the face showed up, and I expected something to happen after the face showed up.
+It would be interesting to play with that more I mean, once you typed that in, you have to type it again.
+Because that's what I guessed I was supposed to do and then did that once realized it was wrong and then didn't try it again.
+But if I had to type it, you know, a second time manditorily, maybe that would reiterate what I'm learning.
+
+**User 2**
+
+Okay it was clear I was supposed to press those keys in that order, I'm not really sure what I'm supposed to do now. 
+
+Yea so I think that because it looks like a game, I was like, oh the head appeared, that's cool but then I thought I was supposed to do something to like start the game or something, so I would say, maybe you could add some text or something else that's like "You did it" just so that people know, like, that was the point and it's done so you're not looking for something else to do.
+
+**User 3**
+
+So it looks like a first person shooter
+I'm trying to click around to see if it will move the perspective of the first person shooter around. I'm trying to click on objects to see if I can either pick them up or change the rotation of the view.
+And now I'm clicking on the arms area to try to view what kind of arms I might have.
+And I refresh again...I'm refreshing again...
+I'm trying my arrows.
+...D pops up
+D Q D it seems you're God IDDQD I'm trying to type the sequence again to see if something happens.
+
+I'd say first person shooters are my least favorite genre of video game, so I think if you had a good user that is both familiar with the genre but unfamiliar with how to do anything with a FPS.
+So I tried some of the traditional things, I tried using the cursor keys to move around, I tried to click around. I didn't quite get that I was supposed to type I, but you know, it did look like a key. Maybe it needs something to get me to press the I, and then I would probably press the rest of the keys on my own.
+
+User Studies: Learnings
+-----------------------
+ * Make the background less busy
+ * Have the user repeat the code 
+ * Make it clearer when the user is done
+ * Provide a visual indicator to type the first key

index.html

@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>So-and-so's React Assignment</title>
+    <title>moneppo's React Assignment</title>
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="main.css" rel="stylesheet">
+    <link href="http://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="scripts/jquery-ui.min.js"></script>
   </head>
   <body>
-    YOUR PROJECT HERE
+    <h1>God Mode</h1>
+    <div class="playspace"></div>
+    <p><em>refresh to see it again</em></p>
+    <script src="scripts/iconomation.js"></script>
   </body>
 </html>

main.css

@@ -0,0 +1,40 @@
+body {
+  text-align: center;
+	background-color: grey;
+}
+
+.playspace {
+  width: 600px;
+  height: 400px;
+  font-size: 36px;
+  margin: auto;
+  position: relative;
+  background-image: url(doom.png);
+  background-size: contain;
+}
+
+i {
+  position: absolute;
+}
+
+.message {
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 10%;
+}
+
+.key-i {
+	background-image: url(key-i.png);
+}
+
+.key-d {
+	background-image: url(key-d.png);
+}
+
+.key-q {	
+	background-image: url(key-q.png);
+}
+
+.hidden {
+	opacity: 0;
+}

notes

@@ -0,0 +1,24 @@
+iddqd I don't know why it did not...
+I'm refreshing
+I'm really confused as to why it's not doing anything
+I pressed keys that were on the screen, and then the face showed up, and I expected something to happen after the face showed up.
+It would be interesting to play with that more I mean, once you typed that in, you have to type it again.
+Because that's what I guessed I was supposed to do and then did that once realized it was wrong and then didn't try it again.
+But if I had to type it, you know, a second time manditorily, maybe that would reiterate what I'm learning.
+
+
+Okay it was clear I was supposed to press those keys in that order, I'm not really sure what I'm supposed to do now. 
+
+Yea so I think that because it looks like a game, I was like, oh the head appeared, that's cool but then I thought I was supposed to do something to like start the game or something, so I would say, maybe you could add some text or something else that's like "You did it" just so that people know, like, that was the point and it's done so you're not looking for something else to do.
+
+
+So it looks like a first person shooter
+I'm trying to click around to see if it will move the perspective of the first person shooter around. I'm trying to click on objects to see if I can either pick them up or change the rotation of the view.
+And now I'm clicking on the arms area to try to view what kind of arms I might have.
+And I refresh again...I'm refreshing again...
+I'm trying my arrows.
+...D pops up
+D Q D it seems you're God IDDQD I'm trying to type the sequence again to see if something happens.
+
+I'd say first person shooters are my least favorite genre of video game, so I think if you had a good user that is both familiar with the genre but unfamiliar with how to do anything with a FPS.
+So I tried some of the traditional things, I tried using the cursor keys to move around, I tried to click around. I didn't quite get that I was supposed to type I, but you know, it did look like a key. Maybe it needs something to get me to press the I, and then I would probably press the rest of the keys on my own.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react",
+  "name": "iconomation",
   "private": "true",
   "scripts": {
     "test": "grunt"

scripts/iconomation.js

@@ -0,0 +1,70 @@
+var code = ['i','d','d','q','d'];
+
+
+// Add the icons
+for (var i in code) {
+	$('.playspace').append('<i class="hidden em key-' + code[i] + 
+		'" id="type-' + i + '"></i>');
+	$('#type-' + i).css({
+			top: 200 - 32,
+			left: calcCentered(i)
+	});
+}
+
+function calcCentered(index) {
+	var width = code.length * 64;
+	return 300 - width / 2 + index * 64;
+}
+
+$('.playspace').append('<i class="hidden em em-godmode"></i>');
+$('.playspace').append('<span class="message hidden">That\'s the code for god mode in DOOM!</span>');
+$('.em-godmode').css({
+	top: 200 - 96,
+	left: 300 - 32
+});
+
+function fadeOut() {
+    $("#type-0").animate({opacity:"0.5"}, 500, fadeIn);
+}
+
+function fadeIn() {
+	 $("#type-0").animate({opacity:"1.0"}, 500, fadeOut);
+}
+
+
+fadeOut();
+
+var codeItem = 0;
+$(document).keydown(function(event) {
+  var event = event || window.event;
+  var letter = String.fromCharCode(event.keyCode).toLowerCase();
+  if (letter == code[codeItem]) {
+		if (codeItem==0) {
+			$("#type-0").stop();
+			$('#type-0').css("opacity", 1.0);
+		}
+    codeItem++;
+    if (codeItem == code.length) {
+      $('.em-godmode').animate({
+        opacity: 1.0
+      }, 1000);
+			$('.message').animate({
+        opacity: 1.0
+      }, 1000);
+      $(document).off();
+    } else {
+      $('#type-' + codeItem).animate({
+        opacity: 1.0
+      }, 500);
+    }
+  } else {
+    for (var i = 1; i < code.length; i++) {
+      $('#' + 'type-' + i).animate({
+        opacity: 0.0
+      }, 1000);
+    }
+    codeItem = 0;
+  }
+});
+
+ $('#type-0').animate({opacity: 1.0}, 500);