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, ...@@ -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 in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected. 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: Fix transcripts 500 error in studio (BLD-530)
Blades: Allow multiple strings as the correct answer to a string response question. BLD-474. 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 @@ ...@@ -7,7 +7,7 @@
<input type="text" id="calculator_input" tabindex="-1" /> <input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper"> <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> <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>
</div> </div>
<input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" /> <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', -> ...@@ -55,11 +55,26 @@ describe 'Calculator', ->
it 'show the help overlay', -> it 'show the help overlay', ->
@calculator.helpShow() @calculator.helpShow()
expect($('.help')).toHaveClass('shown') expect($('.help')).toHaveClass('shown')
expect($('.help')).toHaveAttr('aria-hidden', 'false')
describe 'helpHide', -> describe 'helpHide', ->
it 'show the help overlay', -> it 'show the help overlay', ->
@calculator.helpHide() @calculator.helpHide()
expect($('.help')).not.toHaveClass('shown') 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', -> describe 'calculate', ->
beforeEach -> beforeEach ->
......
lms/static/coffee/src/calculator.coffee
...@@ -10,6 +10,9 @@ class @Calculator ...@@ -10,6 +10,9 @@ class @Calculator
) )
.click (e) -> .click (e) ->
e.preventDefault() e.preventDefault()
$(document).keydown $.proxy(@handleKeyDown, @)
$('div.help-wrapper') $('div.help-wrapper')
.focusin($.proxy @helpOnFocus, @) .focusin($.proxy @helpOnFocus, @)
.focusout($.proxy @helpOnBlur, @) .focusout($.proxy @helpOnBlur, @)
...@@ -24,14 +27,14 @@ class @Calculator ...@@ -24,14 +27,14 @@ class @Calculator
$('div.calc-main').toggleClass 'open' $('div.calc-main').toggleClass 'open'
if $calc.hasClass('closed') if $calc.hasClass('closed')
$calcWrapper $calcWrapper
.find('input, a, dt, dd') .find('input, a')
.attr 'tabindex', -1 .attr 'tabindex', -1
else else
text = gettext('Close Calculator') text = gettext('Close Calculator')
isExpanded = true isExpanded = true
$calcWrapper $calcWrapper
.find('input, a, dt, dd') .find('input, a,')
.attr 'tabindex', 0 .attr 'tabindex', 0
# TODO: Investigate why doing this without the timeout causes it to jump # 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 # down to the bottom of the page. I suspect it's because it's putting the
...@@ -57,13 +60,21 @@ class @Calculator ...@@ -57,13 +60,21 @@ class @Calculator
@helpHide() @helpHide()
helpShow: -> helpShow: ->
$('.help').addClass 'shown' $('.help')
$('#calculator_hint').attr 'aria-expanded', true .addClass('shown')
.attr('aria-hidden', false)
helpHide: -> helpHide: ->
if not @isFocusedHelp if not @isFocusedHelp
$('.help').removeClass 'shown' $('.help')
$('#calculator_hint').attr 'aria-expanded', false .removeClass('shown')
.attr('aria-hidden', true)
handleKeyDown: (e) ->
ESC = 27
if e.which is ESC and $('.help').hasClass 'shown'
@isFocusedHelp = false
@helpHide()
calculate: -> calculate: ->
$.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
......
lms/static/sass/course/layout/_calculator.scss
...@@ -120,39 +120,48 @@ div.calc-main { ...@@ -120,39 +120,48 @@ div.calc-main {
display: block; display: block;
} }
dl { .help {
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999;
color: #333; color: #333;
opacity: 0;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
right: -40px; right: -40px;
top: -122px; bottom: 57px;
@include transition(none); @include transition(none);
width: 600px; width: 600px;
height: 0;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
display: none;
&.shown { &.shown {
height: auto; display: block;
opacity: 1;
overflow: visible;
pointer-events: auto; pointer-events: auto;
} }
dt { .bold {
clear: both;
float: left;
font-weight: bold; font-weight: bold;
padding-right: 12px;
} }
dd { p, p+p {
float: left; margin: 0;
margin-left: 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()} ...@@ -218,24 +218,113 @@ ${fragment.foot_html()}
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" /> <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />
<div class="help-wrapper"> <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> <a id="calculator_hint" href="#" role="button" aria-describedby="calculator_input_help" tabindex="-1">${_("Hints")}</a>
<dl id="calculator_input_help" class="help"> <div id="calculator_input_help" class="help" role="tooltip" aria-hidden="true">
<dt tabindex="-1">${_("Suffixes:")}</dt> <p><span class="bold">${_("Integers")}:</span> 2520</p>
<dd tabindex="-1"> %kMGTcmunp</dd> <p><span class="bold">${_("Decimals")}:</span> 3.14 or .98</p>
<dt tabindex="-1">${_("Operations:")}</dt> <p><span class="bold">${_("Scientific notation")}:</span> 1.2e-2 (=0.012), -4.4e+5 = -4.4e5 (=-440,000)</p>
<dd tabindex="-1">^ * / + - ()</dd> <p><span class="bold">${_("Appending SI postfixes")}:</span> 2.25k (=2,250)</p>
<dt tabindex="-1">${_("Functions:")}</dt> <p><span class="bold">${_("Supported SI postfixes")}:</span></p>
<dd tabindex="-1">sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd> <table class="calc-postfixes">
<dt tabindex="-1">${_("Constants")}</dt> <tbody>
<dd tabindex="-1">e, pi</dd> <tr>
<td>%</td>
<!-- 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. <td>percent</td>
<td>0.01 = 1e-2</td>
<dt>Unsupported:</dt> <dd>||, j </dd> --> </tr>
</dl> <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> </div>
</div> </div>
<input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" arial-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>
......
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