Browse Source

Upload files to ''

master
angsagd 1 year ago
parent
commit
ca655f6b8d
1 changed files with 287 additions and 0 deletions
  1. 287
    0
      index.html

+ 287
- 0
index.html View File

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

Loading…
Cancel
Save