|
|
- <!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>
|
