Permalink
Browse files

Consolidate answer input box width CSS so it doesn't leak between exe…

…rcises #FIXIT

Test Plan: Locally check each exercise/problem type still looks the same(ish)

Reviewers: alpert, cbhl

Reviewed By: cbhl

Differential Revision: http://phabricator.khanacademy.org/D2056
  • Loading branch information...
1 parent e137d0e commit 725121ff8379ec8ffc35d082694ebf783698350c @beneater beneater committed Feb 21, 2013
Showing with 208 additions and 489 deletions.
  1. +56 −0 css/khan-exercise.css
  2. +2 −7 exercises/absolute_value_equations.html
  3. +2 −8 exercises/adding_and_subtracting_complex_numbers.html
  4. +1 −7 exercises/adding_vectors.html
  5. +2 −13 exercises/area_of_triangles_1.html
  6. +1 −6 exercises/completing_the_square_1.html
  7. +1 −6 exercises/completing_the_square_2.html
  8. +2 −7 exercises/converting_between_point_slope_and_slope_intercept.html
  9. +1 −6 exercises/converting_between_point_slope_and_standard_form.html
  10. +0 −5 exercises/defined_and_undefined_matrix_operations.html
  11. +0 −5 exercises/defined_and_undefined_matrix_operations_alternative.html
  12. +3 −8 exercises/distance_between_point_and_line.html
  13. +21 −30 exercises/distance_formula.html
  14. +2 −7 exercises/dividing_complex_numbers.html
  15. +2 −8 exercises/domain_and_range_0.5.html
  16. +1 −7 exercises/equation_of_a_circle_1.html
  17. +1 −7 exercises/equation_of_a_circle_2.html
  18. +2 −8 exercises/equation_of_a_hyperbola.html
  19. +3 −9 exercises/equation_of_an_ellipse.html
  20. +4 −10 exercises/exponent_rules.html
  21. +0 −5 exercises/exponents_2_alternative.html
  22. +2 −8 exercises/factor_expressions_by_grouping.html
  23. +4 −14 exercises/functions_2.html
  24. +4 −4 exercises/geometry_proofs_intro.html
  25. +2 −7 exercises/graphs_of_inequalities.html
  26. +2 −7 exercises/graphs_of_sine_and_cosine.html
  27. +4 −9 exercises/line_relationships.html
  28. +2 −8 exercises/matrix_dimensions.html
  29. +2 −8 exercises/matrix_dimensions_alternative.html
  30. +2 −7 exercises/midpoint_formula.html
  31. +4 −10 exercises/multiplying_and_dividing_scientific_notation.html
  32. +2 −8 exercises/multiplying_complex_numbers.html
  33. +0 −4 exercises/ordering_fractions.html
  34. +1 −6 exercises/parabola_intuition_3.html
  35. +4 −10 exercises/pile_patterns.html
  36. +1 −4 exercises/plugging_in_values.html
  37. +3 −8 exercises/point_slope_form.html
  38. +3 −9 exercises/range_of_a_function.html
  39. +1 −6 exercises/reading_pictographs_1.html
  40. +3 −8 exercises/reading_pictographs_2.html
  41. +1 −6 exercises/rotation_of_polygons.html
  42. +2 −7 exercises/scientific_notation.html
  43. +2 −8 exercises/simplifying_expressions_with_exponents.html
  44. +5 −23 exercises/simplifying_rational_expressions_1.html
  45. +4 −7 exercises/slope_intercept_form.html
  46. +1 −4 exercises/solving_for_the_x-intercept.html
  47. +2 −8 exercises/solving_quadratics_by_factoring.html
  48. +2 −8 exercises/solving_quadratics_by_factoring_2.html
  49. +1 −6 exercises/solving_quadratics_by_taking_the_square_root.html
  50. +1 −6 exercises/square_roots_2.html
  51. +4 −9 exercises/standard_deviation.html
  52. +4 −9 exercises/systems_of_equations_with_elimination.html
  53. +4 −9 exercises/systems_of_equations_with_elimination_0.5.html
  54. +4 −9 exercises/systems_of_equations_with_substitution.html
  55. +8 −14 exercises/systems_of_equations_word_problems.html
  56. +1 −7 exercises/telling_time.html
  57. +1 −7 exercises/telling_time_0.5.html
  58. +2 −7 exercises/translations_of_points_and_polygons.html
  59. +1 −6 exercises/triangle_inequality_theorem.html
  60. +4 −9 exercises/variance.html
  61. +1 −6 exercises/vertex_of_a_parabola.html
