How to use the @mathigon/core.flatten function in @mathigon/core

function drawShape($step, $geopad, goal, shape, expand=false) {
  // `shape` should be names of a polygon, segment or line.
  const lines = flatten(words(shape).map(s => $geopad.model[s].edges || $geopad.model[s]));

  $geopad.setActiveTool('line');

  $geopad.waitForPaths(lines, {
    onCorrect(path, i) {
      if (expand) expandSegment($geopad, path.points, lines[i]);
    },
    onIncorrect() {
      $step.addHint('incorrect', {force: true});
    },
    onHint() {
      $step.addHint('draw-hint', {force: true});
    },
    onComplete(afterError) {
      if (!afterError) $step.addHint('correct');
      $step.score(goal);

function drawShape($step, $geopad, goal, shape, expand=false) {
  // `shape` should be names of a polygon, segment or line.
  const lines = flatten(words(shape).map(s => $geopad.model[s].edges || $geopad.model[s]));

  $geopad.setActiveTool('line');

  $geopad.waitForPaths(lines, {
    onCorrect(path, i) {
      if (expand) expandSegment($geopad, path.points, lines[i]);
    },
    onIncorrect() {
      $step.addHint('incorrect', {force: true});
    },
    onHint() {
      $step.addHint('draw-hint', {force: true});
    },
    onComplete(afterError) {
      if (!afterError) $step.addHint('correct');
      $step.score(goal);

function drawShape($step: Step, $geopad: Geopad, goal: string, shape: string,
                   expand = false) {
  // `shape` should be names of a polygon, segment or line.
  const lines = flatten(
      words(shape).map(s => $geopad.model[s].edges || $geopad.model[s]));

  $geopad.setActiveTool('line');

  $geopad.waitForPaths(lines, {
    onCorrect(path, i) {
      if (expand) expandSegment($geopad, path.points, lines[i]);
    },
    onIncorrect() {
      $step.addHint('incorrect', {force: true});
    },
    onHint() {
      $step.addHint('draw-hint', {force: true});
    },
    onComplete(afterError) {
      if (!afterError) $step.addHint('correct');

export function pascalSequences($step: Step) {
  const $rows = $step.$$('.r').map($r => $r.$$('.c'));
  const $cells = flatten($rows);
  const $tabbox = $step.$('x-tabbox') as Tabbox;
  const $body = $tabbox.$('.body')!;
  const $sums = $rows.map($row => last($row));

  // Fibonacci numbers are coloured by diagonal
  const $fibonacci = tabulate(() => [] as ElementView[], 16 * 2 + 1);  // 16 -> number of rows
  $rows.forEach(($cells, i) => $cells.forEach(($c, j) => {
    if (i + i - j >= 0) $fibonacci[i + i - j].push($c);
  }));

  function onChange(i: number) {
    colourIndex += 1;
    $body.setAttr('class', 'body s-' + colours[i]);

    if (i === 4) $sums.forEach(($s, t) => { $s.textStr = Math.pow(2, t); });
    if (i === 6) $sums.forEach(($s, t) => { $s.textStr = fibonacci(t); });

function grid(points, x, y) {
  return flatten(tabulate((i, j) => points.map(p => p.shift(i * x, j * y)),
    width/x, height/y));
}

function grid(points, x, y) {
  return flatten(tabulate((i, j) => points.map(p => p.shift(i * x, j * y)),
    width/x, height/y));
}

for (let p of placeholders) {
      if (!p) return null;
      for (let key of Object.keys(p)) {
        if (key in combined) {
          if (!same(combined[key], p[key])) return null;
        } else {
          combined[key] = p[key]
        }
      }
    }

    return combined;
  }, ...argPlaceholders.map(a => a.length));

  return flatten(possibilities).filter(p => !!p);
}

export function modular1($step: Step) {
  const $rows = $step.$$('.r').map($r => $r.$$('.c'));
  const $cells = flatten($rows);

  for (const $btn of $step.$$('.pascal-buttons .btn')) {
    const x = +$btn.data.value!;
    const colour = ['red', 'blue', 'green', 'yellow'][x - 2];
    const fn = (i: number, j: number, n: number) => (n % x === 0) ? colour : '';
    $btn.on('click', () => {
      colourIndex += 1;
      colourPascal($rows, $cells, fn, colourIndex);
      $step.score('c' + x);
    });
  }
}