Kamis, 09 Mei 2019
mencari persamaan linear menggunakan metode gauss
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aljabar Linier</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1>Gauss Matrix Calculator</h1>
<h3>Made with HTML, CSS, & jQuery</h3>
<div class="matrixform">
<p>Soal : </p>
<br>
x + y + z = 6 <br>
x + 2y - z = 2 <br>
2x + y x 2z = 10 <br>
<button id="btnSlideDown">Hitung Bosque</button>
</div>
<div class="box" id="box">
<h3>Jawaban : </h3>
<div class="result">
<div class="matrix">
<p class="block" id="a11"></p>
<p class="block" id="a12"></p>
<p class="block" id="a13"></p>
<p class="block" id="a14"></p>
<br>
<p class="block" id="a21"></p>
<p class="block" id="a22"></p>
<p class="block" id="a23"></p>
<p class="block" id="a24"></p>
<br>
<p class="block" id="a31"></p>
<p class="block" id="a32"></p>
<p class="block" id="a33"></p>
<p class="block" id="a34"></p>
</div>
<div>
<p>Penjabaran Matriks 1 :</p>
<br>
B3 - (2 x B1)
</div>
<div class="matrix">
<p class="block" id="b11"></p>
<p class="block" id="b12"></p>
<p class="block" id="b13"></p>
<p class="block" id="b14"></p>
<br>
<p class="block" id="b21"></p>
<p class="block" id="b22"></p>
<p class="block" id="b23"></p>
<p class="block" id="b24"></p>
<br>
<p class="block" id="b31"></p>
<p class="block" id="b32"></p>
<p class="block" id="b33"></p>
<p class="block" id="b34"></p>
</div>
<div class="matrix">
<p class="block" id="c11"></p>
<p class="block" id="c12"></p>
<p class="block" id="c13"></p>
<p class="block" id="c14"></p>
<br>
<p class="block" id="c21"></p>
<p class="block" id="c22"></p>
<p class="block" id="c23"></p>
<p class="block" id="c24"></p>
<br>
<p class="block" id="c31"></p>
<p class="block" id="c32"></p>
<p class="block" id="c33"></p>
<p class="block" id="c34"></p>
</div>
<div>
<p>Penjabaran Matriks 2 :</p>
<br>
B2 + (2 x B3)
</div>
<div class="matrix">
<p class="block" id="d11"></p>
<p class="block" id="d12"></p>
<p class="block" id="d13"></p>
<p class="block" id="d14"></p>
<br>
<p class="block" id="d21"></p>
<p class="block" id="d22"></p>
<p class="block" id="d23"></p>
<p class="block" id="d24"></p>
<br>
<p class="block" id="d31"></p>
<p class="block" id="d32"></p>
<p class="block" id="d33"></p>
<p class="block" id="d34"></p>
</div>
<div class="matrix">
<p class="block" id="e11"></p>
<p class="block" id="e12"></p>
<p class="block" id="e13"></p>
<p class="block" id="e14"></p>
<br>
<p class="block" id="e21"></p>
<p class="block" id="e22"></p>
<p class="block" id="e23"></p>
<p class="block" id="e24"></p>
<br>
<p class="block" id="e31"></p>
<p class="block" id="e32"></p>
<p class="block" id="e33"></p>
<p class="block" id="e34"></p>
</div>
<div>
<p>Penjabaran Matriks 3 :</p>
<br>
B2 - B1
</div>
<div class="matrix">
<p class="block" id="f11"></p>
<p class="block" id="f12"></p>
<p class="block" id="f13"></p>
<p class="block" id="f14"></p>
<br>
<p class="block" id="f21"></p>
<p class="block" id="f22"></p>
<p class="block" id="f23"></p>
<p class="block" id="f24"></p>
<br>
<p class="block" id="f31"></p>
<p class="block" id="f32"></p>
<p class="block" id="f33"></p>
<p class="block" id="f34"></p>
</div>
</div>
Penjabaran X, Y, Z<br>
-y = -2<br>
y = 2 <br>
<br>
<div class="result">
<div class="matrix">
<p>-y - 2z = -8</p> <br>
<p>-(2) - 2z = -8</p> <br>
<p>-2z = -8 + 2</p> <br>
<p>-2z = -6</p> <br>
<p>z = 3</p> <br>
</div>
<div class="matrix">
<p>x + y + z = 6</p><br>
<p>x + (2) + (3) = 6</p><br>
<p>x + 5 = 6</p><br>
<p>x = 1</p><br>
</div>
</div>
</div>
</center>
<script src="jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#box').hide();;
});
$('#btnSlideDown').click(function(){
$('#box').slideDown(500);
$("body").css('margin-bottom', '50px')
});
$( "button" ).click(function() {
//Set Variabel
var a11=1;
var a12=1;
var a13=1;
var a14=6;
var a21=1;
var a22=2;
var a23=-1;
var a24=2;
var a31=2;
var a32=1;
var a33=2;
var a34=10;
//Penjabaran Matriks 1
var q=a31-(2*a11);
var w=a32-(2*a12);
var e=a33-(2*a13);
var r=a34-(2*a14);
$( "#a11" ).text( a11 );
$( "#a12" ).text( a12 );
$( "#a13" ).text( a13 );
$( "#a14" ).text( a14 );
$( "#a21" ).text( a21 );
$( "#a22" ).text( a22 );
$( "#a23" ).text( a23 );
$( "#a24" ).text( a24 );
$( "#a31" ).text( a31 );
$( "#a32" ).text( a32 );
$( "#a33" ).text( a33 );
$( "#a34" ).text( a34 );
$( "#b11" ).text( a11 );
$( "#b12" ).text( a12 );
$( "#b13" ).text( a13 );
$( "#b14" ).text( a14 );
$( "#b21" ).text( a21 );
$( "#b22" ).text( a22 );
$( "#b23" ).text( a23 );
$( "#b24" ).text( a24 );
$( "#b31" ).text( q );
$( "#b32" ).text( w );
$( "#b33" ).text( e );
$( "#b34" ).text( r);
//Penjabaran Matriks 2
var a=(2*q)+1;
var s=(2*w)+2;
var d=(2*e)-1;
var f=(2*r)+2;
$( "#c11" ).text( a11 );
$( "#c12" ).text( a12 );
$( "#c13" ).text( a13 );
$( "#c14" ).text( a14 );
$( "#c21" ).text( a21 );
$( "#c22" ).text( a22 );
$( "#c23" ).text( a23 );
$( "#c24" ).text( a24 );
$( "#c31" ).text( q );
$( "#c32" ).text( w );
$( "#c33" ).text( e );
$( "#c34" ).text( r );
$( "#d11" ).text( a11 );
$( "#d12" ).text( a12 );
$( "#d13" ).text( a13 );
$( "#d14" ).text( a14 );
$( "#d21" ).text( a );
$( "#d22" ).text( s );
$( "#d23" ).text( d );
$( "#d24" ).text( f );
$( "#d31" ).text( q );
$( "#d32" ).text( w );
$( "#d33" ).text( e );
$( "#d34" ).text( r);
//Penjabaran Matriks 3
var z=a-a11;
var x=s-a12;
var c=d-a13;
var v=f-a14;
$( "#e11" ).text( a11 );
$( "#e12" ).text( a12 );
$( "#e13" ).text( a13 );
$( "#e14" ).text( a14 );
$( "#e21" ).text( a );
$( "#e22" ).text( s );
$( "#e23" ).text( d );
$( "#e24" ).text( f );
$( "#e31" ).text( q );
$( "#e32" ).text( w );
$( "#e33" ).text( e );
$( "#e34" ).text( r );
$( "#f11" ).text( a11 );
$( "#f12" ).text( a12 );
$( "#f13" ).text( a13 );
$( "#f14" ).text( a14 );
$( "#f21" ).text( z );
$( "#f22" ).text( x );
$( "#f23" ).text( c );
$( "#f24" ).text( v );
$( "#f31" ).text( q );
$( "#f32" ).text( w );
$( "#f33" ).text( e );
$( "#f34" ).text( r);
});
</script>
</body>
</html>
Langganan:
Postingan (Atom)