389 lines
7.8 KiB
HTML
Executable File
389 lines
7.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Figura 2.7: Seno e cosseno hiperbólicos</title>
|
|
|
|
<script type="text/javascript" charset="UTF-8"
|
|
src="../scripts/jsxgraph/jsxgraphcore.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../scripts/jsxgraph/jsxgraph.css" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<script type="text/x-mathjax-config">
|
|
MathJax.Hub.Config({
|
|
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
|
|
jax: ["input/TeX", "output/HTML-CSS"],
|
|
tex2jax: {
|
|
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
|
|
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
|
|
},
|
|
"HTML-CSS": { availableFonts: ["TeX"] }
|
|
});
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" async
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
|
|
</script>
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G6VT93GC1X"></script>
|
|
|
|
<script type="text/javascript" >
|
|
|
|
var head = document.getElementsByTagName('head')[0];
|
|
var js = document.createElement("script");
|
|
|
|
js.type = "text/javascript";
|
|
|
|
|
|
if ( window.location !== window.parent.location ) {
|
|
|
|
//carregado em um iframe
|
|
var url = window.top.location.href;
|
|
|
|
if (url){
|
|
|
|
var arr = url.split('/');
|
|
|
|
var dominio = arr[2];
|
|
|
|
if (dominio == "www.livro.online" || dominio == "livro.online"){
|
|
|
|
console.log('Iframe carregado no domínio de origem');
|
|
|
|
} else {
|
|
|
|
js.innerHTML = `
|
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-G6VT93GC1X');
|
|
|
|
`
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
js.innerHTML = `
|
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-G6VT93GC1X');
|
|
|
|
`
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
//não foi carregado em um iframe
|
|
|
|
js.innerHTML = `
|
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-G6VT93GC1X');
|
|
|
|
`
|
|
|
|
}
|
|
|
|
head.appendChild(js);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
@media(max-width:768px){
|
|
.wide {display:none;}
|
|
.mobilefont {font-size:0.8em;}
|
|
}
|
|
@media(min-width:768px){
|
|
.tight {display:none;}
|
|
}
|
|
|
|
html {
|
|
|
|
overflow: hidden;
|
|
max-width: 2000px;
|
|
|
|
}
|
|
|
|
.jxgbox {
|
|
|
|
border-color: #85b8ec96;
|
|
|
|
}
|
|
|
|
.wrap600 {
|
|
|
|
|
|
break-inside: avoid-column;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
#jxgbox {
|
|
|
|
height:0;
|
|
width: 99%;
|
|
padding-bottom: 40%;
|
|
|
|
}
|
|
|
|
.trigonometria_legenda {
|
|
|
|
font-family: gfs_artemisia;
|
|
margin: 12px auto 20px auto;
|
|
max-width: 450px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
span.centro {
|
|
|
|
display: block;
|
|
text-align: center;
|
|
margin: 10px 0px
|
|
|
|
}
|
|
|
|
|
|
.trigonometria_legenda p {
|
|
|
|
text-align: center;
|
|
font-size: 12px !important;
|
|
margin-top: 7px !important;
|
|
margin-bottom: 7px !important;
|
|
|
|
}
|
|
|
|
|
|
@font-face {
|
|
|
|
font-family: 'gfs_artemisia';
|
|
src: url('../gfs_artemisia/GFSArtemisia.otf') format('opentype'),
|
|
url('../gfs_artemisia/GFSArtemisia.ttf') format('trutype');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body{
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
font-size: 28pt;
|
|
text-align: left;
|
|
margin-bottom: 43px;
|
|
|
|
}
|
|
|
|
h2 {
|
|
|
|
font-size: 14pt;
|
|
text-align: left;
|
|
margin-top: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="wrap600 ">
|
|
|
|
<div id="jxgbox" class="jxgbox" ></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="trigonometria_legenda">
|
|
<span><strong>Figura 2.7</strong>: Seno e cosseno hiperbólicos.</span>
|
|
<p>*Arraste o ponto A.</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
JXG.Options.text.useMathJax = true;
|
|
|
|
JXG.Options.renderer = 'canvas';
|
|
|
|
JXG.Options.text.cssDefaultStyle = 'fontFamily:arial';
|
|
|
|
var board = JXG.JSXGraph.initBoard('jxgbox', {showCopyright: false, boundingbox: [-2.2, 2.5, 5.5, -1.0], axis: true, keepAspectRatio: true});
|
|
|
|
|
|
var fpos = board.create('functiongraph',
|
|
|
|
[function(x){
|
|
|
|
return Math.sqrt(x**2 - 1);
|
|
|
|
}, 1, 12]
|
|
|
|
);
|
|
|
|
|
|
var fneg = board.create('functiongraph',
|
|
|
|
[function(x){
|
|
|
|
return -Math.sqrt(x**2 - 1);
|
|
|
|
}, 1, 12]
|
|
|
|
);
|
|
|
|
|
|
|
|
var o = board.create('point',[0,0], {name:"O", size:"1", fixed: true, label:{autoPosition: true, offset:[-15, -15]}});
|
|
|
|
var a = board.create('point',[1.5, Math.sqrt(1.5**2 - 1)], {name:"A", size:"1", showInfobox: false, color:'#00ff00'});
|
|
|
|
var v = board.create('point',[1,0], {name:"V", size:"1", fixed: true, label:{autoPosition: true, offset:[10, -15]}});
|
|
|
|
|
|
|
|
|
|
var assintotaPos = board.create('functiongraph', [function(x){
|
|
|
|
return x;
|
|
|
|
}, 0, 10], {color: "#111"});
|
|
|
|
var assintotaNeg = board.create('functiongraph', [function(x){
|
|
|
|
return -x;
|
|
|
|
}, 0, 10], {color: '#111'});
|
|
|
|
|
|
var line = board.create('line',[o,a],
|
|
|
|
{straightFirst:false, straightLast:false, strokeWidth:1});
|
|
|
|
|
|
var p = board.create('point',[a.X(), 0], {name:"P", size:"1", showInfobox: false, color:'#0000ff'});
|
|
|
|
var q = board.create('point',[0, a.Y()], {name:"Q", size:"1", showInfobox: false, color:'#0000ff'});
|
|
|
|
|
|
|
|
|
|
var lineP = board.create('line',[p,a],
|
|
|
|
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1, dash:2});
|
|
|
|
var lineQ = board.create('line',[q,a],
|
|
|
|
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1, dash:2});
|
|
|
|
|
|
var cosh = board.create('text', [a.X()+0.02, -0.25, function() {
|
|
|
|
return "cosh u = "+a.X();
|
|
|
|
}], {fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
|
|
|
|
|
|
var senh = board.create('text', [-2, a.Y(), function() {
|
|
|
|
return "senh u = "+a.Y();
|
|
|
|
}], {fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
board.on('move', function(){
|
|
|
|
if(a.X() <= 1){
|
|
|
|
a.moveTo([1, 0]);
|
|
|
|
p.moveTo([a.X(), 0]);
|
|
|
|
q.moveTo([0, a.Y()]);
|
|
|
|
cosh.moveTo([a.X()+0.02, -0.25]);
|
|
|
|
senh.moveTo([-2, a.Y()+0.02]);
|
|
|
|
} else {
|
|
|
|
a.moveTo([a.X(), Math.sqrt(a.X()**2 - 1)]);
|
|
|
|
p.moveTo([a.X(), 0]);
|
|
|
|
q.moveTo([0, a.Y()]);
|
|
|
|
cosh.moveTo([a.X()+0.02, -0.25]);
|
|
|
|
senh.moveTo([-2, a.Y()]);
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
board.update();
|
|
|
|
|
|
//Comando para deixar responsivo (OBS.: Só isso não basta, precisa o css também estar configurado)
|
|
|
|
|
|
var resize = function () {
|
|
|
|
board.resizeContainer(board.containerObj.clientWidth, board.containerObj.clientHeight, true);
|
|
board.fullUpdate();
|
|
|
|
};
|
|
|
|
window.onresize = resize;
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |