<div id='boxtan' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;margin-bottom: 20px;'></div>
<script type='text/javascript'>
var board17 = JXG.JSXGraph.initBoard('boxtan', {boundingbox: [-4, 5, 10, -5], axis: false,showCopyright:false,grid: false,showNavigation:false});
board17.suspendUpdate();
var xaxis = board17.create('axis',
	[ [0,0],[1,0] ], {
	 label: {offset: [7, -10]}, // Doesn't do anything here.
	 drawZero:false // Doesn't do anything here.
	}
); 

xaxis.removeAllTicks();
var yaxis = board17.create('axis',
	[ [0,0],[0,1] ], {
	 label: {offset: [7, -10]}, // Doesn't do anything here.
	 drawZero:false // Doesn't do anything here.
	}
); 

xaxis.removeAllTicks();
yaxis.removeAllTicks();
board17.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,});
board17.create('ticks', [yaxis, 4], {strokeColor: 'black', strokeWidth: 1});
for (i=-5;i<7;i++) {
	board17.create('segment',[ [0.5*i*Math.PI,-5], [0.5*i*Math.PI,5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true,dash:1});
}

board17.create('text', [1.4, -0.5, 'π/2'],{fixed:true});
board17.create('text', [3.1, -0.5, 'π'],{fixed:true});
board17.create('text', [4.3, -0.5, '3π/2'],{fixed:true});
board17.create('text', [6.2, -0.5, '2π'],{fixed:true});
board17.create('text', [-1.8, -0.5, '-π/2'],{fixed:true});
board17.create('text', [-3.3, -0.5, '-π'],{fixed:true});
board17.create('text', [7.5, -0.5, '5π/2'],{fixed:true});
board17.create('text', [-6.5, -0.5, '-2π'],{fixed:true});
var fsin = function(x){ return Math.tan(x); }
var plot = board17.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'});
board17.create('text', [-2.5, -4.5, '$y=\\\\tan(x)$'],{fixed:true,strokeColor:'red'});
</script>

<div id='boxcercleprime' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;margin-bottom: 20px;'></div>
<script type='text/javascript'>
var board14 = JXG.JSXGraph.initBoard('boxcercleprime', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
board14.suspendUpdate();
var b1c1 = board14.create('circle', [[0,0], [1,0]]);
var b1p1 = board14.create('point', [2, 0], {slideObject: b1c1,name:'M'});
var seg = board14.create('segment', [b1p1, [0,0] ] );
var segcos = board14.create('segment', [b1p1, ["X(M)",0] ],{strokeWidth:1,dash:1,color:'black'} );
var segsin = board14.create('segment', [b1p1, [0,"Y(M)"] ],{strokeWidth:1,dash:1,color:'black'} );
var p1 = board14.create('point', [0, 0], {name:'p1',visible:false});
var p2 = board14.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false});
var l = "X(M)";
var s = "Y(M)";
var r = "X(p2)*X(p2)";
var ct = board14.create('point',[l,0],{name:'cos(t)'});
var st = board14.create('point',[0,s],{name:'sin(t)'});
var p3 = board14.create('point',[0.3,0],{name:'p3',visible:false});
board14.create('text',["X(M)/3","Y(M)/3",'t']);
board14.create('arc',[p1, p3, p2],{});
board14.unsuspendUpdate();
</script>

<div id='boxdeph' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;margin-bottom: 20px;'></div>
<script type='text/javascript'>
var board9 = JXG.JSXGraph.initBoard('boxdeph', {boundingbox: [-4, 1.33, 10, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false});
board9.suspendUpdate();
var xaxis = board9.create('axis',
	[ [0,0],[1,0] ], {
	 label: {offset: [7, -10]}, // Doesn't do anything here.
	 drawZero:false // Doesn't do anything here.
	}
); 

xaxis.removeAllTicks();
var yaxis = board9.create('axis',
	[ [0,0],[0,1] ], {
	 label: {offset: [7, -10]}, // Doesn't do anything here.
	 drawZero:false // Doesn't do anything here.
	}
); 

xaxis.removeAllTicks();
yaxis.removeAllTicks();
board9.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,});
board9.create('ticks', [yaxis, 0.5], {strokeColor: 'black', strokeWidth: 2});
for (i=-5;i<7;i++) {
	board9.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
}
board9.create('segment',[ [-7,0.5], [10,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,-0.5], [10,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,1], [10,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,-1], [10,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('text', [1.4, -0.08, 'π/2'],{fixed:true});
board9.create('text', [3.1, -0.08, 'π'],{fixed:true});
board9.create('text', [4.5, -0.08, '3π/2'],{fixed:true});
board9.create('text', [6.2, -0.08, '2π'],{fixed:true});
board9.create('text', [-1.8, -0.08, '-π/2'],{fixed:true});
board9.create('text', [-3.1, -0.08, '-π'],{fixed:true});
board9.create('text', [-5.0, -0.08, '-3π/2'],{fixed:true});
board9.create('text', [-6.5, -0.08, '-2π'],{fixed:true});

// sine:
var fsin = function(x){ return Math.sin(x); }
var plot = board9.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'});
var fcos = function(x){ return Math.cos(x); }
var plot = board9.create('functiongraph',[fcos,-4,10], {strokeWidth:1,strokeColor:'blue'});
board9.create('arrow', [ [6.2,1.1] , [8,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true});
board9.create('arrow', [ [8,1.1] , [6.2,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true});
board9.create('text',[7,1.2,'π/2'],{fixed:true})
board9.create('text', [-2.5, -1.2, '$y=\\\\sin(x)$'],{fixed:true,strokeColor:'red'});
board9.create('text', [3.5, -1.2, '$y=\\\\cos(x)$'],{fixed:true,strokeColor:'blue'});
</script>

<div id='boxparite' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;margin-bottom: 20px;'></div>
<script type='text/javascript'>
var board6 = JXG.JSXGraph.initBoard('boxparite', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showNavigation:false,showCopyright:false});
board6.suspendUpdate();
var c1 = board6.create('circle', [[0,0], [1,0]]);
var pt1 = board6.create('point', [2, 0], {slideObject: c1,name:'M'});
var pt2 = board6.create('point', ["X(M)", "-Y(M)"], {name:'N'});
var perp1 = board6.create('perpendicular', [board6.defaultAxes.x,pt1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
var perp2 = board6.create('perpendicular',[board6.defaultAxes.y,pt1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
var perp3 = board6.create('perpendicular',[board6.defaultAxes.y,pt2],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
board6.create('segment', [pt1, [0,0] ] );
board6.create('segment', [pt2, [0,0] ] );
var p1 = board6.create('point', [0, 0], {name:'p1',visible:false});
var p2 = board6.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false});
var p3 = board6.create('point',[0.3,0],{name:'p3',visible:false});
var p4 = board6.create('point',["X(N)/3","Y(N)/3"],{name:'p4',visible:false});
board6.create('text',["X(M)/3","Y(M)/3",'t'],{anchorX:'left',anchorY:'top'});
board6.create('arc',[p1, p3, p2],{});
board6.create('text',["X(N)/3","Y(N)/3",'-t'],{anchorX:'left',anchorY:'bottom'});
board6.create('arc',[p1, p4, p3],{});
board6.unsuspendUpdate();
</script>