Reset board and objects

Descriptive name for your fiddle.
Edit to suit. (Only available to the logged in author.)

Author: mbourne

board ID: The ID for the JSXGraph DIV.

If you change this, make sure it's the same ID in this line in the script: ...JXG.JSXGraph.initBoard('my_new_id',...

You can only change this if you're the author. max-width: px A number only. aspect-ratio: e.g. 1.5 for wide, 0.7 for thin
A number only. max_height: e.g. 95vh; or 300px

Best for phone is:
calc(100vh - 1.5em)

(needs units)

You can only change this if you're the author.

<div id="jxgbox" class="jxgbox"></div>

#jxgbox {
  max-width: 400px;
  aspect-ratio: 1;
  max_height: calc(100vh - 1.5em)
}

// Use a variable for the initial bounding box
let initialBbox = [-5, 3, 5, -2];

let board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: initialBbox, axis:true, showCopyright:false});

// Use a variable for the slider initial value
let s0 = 1;

let s = board.create('slider',[[-3,-1], [3,-1],[-3,s0,3]]);
let p = board.create('point',[function(){return s.Value();},function(){return 1 + 0.5*s.Value();}],{name:'P'});

let ptsArr = [];

function addRandomPoints() { 
  // Add random points above x-axis, between min x and max x.
  let currentBBox = board.getBoundingBox();
  let minX = Math.ceil(currentBBox[0]);
  let maxX = Math.floor(currentBBox[2]);
  let randX = Math.random() * (maxX - minX + 1) + minX;   
  let maxY = Math.ceil(currentBBox[1]);
  let randY = Math.random() * maxY;
  ptsArr.push(board.create('point', [randX, randY], {strokeColor:'#598',fillColor:'none', face:'o', name:''}));
}

function startOver() {
  // Reset the bounding box to the original    
  board.setBoundingBox(initialBbox);
  
  // Set the slider back to its original value
  s.setValue(s0);
  
  // Loop through the points and remove each one.
  ptsArr.forEach( (pt) => {
    pt.remove();
  });
  
}

// Button for adding points
let b = board.create('button', [-3, -1.5, "add points", addRandomPoints], {fixed:true});

// Button for resetting
let c = board.create('button', [2, -1.5, "start over", startOver]);

JSXGraph version: 1.12.0

You aren't the author of this fiddle, so clicking "run" will only update the graph, not save your changes.

To save your changes, make a fork of this fiddle.

Create a new version of this fiddle.
It's like "Save as..."

Save any recent changes (by clicking "Run") first.

Export a HTML page of this Fiddle from the current saved settings.

In the downloaded file, if you see console errors complaining about CORS policy, make sure you run the exported file from a localhost/ or an actual server.

Device size: full 360×800 412×915

You can use the slider, zoom the board in or out, or pan it, and add points.

"Start over" will reset the board to its initial state.