angsagd
/
form-penilaian-ta
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Kalkulator sederhana untuk memudahkan dosen penguji yang malas menghitung hasil penilaian ujian/sidang TA/skripsi.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6 Commits
1 Branch
192 KiB
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
form-penilaian-ta/index.html

286 lines
12 KiB
Raw Permalink Normal View History

Upload files to ''
5 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="id">
  3. 

  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Penilaian Tugas Akhir</title>
  9.   <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  10.   <link rel="stylesheet" href="css/bootstrap.min.css">
  11.   <style>
  12.     .input-nilai {
  13.       min-width: 71px;
  14.     }
  15.   </style>
  16. </head>
  17. 

  18. <body>
  19.   <nav>
  20.     <div class="nav nav-tabs" id="nav-tab" role="tablist">
  21.       <a class="nav-item nav-link active" id="nav-dosen-tab" data-toggle="tab" href="#nav-dosen" role="tab"
  22.         aria-controls="nav-dosen" aria-selected="true">Dosen Penguji</a>
  23.       <a class="nav-item nav-link" id="nav-rekap-tab" data-toggle="tab" href="#nav-rekap" role="tab"
  24.         aria-controls="nav-rekap" aria-selected="false">Rekapitulasi</a>
  25.     </div>
  26.   </nav>
  27.   <div class="tab-content" id="nav-tabContent">
  28.     <div class="tab-pane fade show active" id="nav-dosen" role="tabpanel" aria-labelledby="nav-dosen-tab">
  29.       <div class="table-responsive">
  30.         <table class="table mt-1" id="form-dosen">
  31.           <thead>
  32.             <tr>
  33.               <th class="align-middle">Aspek</th>
  34.               <th class="align-middle">Nilai</th>
  35.               <th class="align-middle">Persentase</th>
  36.               <th class="align-middle">Tertimbang</th>
  37.             </tr>
  38.           </thead>
  39.           <tbody>
  40.             <tr>
  41.               <td class="align-middle">Presentasi dan Penampilan</td>
  42.               <td class="align-middle text-center">
  43.                 <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  44.                   max="100">
  45.               </td>
  46.               <td class="align-middle text-center">
  47.                 <span>10</span>%
  48.               </td>
  49.               <td class="align-middle text-center output-hasil">0</td>
  50.             </tr>
  51.             <tr>
  52.               <td class="align-middle">Sistematika dan Format Laporan</td>
  53.               <td class="align-middle text-center">
  54.                 <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  55.                   max="100">
  56.               </td>
  57.               <td class="align-middle text-center">
  58.                 <span>15</span>%
  59.               </td>
  60.               <td class="align-middle text-center output-hasil">0</td>
  61.             </tr>
  62.             <tr>
  63.               <td class="align-middle">Kualitas Hasil Penelitian</td>
  64.               <td class="align-middle text-center">
  65.                 <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  66.                   max="100">
  67.               </td>
  68.               <td class="align-middle text-center">
  69.                 <span>35</span>%
  70.               </td>
  71.               <td class="align-middle text-center output-hasil">0</td>
  72.             </tr>
  73.             <tr>
  74.               <td class="align-middle">Kemampuan dan Penguasaan Materi</td>
  75.               <td class="align-middle text-center">
  76.                 <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  77.                   max="100" pattern="^\d*(\.\d{0,2})?$" step=".005">
  78.               </td>
  79.               <td class="align-middle text-center">
  80.                 <span>40</span>%
  81.               </td>
  82.               <td class="align-middle text-center output-hasil">0</td>
  83.             </tr>
  84.           </tbody>
  85.           <tfoot>
  86.             <tr>
  87.               <td class="align-middle">
  88.                 <button type="button" class="btn btn-primary btn-reload">Reset</button>
  89.               </td>
  90.               <td class="align-middle text-right">Total Nilai:</td>
  91.               <td class="align-middle text-center">100%</td>
  92.               <td class="align-middle text-center output-total">0</td>
  93.             </tr>
  94.           </tfoot>
  95.         </table>
  96.       </div>
  97.     </div>
  98.     <div class="tab-pane fade" id="nav-rekap" role="tabpanel" aria-labelledby="nav-rekap-tab">
  99.       <nav class="m-2">
  100.         <div class="nav nav-pills" id="pills-tab" role="tablist">
  101.           <a class="nav-item nav-link active" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab"
  102.             aria-controls="pills-two" aria-selected="true">3 Dosen</a>
  103.           <a class="nav-item nav-link" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab"
  104.             aria-controls="pills-three" aria-selected="false">4 Dosen</a>
  105.         </div>
  106.       </nav>
  107.       <div class="tab-content" id="pills-tabContent">
  108.         <div class="tab-pane fade show active" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
  109.           <div class="table-responsive">
  110.             <table class="table" id="form-rekap1">
  111.               <thead>
  112.                 <tr>
  113.                   <th class="align-middle">Dosen</th>
  114.                   <th class="align-middle">Nilai</th>
  115.                   <th class="align-middle">Persentase</th>
  116.                   <th class="align-middle">Tertimbang</th>
  117.                 </tr>
  118.               </thead>
  119.               <tbody>
  120.                 <tr>
  121.                   <td class="align-middle">Pembimbing</td>
  122.                   <td class="align-middle text-center">
  123.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  124.                       max="100">
  125.                   </td>
  126.                   <td class="align-middle text-center">
  127.                     <span>40</span>%
  128.                   </td>
  129.                   <td class="align-middle text-center output-hasil">0</td>
  130.                 </tr>
  131.                 <tr>
  132.                   <td class="align-middle">Penguji</td>
  133.                   <td class="align-middle text-center">
  134.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  135.                       max="100">
  136.                   </td>
  137.                   <td class="align-middle text-center">
  138.                     <span>30</span>%
  139.                   </td>
  140.                   <td class="align-middle text-center output-hasil">0</td>
  141.                 </tr>
  142.                 <tr>
  143.                   <td class="align-middle">Penguji</td>
  144.                   <td class="align-middle text-center">
  145.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  146.                       max="100">
  147.                   </td>
  148.                   <td class="align-middle text-center">
  149.                     <span>30</span>%
  150.                   </td>
  151.                   <td class="align-middle text-center output-hasil">0</td>
  152.                 </tr>
  153.               </tbody>
  154.               <tfoot>
  155.                 <tr>
  156.                   <td class="align-middle">
  157.                     <button type="button" class="btn btn-primary btn-reload">Reset</button>
  158.                   </td>
  159.                   <td class="align-middle text-right">Total Nilai:</td>
  160.                   <td class="align-middle text-center">100%</td>
  161.                   <td class="align-middle text-center output-total">0</td>
  162.                 </tr>
  163.               </tfoot>
  164.             </table>
  165.           </div>
  166.         </div>
  167.         <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
  168.           <div class="table-responsive">
  169.             <table class="table" id="form-rekap2">
  170.               <thead>
  171.                 <tr>
  172.                   <th class="align-middle">Dosen</th>
  173.                   <th class="align-middle">Nilai</th>
  174.                   <th class="align-middle">Persentase</th>
  175.                   <th class="align-middle">Tertimbang</th>
  176.                 </tr>
  177.               </thead>
  178.               <tbody>
  179.                 <tr>
  180.                   <td class="align-middle">
  181.                     Pembimbing
  182.                   </td>
  183.                   <td class="align-middle text-center">
  184.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  185.                       max="100">
  186.                   </td>
  187.                   <td class="align-middle text-center">
  188.                     <span>40</span>%
  189.                   </td>
  190.                   <td class="align-middle text-center output-hasil">0</td>
  191.                 </tr>
  192.                 <tr>
  193.                   <td class="align-middle">Penguji</td>
  194.                   <td class="align-middle text-center">
  195.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  196.                       max="100">
  197.                   </td>
  198.                   <td class="align-middle text-center">
  199.                     <span>20</span>%
  200.                   </td>
  201.                   <td class="align-middle text-center output-hasil">0</td>
  202.                 </tr>
  203.                 <tr>
  204.                   <td class="align-middle">Penguji</td>
  205.                   <td class="align-middle text-center">
  206.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  207.                       max="100">
  208.                   </td>
  209.                   <td class="align-middle text-center">
  210.                     <span>20</span>%
  211.                   </td>
  212.                   <td class="align-middle text-center output-hasil">0</td>
  213.                 </tr>
  214.                 <tr>
  215.                   <td class="align-middle">Penguji</td>
  216.                   <td class="align-middle text-center">
  217.                     <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
  218.                       max="100">
  219.                   </td>
  220.                   <td class="align-middle text-center">
  221.                     <span>20</span>%
  222.                   </td>
  223.                   <td class="align-middle text-center output-hasil">0</td>
  224.                 </tr>
  225.               </tbody>
  226.               <tfoot>
  227.                 <tr>
  228.                   <td class="align-middle">
  229.                     <button type="button" class="btn btn-primary btn-reload">Reset</button>
  230.                   </td>
  231.                   <td class="align-middle text-right">Total Nilai:</td>
  232.                   <td class="align-middle text-center">100%</td>
  233.                   <td class="align-middle text-center output-total">0</td>
  234.                 </tr>
  235.               </tfoot>
  236.             </table>
  237.           </div>
  238.         </div>
  239.       </div>
  240.     </div>
  241.   </div>
  242.   <script src="js/jquery.min.js"></script>
  243.   <script src="js/bootstrap.bundle.min.js"></script>
  244.   <script>
  245.     var scale = {};
  246.     $(function () {
  247.       $('.input-nilai').on('input', function () {
  248.         var input = $(this),
  249.             nilai = input.val(),
  250.             td = input.parent().next(),
  251.             persen = td.find('span').text(),
  252.             output = td.next(),
  253.             hasil = nilai * (persen / 100);
  254.         output.text(Math.round(hasil * 1000) / 1000);
  255.         nilaiTotal();
  256.       });
  257.       $('.btn-reload').click(function(){
  258.         location.reload();
  259.       });
  260.     });
  261. 

  262.     function nilaiTotal() {
  263.       var totalNilaiDosen = 0,
  264.           totalRekap1 = 0,
  265.           totalRekap2 = 0;
  266.       $('#form-dosen .output-hasil').each(function () {
  267.         totalNilaiDosen += parseFloat($(this).text());
  268.       })
  269.       $('#form-rekap1 .output-hasil').each(function () {
  270.         totalRekap1 += parseFloat($(this).text());
  271.       })
  272.       $('#form-rekap2 .output-hasil').each(function () {
  273.         totalRekap2 += parseFloat($(this).text());
  274.       })
  275.       $('#form-dosen .output-total').text(bulatkan(totalNilaiDosen, 3));
  276.       $('#form-rekap1 .output-total').text(bulatkan(totalRekap1, 3));
  277.       $('#form-rekap2 .output-total').text(bulatkan(totalRekap2, 3));
  278.     }
  279. 

  280.     function bulatkan(nilai, desimal) {
  281.       var faktor = Math.pow(10, desimal);
  282.       return Math.round(nilai * faktor) / faktor;
  283.     }
  284.   </script>
  285. </body>
  286. 

  287. </html>