bfl-itp · CleezyITP · Oct 15, 2014 · Oct 15, 2014 · Oct 15, 2014 · Oct 15, 2014
diff --git a/README.md b/README.md
@@ -1,53 +1,47 @@
 # "React" Assignment
 
-## Part I
+## Part II (UX Study)
 
-Create a learning resource that gives the user feedback – in other words, responds to the user's input/actions. Actions could include:
+For this assignment, I performed a mini user experience (UX) study with 3 of my coworkers.  
+I did not give any explanation of what the site they were looking at was, and invited them to interact with last week's version of the page, while vocalizing their experience. I took notes during the process and finally, asked them questions about their experience afterwards. 
 
-* Clicking
-* Typing
-* Scrolling
+### User 1
 
-or lack of any of those things. Feel free to pick a new subject, or dive deeper with one you've already used.
+#### Quotes:
+"What?!?"
+"Am I clicking the images?"
 
-### Examples
+#### Notes:
+From the conversation that followed this user test, it became clear that the purpose of the site was very unclear. The user reported that the instructions were vague and the images did not have clear meanings either. 
 
-1. [Operation](http://en.wikipedia.org/wiki/Operation_(game)), which uses sound to inform the player they are doing something wrong.
+### User 2
 
-    [![Operation](http://img.youtube.com/vi/_6MAkLJ79LE/0.jpg)](http://www.youtube.com/watch?v=_6MAkLJ79LE)
+#### Quotes:
+"Huh?!?"
+"What is this crap?!?"
 
-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).
+#### Notes:
+This user was particularly flustered with the lack of context on the page. He observed that the header did not clarify what the purpose of the site was. 
 
-## Part II
 
-### UX Study
+### User 3
 
-Do a mini user experience (UX) research study. While not a significant sample size, find (minimum) three people to test out your app. For starters,
+#### Quotes:
+"I'll choose this one because I am a data man, myself"
+"oh, i like the heart one"
 
-* Don't tell them what the tutorial is supposed to teach.
-* Write down as much as possible of their reactions.
-    * Recording audio/video of the session is helpful so that you can revisit later, but make sure to get their consent.
+#### Notes:
+This user chose images somewhat arbitrarily. He gravitated to pictures he found pleasing and not in relation to the question asked, or the content of the images.
 
-Use these steps/questions as a framework:
 
-1. Before
-    1. Hide the screen/tab with the app on it
-    1. Ask
-        1. "Have you ever done a usability study before?"
-            * Explain that they should speak their thoughts aloud throughout, and try to keep their thoughts unfiltered.s
-        1. "What is your prior experience with [broad concept]?"
-1. Show them the screen, without interacting with it
-    * "What do you see?"
-    * "What does this thing do?"
-1. Have them play with it for a minute or so
-    * Remind them to think aloud
-1. After
-    * "What did you learn from this?"
-    * "What was difficult/confusing?"
 
-Include their anonymized responses as "user stories" in the README, explaining what they responded to each question and then a conclusion of what you learned from them.
+## Decisions:
+
+I decided to rethink the title of the page and instead of "What to do?", renamed it, "How to Avoid Immigration Scams."
+I reworded the questions and reformatted the layout to ensure that it is clearer what is being asked for.
+
+The newest iteration can be found here:
+
+http://cleezyitp.github.io/react/
 
-### Iterate
 
-Take what you learned from your UX study, and iterate on your application. Include a description in the README of what changed.
diff --git a/c1.jpg b/c1.jpg
diff --git a/c2.jpg b/c2.jpg
diff --git a/img1.jpg b/img1.jpg
diff --git a/index.html b/index.html
@@ -1,9 +1,120 @@
-<!DOCTYPE html>
 <html>
-  <head>
-    <title>So-and-so's React Assignment</title>
-  </head>
-  <body>
-    YOUR PROJECT HERE
-  </body>
+<head>
+
+	<!-- // <script language="javascript" type="text/javascript" src= "jquery-ui.min.js"></script> -->
+  <style>
+      body {text-align: center; padding-top: 35px;}
+
+      h1{font-family: Helvetica;color:white;font-size:36px;}
+
+      i {position: absolute;}
+      text{font-family: Helvetica;color:black;font-size:10px}
+
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 1187px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
+#head,#top1,#top2,#top3,#mid1,#mid2, #mid4,#mid5, #mid6{
+margin:20px, 0, 10px, 0px;
+text-align: left;
+clear: right;
+float:left;
+}
+
+}
+/* Desktops and laptops ----------- */
+@media only screen  and (min-width : 1188px) {
+/* Styles */
+}
+
+/* Large screens ----------- */
+@media only screen and (min-width : 1778px) {
+#head{
+    position:relative;
+}
+
+.btn2, .btn3,.btn6{
+margin-right:500px;
+text-align: left;
+clear: right;
+float:left;
+}
+}
+
+
+
+
+
+
+
+
+
+    </style>	
+
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src="jquery-ui.min.js"></script>
+    <script language="javascript" type="text/javascript" src="react.js"></script>
+
+</head>
+
+<body>
+
+<div id="head" style="padding:40px;background:purple;">
+    <h1>How to Avoid Immigration Scams:</h1>
+    <h2 style="padding:0px;margin-top:0px;">(click the images to guess the best practice)</h2>
+    </div>
+
+    <div id="top1">
+    <text style="font-size:10;text-align:left;float:left;padding:20px;padding-bottom:100px; margin-left:20px;"><b>1) Who should you seek legal advice from?</b> <br> &nbsp;&nbsp; A ) A lawyer <br>&nbsp;&nbsp; B ) A notary </text>
+     </div>
+
+    <div id="mid1">  
+    <text style="float:left;margin-top:70px;margin-left:20px"><B>A.</B></text><input class= "btn1" type="image" src="c1.jpg" width="220" height="220" alt="submit!" style="margin-bottom:40px;margin-top:70px;border-style: solid;
+    border-width: 5px;float: left; margin-left:-50px; border-radius:50%;"</input>
+    </div>
+
+    <div id="mid2"> 
+    <text style="float:left;margin-top:70px;margin-left:70px;"><B>B.</B></text><input class="btn2" type="image" src="c2.jpg" width="220" height="220" alt="submit!" style="margin-bottom:40px;margin-top:70px;border-radius:50%; border-style: solid;
+    border-width: 5px;float: left;margin-left:0px"</input> 
+    </div>
+
+
+
+    <div id="top2">
+    <text style="font-size:10;text-align:left;float:left;padding:20px;padding-left:-150px;margin-right:30px;margin-left:20px;"><b>2) Which is more realistic? </b><br> &nbsp;&nbsp; A ) Guaranteed success <br>&nbsp;&nbsp; B ) The facts based on your case </text>
+    </div>
+
+    <div id="mid3"> 
+    <text style="float:left;margin-right: -450px;margin-left: 30px;margin-top:70px;"><B>A.</B> </text><input class="btn4" type="image" src="p2.jpg" width="220" height="220" alt="submit!" style="margin-top:70px;margin-bottom:40px; margin-left:0px;border-radius:50%;border-style: solid;
+    border-width: 5px;float: left;"</input>
+    </div>
+
+    <div id="mid4"> 
+    <text style="margin-top:70px;margin-left:70px;float:left;"><B>B.</B> </text><input class="btn3" type="image" src="p1.jpg" width="220" height="220" alt="submit!" style="margin-bottom:40px;border-radius:50%;border-style: solid;
+    border-width: 5px;float: left;margin-top:70px;"</input> 
+    </div>
+
+    <div id="top3">
+    <div id="bot"style="margin-top:40px">
+    <text style="padding-bottom:100px;text-align:left;float:left;padding:20px; font-size:10;margin-left:20px;"><b>3)What should you expect</b><br>&nbsp;&nbsp;<b>when it comes to forms? </b><br> &nbsp;&nbsp; A ) To get them for free <br>&nbsp;&nbsp; B ) To pay for them </text>
+    </div>
+
+    <div id="mid5"> 
+    <text style="float:left;margin-top:70px;margin-left:40px;"> <B>A.</B> </text>
+    <input class="btn5" type="image" src="pa1.jpg" width="220" height="220" alt="submit!" style="margin-bottom:40px;border-radius:50%;border-style: solid;
+    border-width: 5px;float: left; margin-left:-30px; margin-top:70px;"</input>
+    </div>
+
+    <div id="mid6"> 
+    <text style="float:left;margin-top:70px;margin-left:80px;"> <B>B.</B> </text>
+    <input class="btn6" type="image" src="pa2.jpg" width="220" height="220" alt="submit!" style="margin-top:70px;margin-bottom:40px;margin-left:-0px;border-radius:50%;border-style: solid;
+    border-width: 5px;float: left;"</input>  
+    </div>
+
+
+    <!-- //<button class="refresh">refresh</button> -->
+
+</body>
+
+
+
 </html>
