Commit f2e20f33 by srpearce

Merge pull request #5998 from edx/sylvia/docs/1162

Sylvia/docs/1162
parents 3c5da9d3 3e779a52
...@@ -43,6 +43,17 @@ div.calc-main { ...@@ -43,6 +43,17 @@ div.calc-main {
position: relative; position: relative;
top: -36px; top: -36px;
// UI: input help table
.calculator-input-help-table {
margin: ($baseline/2) 0;
tr th, tr td {
vertical-align: top;
border: 1px solid $gray-l4;
padding: ($baseline/2);
}
}
form { form {
@extend .clearfix; @extend .clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -153,14 +164,6 @@ div.calc-main { ...@@ -153,14 +164,6 @@ div.calc-main {
margin: 0; margin: 0;
} }
table {
margin: 10px 0;
td, th {
padding: 2px 5px;
}
}
.calc-postfixes { .calc-postfixes {
margin: 10px auto; margin: 10px auto;
......
...@@ -230,6 +230,7 @@ ${fragment.foot_html()} ...@@ -230,6 +230,7 @@ ${fragment.foot_html()}
% if course.show_calculator: % if course.show_calculator:
<div class="calc-main"> <div class="calc-main">
<a title="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Open Calculator")}</a> <a title="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Open Calculator")}</a>
<div id="calculator_wrapper"> <div id="calculator_wrapper">
<form id="calculator"> <form id="calculator">
<div class="input-wrapper"> <div class="input-wrapper">
...@@ -237,107 +238,104 @@ ${fragment.foot_html()} ...@@ -237,107 +238,104 @@ ${fragment.foot_html()}
<div class="help-wrapper"> <div class="help-wrapper">
<p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p> <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1" aria-describedby="hint-instructions">${_("Hints")}</a> <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1" aria-describedby="hint-instructions">${_("Hints")}</a>
<ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
<li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">${_("Integers")}:</span> 2520</p></li> <ul id="calculator_input_help" class="help" aria-activedescendant="hint-moreinfo" role="tooltip" aria-hidden="true">
<li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">${_("Decimals")}:</span> 3.14 or .98</p></li> <li class="hint-item" id="hint-moreinfo" tabindex="-1">
<li class="hint-item" id="hint-scientific-notation" tabindex="-1"><p><span class="bold">${_("Scientific notation")}:</span> 1.2e-2 (=0.012), -4.4e+5 = -4.4e5 (=-440,000)</p></li> <p><span class="bold">${_("For detailed information, see <a href='http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html'>Entering Mathematical and Scientific Expressions</a> in the <a href='http://edx-guide-for-students.readthedocs.org/en/latest/index.html'>edX Guide for Students</a>.")}</span></p>
<li class="hint-item" id="hint-appending-postfixes" tabindex="-1"><p><span class="bold">${_("Appending SI postfixes")}:</span> 2.25k (=2,250)</p></li> </li>
<li class="hint-item" id="hint-supported-postfixes" tabindex="-1"><p><span class="bold">${_("Supported SI postfixes")}:</span></p>
<table class="calc-postfixes"> <li class="hint-item" id="hint-tips" tabindex="-1"><p><span class="bold">${_("Tips")}:</span> </p>
<ul>
<li class="hint-item" id="hint-paren" tabindex="-1"><p>Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.</p></li>
<li class="hint-item" id="hint-spaces" tabindex="-1"><p>Do not use spaces in expressions.</p></li>
<li class="hint-item" id="hint-howto-constants" tabindex="-1"><p>For constants, indicate multiplication explicitly (example: 5*c).</p></li>
<li class="hint-item" id="hint-howto-maffixes" tabindex="-1"><p>For affixes, type the number and affix without a space (example: 5c).</p></li>
<li class="hint-item" id="hint-howto-functions" tabindex="-1"><p>For functions, type the name of the function, then the expression in parentheses.</p></li>
</ul>
</li>
<li class="hint-item" id="hint-list" tabindex="-1">
<table class="calculator-input-help-table">
<tbody> <tbody>
<tr> <tr>
<td>%</td> <th scope="col">${_("To Use")}</th>
<td>percent</td> <th scope="col">${_("Type")}</th>
<td>0.01 = 1e-2</td> <th scope="col">${_("Examples")}</th>
</tr> </tr>
<tr> <tr>
<td>T</td> <th scope="row">${_("Numbers")}</th>
<td>tera</td> <td>Integers<br />
<td>1e12</td> Fractions<br />
Decimals
</td>
<td>2520<br />
2/3<br />
3.14, .98
</td>
</tr> </tr>
<tr> <tr>
<td>G</td> <th scope="row">${_("Operators")}</th>
<td>giga</td> <td>+ - * / (add, subtract, multiply, divide)<br />
<td>1e9</td> ^ (raise to a power)<br />
_ (add a subscript)<br />
|| (parallel resistors)
</td>
<td>x+(2*y)/x-1
x^(n+1)<br />
v_IN+v_OUT<br />
1||2
</td>
</tr> </tr>
<tr> <tr>
<td>M</td> <th scope="row">${_("Greek letters")}</th>
<td>mega</td> <td>Name of letter</td>
<td>1e6</td> <td>alpha<br />
lambda
</td>
</tr> </tr>
<tr> <tr>
<td>k</td> <th scope="row">${_("Constants")}</th>
<td>kilo</td> <td>c, e, g, i, j, k, pi, q, T</td>
<td>1000 = 1e3</td> <td>20*c<br />
418*T
</td>
</tr> </tr>
<tr> <tr>
<td>c</td> <th scope="row">${_("Affixes")}</th>
<td>centi</td> <td>Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)</td>
<td>0.01 = 1e-2</td> <td>20%<br />
20c<br />
418T
</td>
</tr> </tr>
<tr> <tr>
<td>m</td> <th scope="row">${_("Basic functions")}</th>
<td>milli</td> <td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
<td>0.001 = 1e-3</td> <td>abs(x+y)<br />
sqrt(x^2-y)
</td>
</tr> </tr>
<tr> <tr>
<td>u</td> <th scope="row">${_("Trigonometric functions")}</th>
<td>micro</td> <td>sin, cos, tan, sec, csc, cot<br />
<td>1e-6</td> arcsin, sinh, arcsinh, etc.<br />
</td>
<td>sin(4x+y)<br />
arccsch(4x+y)
</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td>n</td> <th scope="row">${_("Scientific notation")}</th>
<td>nano</td> <td>10^ and the exponent</td>
<td>1e-9</td> <td>10^-9</td>
</tr>
<tr>
<td>p</td>
<td>pico</td>
<td>1e-12</td>
</tr> </tr>
</tbody>
</table>
</li>
<li class="hint-item" id="hint-operators" tabindex="-1"><p><span class="bold">${_("Operators")}:</span> + - * / ^ and || (${_("parallel resistors function")})</p></li>
<li class="hint-item" id="hint-functions" tabindex="-1"><p><span class="bold">${_("Functions")}:</span> sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs, fact/factorial</p></li>
<li class="hint-item" id="hint-constants" tabindex="-1"><p><span class="bold">${_("Constants")}:</span></p>
<table>
<tbody>
<tr> <tr>
<td>j</td> <th scope="row">${_("e notation")}</th>
<td>=</td> <td>1e and the exponent</td>
<td>sqrt(-1)</td> <td>1e-9</td>
</tr>
<tr>
<td>e</td>
<td>=</td>
<td>${_("Euler's number")}</td>
</tr>
<tr>
<td>pi</td>
<td>=</td>
<td>${_("ratio of a circle's circumference to it's diameter")}</td>
</tr>
<tr>
<td>k</td>
<td>=</td>
<td>${_("Boltzmann constant")}</td>
</tr>
<tr>
<td>c</td>
<td>=</td>
<td>${_("speed of light")}</td>
</tr>
<tr>
<td>T</td>
<td>=</td>
<td>${_("Typical room temperature: 298.15 (Kelvin), same as 25C/77F")}</td>
</tr>
<tr>
<td>q</td>
<td>=</td>
<td>${_("fundamental charge")}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -345,11 +343,12 @@ ${fragment.foot_html()} ...@@ -345,11 +343,12 @@ ${fragment.foot_html()}
</ul> </ul>
</div> </div>
</div> </div>
<input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" aria-label="${_('Calculate')}" value="=" tabindex="-1" /> <input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" aria-label="${_('Calculate')}" value="=" tabindex="-1" />
<input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" /> <input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" />
</form> </form>
</div> </div>
</div> </div>
% endif % endif
<%include file="../modal/accessible_confirm.html" /> <%include file="../modal/accessible_confirm.html" />
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment