editoramoan/trigonometria-hiperbolica
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INÍCIO

Browse Source
This commit is contained in:
Rafael Tavares Juliani committed 2025-09-04 16:07:07 -03:00
commit f269aace6b
4722 files changed
+512564
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

interativo/GraficoCapa.svg
Executable
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="400" overflow="hidden"><defs><marker id="c" stroke="#666" stroke-opacity="1" fill="#666" fill-opacity="1" stroke-width="0" orient="auto" markerUnits="strokeWidth" refY="5" refX=".1" display="inherit" viewBox="0 0 80 80" markerHeight="64" markerWidth="64"><path d="M0 0l10 5-10 5z"/></marker><marker id="b" stroke="#666" stroke-opacity="1" fill="#666" fill-opacity="1" stroke-width="0" orient="auto" markerUnits="strokeWidth" refY="5" refX=".1" display="inherit" viewBox="0 0 80 80" markerHeight="64" markerWidth="64"><path d="M0 0l10 5-10 5z"/></marker><linearGradient id="a"><stop offset="0" stop-color="#6ac5fe"/><stop offset="1" stop-color="#6ac5fe" stop-opacity="0"/></linearGradient></defs><path fill="none" visibility="inherit" d="M170 118v83h87zM382 201l43-106-168 106z"/><ellipse stroke="#ea0c57" stroke-width="2.2" cx="257" cy="201" rx="124.5" ry="116.667" style="mix-blend-mode:normal" visibility="inherit" fill="none"/><g stroke-width="2.2" fill="none" stroke="#11ddaf" stroke-linecap="round" stroke-linejoin="round" visibility="inherit"><path d="M381.5 201l.122-5.157.121-2.138.122-1.642.121-1.385.122-1.221.121-1.105.122-1.017.122-.947.121-.89.122-.842.121-.802.122-.767.122-.736.121-.709.243-1.346.243-1.267.244-1.2.243-1.142.243-1.094.243-1.05.243-1.012.243-.978.244-.947.243-.919.243-.894.243-.87.243-.85.243-.829.244-.81.243-.794.243-.778.243-.763.243-.748.243-.736.244-.723.243-.711.365-1.046.364-1.022.365-1.001.365-.981.364-.962.365-.944.365-.928.365-.912.364-.897.365-.884.365-.87.365-.857.364-.846.365-.835.365-.823.365-.814.364-.803.365-.794.365-.785.365-.776.364-.768.365-.76.365-.753.365-.744.364-.738.365-.731.365-.724.365-.718.364-.712.365-.705.486-.932.487-.922.486-.912.486-.904.487-.894.486-.886.486-.878.487-.87.486-.863.486-.856.487-.848.486-.842.486-.835.487-.829.486-.823.486-.816.487-.811.486-.805.486-.8.487-.795.486-.79.486-.784.487-.78.486-.775.486-.77.487-.766.486-.762.486-.757.487-.754.486-.75.486-.745.487-.741.486-.738.486-.734.487-.731.486-.727.486-.724.487-.72.486-.718.486-.714.487-.711.486-.708.486-.705.487-.703.607-.873.608-.87.608-.865.608-.861.608-.857.608-.853.608-.85.608-.845.608-.843.608-.838.608-.835.608-.832.607-.828.608-.825.608-.822.608-.819.608-.816.608-.813.608-.81.608-.807.608-.804.608-.802.608-.799.607-.796.608-.794.608-.79.608-.79.608-.786.608-.784.608-.782.608-.779.608-.777.608-.775.608-.773.607-.77.608-.769.608-.766.608-.765.608-.762.608-.76.608-.76.608-.756.608-.755.608-.753.608-.752.607-.75.608-.747.608-.746.608-.745.608-.743.608-.74.608-.74.608-.739.608-.736.608-.735.608-.734.607-.732.608-.73.608-.73.608-.727.608-.726.608-.725.608-.724.608-.722.608-.721.608-.72.608-.719.607-.717.608-.716.608-.715.608-.713.608-.712.608-.712.608-.71.608-.709.608-.707.608-.707.608-.706.607-.704.608-.703.608-.703.608-.701.608-.7.73-.84.73-.837.729-.836.73-.835.729-.834.73-.832.729-.83.73-.83.729-.828.729-.827.73-.826.729-.824.73-.823.729-.822.73-.82.729-.82.73-.819.729-.817.73-.817.729-.815.73-.814.729-.813.73-.812.729-.81.73-.81.729-.81.73-.807.729-.807.73-.805.729-.805.73-.804.729-.803.73-.802.729-.801.73-.8.729-.8.73-.798.729-.798.73-.796.729-.796.73-.795.729-.794.73-.794.729-.792.73-.792.729-.79.73-.79.364-.396M381.5 201l.122 5.157.121 2.138.122 1.642.121 1.385.122 1.221.121 1.105.122 1.017.122.947.121.89.122.842.121.802.122.767.122.736.121.709.243 1.346.243 1.267.244 1.2.243 1.142.243 1.094.243 1.05.243 1.012.243.978.244.947.243.919.243.894.243.87.243.85.243.829.244.81.243.794.243.778.243.763.243.748.243.736.244.723.243.711.365 1.046.364 1.022.365 1.001.365.981.364.962.365.944.365.928.365.912.364.897.365.884.365.87.365.857.364.846.365.835.365.823.365.814.364.803.365.794.365.785.365.776.364.768.365.76.365.753.365.744.364.738.365.731.365.724.365.718.364.712.365.705.486.932.487.922.486.912.486.904.487.894.486.886.486.878.487.87.486.863.486.856.487.848.486.842.486.835.487.829.486.823.486.816.487.811.486.805.486.8.487.795.486.79.486.784.487.78.486.775.486.77.487.766.486.762.486.757.487.754.486.75.486.745.487.741.486.738.486.734.487.731.486.727.486.724.487.72.486.718.486.714.487.711.486.708.486.705.487.703.607.873.608.87.608.865.608.861.608.857.608.853.608.85.608.845.608.843.608.838.608.835.608.832.607.828.608.825.608.822.608.819.608.816.608.813.608.81.608.807.608.804.608.802.608.799.607.796.608.794.608.79.608.79.608.786.608.784.608.782.608.779.608.777.608.775.608.773.607.77.608.769.608.766.608.765.608.762.608.76.608.76.608.756.608.755.608.753.608.752.607.75.608.747.608.746.608.745.608.743.608.74.608.74.608.739.608.736.608.735.608.734.607.732.608.73.608.73.608.727.608.726.608.725.608.724.608.722.608.721.608.72.608.719.607.717.608.716.608.715.608.713.608.712.608.712.608.71.608.709.608.707.608.707.608.706.607.704.608.703.608.703.608.701.608.7.73.84.73.837.729.836.73.835.729.834.73.832.729.83.73.83.729.828.729.827.73.826.729.824.73.823.729.822.73.82.729.82.73.819.729.817.73.817.729.815.73.814.729.813.73.812.729.81.73.81.729.81.73.807.729.80Line truncated
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

