example.qmd

---
title: "JSXGraph filter test"
filters:
  - jsxgraph

jsxgraph:
  width: 555
  height: 444
---

# JSXGraph in quarto

## Use default size 500px x 500px

```{.jsxgraph echo=true}
var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5, 2, 5, -2]});
var p = board.create('point',[-2,1]);
var q = board.create('point',[3,0]);
```

## Display source code,  no `jsxgraph` given after backticks 

This is text.

```
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});
var f = board.create('functiongraph',['x^2']);
```

This is text.


## Use supplied size and style (width, height, style)

```{.jsxgraph iframe_id="myIFrame" width="40%" height="200" style="border: 5px solid black; border-radius: 20px;"}

JXG.Options.text.useMathJax = true;

var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5, 2, 5, -2], axis: true, keepAspectRatio: true});
var f = board.create('functiongraph',['x^2']);
var p1 = board.create('point',[1, 1], {name:'\\(A^2\\)'});
var p2 = board.create('point',[1, 2], {name:'\\(A\\)'});
var p3 = board.create('point',[1, 3], {name:'\\(A_{max}\\)'});

```