Skip to content

P
problem-builder
Commit 38fc29e7 by Tim Krones
Options

Merge pull request #87 from open-craft/plot-tooltips-everywhere 

Step Builder: Make sure tooltips for plot points work across different browsers
parents 9f967274 63a0d9ee
Showing with 14 additions and 14 deletions
problem_builder/public/js/plot.js
...@@ -125,7 +125,7 @@ function PlotBlock(runtime, element) { ...@@ -125,7 +125,7 @@ function PlotBlock(runtime, element) {
.enter() .enter()
.append("circle") .append("circle")
.attr("class", klass) .attr("class", klass)
.attr("title", function(d) { .attr("data-tooltip", function(d) {
return d[0] + ": " + d[1] + ", " + d[2]; return d[0] + ": " + d[1] + ", " + d[2];
}) })
.attr("cx", function(d) { .attr("cx", function(d) {
......
problem_builder/tests/integration/test_step_builder.py
...@@ -763,11 +763,11 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -763,11 +763,11 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
point.value_of_css_property('fill') for point in points point.value_of_css_property('fill') for point in points
] ]
self.assertTrue(all(pc == overlay['point_color'] for pc in point_colors)) self.assertTrue(all(pc == overlay['point_color'] for pc in point_colors))
# Check point titles # Check tooltips for points
point_titles = set([ tooltips = set([
point.get_attribute('title') for point in points point.get_attribute('data-tooltip') for point in points
]) ])
self.assertEquals(point_titles, set(overlay['titles'])) self.assertEquals(tooltips, set(overlay['tooltips']))
# Check positions # Check positions
point_positions = set([ point_positions = set([
(point.get_attribute('cx'), point.get_attribute('cy')) for point in points (point.get_attribute('cx'), point.get_attribute('cy')) for point in points
...@@ -804,7 +804,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -804,7 +804,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.claim-default', 'selector': '.claim-default',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.ORANGE, 'point_color': PointColors.ORANGE,
'titles': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'], 'tooltips': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'],
'positions': [ 'positions': [
('4', '380'), # Values computed according to xScale and yScale (cf. plot.js) ('4', '380'), # Values computed according to xScale and yScale (cf. plot.js)
('20', '396'), # Values computed according to xScale and yScale (cf. plot.js) ('20', '396'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -814,7 +814,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -814,7 +814,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.claim-average', 'selector': '.claim-average',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.PURPLE, 'point_color': PointColors.PURPLE,
'titles': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'], 'tooltips': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'],
'positions': [ 'positions': [
('4', '380'), # Values computed according to xScale and yScale (cf. plot.js) ('4', '380'), # Values computed according to xScale and yScale (cf. plot.js)
('20', '396'), # Values computed according to xScale and yScale (cf. plot.js) ('20', '396'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -881,7 +881,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -881,7 +881,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.claim-default', 'selector': '.claim-default',
'num_points': 2, 'num_points': 2,
'point_color': 'rgb(255, 165, 0)', # orange 'point_color': 'rgb(255, 165, 0)', # orange
'titles': ['2 + 2 = 5: 17, 83', 'The answer to everything is 42: 5, 1'], 'tooltips': ['2 + 2 = 5: 17, 83', 'The answer to everything is 42: 5, 1'],
'positions': [ 'positions': [
('68', '68'), # Values computed according to xScale and yScale (cf. plot.js) ('68', '68'), # Values computed according to xScale and yScale (cf. plot.js)
('20', '396'), # Values computed according to xScale and yScale (cf. plot.js) ('20', '396'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -891,7 +891,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -891,7 +891,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.claim-average', 'selector': '.claim-average',
'num_points': 2, 'num_points': 2,
'point_color': 'rgb(128, 0, 128)', # purple 'point_color': 'rgb(128, 0, 128)', # purple
'titles': ['2 + 2 = 5: 17, 83', 'The answer to everything is 42: 5, 1'], 'tooltips': ['2 + 2 = 5: 17, 83', 'The answer to everything is 42: 5, 1'],
'positions': [ 'positions': [
('68', '68'), # Values computed according to xScale and yScale (cf. plot.js) ('68', '68'), # Values computed according to xScale and yScale (cf. plot.js)
('20', '396'), # Values computed according to xScale and yScale (cf. plot.js) ('20', '396'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -993,7 +993,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -993,7 +993,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.claim-default', 'selector': '.claim-default',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.ORANGE, 'point_color': PointColors.ORANGE,
'titles': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'], 'tooltips': ['2 + 2 = 5: 1, 5', 'The answer to everything is 42: 5, 1'],
'positions': [ 'positions': [
('4', '380'), # Values computed according to xScale and yScale (cf. plot.js) ('4', '380'), # Values computed according to xScale and yScale (cf. plot.js)
('20', '396'), # Values computed according to xScale and yScale (cf. plot.js) ('20', '396'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -1003,7 +1003,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -1003,7 +1003,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.plot-overlay.plot-overlay-0', 'selector': '.plot-overlay.plot-overlay-0',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.CORAL, 'point_color': PointColors.CORAL,
'titles': ['2 + 2 = 5: 2, 3', 'The answer to everything is 42: 4, 2'], 'tooltips': ['2 + 2 = 5: 2, 3', 'The answer to everything is 42: 4, 2'],
'positions': [ 'positions': [
('8', '388'), # Values computed according to xScale and yScale (cf. plot.js) ('8', '388'), # Values computed according to xScale and yScale (cf. plot.js)
('16', '392'), # Values computed according to xScale and yScale (cf. plot.js) ('16', '392'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -1017,7 +1017,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -1017,7 +1017,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.plot-overlay.plot-overlay-1', 'selector': '.plot-overlay.plot-overlay-1',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.CORNFLOWERBLUE, 'point_color': PointColors.CORNFLOWERBLUE,
'titles': ['2 + 2 = 5: 4, 4', 'The answer to everything is 42: 1, 5'], 'tooltips': ['2 + 2 = 5: 4, 4', 'The answer to everything is 42: 1, 5'],
'positions': [ 'positions': [
('16', '384'), # Values computed according to xScale and yScale (cf. plot.js) ('16', '384'), # Values computed according to xScale and yScale (cf. plot.js)
('4', '380'), # Values computed according to xScale and yScale (cf. plot.js) ('4', '380'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -1031,7 +1031,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -1031,7 +1031,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.plot-overlay.plot-overlay-2', 'selector': '.plot-overlay.plot-overlay-2',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.OLIVE, 'point_color': PointColors.OLIVE,
'titles': ['2 + 2 = 5: 3, 5', 'The answer to everything is 42: 2, 4'], 'tooltips': ['2 + 2 = 5: 3, 5', 'The answer to everything is 42: 2, 4'],
'positions': [ 'positions': [
('12', '380'), # Values computed according to xScale and yScale (cf. plot.js) ('12', '380'), # Values computed according to xScale and yScale (cf. plot.js)
('8', '384'), # Values computed according to xScale and yScale (cf. plot.js) ('8', '384'), # Values computed according to xScale and yScale (cf. plot.js)
...@@ -1045,7 +1045,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin ...@@ -1045,7 +1045,7 @@ class StepBuilderTest(MentoringAssessmentBaseTest, MultipleSliderBlocksTestMixin
'selector': '.plot-overlay.plot-overlay-3', 'selector': '.plot-overlay.plot-overlay-3',
'num_points': 2, 'num_points': 2,
'point_color': PointColors.CRIMSON, 'point_color': PointColors.CRIMSON,
'titles': ['2 + 2 = 5: 1, 2', 'The answer to everything is 42: 3, 3'], 'tooltips': ['2 + 2 = 5: 1, 2', 'The answer to everything is 42: 3, 3'],
'positions': [ 'positions': [
('4', '392'), # Values computed according to xScale and yScale (cf. plot.js) ('4', '392'), # Values computed according to xScale and yScale (cf. plot.js)
('12', '388'), # Values computed according to xScale and yScale (cf. plot.js) ('12', '388'), # Values computed according to xScale and yScale (cf. plot.js)
......
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