If it helps, you may drag the numbers to put them in a different order. The order isn't checked with your answer.
SORTER.init( "sortable" )
init({ range: [[ -2, 18 ], [ -6, 2 ]], scale: [ 30, 30 ] });
addMouseLayer();
line( [ 0, -2 ], [ 15, -2 ] );
for ( tick = 0; tick <= 15; tick += 1 ) {
line( [ tick, -1.75 ], [ tick, -2.25 ] );
label( [ tick, -2 ], tick, "below" );
}
graph.q1 = addMovablePoint({ coord: [ 3.5, 0 ], snapX: 0.5, constraints: { constrainY: true }, normalStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE } });
graph.q2top = addMovablePoint({ coord: [ 5.5, 1 ], visible: false });
graph.q2mid = addMovablePoint({ coord: [ 5.5, 0 ], visible: false });
graph.q2bot = addMovablePoint({ coord: [ 5.5, -1 ], visible: false });
graph.mtop = addMovablePoint({ coord: [ 7.5, 1 ], visible: false });
graph.mbot = addMovablePoint({ coord: [ 7.5, -1 ], visible: false });
graph.q3top = addMovablePoint({ coord: [ 9.5, 1 ], visible: false });
graph.q3mid = addMovablePoint({ coord: [ 9.5, 0 ], visible: false });
graph.q3bot = addMovablePoint({ coord: [ 9.5, -1 ], visible: false });
graph.q4 = addMovablePoint({ coord: [ 11.5, 0 ], snapX: 0.5, constraints: { constrainY: true }, normalStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE } });
graph.leftLine = addMovableLineSegment({ pointA: graph.q1, pointZ: graph.q2mid, fixed: true });
graph.topLine = addMovableLineSegment({ pointA: graph.q2top, pointZ: graph.q3top, fixed: true });
graph.botLine = addMovableLineSegment({ pointA: graph.q2bot, pointZ: graph.q3bot, fixed: true });
graph.rightLine = addMovableLineSegment({ pointA: graph.q3mid, pointZ: graph.q4, fixed: true });
graph.q2Line = addMovableLineSegment({ pointA: graph.q2bot, pointZ: graph.q2top, snapX: 0.5, constraints: { constrainY: true }, });
graph.medianLine = addMovableLineSegment({ pointA: graph.mbot, pointZ: graph.mtop, snapX: 0.5, constraints: { constrainY: true }, });
graph.q3Line = addMovableLineSegment({ pointA: graph.q3bot, pointZ: graph.q3top, snapX: 0.5, constraints: { constrainY: true }, });
graph.q1.onMove = function( x, y ) {
return x < graph.q2mid.coord[0] && x >= 0;
};
graph.q4.onMove = function( x, y ) {
return x > graph.q3mid.coord[0] && x <= 15;
};
graph.q2Line.onMove = function( dX, dY ) {
if ( this.coordA[0] <= graph.q1.coord[0] || this.coordA[0] >= graph.mtop.coord[0] ) {
this.coordA[0] -= dX;
this.coordZ[0] -= dX;
}
graph.q2top.setCoord([ this.coordA[0], graph.q2top.coord[1] ]);
graph.q2mid.setCoord([ this.coordA[0], graph.q2mid.coord[1] ]);
graph.q2bot.setCoord([ this.coordA[0], graph.q2bot.coord[1] ]);
graph.q2top.updateLineEnds();
graph.q2mid.updateLineEnds();
graph.q2bot.updateLineEnds();
};
graph.medianLine.onMove = function( dX, dY ) {
if ( this.coordA[0] <= graph.q2mid.coord[0] || this.coordA[0] >= graph.q3mid.coord[0] ) {
this.coordA[0] -= dX;
this.coordZ[0] -= dX;
}
graph.mtop.setCoord([ this.coordA[0], graph.mtop.coord[1] ]);
graph.mbot.setCoord([ this.coordA[0], graph.mbot.coord[1] ]);
graph.mtop.updateLineEnds();
graph.mbot.updateLineEnds();
};
graph.q3Line.onMove = function( dX, dY ) {
if ( this.coordA[0] <= graph.mtop.coord[0] || this.coordA[0] >= graph.q4.coord[0] ) {
this.coordA[0] -= dX;
this.coordZ[0] -= dX;
}
graph.q3top.setCoord([ this.coordA[0], graph.q3top.coord[1] ]);
graph.q3mid.setCoord([ this.coordA[0], graph.q3mid.coord[1] ]);
graph.q3bot.setCoord([ this.coordA[0], graph.q3bot.coord[1] ]);
graph.q3top.updateLineEnds();
graph.q3mid.updateLineEnds();
graph.q3bot.updateLineEnds();
};
Drag each part of the box-and-whiskers plot left and right so it correctly represents the data.
[
graph.q1.coord[0],
graph.q2Line.coordA[0],
graph.medianLine.coordA[0],
graph.q3Line.coordA[0],
graph.q4.coord[0]
]
if ( _.isEqual( guess, [ 3.5, 5.5, 7.5, 9.5, 11.5 ] ) ) {
return "";
}
return _.isEqual( guess, [ abs( MIN ), Q1, MEDIAN, Q3, MAX ] );
graph.q1.setCoord([ guess[ 0 ], graph.q1.coord[ 1 ] ]);
graph.q2top.setCoord([ guess[ 1 ], graph.q2top.coord[ 1 ] ]);
graph.q2mid.setCoord([ guess[ 1 ], graph.q2mid.coord[ 1 ] ]);
graph.q2bot.setCoord([ guess[ 1 ], graph.q2bot.coord[ 1 ] ]);
graph.mtop.setCoord([ guess[ 2 ], graph.mtop.coord[ 1 ] ]);
graph.mbot.setCoord([ guess[ 2 ], graph.mbot.coord[ 1 ] ]);
graph.q3top.setCoord([ guess[ 3 ], graph.q3top.coord[ 1 ] ]);
graph.q3mid.setCoord([ guess[ 3 ], graph.q3mid.coord[ 1 ] ]);
graph.q3bot.setCoord([ guess[ 3 ], graph.q3bot.coord[ 1 ] ]);
graph.q4.setCoord([ guess[ 4 ], graph.q4.coord[ 1 ] ]);
jQuery.each([ graph.q1, graph.q2top, graph.q2mid, graph.q2bot, graph.mtop, graph.mbot, graph.q3top, graph.q3mid, graph.q3bot, graph.q4 ], function() {
this.updateLineEnds();
});