-7 -1 * LOWER_BOUND random() < 0.8 ? 10 : 5 roundTo(1, randRangeNonZero((LOWER_BOUND + 1) * 2, (UPPER_BOUND - 1) * 2) / 2) ((POINTS / 2) * (MEDIAN + 0.5) + MEDIAN - 0.5 + (POINTS / 2 - 1) * LOWER_BOUND) / POINTS ((POINTS / 2) * (MEDIAN - 0.5) + MEDIAN + 0.5 + (POINTS / 2 - 1) * UPPER_BOUND) / POINTS roundTo(1, randRangeNonZero(MIN_MEAN * 10, MAX_MEAN * 10) / 10)

Arrange the POINTS orange points on the number line so the arithmetic mean is MEAN
and the median is MEDIAN. The distance between adjacent tick marks is 1.

graph.targetMedian = MEDIAN; graph.targetMean = MEAN; graph.numPoints = POINTS; init({ range: [ [LOWER_BOUND - 0.3, UPPER_BOUND + 0.2], [-3, 3]], scale: 35 }); style({ stroke: "#bbb" }); line([LOWER_BOUND, 0], [UPPER_BOUND, 0]); for (var x = LOWER_BOUND; x <= UPPER_BOUND; x++) { line([x, -0.2], [x, 0.2]); } style({ strokeWidth: 3.5 }); line([0, -0.2], [0, 0.2]); label([0, -0.53], "0", "center", {}); style({ strokeWidth: 2, stroke: BLUE, fill: BLUE, opacity: 1.0 }); graph.meanArrow = path([ [0, 0.7], [0.05, 0.7], [0, 0.6], [-0.05, 0.7], [0, 0.7], [0, 1.0] ]); graph.meanLabel = label([0, 1.3], // I18N: "mean" as in "average" "\\text{" + $._("mean") + "}", "above", { color: BLUE }); graph.meanValueLabel = label([0, 0.8], "0", "above", { color: BLUE }); style({ strokeWidth: 2, stroke: GREEN, fill: GREEN }); graph.medianArrow = path([ [0, -1.1], [0.05, -1.1], [0, -1], [-0.05, -1.1], [0, -1.1], [0, -1.4] ]); graph.medianLabel = label([0, -1.7], "\\text{" + $._("median") + "}", "below", { color: GREEN }); graph.medianValueLabel = label([0, -1.2], "0", "below", { color: GREEN }); addMouseLayer(); graph.points = []; for (var x = 0; x < POINTS; x++) { graph.points[x] = addMovablePoint({ coord: [x - POINTS / 2 + 0.5, 0], constraints: { constrainY: true }, snapX: 0.5 }); } graph.median = 0; graph.mean = 0; graph.moved = false; $.each(graph.points, function(idx, point) { this.onMove = function(x, y) { graph.moved = true; return onMovePoint(point, x, y, updateMeanAndMedian); }; });
$.map(graph.points, function(el) { return el.coord[0]; })
if (roundTo(1, mean(guess)) === MEAN && roundTo(1, median(guess)) === MEDIAN) { return true; } else if (graph.moved) { return false; } else { return ""; }
$.each(guess, function(i, x) { onMovePoint(graph.points[i], x, 0); }); updateMeanAndMedian();

The median is the middle number. In other words there are always as many points to the right of the median as to the left.

Try dragging the points so that half of them are to the left of MEDIAN and half of them are to the right of MEDIAN. The two points in the middle should be the same distance from MEDIAN. The middle point should be at MEDIAN.
Show me an example

As long as there are as many points to the left and to the right of the median, the median will stay the same. But the arithmetic mean is calculated using the value of every point. Try moving the points on either side of the median closer and further from the median to see how the mean is affected.

There are a number of different ways to arrange the points so the mean is MEAN and the median is MEDIAN. Show me an example