Sync exercise dev mode layout with tutorials changes

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D710

css/khan-exercise-dev.css

@@ -3,12 +3,8 @@
     -webkit-transform: translatez(0);
 }
 
-#workarea {
-    width: 514px;
-}
-
-#hintsarea {
-    width: 494px;
+div.exercises-card {
+    width: 753px;
 }
 
 body.debug #workarea,

css/khan-exercise.css

@@ -84,7 +84,7 @@ table.limit th:first-child { text-align: right; }
 .radical .overline { border-top: 1px solid #000; padding: 6px 1px 0 3px; margin-left: -1px; }
 #answer_area .radical input[type=text] { width: 30px; }
 
-body.debug .graphie { outline: 1px dashed red; }
+body.debug .graphie { outline: 1px dashed #fdd; }
 .graphie svg { position: absolute; top: 0; left: 0; }
 
 #scratchpad { padding-left: 30px; overflow: hidden; display: none; }

css/khan-site.css

@@ -7907,12 +7907,8 @@ a.big-button:active > div {
     -webkit-transform: translatez(0);
 }
 
-#workarea {
-    width: 514px;
-}
-
-#hintsarea {
-    width: 494px;
+div.exercises-card {
+    width: 753px;
 }
 
 body.debug #workarea,

exercises/khan-exercise.html

@@ -18,20 +18,18 @@
     </div>
     <div id="answer_area_wrap"><div id="answer_area">
         <form id="answerform" action="/exercisedashboard" method="get" name="answerform">
-            <div id="answercontent" class="info-box fancy-scrollbar">
-                <a id="examples-show">Acceptable formats</a>
-                <ul id="examples" style="display: none"></ul>
+            <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px">
+            <div id="answercontent" class="info-box">
+                <span id="examples-show">Acceptable formats</span>
                 <span class="info-box-header">Answer</span>
-                <div id="solutionarea"></div>
+                <div id="solutionarea" class="fancy-scrollbar"></div>
+                <ul id="examples" style="display: none"></ul>
                 <div class="answer-buttons">
-                    <input type="submit" class="simple-button green full-width" id="check-answer-button" value="Check Answer"/>
-                    <input type="button" class="simple-button green full-width" id="next-question-button" style="display:none;" name="correctnextbutton" value="Correct! Next Question..."/>
-                    <span id="show-solution-button-container"></span>
-                    <div id="check-answer-results">
-                        <img id="sad" style="display: none;"/>
-                        <img id="happy" style="display: none;"/>
-                        <p class="check-answer-message info-box-sub-description"></p>
-                    </div>
+                <input type="button" class="simple-button green" id="check-answer-button" value="Check Answer"/>
+                <input type="button" class="simple-button green" id="next-question-button" style="display:none;" name="correctnextbutton" value="Correct! Next Question..."/>
+                <div id="positive-reinforcement"><img src="/images/face-smiley.gif" /></div>
+                <span id="show-solution-button-container"></span>
+                <div id="check-answer-results"><p class="check-answer-message info-box-sub-description"></p></div>
                 </div>
             </div>
             <div id="readonly" class="info-box">
@@ -40,7 +38,7 @@
                 <span class="info-box-sub-description">To work on problems like this, <a id="readonly-start" href="">start this exercise</a>.</span>
             </div>
             <div class="info-box hint-box">
-                <span class="info-box-header">Need help? Get a hint.</span>
+                <span class="info-box-header">Need help?</span>
                 <div id="get-hint-button-container">
                     <input id="hint" type="button" class="simple-button orange full-width" value="I'd like a hint" name="hint"/>
                 </div>
@@ -84,6 +82,7 @@
                     </ul>
                 </fieldset>
                 <label for="issue-title">Issue Title:<input type="text" name="issue-title" id="issue-title" /></label>
+                <label for="issue-email">Your Email (optional):<input type="text" name="issue-email" id="issue-email" /></label>
                 <label for="issue-body">Description of Issue:<textarea name="issue-body" id="issue-body"></textarea></label>
                 <input type="submit" class="simple-button" value="Submit Issue">
                 <a href="/#" id="issue-cancel">Cancel</a>
@@ -93,4 +92,3 @@
     </div></div>
     <div style="clear: both;"></div>
 </div>
-

khan-exercise.js

@@ -1735,7 +1735,7 @@ var Khan = (function() {
                     $("#hint").click();
                 }
             });
-            var debugWrap = $("#debug").empty();
+            var debugWrap = $("#debug").css({"margin-right": "15px"}).empty();
             var debugURL = window.location.protocol + "//" + window.location.host + window.location.pathname +
                 "?debug&problem=" + problemID;
 
@@ -1771,7 +1771,6 @@ var Khan = (function() {
                 var probID = $(prob).attr("id") || n;
                 links.append($("<div>")
                     .css({
-                        "width": "200px",
                         "padding-left": "20px",
                         "outline":
                             (problemID === probID || problemID === '' + n) ?
@@ -2922,6 +2921,7 @@ var Khan = (function() {
                 problemBag = makeProblemBag(problems, 10);
             }
 
+            $("#positive-reinforcement").hide();
             // Generate the initial problem when dependencies are done being loaded
             var answerType = makeProblem();
         }