369 lines
7.7 KiB
HTML
Executable File
369 lines
7.7 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 1.1: Triângulo retângulo</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 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: justify;
|
||
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 1.1</strong>: Triângulo Retângulo.</span>
|
||
<p>*Arraste os pontos O e A para verificar os valores de seno, cosseno e tangente. Atenção, os valores não são precisos, pois não é uma calculadora.</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
|
||
JXG.Options.renderer = 'canvas';
|
||
|
||
JXG.Options.text.cssDefaultStyle = 'fontFamily:arial';
|
||
|
||
JXG.Options.text.display = 'internal';
|
||
|
||
var board = JXG.JSXGraph.initBoard('jxgbox', {showCopyright: false, boundingbox: [-0.5, 3.5, 6.5, -1]});
|
||
|
||
|
||
|
||
var o = board.create('point',[0,0], {name:"O", size:"1", label:{autoPosition: true, offset:[-15, -15]}});
|
||
|
||
var a = board.create('point',[3.5,3], {name:"A", size:"1",});
|
||
|
||
var p = board.create('point',["X(A)","Y(O)"], {name:"P", size:"1", label:{autoPosition: true, offset:[10, -15]}});
|
||
|
||
var alpha = board.create('angle', [p, o, a], {fillColor:'#00000000', label:{ visible: false, fontSize:"20px", autoPosition: false, offset:[-2, -17]}});
|
||
|
||
var alpha_value = board.create('text', [0.7, 0.25, function() {
|
||
|
||
|
||
|
||
var an = Math.floor((alpha.Value()* (180/Math.PI) + Number.EPSILON)*10000)/10000;
|
||
|
||
return "α = "+an+"°";
|
||
|
||
}], {anchor: alpha, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
|
||
|
||
|
||
|
||
|
||
var senoTxt = board.create('text', [4.2, 2.75, function(){
|
||
|
||
var seno = Math.floor(((a.Y() - p.Y())/(Math.sqrt(Math.pow(a.Y() - p.Y(),2)+Math.pow(p.X() - o.X(),2)))+ Number.EPSILON)*100000)/100000;
|
||
|
||
|
||
return `sen(α) = ${seno}`;
|
||
|
||
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
|
||
|
||
|
||
|
||
|
||
var cosTxt = board.create('text', [4.2, 1.45, function(){
|
||
|
||
var cosseno = Math.floor(((p.X() - o.X())/(Math.sqrt(Math.pow(a.Y() - p.Y(),2)+Math.pow(p.X() - o.X(),2)))+ Number.EPSILON)*100000)/100000;
|
||
|
||
return `cos(α) = ${cosseno}`;
|
||
|
||
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
|
||
|
||
|
||
|
||
|
||
var tgTxt = board.create('text', [4.2, 0.1, function(){
|
||
|
||
var tangente = Math.floor((((a.Y() - p.Y())/(p.X() - o.X()))+ Number.EPSILON)*100000)/100000;
|
||
|
||
return `tg(α) = ${tangente}`;
|
||
|
||
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
|
||
|
||
|
||
|
||
|
||
|
||
var li1 = board.create('line',[o,p],
|
||
|
||
{straightFirst:false, straightLast:false, strokeWidth:1});
|
||
|
||
var li2 = board.create('line',[o,a],
|
||
|
||
{straightFirst:false, straightLast:false, strokeWidth:1});
|
||
|
||
var li2 = board.create('line',[p,a],
|
||
|
||
{straightFirst:false, straightLast:false, strokeWidth:1});
|
||
|
||
|
||
board.on('move', function(){
|
||
|
||
a.moveTo([a.X(), a.Y()]);
|
||
o.moveTo([o.X(), 0]);
|
||
|
||
if (p.X() <= o.X() || a.Y() <= p.Y() ){
|
||
|
||
alpha_value.setAttribute({visible:false});
|
||
|
||
alpha.setAttribute({visible:false});
|
||
|
||
senoTxt.setAttribute({visible:false});
|
||
|
||
cosTxt.setAttribute({visible:false});
|
||
|
||
tgTxt.setAttribute({visible:false});
|
||
|
||
} else {
|
||
|
||
alpha_value.setAttribute({visible:true});
|
||
|
||
alpha.setAttribute({visible:true});
|
||
|
||
senoTxt.setAttribute({visible:true});
|
||
|
||
cosTxt.setAttribute({visible:true});
|
||
|
||
tgTxt.setAttribute({visible:true});
|
||
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
|
||
//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> |