bfl-itp · csurya · Oct 2, 2014 · Oct 9, 2014 · Oct 9, 2014
diff --git a/README.md b/README.md
@@ -16,3 +16,46 @@ or lack of any of those things. Feel free to pick a new subject, or dive deeper
 
 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).
+
+### Review of UX Study:
+
+Before showing the users the app, all 3 users said that they have done a usability study before.
+The users agreed that most of their user testing experiences were confusing, either because
+the maker didn't explain properly what the application was supposed to do, or the user
+couldn't figure out what the objective or the methodology of operation of the application is (i.e.
+what is it supposed to do and why?)
+
+At first, I just showed the 1st picture of the Chrysler building along with the previous
+and next buttons below it, and covered up the texts above the image. After showing them that
+and asking them not to interact with it just yet,they said that they just saw a picture of the
+Chrysler building, and they weren't sure what they were supposed to do.
+
+After letting them interact with it, they realized that it is astep by step methodology
+on how to make a sketch of the Chrysler building.
+
+What they learned from this was how to learn to sketch the Chrysler building in a
+simple way. One of the users said that the app has a previous & a next button,
+that allow her to see the progression of the pictures, and that
+helped her to understand what this series of sketches is really about.
+
+One of the users commented that the main difficulty was that he didn't know
+the context or the objective of the app. Was the user simply learning how to sketch
+a building, or is there an overarching objective to this small exercise? At first
+he wasn't really sure what he was doing, he was simply clicking the buttons,
+going through the motion without any clear objective in mind.
+
+In conclusion, I learned that context is important - and that is missing from my app.
+The user wanted to know if learning how to sketch a building is all there is to it,
+or if this is part of another, larger learning process. The context could include
+a background information on why this app is made (e.g. was there, in general, a confusion over
+how to transform 3D objects in real life into 2D sketches? what is the intended
+users' age range for this app?), and a clear objective of the app (what does it hope
+to accomplish? is it simply to teach people to sketch things, or something else?)
+
+*What could be changed from my current react app*:
+Since what is missing from my app is the context, I imagine that it could be beneficial to
+have a 3D sketch of a building, that then rotates itself until one side of the building faces the
+screen. Then an animation will start that depict the details of the building slowly disappearing
+and the sketch getting simpler,until it is possible to be sketched by hand. Then the actual
+sketching process (like the one in the current app) would begin in a short animation.
+Perhaps with this, the context & objective could be, implicitly, inferred?
diff --git a/index.html b/index.html
@@ -1,9 +1,77 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>So-and-so's React Assignment</title>
+    <title>Chrisanthy's React Assignment</title>
+
+    <style>
+    h1, li{
+      text-align:center;
+    }
+    </style>
+
+    <h1> 6 Steps to Sketching the Chrysler Building </h1>
+    <p>
+      <li>New lines in the next step are highlighted in <span style="color:blue">blue</span><br></li>
+      <li>Erase the dashed lines</li>
+    </p>
   </head>
+
   <body>
-    YOUR PROJECT HERE
+    <p>
+    <img id='image' src="http://www.alilsegue.com/wp-content/uploads/2014/10/0bft.jpg"
+    alt="sketch1" style="display:block; margin:0 auto;" width= "250" height = "500">
+    </p>
+
+    <button onclick="prevStep()" style ="display:block; margin:0 auto;">Previous Step</button>
+    <button onclick="nextStep()" style ="display:block; margin:0 auto;">Next Step</button>
+
+
+    <script>
+    //count number of button clicks
+    countS = 0;
+
+    //put images into arrays
+    var imagesArr = new Array();
+
+    imagesArr [0] = new Image();
+    imagesArr[0].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/0bft.jpg';
+
+    imagesArr [1] = new Image();
+    imagesArr[1].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/1bft.jpg';
+
+    imagesArr [2] = new Image();
+    imagesArr[2].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/2bft.jpg';
+
+    imagesArr [3] = new Image();
+    imagesArr[3].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/3bft.jpg';
+
+    imagesArr [4] = new Image();
+    imagesArr[4].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/4bft.jpg';
+
+    imagesArr [5] = new Image();
+    imagesArr[5].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/5bft.jpg';
+
+    imagesArr [6] = new Image();
+    imagesArr[6].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/6bft.jpg';
+
+
+    function nextStep(){
+      if(countS<imagesArr.length-1){
+        countS++;
+      }else{
+        countS = 0;
+      }
+      document.getElementById("image").src = imagesArr[countS].src;
+    }
+
+    function prevStep(){
+      if(countS>0){
+        countS--;
+      }else{
+        countS = 0;
+      }
+      document.getElementById("image").src = imagesArr[countS].src;
+    }
+    </script>
   </body>
 </html>