edx-platform/lms/templates/calculator/toggle_calculator.html

<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>

<div class="calc-main">
  <button title="${_('Open Calculator')}" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
    <span class="utility-control-label sr">${_("Open Calculator")}</span>
  </button>

  <div id="calculator_wrapper">
    <form id="calculator">
      <div class="input-wrapper">
        <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />

        <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>

          <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-moreinfo" role="tooltip" aria-hidden="true">
            <li class="hint-item" id="hint-moreinfo" tabindex="-1">
                <p><span class="bold">${_("For detailed information, see {math_link_start}Entering Mathematical and Scientific Expressions{math_link_end} in the {guide_link_start}edX Guide for Students{guide_link_end}.").format(
                  math_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">',
                  math_link_end='</a>',
                  guide_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/index.html">',
                  guide_link_end='</a>',
                )}</span></p>
            </li>

            <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>
                  <tr>
                    <th scope="col">${_("To Use")}</th>
                    <th scope="col">${_("Type")}</th>
                    <th scope="col">${_("Examples")}</th>
                  </tr>
                  <tr>
                    <th scope="row">${_("Numbers")}</th>
                    <td>${_("Integers")}<br />
                      ${_("Fractions")}<br />
                      ${_("Decimals")}
                    </td>
                    <td>2520<br />
                      2/3<br />
                      3.14, .98
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Operators")}</th>
                    ## Translators: Please do not translate mathematical symbols.
                    <td>${_("+ - * / (add, subtract, multiply, divide)")}<br />
                      ## Translators: Please do not translate mathematical symbols.
                      ${_("^ (raise to a power)")}<br />
                      ## Translators: Please do not translate mathematical symbols.
                      ${_("_ (add a subscript)")}<br />
                      ## Translators: Please do not translate mathematical symbols.
                      ${_("|| (parallel resistors)")}
                    </td>
                    <td>x+(2*y)/x-1
                      x^(n+1)<br />
                      v_IN+v_OUT<br />
                      1||2
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Greek letters")}</th>
                    <td>${_("Name of letter")}</td>
                    <td>alpha<br />
                      lambda
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Constants")}</th>
                    <td>c, e, g, i, j, k, pi, q, T</td>
                    <td>20*c<br />
                      418*T
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Affixes")}</th>
                    <td>${_("Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)")}</td>
                    <td>20%<br />
                      20c<br />
                      418T
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Basic functions")}</th>
                    <td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
                    <td>abs(x+y)<br />
                      sqrt(x^2-y)
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">${_("Trigonometric functions")}</th>
                    <td>sin, cos, tan, sec, csc, cot<br />
                      arcsin, sinh, arcsinh, etc.<br />
                    </td>
                    <td>sin(4x+y)<br />
                      arccsch(4x+y)
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    ## Translators: Please see http://en.wikipedia.org/wiki/Scientific_notation
                    <th scope="row">${_("Scientific notation")}</th>
                    ## Translators: 10^ is a mathematical symbol. Please do not translate.
                    <td>${_("10^ and the exponent")}</td>
                    <td>10^-9</td>
                  </tr>
                  <tr>
                    ## Translators: this is part of scientific notation. Please see http://en.wikipedia.org/wiki/Scientific_notation#E_notation
                    <th scope="row">${_("e notation")}</th>
                    ## Translators: 1e is a mathematical symbol. Please do not translate.
                    <td>${_("1e and the exponent")}</td>
                    <td>1e-9</td>
                  </tr>
                </tbody>
              </table>
            </li>
          </ul>
        </div>
      </div>

      <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" />
    </form>
  </div>
  </div>