Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BLD-400: Update the calculator hints tooltip.

Browse Source
This commit is contained in:
polesye
2013-11-21 14:40:02 +02:00
parent 51fa7e0c3b
commit b7438bc9a4
6 changed files with 163 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.rst
View File

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

2
lms/static/coffee/fixtures/calculator.html
View File

@@ -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" />

15
lms/static/coffee/spec/calculator_spec.coffee
View File

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

23
lms/static/coffee/src/calculator.coffee
View File

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

37
lms/static/sass/course/layout/_calculator.scss
View File

@@ -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;
}
}
}
}

121
lms/templates/courseware/courseware.html
View File

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