Skip to content

E
edx-platform
Commit b7438bc9 by polesye
Options

BLD-400: Update the calculator hints tooltip.

parent 51fa7e0c
Showing with 163 additions and 37 deletions
CHANGELOG.rst
......@@ -5,6 +5,8 @@ These are notable changes in edx-platform. This is a rolling list of changes,
in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected.
Blades: Update the calculator hints tooltip with full information. BLD-400.
Blades: Fix transcripts 500 error in studio (BLD-530)
Blades: Allow multiple strings as the correct answer to a string response question. BLD-474.
......
lms/static/coffee/fixtures/calculator.html
......@@ -7,7 +7,7 @@
<input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper">
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" aria-controls="calculator_input_help" aria-expanded="false" tabindex="-1">Hints</a>
<dl id="calculator_input_help" class="help"></dl>
<div id="calculator_input_help" class="help" role="tooltip" aria-hidden="true"></div>
</div>
</div>
<input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
......
lms/static/coffee/spec/calculator_spec.coffee
......@@ -55,11 +55,26 @@ describe 'Calculator', ->
it 'show the help overlay', ->
@calculator.helpShow()
expect($('.help')).toHaveClass('shown')
expect($('.help')).toHaveAttr('aria-hidden', 'false')
describe 'helpHide', ->
it 'show the help overlay', ->
@calculator.helpHide()
expect($('.help')).not.toHaveClass('shown')
expect($('.help')).toHaveAttr('aria-hidden', 'true')
describe 'handleKeyDown', ->
it 'on pressing Esc the hint becomes hidden', ->
@calculator.helpShow()
e = jQuery.Event('keydown', { which: 27 } );
$(document).trigger(e);
expect($('.help')).not.toHaveClass 'shown'
it 'On pressing other buttons the hint continue to show', ->
@calculator.helpShow()
e = jQuery.Event('keydown', { which: 32 } );
$(document).trigger(e);
expect($('.help')).toHaveClass 'shown'
describe 'calculate', ->
beforeEach ->
......
lms/static/coffee/src/calculator.coffee
......@@ -10,6 +10,9 @@ class @Calculator
)
.click (e) ->
e.preventDefault()
$(document).keydown $.proxy(@handleKeyDown, @)
$('div.help-wrapper')
.focusin($.proxy @helpOnFocus, @)
.focusout($.proxy @helpOnBlur, @)
......@@ -24,14 +27,14 @@ class @Calculator
$('div.calc-main').toggleClass 'open'
if $calc.hasClass('closed')
$calcWrapper
.find('input, a, dt, dd')
.find('input, a')
.attr 'tabindex', -1
else
text = gettext('Close Calculator')
isExpanded = true
$calcWrapper
.find('input, a, dt, dd')
.find('input, a,')
.attr 'tabindex', 0
# TODO: Investigate why doing this without the timeout causes it to jump
# down to the bottom of the page. I suspect it's because it's putting the
......@@ -57,13 +60,21 @@ class @Calculator
@helpHide()
helpShow: ->
$('.help').addClass 'shown'
$('#calculator_hint').attr 'aria-expanded', true
$('.help')
.addClass('shown')
.attr('aria-hidden', false)
helpHide: ->
if not @isFocusedHelp
$('.help').removeClass 'shown'
$('#calculator_hint').attr 'aria-expanded', false
$('.help')
.removeClass('shown')
.attr('aria-hidden', true)
handleKeyDown: (e) ->
ESC = 27
if e.which is ESC and $('.help').hasClass 'shown'
@isFocusedHelp = false
@helpHide()
calculate: ->
$.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
......
lms/static/sass/course/layout/_calculator.scss
......@@ -120,39 +120,48 @@ div.calc-main {
display: block;
}
dl {
.help {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 3px #999;
color: #333;
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -122px;
bottom: 57px;
@include transition(none);
width: 600px;
height: 0;
overflow: hidden;
pointer-events: none;
display: none;
&.shown {
height: auto;
opacity: 1;
overflow: visible;
display: block;
pointer-events: auto;
}
dt {
clear: both;
float: left;
.bold {
font-weight: bold;
padding-right: 12px;
}
dd {
float: left;
margin-left: 0;
p, p+p {
margin: 0;
}
table {
margin: 10px 0;
td, th {
padding: 2px 5px;
}
}
.calc-postfixes {
margin: 10px auto;
td, th {
padding: 2px 15px;
}
}
}
}
......
lms/templates/courseware/courseware.html
......@@ -218,24 +218,113 @@ ${fragment.foot_html()}
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />
<div class="help-wrapper">
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" aria-controls="calculator_input_help" aria-expanded="false" tabindex="-1">${_("Hints")}</a>
<dl id="calculator_input_help" class="help">
<dt tabindex="-1">${_("Suffixes:")}</dt>
<dd tabindex="-1"> %kMGTcmunp</dd>
<dt tabindex="-1">${_("Operations:")}</dt>
<dd tabindex="-1">^ * / + - ()</dd>
<dt tabindex="-1">${_("Functions:")}</dt>
<dd tabindex="-1">sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
<dt tabindex="-1">${_("Constants")}</dt>
<dd tabindex="-1">e, pi</dd>
<!-- Students won't know what parallel means at this time. Complex numbers aren't well tested in the courseware, so we would prefer to not expose them. If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
<dt>Unsupported:</dt> <dd>||, j </dd> -->
</dl>
<a id="calculator_hint" href="#" role="button" aria-describedby="calculator_input_help" tabindex="-1">${_("Hints")}</a>
<div id="calculator_input_help" class="help" role="tooltip" aria-hidden="true">
<p><span class="bold">${_("Integers")}:</span> 2520</p>
<p><span class="bold">${_("Decimals")}:</span> 3.14 or .98</p>
<p><span class="bold">${_("Scientific notation")}:</span> 1.2e-2 (=0.012), -4.4e+5 = -4.4e5 (=-440,000)</p>
<p><span class="bold">${_("Appending SI postfixes")}:</span> 2.25k (=2,250)</p>
<p><span class="bold">${_("Supported SI postfixes")}:</span></p>
<table class="calc-postfixes">
<tbody>
<tr>
<td>%</td>
<td>percent</td>
<td>0.01 = 1e-2</td>
</tr>
<tr>
<td>T</td>
<td>tera</td>
<td>1e12</td>
</tr>
<tr>
<td>G</td>
<td>giga</td>
<td>1e9</td>
</tr>
<tr>
<td>M</td>
<td>mega</td>
<td>1e6</td>
</tr>
<tr>
<td>k</td>
<td>kilo</td>
<td>1000 = 1e3</td>
</tr>
<tr>
<td>c</td>
<td>centi</td>
<td>0.01 = 1e-2</td>
</tr>
<tr>
<td>m</td>
<td>milli</td>
<td>0.001 = 1e-3</td>
</tr>
<tr>
<td>u</td>
<td>micro</td>
<td>1e-6</td>
</tr>
<tr>
<td>n</td>
<td>nano</td>
<td>1e-9</td>
</tr>
<tr>
<td>p</td>
<td>pico</td>
<td>1e-12</td>
</tr>
</tbody>
</table>
<p><span class="bold">${_("Operators")}:</span> + - * / ^ and || (${_("parallel resistors function")})</p>
<p><span class="bold">${_("Functions")}:</span> sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs, fact/factorial</p>
<p><span class="bold">${_("Constants")}:</span></p>
<table>
<tbody>
<tr>
<td>j</td>
<td>=</td>
<td>sqrt(-1)</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>${_("freezing point of water in degrees Kelvin")}</td>
</tr>
<tr>
<td>q</td>
<td>=</td>
<td>${_("fundamental charge")}</td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" arial-label="${_('Calculate')}" value="=" tabindex="-1" />
</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>
......
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