diff --git a/jquery-ui.min.js b/jquery-ui.min.js
diff --git a/p1.jpg b/p1.jpg
diff --git a/p2.jpg b/p2.jpg
diff --git a/pa1.jpg b/pa1.jpg
diff --git a/pa2.jpg b/pa2.jpg
diff --git a/react.js b/react.js
@@ -0,0 +1,50 @@
+
+
+$( document ).ready(function() {
+
+$('.btn1').click(function() { 
+    alert("Correct! You should always seek a qualified lawyer with experience in immigration law."); 
+});
+
+$('.btn2').click(function() { 
+    alert("Wrong Answer! You should always seek a qualified lawyer with experience in immigration law."); 
+});
+
+$('.btn3').click(function() { 
+    alert("Correct! A lawyer that provides you with facts and figures about your case is being realistic."); 
+});
+
+$('.btn4').click(function() { 
+    alert("Wrong Answer! A lawyer that promises you 100% success in your application may be misleading you. "); 
+});
+
+$('.btn5').click(function() { 
+    alert("Correct! United States Citizen and Immigration Services are free. At most, you might be charged a small fee to help you to understand the forms. This doesnt have to be done thru a legal professional. Order forms by calling 1-800-870-3676"); 
+});
+
+$('.btn6').click(function() { 
+    alert("Wrong Answer! United States Citizen and Immigration Services are free. At most, you might be charged a small fee to help you to understand the forms. This doesnt have to be done thru a legal professional. Order forms by calling 1-800-870-3676"); 
+});
+
+console.log("ready!");
+
+});
+
+
+
+// });
+// });
+
+// $('.btn2').click(alert("Wrong Answer!"));
+
+
+// set the initial positions
+
+
+// after 660ms...
+// setTimeout(function() {
+//   // ...move the ball
+//   $('.fa-futbol-o').animate({
+//     left: 0
+//   }, 800, 'easeOutQuart');
+// }, 660);