Fullscreen mode: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
Line 1: Line 1:
This feature maybe useful in classrooms: the teacher wants to show the whole class a JSXGraph construction from an eLearning platform like moodle. By clicking either on the fullscreen icon in the JSXGraph navigation bar or on the external fullscreen button, the consruction is shown fullscreen mode.
<jsxgraph width="500" height="500">
<jsxgraph width="500" height="500">
var board = JXG.JSXGraph.initBoard('jxgbox', {
var board = JXG.JSXGraph.initBoard('jxgbox', {
Line 11: Line 12:


===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="html5">
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {
        axis:true,
        boundingbox:[-5, 5, 5, -5],
        showFullscreen: true
    });
    var plot = board.create('functiongraph', ["nthroot(x, 3)"], {withLabel: true, name:'nthroot(x,3)'});
</script>
<button onClick="board.toFullscreen()">Fullscreen</button>
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 20:11, 1 April 2020

This feature maybe useful in classrooms: the teacher wants to show the whole class a JSXGraph construction from an eLearning platform like moodle. By clicking either on the fullscreen icon in the JSXGraph navigation bar or on the external fullscreen button, the consruction is shown fullscreen mode.

The underlying JavaScript code

<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {
        axis:true, 
        boundingbox:[-5, 5, 5, -5],
        showFullscreen: true
    });
    var plot = board.create('functiongraph', ["nthroot(x, 3)"], {withLabel: true, name:'nthroot(x,3)'});
</script>
<button onClick="board.toFullscreen()">Fullscreen</button>