angsagd
/
form-penilaian-ta
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Upload files to ''

master
angsagd 5 years ago
parent
53c3b4db3f
commit
ca655f6b8d
1 changed files with 287 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +287
    -0
      index.html

+ 287
- 0
index.html View File

@ -0,0 +1,287 @@
<!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>

Write Preview
Loading…
Cancel
Save