Du kannst nicht mehr als 25 Themen auswählen
Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
287 Zeilen
12 KiB
287 Zeilen
12 KiB
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Penilaian Tugas Akhir</title>
|
|
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<style>
|
|
.input-nilai {
|
|
min-width: 71px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<nav>
|
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
|
<a class="nav-item nav-link active" id="nav-dosen-tab" data-toggle="tab" href="#nav-dosen" role="tab"
|
|
aria-controls="nav-dosen" aria-selected="true">Dosen Penguji</a>
|
|
<a class="nav-item nav-link" id="nav-rekap-tab" data-toggle="tab" href="#nav-rekap" role="tab"
|
|
aria-controls="nav-rekap" aria-selected="false">Rekapitulasi</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="nav-dosen" role="tabpanel" aria-labelledby="nav-dosen-tab">
|
|
<div class="table-responsive">
|
|
<table class="table mt-1" id="form-dosen">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle">Aspek</th>
|
|
<th class="align-middle">Nilai</th>
|
|
<th class="align-middle">Persentase</th>
|
|
<th class="align-middle">Tertimbang</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-middle">Presentasi dan Penampilan</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>10</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Sistematika dan Format Laporan</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>15</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Kualitas Hasil Penelitian</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>35</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Kemampuan dan Penguasaan Materi</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100" pattern="^\d*(\.\d{0,2})?$" step=".005">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>40</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td class="align-middle">
|
|
<button type="button" class="btn btn-primary btn-reload">Reset</button>
|
|
</td>
|
|
<td class="align-middle text-right">Total Nilai:</td>
|
|
<td class="align-middle text-center">100%</td>
|
|
<td class="align-middle text-center output-total">0</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-rekap" role="tabpanel" aria-labelledby="nav-rekap-tab">
|
|
<nav class="m-2">
|
|
<div class="nav nav-pills" id="pills-tab" role="tablist">
|
|
<a class="nav-item nav-link active" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab"
|
|
aria-controls="pills-two" aria-selected="true">3 Dosen</a>
|
|
<a class="nav-item nav-link" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab"
|
|
aria-controls="pills-three" aria-selected="false">4 Dosen</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
|
|
<div class="table-responsive">
|
|
<table class="table" id="form-rekap1">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle">Dosen</th>
|
|
<th class="align-middle">Nilai</th>
|
|
<th class="align-middle">Persentase</th>
|
|
<th class="align-middle">Tertimbang</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-middle">Pembimbing</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>40</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Penguji</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>30</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Penguji</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>30</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td class="align-middle">
|
|
<button type="button" class="btn btn-primary btn-reload">Reset</button>
|
|
</td>
|
|
<td class="align-middle text-right">Total Nilai:</td>
|
|
<td class="align-middle text-center">100%</td>
|
|
<td class="align-middle text-center output-total">0</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
|
|
<div class="table-responsive">
|
|
<table class="table" id="form-rekap2">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle">Dosen</th>
|
|
<th class="align-middle">Nilai</th>
|
|
<th class="align-middle">Persentase</th>
|
|
<th class="align-middle">Tertimbang</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-middle">
|
|
Pembimbing
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>40</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Penguji</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>20</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Penguji</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>20</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle">Penguji</td>
|
|
<td class="align-middle text-center">
|
|
<input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
|
|
max="100">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<span>20</span>%
|
|
</td>
|
|
<td class="align-middle text-center output-hasil">0</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td class="align-middle">
|
|
<button type="button" class="btn btn-primary btn-reload">Reset</button>
|
|
</td>
|
|
<td class="align-middle text-right">Total Nilai:</td>
|
|
<td class="align-middle text-center">100%</td>
|
|
<td class="align-middle text-center output-total">0</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
var scale = {};
|
|
$(function () {
|
|
$('.input-nilai').on('input', function () {
|
|
var input = $(this),
|
|
nilai = input.val(),
|
|
td = input.parent().next(),
|
|
persen = td.find('span').text(),
|
|
output = td.next(),
|
|
hasil = nilai * (persen / 100);
|
|
output.text(Math.round(hasil * 1000) / 1000);
|
|
nilaiTotal();
|
|
});
|
|
$('.btn-reload').click(function(){
|
|
location.reload();
|
|
});
|
|
});
|
|
|
|
function nilaiTotal() {
|
|
var totalNilaiDosen = 0,
|
|
totalRekap1 = 0,
|
|
totalRekap2 = 0;
|
|
$('#form-dosen .output-hasil').each(function () {
|
|
totalNilaiDosen += parseFloat($(this).text());
|
|
})
|
|
$('#form-rekap1 .output-hasil').each(function () {
|
|
totalRekap1 += parseFloat($(this).text());
|
|
})
|
|
$('#form-rekap2 .output-hasil').each(function () {
|
|
totalRekap2 += parseFloat($(this).text());
|
|
})
|
|
$('#form-dosen .output-total').text(bulatkan(totalNilaiDosen, 3));
|
|
$('#form-rekap1 .output-total').text(bulatkan(totalRekap1, 3));
|
|
$('#form-rekap2 .output-total').text(bulatkan(totalRekap2, 3));
|
|
}
|
|
|
|
function bulatkan(nilai, desimal) {
|
|
var faktor = Math.pow(10, desimal);
|
|
return Math.round(nilai * faktor) / faktor;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|