interativo/capa.html
Executable
+205
View File
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>As funções trigonométricas circulares e hiperbólicas</title>
<style>
html {
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'gfs_artemisia';
src: url('../gfs_artemisia/GFSArtemisia.otf') format('opentype'),
url('../gfs_artemisia/GFSArtemisia.ttf') format('trutype');
}
@font-face {
font-family: 'suez';
src: url('../suez/SuezOne-Regular.otf') format('opentype'),
url('../suez/SuezOne-Regular.ttf') format('trutype');
}
@font-face {
font-family: 'oswald';
src: url('../oswald/Oswald-Bold.otf') format('opentype'),
url('../oswald/Oswald-Bold.ttf') format('trutype');
}
body {
background: #2f2e2c;
margin: 0px;
padding: 0px;
}
.containerCentral {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 480px;
height: 93vh;
margin: 0px auto 10px auto;
position: relative;
}
.containerFundo {
display: block;
width: 480px;
margin: 2px auto 20px auto;
}
.containerCentral h1 {
color: #fff;
font-family: "suez";
text-align: left;
letter-spacing: 3px;
margin: 0px 5px;
}
.containerCentral h2 {
font-family: "oswald";
margin: 8px 5px;
}
h2.autor {
color: #fff;
text-align: right;
}
h2.editora {
width: 90px;
font-size: 15px;
color: #D7AF04;
}
a {
text-decoration: none;
}
a.ed {
position: absolute;
top: 27px;
right: -33px;
margin: 0px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
@media only screen and (max-width: 490px) {
.containerCentral, .containerFundo {
width: 100%;
}
}
@media only screen and (min-height: 720px) {
svg {
width: 130%;
}
}
</style>
</head>
<body>
<div class="containerCentral">
<h1>As funções trigonométricas</h1>
<!--<object id="my-svg" type="image/svg+xml" data="teste.svg" alt="Gráfico com as definições da trigonometria circular e da hiperbólica."></object>-->
<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" overflow="hidden" viewBox="0 0 550 400" alt="Gráfico com definição da trigonometria circular e da hiperbólica">
<defs>
<marker id="c" stroke="#666" stroke-opacity="1" fill="#666" fill-opacity="1" stroke-width="0" orient="auto" markerUnits="strokeWidth" refY="5" refX=".1" display="inherit" viewBox="0 0 80 80" markerHeight="64" markerWidth="64">
<path d="M0 0l10 5-10 5z"/>
</marker>
<marker id="b" stroke="#666" stroke-opacity="1" fill="#666" fill-opacity="1" stroke-width="0" orient="auto" markerUnits="strokeWidth" refY="5" refX=".1" display="inherit" viewBox="0 0 80 80" markerHeight="64" markerWidth="64">
<path d="M0 0l10 5-10 5z"/>
</marker>
<linearGradient id="a">
<stop offset="0" stop-color="#6ac5fe"/><stop offset="1" stop-color="#6ac5fe" stop-opacity="0"/>
</linearGradient>
</defs>
<path fill="none" visibility="inherit" d="M170 118v83h87zM382 201l43-106-168 106z"/><ellipse stroke="#ea0c57" stroke-width="2.2" cx="257" cy="201" rx="124.5" ry="116.667" style="mix-blend-mode:normal" visibility="inherit" fill="none"/><g stroke-width="2.2" fill="none" stroke="#11ddaf" stroke-linecap="round" stroke-linejoin="round" visibility="inherit">
<path d="M381.5 201l.122-5.157.121-2.138.122-1.642.121-1.385.122-1.221.121-1.105.122-1.017.122-.947.121-.89.122-.842.121-.802.122-.767.122-.736.121-.709.243-1.346.243-1.267.244-1.2.243-1.142.243-1.094.243-1.05.243-1.012.243-.978.244-.947.243-.919.243-.894.243-.87.243-.85.243-.829.244-.81.243-.794.243-.778.243-.763.243-.748.243-.736.244-.723.243-.711.365-1.046.364-1.022.365-1.001.365-.981.364-.962.365-.944.365-.928.365-.912.364-.897.365-.884.365-.87.365-.857.364-.846.365-.835.365-.823.365-.814.364-.803.365-.794.365-.785.365-.776.364-.768.365-.76.365-.753.365-.744.364-.738.365-.731.365-.724.365-.718.364-.712.365-.705.486-.932.487-.922.486-.912.486-.904.487-.894.486-.886.486-.878.487-.87.486-.863.486-.856.487-.848.486-.842.486-.835.487-.829.486-.823.486-.816.487-.811.486-.805.486-.8.487-.795.486-.79.486-.784.487-.78.486-.775.486-.77.487-.766.486-.762.486-.757.487-.754.486-.75.486-.745.487-.741.486-.738.486-.734.487-.731.486-.727.486-.724.487-.72.486-.718.486-.714.487-.711.486-.708.486-.705.487-.703.607-.873.608-.87.608-.865.608-.861.608-.857.608-.853.608-.85.608-.845.608-.843.608-.838.608-.835.608-.832.607-.828.608-.825.608-.822.608-.819.608-.816.608-.813.608-.81.608-.807.608-.804.608-.802.608-.799.607-.796.608-.794.608-.79.608-.79.608-.786.608-.784.608-.782.608-.779.608-.777.608-.775.608-.773.607-.77.608-.769.608-.766.608-.765.608-.762.608-.76.608-.76.608-.756.608-.755.608-.753.608-.752.607-.75.608-.747.608-.746.608-.745.608-.743.608-.74.608-.74.608-.739.608-.736.608-.735.608-.734.607-.732.608-.73.608-.73.608-.727.608-.726.608-.725.608-.724.608-.722.608-.721.608-.72.608-.719.607-.717.608-.716.608-.715.608-.713.608-.712.608-.712.608-.71.608-.709.608-.707.608-.707.608-.706.607-.704.608-.703.608-.703.608-.701.608-.7.73-.84.73-.837.729-.836.73-.835.729-.834.73-.832.729-.83.73-.83.729-.828.729-.827.73-.826.729-.824.73-.823.729-.822.73-.82.729-.82.73-.819.729-.817.73-.817.729-.815.73-.814.729-.813.73-.812.729-.81.73-.81.729-.81.73-.807.729-.807.73-.805.729-.805.73-.804.729-.803.73-.802.729-.801.73-.8.729-.8.73-.798.729-.798.73-.796.729-.796.73-.795.729-.794.73-.794.729-.792.73-.792.729-.79.73-.79.364-.396M381.5 201l.122 5.157.121 2.138.122 1.642.121 1.385.122 1.221.121 1.105.122 1.017.122.947.121.89.122.842.121.802.122.767.122.736.121.709.243 1.346.243 1.267.244 1.2.243 1.142.243 1.094.243 1.05.243 1.012.243.978.244.947.243.919.243.894.243.87.243.85.243.829.244.81.243.794.243.778.243.763.243.748.243.736.244.723.243.711.365 1.046.364 1.022.365 1.001.365.981.364.962.365.944.365.928.365.912.364.897.365.884.365.87.365.857.364.846.365.835.365.823.365.814.364.803.365.794.365.785.365.776.364.768.365.76.365.753.365.744.364.738.365.731.365.724.365.718.364.712.365.705.486.932.487.922.486.912.486.904.487.894.486.886.486.878.487.87.486.863.486.856.487.848.486.842.486.835.487.829.486.823.486.816.487.811.486.805.486.8.487.795.486.79.486.784.487.78.486.775.486.77.487.766.486.762.486.757.487.754.486.75.486.745.487.741.486.738.486.734.487.731.486.727.486.724.487.72.486.718.486.714.487.711.486.708.486.705.487.703.607.873.608.87.608.865.608.861.608.857.608.853.608.85.608.845.608.843.608.838.608.835.608.832.607.828.608.825.608.822.608.819.608.816.608.813.608.81.608.807.608.804.608.802.608.799.607.796.608.794.608.79.608.79.608.786.608.784.608.782.608.779.608.777.608.775.608.773.607.77.608.769.608.766.608.765.608.762.608.76.608.76.608.756.608.755.608.753.608.752.607.75.608.747.608.746.608.745.608.743.608.74.608.74.608.739.608.736.608.735.608.734.607.732.608.73.608.73.608.727.608.726.608.725.608.724.608.722.608.721.608.72.608.719.607.717.608.716.608.715.608.713.608.712.608.712.608.71.608.709.608.707.608.707.608.706.607.704.608.703.608.703.608.701.608.7.73.84.73.837.729.836.73.835.729.834.73.832.729.83.73.83.729.828.729.827.73.826.729.824.73.823.729.822.73.82.729.82.73.819.729.817.73.817.729.815.73.814.729.813.73.812.729.81.73.81.729.81.73.807.729.807.73.805.729.805.73.804.729.803.73.802.729.801.73.8.729.8.73.798.729.798.73.796.729.796.73.795.729.794.73.794.729.792.73.792.729.79.73.79.364.396"/></g>
<g fill="#4a96fe" stroke="#4996ff" stroke-width="1.7"><g stroke-linejoin="round"><path marker-end="url(#b)" visibility="inherit" d="M249 346V12" transform="matrix(1 0 0 1.15685 7.135 .744)"/><path marker-end="url(#c)" visibility="inherit" d="M4 175h482" transform="matrix(1 0 0 1.15685 7.135 .744)"/><text class="JXGtext" x="373.5" text-anchor="middle" y="178" dy="9.6" style="white-space:nowrap" font-size="12" font-family="arial" visibility="inherit" transform="matrix(1 0 0 1.15685 7.135 .744)">1</text><text class="JXGtext" x="245" text-anchor="end" y="70.435" dy="3.6" style="white-space:nowrap" font-size="12" font-family="arial" visibility="inherit" transform="matrix(1 0 0 1.15685 7.135 .744)">1</text><text class="JXGtext" x="245" text-anchor="end" y="274.378" dy="3.6" style="white-space:nowrap" font-size="12" font-family="arial" visibility="inherit" transform="matrix(1 0 0 1.15685 7.135 .744)">−1</text><text class="JXGtext" x="122.5" text-anchor="middle" y="178" dy="9.6" style="white-space:nowrap" font-size="12" font-family="arial" visibility="inherit" transform="matrix(1 0 0 1.15685 7.135 .744)">−1</text></g><path d="M249.309 14.822L257.242-.25l7.14 15.072z" stroke-width="2.5" transform="matrix(1.04142 0 0 .99963 -11.678 2.584)"/><path d="M249.309 14.822L257.242-.25l7.14 15.072z" stroke-width="2.5" transform="matrix(0 .99963 -1.04142 0 507.557 -53.908)"/></g><path stroke-linecap="round" stroke-linejoin="round" data-ignore="true" stroke="#fff" stroke-width="1.7" fill="none" d="M257 203h24.9c0-4.635-1.473-9.164-4.231-13.012L257 203" visibility="inherit"/><path stroke-linecap="round" stroke-linejoin="round" data-ignore="true" stroke="#fff" stroke-width="1.503" fill="none" d="M256.428 203.059l-15.67-14.48c-4.296 3.813-6.717 9.032-6.717 14.48h22.387" visibility="inherit"/><path stroke="#fff" data-ignore="true" stroke-width="2.052" stroke-dasharray="8.20878,4.10439" visibility="inherit" fill="none" d="M165.4 122H257"/><path stroke="#fff" data-ignore="true" stroke-width="2.011" stroke-dasharray="8.04369,4.02185" visibility="inherit" fill="none" d="M425 95H255.16"/><path stroke="#fff" data-ignore="true" stroke-width="2.017" stroke-dasharray="8.06914,4.03457" visibility="inherit" fill="none" d="M425 202.84V95"/><g fill="#edcc70" stroke="#f7ce62" stroke-width="2.2" visibility="inherit">
<path stroke-linecap="round" stroke-linejoin="round" d="M382 203l43-106"/><path data-ignore="true" stroke="#fff" stroke-width="2" stroke-dasharray="8,4" d="M164 122.749V203"/><path stroke-width="2.208" d="M131.576 203H257"/><path stroke-linecap="round" stroke-linejoin="round" d="M425 97L257 203"/><path d="M257 203h125"/><path stroke-width="1.968" stroke-linecap="round" overflow="hidden" stroke-linejoin="round" d="M164.011 122.738l-31.67 79.203"/><path stroke-width="1.658" overflow="hidden" d="M256.305 202.276L164 122.749"/></g><text fill="#fff" class="JXGtext" x="292" y="193" dy="3.6" style="white-space:nowrap" stroke-width="2" font-size="12" font-family="arial" visibility="inherit"><tspan style="-inkscape-font-specification:'GFS Artemisia'" font-weight="400" font-family="GFS Artemisia">β</tspan></text><text style="line-height:1.25" x="261.804" y="124.912" font-weight="400" font-size="40" font-family="sans-serif" overflow="hidden" fill="#fff"><tspan x="261.804" y="124.912" style="-inkscape-font-specification:'GFS Artemisia'" font-size="10.667" font-family="GFS Artemisia">sen α</tspan></text><text style="line-height:1.25" x="218.613" y="96.991" font-weight="400" font-size="40" font-family="sans-serif" overflow="hidden" fill="#fff"><tspan x="218.613" y="96.991" font-size="10.667"><tspan style="-inkscape-font-specification:'GFS Artemisia'" font-family="GFS Artemisia">senh β</tspan></tspan></text><text fill="#fff" class="JXGtext" x="221" y="194" dominant-baseline="text-after-edge" dy="3.6" style="white-space:nowrap" stroke-width="2" font-size="12" font-family="arial" visibility="inherit"><tspan style="-inkscape-font-specification:'GFS Artemisia'" font-weight="400" font-family="GFS Artemisia">α</tspan></text><text style="line-height:1.25" x="151.964" y="212.926" font-weight="400" font-size="40" font-family="sans-serif" fill="#fff"><tspan x="151.964" y="212.926" style="-inkscape-font-specification:'GFS Artemisia'" font-size="10.667" font-family="GFS Artemisia">cos α</tspan></text><text style="line-height:1.25" x="407.678" y="213.605" font-weight="400" font-size="40" font-family="sans-serif" overflow="hidden" fill="#fff"><tspan x="407.678" y="213.605" font-size="10.667"><tspan style="-inkscape-font-specification:'GFS Artemisia'" font-family="GFS Artemisia">cosh β</tspan></tspan></text>
</svg>
<a class="ed" href="https://livro.online/editora-moan" target="blank"><h2 class="editora">Editora Moan</h2></a>
<div class="containerFundo">
<h1>circulares e hiperbólicas</h1>
<a href="https://livro.online/autor/sandro-guzzo" target="blank"><h2 class="autor">Sandro Marcos Guzzo</h2></a>
</div>
</div>
<script type="text/javascript" src="vivus.min.js"></script>
<script>
new Vivus('my-svg',
{
type: 'oneByOne',
duration: 150,
animTimingFunction: Vivus.EASE_OUT_BOUNCE
}
);
</script>
</body>
</html>
interativo/fig1-1.html
Executable
+369
View File
@@ -0,0 +1,369 @@
<!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>
interativo/fig1-2.html
Executable
+367
View File
@@ -0,0 +1,367 @@
<!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.2: Circunferência trigonométrica</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: 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 1.2</strong>: Circunferência trigonométrica.</span>
<p>*Arraste o ponto A.</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: [-4, 1.5, 4, -1.5], axis: true, keepAspectRatio: true});
var o = board.create('point',[0,0], {name:"O", size:"1", fixed: true, label:{autoPosition: true, offset:[-15, -15]}});
var a = board.create('point',[0.5, Math.sqrt(1 - Math.pow(0.5,2))], {name:"A", size:"1", showInfobox: false});
var v = board.create('point',[1,0], {name:"V", size:"1", fixed: true, label:{autoPosition: true, offset:[10, -15]}});
c1 = board.create('circle', [o, a]);
var alpha = board.create('angle', [v, o, a], {fillColor:'orange', radius: 0.3, label:{ visible: false, fontSize:"20px", autoPosition: false, offset:[-5, -17]}});
var alpha_value = board.create('text', [0.35, 0.15, function() {
return "α = "+JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0) + '°';
}], {anchor: alpha, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var senoTxt = board.create('text', [1.2, 1.2, function(){
var graus = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var seno = Math.sin(Math.PI*graus/180);
return `sen(α) = ${seno}`;
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
var cosTxt = board.create('text', [1.2, 0.9, function(){
var graus = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var cosseno = Math.cos(Math.PI*graus/180);
return `cos(α) = ${cosseno}`;
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
var tgTxt = board.create('text', [1.2, 0.6, function(){
var graus = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var tangente = Math.tan(Math.PI*graus/180);
if (graus == 90 || graus == 270) {
tangente = "-";
}
return `tg(α) = ${tangente}`;
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
var li2 = board.create('line',[o,a],
{straightFirst:false, straightLast:false, strokeWidth:1});
board.on('move', function(){
var an = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var pot = Math.pow(a.X(),2);
if (pot > 1){
pot = 1;
}
var xis = Math.sqrt(pot);
if (an > 90 && an < 270) {
xis = -xis;
}
if (an >= 0 && an <= 180){
a.moveTo([xis, Math.sqrt(1 - pot)]);
} else {
a.moveTo([xis, - Math.sqrt(1 - pot)]);
}
});
//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>
interativo/fig1-4.html
Executable
+375
View File
@@ -0,0 +1,375 @@
<!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.4: Seno e cosseno de um â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: 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 1.4</strong>: Seno e cosseno de um ângulo.</span>
<p>*Arraste o ponto A.</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: [-4, 1.5, 4, -1.5], axis: true, keepAspectRatio: true});
var o = board.create('point',[0,0], {name:"O", size:"1", fixed: true, label:{autoPosition: true, offset:[-15, -15]}});
var a = board.create('point',[0.5, Math.sqrt(1 - Math.pow(0.5,2))], {name:"A", size:"1", showInfobox: false});
var v = board.create('point',[1,0], {name:"V", size:"1", fixed: true, label:{autoPosition: true, offset:[10, -15]}});
c1 = board.create('circle', [o, a]);
var p = board.create('point',[a.X(),0], {name:"P", size:"1", showInfobox: false, label:{autoPosition: true, offset:[10, -15]}});
var q = board.create('point',[0,a.Y()], {name:"Q", size:"1", showInfobox: false, label:{autoPosition: true, offset:[10, -15]}});
var alpha = board.create('angle', [v, o, a], {fillColor:'orange', radius: 0.1, label:{ visible: false, fontSize:"20px", autoPosition: false, offset:[-5, -17]}});
var alpha_value = board.create('text', [0.1, 0.17, function() {
return "u = "+JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0) + '°';
}], {anchor: alpha, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var li2 = board.create('line',[o,a],
{straightFirst:false, straightLast:false, strokeWidth:1});
var li3 = board.create('line',[p,a],
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1, dash:2});
var li4 = board.create('line',[q,a],
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1, dash:2});
var senoTxt = board.create('text', [-1.1, a.Y(), function(){
var graus = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var seno = Math.sin(Math.PI*graus/180);
seno = Math.floor(seno*100)/100;
return `${seno}`;
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
var cosTxt = board.create('text', [a.X(), -0.35, function(){
var graus = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var cosseno = Math.cos(Math.PI*graus/180);
cosseno = Math.floor(cosseno*100)/100;
return `${cosseno}`;
}], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
board.on('move', function(){
var an = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var pot = Math.pow(a.X(),2);
if (pot > 1){
pot = 1;
}
var xis = Math.sqrt(pot);
if (an > 90 && an < 270) {
xis = -xis;
}
if (an >= 0 && an <= 180){
a.moveTo([xis, Math.sqrt(1 - pot)]);
p.moveTo([a.X(),0]);
cosTxt.moveTo([a.X(),-0.35]);
q.moveTo([0,a.Y()]);
senoTxt.moveTo([-1.1,a.Y()]);
} else {
a.moveTo([xis, - Math.sqrt(1 - pot)]);
p.moveTo([a.X(),0]);
cosTxt.moveTo([a.X(),-0.35]);
q.moveTo([0,a.Y()]);
senoTxt.moveTo([-1.1,a.Y()]);
}
});
//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>
interativo/fig1-5.html
Executable
+360
View File
@@ -0,0 +1,360 @@
<!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.5: Ângulos opostos</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;
}
@font-face {
font-family: 'gfs_artemisia';
src: url('../gfs_artemisia/GFSArtemisia.otf') format('opentype'),
url('../gfs_artemisia/GFSArtemisia.ttf') format('trutype');
}
.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;
}
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.5</strong>: Ângulos opostos.</span>
<p>*Arraste o ponto A.</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: [-4, 1.5, 4, -1.5], axis: true, keepAspectRatio: true});
var o = board.create('point',[0,0], {name:"O", size:"1", fixed: true, label:{autoPosition: true, offset:[-15, -15]}});
var a = board.create('point',[0.5, Math.sqrt(1 - Math.pow(0.5,2))], {name:"A", size:"1", showInfobox: false});
var a1 = board.create('point',[a.X(), -a.Y()], {name:"A\'", size:"1", showInfobox: false, label:{autoPosition: true, offset:[10, -15]}});
var v = board.create('point',[1,0], {name:"V", size:"1", fixed: true, label:{autoPosition: true, offset:[10, -15]}});
c1 = board.create('circle', [o, a]);
var alpha = board.create('angle', [v, o, a], {fillColor:'orange', radius: 0.1, label:{ visible: false, fontSize:"20px", autoPosition: false, offset:[-5, -17]}});
var alpha_value = board.create('text', [0.1, 0.15, function() {
return "u = "+JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0) + '°';
}], {anchor: alpha, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var beta = board.create('angle', [a1, o, v], {fillColor:'red', radius: 0.1, label:{ visible: false, fontSize:"20px", autoPosition: false}});
var beta_value = board.create('text', [0.1, -0.15, function() {
return "-u = -"+JXG.Math.Geometry.trueAngle(a1, o, v).toFixed(0) + '°';
}], {anchor: beta, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var li2 = board.create('line',[o,a],
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1});
var li3 = board.create('line',[o,a1],
{straightFirst:false, straightLast:false, strokeColor:'#00ff00', strokeWidth:1});
var VA = board.create('text', [1, 0.75, "u = VA"], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
var VA1 = board.create('text', [1, -0.75, "-u = VA\'"], {cssDefaultStyle:"fontFamily:gfs_artemisia; lineHeight: 1.5; fontSize:12px"})
board.on('move', function(){
var an = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var pot = Math.pow(a.X(),2);
if (pot > 1){
pot = 1;
}
var xis = Math.sqrt(pot);
if (an > 90 && an < 270) {
xis = -xis;
}
if (an >= 0 && an <= 180){
a.moveTo([xis, Math.sqrt(1 - pot)]);
a1.moveTo([xis, -a.Y()]);
} else {
a.moveTo([xis, - Math.sqrt(1 - pot)]);
a1.moveTo([xis, -a.Y()]);
}
});
//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>
interativo/fig1-6.html
Executable
+390
View File
@@ -0,0 +1,390 @@
<!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.6: Tangente e cotangente de um â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: 70%;
padding-bottom: 40%;
margin: 0 auto;
}
.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 1.6</strong>: Tangente e cotangente de um ângulo.</span>
<p>*Arraste o ponto A.</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, 2, 1.5, -0.5], axis: true, keepAspectRatio: true});
var o = board.create('point',[0,0], {name:"O", size:"1", fixed: true, label:{autoPosition: true, offset:[-15, -15]}});
var a = board.create('point',[0.8, Math.sqrt(1 - Math.pow(0.8,2))], {name:"A", size:"1", showInfobox: false});
var v = board.create('point',[1,0], {name:"V", size:"1", fixed: true, label:{autoPosition: true, offset:[10, -15]}});
c1 = board.create('circle', [o, a]);
var w = board.create('point', [0,1], {name: "W", fixed: true, showInfobox: false});
var xAxis = board.create('line', [o,w], {visible: false});
var yAxis = board.create('line', [o,v], {visible: false})
var t = board.create('perpendicular', [xAxis, w], {name: "t"});
var r = board.create('perpendicular', [yAxis, v], {name: "r"});
var alpha = board.create('angle', [v, o, a], {fillColor:'orange', radius: 0.1, label:{ visible: false, fontSize:"20px", autoPosition: false, offset:[-5, -17]}});
var alpha_value = board.create('text', [0.1, 0.08, function() {
return "u = "+JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0) + '°';
}], {anchor: alpha, fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var m = board.create('point', [1,Math.tan(Math.PI*JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0)/180)], {name: "M", showInfobox: false});
var n = board.create('point', [1/Math.tan(Math.PI*JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0)/180),1], {name: "N", showInfobox: false});
var prolong = board.create('line',[o,m],
{straightFirst:false, straightLast:true, strokeWidth:1});
var rTxt = board.create('text', [1.05, 1.45, "r"], {fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
var tTxt = board.create('text', [1.4, 0.95, "t"], {fontSize:"17px", cssDefaultStyle:"fontFamily:gfs_artemisia; fontSize:12px;"});
board.on('move', function(){
var an = JXG.Math.Geometry.trueAngle(v, o, a).toFixed(0);
var pot = Math.pow(a.X(),2);
if (pot > 1){
pot = 1;
}
var xis = Math.sqrt(pot);
if (an > 90 && an < 270) {
xis = -xis;
}
if (an >= 0 && an <= 90){
a.moveTo([xis, Math.sqrt(1 - pot)]);
m.moveTo([1,Math.tan(Math.PI*an/180)]);
n.moveTo([1/Math.tan(Math.PI*an/180),1])
n.setAttribute({visible:true});
alpha_value.setAttribute({visible:true});
alpha.setAttribute({visible:true});
m.setAttribute({visible:true});
prolong.setAttribute({visible:true});
c1.setAttribute({visible:true});
o.setAttribute({visible:true});
v.setAttribute({visible:true});
w.setAttribute({visible:true});
r.setAttribute({visible:true});
t.setAttribute({visible:true});
}
else {
n.setAttribute({visible:false});
alpha_value.setAttribute({visible:false});
alpha.setAttribute({visible:false});
m.setAttribute({visible:false});
prolong.setAttribute({visible:false});
c1.setAttribute({visible:false});
o.setAttribute({visible:false});
v.setAttribute({visible:false});
w.setAttribute({visible:false});
r.setAttribute({visible:false});
t.setAttribute({visible:false});
}
});
//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>
interativo/fig2-1.html
Executable
+314
View File
@@ -0,0 +1,314 @@
<!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.1: Gráfico de Hipérbole</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.1</strong>: Gráfico de Hipébole.</span>
<p>*Arraste o slider.</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: [-0.5, 4, 5.5, -0.5], axis: true, keepAspectRatio: true});
var k = board.create('slider', [[7, 3], [9, 3], [0.2, 1.5, 5]], {name:"k"});
var f = board.create('functiongraph',
[function(x){
return k.Value()/x;
}, 0.01, 13]
);
var Pv = Math.sqrt(k.Value());
var Py = board.create('point', [0, Pv], {name:'$\\sqrt{k}$', fixed: true, showInfobox: false});
var Px = board.create('point', [Pv, 0], {name:'$\\sqrt{k}$', fixed: true, showInfobox: false});
var P = board.create('point', [Pv, Pv], {name:'P', fixed: true, showInfobox: false});
var lpx = board.create('line', [Px,P], {straightFirst: false, straightLast: false, color:'#00ff00', dash: 2});
var lpy = board.create('line', [Py,P], {straightFirst: false, straightLast: false, color:'#00ff00', dash: 2});
board.on('move', function(){
Pv = Math.sqrt(k.Value());
Px.moveTo([Pv,0]);
Py.moveTo([0,Pv]);
P.moveTo([Pv,Pv]);
});
//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>
interativo/fig2-5.html
Executable
+356
View File
@@ -0,0 +1,356 @@
<!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.5: Ângulo hiperbólico de medida positiva</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.5</strong>: Ângulo hiperbólico de medida positiva.</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: [-0.5, 2.5, 5.5, -2.5], 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 ca = a.Y()/a.X(); //coeficiente angular de uma reta que passa pela origem (abaixo no borad.om('move') garantimos que a.X() nunca é zero)
var txt = board.create('point', [function(){return a.X()+0.2}, function(){return a.Y()/2}], { visible: false, label:{visible: true}, name: 'Área = $\\frac{u}{2}$'})
var SegOA = board.create('functiongraph', [function(x){
return ca*x;
}, 0, function(){return a.X();}]);
var hippos = board.create('functiongraph', [function(x){ return Math.sqrt(x**2-1);}, 1, function(){ return a.X();}]);
var regiaoPintada = board.create('curve', [[], []], {strokeWidth:1, fillColor:'#111', fillOpacity: 0.6});
regiaoPintada.updateDataArray = function() {
// Ponto inicial (0, 0)
this.dataX = [0];
this.dataY = [0];
// Todos os pontos da parte positiva da hipérbole segmento OA
this.dataX = this.dataX.concat( hippos.points.map( p => p.usrCoords[1] ) );
this.dataY = this.dataY.concat( hippos.points.map( p => p.usrCoords[2] ) );
// Fecha a curva com o ponto inicial (0,0)
this.dataX.push(0);
this.dataY.push(0);
};
board.on('move', function(){
if(a.X() <= 1){
a.moveTo([1, 0]);
ca = a.Y()/a.X();
} else {
a.moveTo([a.X(), Math.sqrt(a.X()**2 - 1)]);
ca = a.Y()/a.X();
}
});
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>
interativo/fig2-7.html
Executable
+389
View File
@@ -0,0 +1,389 @@
<!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>
interativo/vivus.min.js
Vendored Executable
+1
View File
@@ -0,0 +1 @@
!function(){"use strict";function r(t){if(void 0===t)throw new Error('Pathformer [constructor]: "element" parameter is required');if(t.constructor===String&&!(t=document.getElementById(t)))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(t instanceof window.SVGElement||t instanceof window.SVGGElement||/^svg$/i.test(t.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=t,this.scan(t)}var n,e,t,h;function i(t,e,r){n(),this.isReady=!1,this.setElement(t,e),this.setOptions(e),this.setCallback(r),this.isReady&&this.init()}r.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],r.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],r.prototype.scan=function(t){for(var e,r,n,i=t.querySelectorAll(this.TYPES.join(",")),a=0;a<i.length;a++)r=(0,this[(e=i[a]).tagName.toLowerCase()+"ToPath"])(this.parseAttr(e.attributes)),n=this.pathMaker(e,r),e.parentNode.replaceChild(n,e)},r.prototype.lineToPath=function(t){var e={},r=t.x1||0,n=t.y1||0,i=t.x2||0,a=t.y2||0;return e.d="M"+r+","+n+"L"+i+","+a,e},r.prototype.rectToPath=function(t){var e={},r=parseFloat(t.x)||0,n=parseFloat(t.y)||0,i=parseFloat(t.width)||0,a=parseFloat(t.height)||0;if(t.rx||t.ry){var o=parseInt(t.rx,10)||-1,s=parseInt(t.ry,10)||-1;o=Math.min(Math.max(o<0?s:o,0),i/2),s=Math.min(Math.max(s<0?o:s,0),a/2),e.d="M "+(r+o)+","+n+" L "+(r+i-o)+","+n+" A "+o+","+s+",0,0,1,"+(r+i)+","+(n+s)+" L "+(r+i)+","+(n+a-s)+" A "+o+","+s+",0,0,1,"+(r+i-o)+","+(n+a)+" L "+(r+o)+","+(n+a)+" A "+o+","+s+",0,0,1,"+r+","+(n+a-s)+" L "+r+","+(n+s)+" A "+o+","+s+",0,0,1,"+(r+o)+","+n}else e.d="M"+r+" "+n+" L"+(r+i)+" "+n+" L"+(r+i)+" "+(n+a)+" L"+r+" "+(n+a)+" Z";return e},r.prototype.polylineToPath=function(t){var e,r,n={},i=t.points.trim().split(" ");if(-1===t.points.indexOf(",")){var a=[];for(e=0;e<i.length;e+=2)a.push(i[e]+","+i[e+1]);i=a}for(r="M"+i[0],e=1;e<i.length;e++)-1!==i[e].indexOf(",")&&(r+="L"+i[e]);return n.d=r,n},r.prototype.polygonToPath=function(t){var e=r.prototype.polylineToPath(t);return e.d+="Z",e},r.prototype.ellipseToPath=function(t){var e={},r=parseFloat(t.rx)||0,n=parseFloat(t.ry)||0,i=parseFloat(t.cx)||0,a=parseFloat(t.cy)||0,o=i-r,s=a,h=parseFloat(i)+parseFloat(r),l=a;return e.d="M"+o+","+s+"A"+r+","+n+" 0,1,1 "+h+","+l+"A"+r+","+n+" 0,1,1 "+o+","+l,e},r.prototype.circleToPath=function(t){var e={},r=parseFloat(t.r)||0,n=parseFloat(t.cx)||0,i=parseFloat(t.cy)||0,a=n-r,o=i,s=parseFloat(n)+parseFloat(r),h=i;return e.d="M"+a+","+o+"A"+r+","+r+" 0,1,1 "+s+","+h+"A"+r+","+r+" 0,1,1 "+a+","+h,e},r.prototype.pathMaker=function(t,e){var r,n,i=document.createElementNS("http://www.w3.org/2000/svg","path");for(r=0;r<t.attributes.length;r++)n=t.attributes[r],-1===this.ATTR_WATCH.indexOf(n.name)&&i.setAttribute(n.name,n.value);for(r in e)i.setAttribute(r,e[r]);return i},r.prototype.parseAttr=function(t){for(var e,r={},n=0;n<t.length;n++){if(e=t[n],-1!==this.ATTR_WATCH.indexOf(e.name)&&-1!==e.value.indexOf("%"))throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");r[e.name]=e.value}return r},i.LINEAR=function(t){return t},i.EASE=function(t){return-Math.cos(t*Math.PI)/2+.5},i.EASE_OUT=function(t){return 1-Math.pow(1-t,3)},i.EASE_IN=function(t){return Math.pow(t,3)},i.EASE_OUT_BOUNCE=function(t){var e=1-Math.cos(t*(.5*Math.PI)),r=Math.pow(e,1.5),n=Math.pow(1-t,2);return 1-n+(1-Math.abs(Math.cos(r*(2.5*Math.PI))))*n},i.prototype.setElement=function(e,r){var t,n;if(void 0===e)throw new Error('Vivus [constructor]: "element" parameter is required');if(e.constructor===String&&!(e=document.getElementById(e)))throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');if(this.parentEl=e,r&&r.file){n=this,t=function(){var t=document.createElement("div");t.innerHTML=this.responseText;var e=t.querySelector("svg");if(!e)throw new Error("Vivus [load]: Cannot find the SVG in the loaded file : "+r.file);n.el=e,n.el.setAttribute("width","100%"),n.el.setAttribute("height","100%"),n.parentEl.appendChild(n.el),n.isReady=!0,n.init(),n=null};var i=new window.XMLHttpRequest;return i.addEventListener("load",t),i.open("GET",r.file),void i.send()}switch(e.constructor){case window.SVGSVGElement:case window.SVGElement:case window.SVGGElement:this.el=e,this.isReady=!0;break;case window.HTMLObjectElement:n=this,(t=function(t){if(!n.isReady){if(n.el=e.contentDocument&&e.contentDocument.querySelector("svg"),!n.el&&t)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");n.el&&(e.getAttribute("built-by-vivus")&&(n.parentEl.insertBefore(n.el,e),n.parentEl.removeChild(e),n.el.setAttribute("width","100%"),n.el.setAttribute("height","100%")),n.isReady=!0,n.init(),n=null)}})()||e.addEventListener("load",t);break;default:throw new Error('Vivus [constructor]: "element" parameter is not valid (or Line truncated