View
@@ -81,6 +81,38 @@ table.limit th:first-child { text-align: right; }
#answer_area input[type=number] {
width: 80px;
}
+#answer_area .short20 input[type=text],
+#answer_area .short20 input[type=number] {
+ width: 20px;
+}
+#answer_area .short25 input[type=text],
+#answer_area .short25 input[type=number] {
+ width: 25px;
+}
+#answer_area .short28 input[type=text],
+#answer_area .short28 input[type=number] {
+ width: 28px;
+}
+#answer_area .short30 input[type=text],
+#answer_area .short30 input[type=number] {
+ width: 30px;
+}
+#answer_area .short32 input[type=text],
+#answer_area .short32 input[type=number] {
+ width: 32px;
+}
+#answer_area .short35 input[type=text],
+#answer_area .short35 input[type=number] {
+ width: 35px;
+}
+#answer_area .short40 input[type=text],
+#answer_area .short40 input[type=number] {
+ width: 40px;
+}
+#answer_area .short50 input[type=text],
+#answer_area .short50 input[type=number] {
+ width: 50px;
+}
#readonly { display: none; }
.radical .surd { font: 150% Arial; padding: 0 0 0 5px; }
@@ -816,3 +848,27 @@ table.periodic-table td.element div.symbol {
table.periodic-table td.element div.weight {
font-size: 10px;
}
+
+span.hover-hint {
+ color: #005987;
+ border-bottom: 1px dashed #005987;
+}
+span.hover-hint:hover {
+ color: #678d00;
+ border-bottom: 1px dashed #678d00;
+ cursor: pointer;
+}
+
+#solutionarea table.rational-exp td {
+ text-align: center;
+ vertical-align: middle;
+ padding-left: 4px;
+ padding-right: 4px;
+}
+#solutionarea table.rational-exp td.soln-top {
+ padding-bottom: 1px;
+}
+#solutionarea table.rational-exp td.soln-bot {
+ padding-top: 1px;
+ border-top: 1px solid black;
+}
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Absolute value equations</title>
<script src="../khan-exercise.js"></script>
- <style>
- #answer_area .short input[type=text] {
- width: 40px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -54,9 +49,9 @@
<var>SOLUTION</var>
</div>
<p class="input-format">
- <code>x = </code> <span class="entry short"></span>
+ <code>x = </code> <span class="entry short40"></span>
&nbsp; or
- <code>x = </code> <span class="entry short"></span>
+ <code>x = </code> <span class="entry short40"></span>
</p>
</div>
<p></p>
@@ -4,12 +4,6 @@
<meta charset="UTF-8" />
<title>Adding and subtracting complex numbers</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #solutionarea input[type="text"],
- #solutionarea input[type="number"] {
- width: 50px
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -61,11 +55,11 @@
</code>
</p>
<div class="solution" data-type="multiple">
- <span class="sol" data-forms="integer, decimal" data-fallback="0" data-inexact data-max-error="0.01">
+ <span class="sol short50" data-forms="integer, decimal" data-fallback="0" data-inexact data-max-error="0.01">
<var>ANSWER_REAL</var>
</span>
<code>+</code>
- <span class="sol" data-forms="integer, decimal" data-fallback="1" data-inexact data-max-error="0.01">
+ <span class="sol short50" data-forms="integer, decimal" data-fallback="1" data-inexact data-max-error="0.01">
<var>ANSWER_IMAG</var>
</span>
<code>i</code>
@@ -4,12 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Adding vectors</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area input[type=text],
- #answer_area input[type=number] {
- width: 40px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -52,7 +46,7 @@
</div>
<div class="solution" data-type="multiple">
- <p><span class="sol" data-forms="integer" data-fallback="1"><var>AX + BX</var></span> <code>\hat\imath + {}</code><span class="sol" data-forms="integer" data-fallback="1"><var>AY + BY</var></span> <code>\hat\jmath</code></p>
+ <p><span class="sol short40" data-forms="integer" data-fallback="1"><var>AX + BX</var></span> <code>\hat\imath + {}</code><span class="sol short40" data-forms="integer" data-fallback="1"><var>AY + BY</var></span> <code>\hat\jmath</code></p>
</div>
</div>
</div>
@@ -4,17 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area of triangles 1</title>
<script src="../khan-exercise.js"></script>
- <style>
- span.hover {
- color: #005987;
- border-bottom: 1px dashed #005987;
- }
- span.hover:hover {
- color: #678d00;
- border-bottom: 1px dashed #678d00;
- cursor: pointer;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -171,9 +160,9 @@
<p>
The triangle takes up half as much area as the
rectangle (look at the
- <span class="hover" id="left-part">left part</span>
+ <span class="hover-hint" id="left-part">left part</span>
and the
- <span class="hover" id="right-part">right part</span>
+ <span class="hover-hint" id="right-part">right part</span>
separately to see how), so the area of the triangle is
<code>\frac{1}{2}</code> of
<code><var>B</var> \times <var>H</var></code>.
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Completing the square 1</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area .short input[type=text] {
- width: 32px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -28,7 +23,7 @@
<div class="set-sol"><var>X1</var></div>
<div class="set-sol"><var>X2</var></div>
<div class="input-format">
- <p><code>x = {}</code><span class="entry short"></span><code>\quad\text{or}\quad x = {}</code><span class="entry short"></span></p>
+ <p><code>x = {}</code><span class="entry short32"></span><code>\quad\text{or}\quad x = {}</code><span class="entry short32"></span></p>
</div>
</div>
</div>
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Completing the square 2</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area .short input[type=text] {
- width: 32px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -30,7 +25,7 @@
<div class="set-sol"><var>X1</var></div>
<div class="set-sol"><var>X2</var></div>
<div class="input-format">
- <p><code>x = {}</code><span class="entry short"></span><code>\quad \text{or} \quad x = {}</code><span class="entry short"></span></p>
+ <p><code>x = {}</code><span class="entry short32"></span><code>\quad \text{or} \quad x = {}</code><span class="entry short32"></span></p>
</div>
<p class="example">integers, like <code>6</code></p>
<p class="example"><em>simplified proper</em> fractions, like <code>3/5</code></p>
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Converting between point slope and slope intercept form</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area input[type=text] {
- width: 30px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -25,7 +20,7 @@
<p>In other words, if the equation is rewritten to look like <code>y = mx + b</code>, what are the values of <code>m</code> and <code>b</code>?</p>
<p><code>y - <var>y1</var> = <var>m</var>(x - <var>x1</var>)</code></p>
<div class="solution" data-type="multiple">
- <p><code>y = \space</code><span class="sol" data-forms="integer"><var>m</var></span><code>\space \cdot x + \space</code><span class="sol" data-forms="integer"><var>b</var></span></p>
+ <p><code>y = \space</code><span class="sol short30" data-forms="integer"><var>m</var></span><code>\space \cdot x + \space</code><span class="sol short30" data-forms="integer"><var>b</var></span></p>
</div>
<div class="hints">
<div>
@@ -43,7 +38,7 @@
<div>
<p>Combine the constant terms on the right.</p>
<p><code>y = <var>expr([ "*", m, "x" ])</var> + <var>b</var></code></p>
- <p>The equation is now in slope-intercept form, with a slope of <code><var>m</var></code> and a y-intercept of <code><var>b</var></code>.</p>
+ <p>The equation is now in slope-intercept form, with a slope of <code><var>m</var></code> and a y-intercept of <code><var>b</var></code>.</p>
</div>
</div>
</div>
@@ -4,11 +4,6 @@
<meta charset="UTF-8" />
<title>Converting between point-slope and standard form</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area input[type=text] {
- width: 23px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -32,7 +27,7 @@
<!-- Custom validation is used to allow for x to be any value. If we allowed a finite range for x, then we could have a set of solutions.-->
<div class="solution" data-type="custom">
<div class="instruction">
- <p><code>y - {}</code><input id="solution_y" type="number"></input><code>{} = {}</code><input id="solution_m" type="number"></input><code>(x - {}</code><input id="solution_x" type="number"></input><code>)</code></p>
+ <p class="short20"><code>y - {}</code><input id="solution_y" type="number"></input><code>{} = {}</code><input id="solution_m" type="number"></input><code>(x - {}</code><input id="solution_x" type="number"></input><code>)</code></p>
</div>
<div class="guess">
[ $( '#solution_x' ).val(), $( '#solution_y' ).val(), $( '#solution_m' ).val() ]
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Defined and undefined matrix operations</title>
<script src="../khan-exercise.js"></script>
- <style>
- #answer_area .sol input[type=text] {
- width: 20px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -4,11 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Defined and undefined matrix operations</title>
<script src="../khan-exercise.js"></script>
- <style>
- #answer_area .sol input[type=text] {
- width: 20px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -4,11 +4,6 @@
<meta charset="UTF-8" />
<title>Distance between point and line</title>
<script src="../khan-exercise.js"></script>
- <style type="text/css">
- #answer_area input[type=text] {
- width: 40px;
- }
- </style>
</head>
<body>
<div class="exercise">
@@ -58,7 +53,7 @@
</div>
</div>
<div class="solution" data-type="radical">
- <p><span class="sol"><var>DISTANCE</var></span></p>
+ <p><var>DISTANCE</var></p>
</div>
<div class="hints">
<p>First, find the equation of the perpendicular line that passes through <code>\color{red}{(<var>X1</var>, <var>Y1</var>)}</code>.</p>
@@ -136,7 +131,7 @@
</div>
</div>
<div class="solution" data-type="radical">
- <p><span class="sol"><var>pow( Y1 - B1, 2 )</var></span></p>
+ <p><span><var>pow( Y1 - B1, 2 )</var></span></p>
</div>
<div class="hints">
<p>First, find the equation of the perpendicular line that passes through <code>\color{red}{(<var>X1</var>, <var>Y1</var>)}</code>.</p>
@@ -200,7 +195,7 @@
</div>
</div>
<div class="solution" data-type="radical">
- <p><span class="sol"><var>pow( X1 - B1, 2 )</var></span></p>
+ <p><span><var>pow( X1 - B1, 2 )</var></span></p>
</div>
<div class="hints">
<p>First, find the equation of the perpendicular line that passes through <code>\color{red}{(<var>X1</var>, <var>Y1</var>)}</code>.</p>
Oops, something went wrong.

0 comments on commit 725121f

Please sign in to comment.