first commit
This commit is contained in:
kicap1992
56
ui/first_pages/404.html
Normal file
56
ui/first_pages/404.html
Normal file
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>404 Halaman Tidak Ditemukan</title>
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="page-404">
|
||||
<div class="content">
|
||||
<div class="title-on-desktop">
|
||||
<svg style="width: 600px; height: 200px" alignment-baseline="middle">
|
||||
<defs>
|
||||
<clipPath id="clip2">
|
||||
<path d="M 0 0 L 600 0 L 600 80 L 0 80 L 0 0 L 0 125 L 600 125 L 600 200 L 0 200 Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<text x="300" y="190" style="width: 600px; height: 200px" text-anchor="middle" font-family="Lato" font-weight="700" font-size="250" fill="#505458" clip-path="url(#clip2)">4<tspan fill="#35b8e0">0</tspan>4</text>
|
||||
</svg>
|
||||
<div class="title">Halaman Tidak Ditemukan</div>
|
||||
</div>
|
||||
<h1 class="title-on-mobile">Error 404: Halaman Tidak Ditemukan</h1>
|
||||
<p>Kamu sepertinya salah ambil belokan. Jangan khawatir... itu terjadi pada yang terbaik. Kamu mungkin ingin memeriksa koneksi internetmu. Berikut tips kecil yang mungkin membantumu kembali ke jalur yang benar.</p>
|
||||
<a href="#" onclick="history.back(); return false;" class="btn btn-info">Kembali</a>
|
||||
|
||||
</div>
|
||||
</div><!--/#single-wrapper -->
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
ui/first_pages/index.html
Normal file
212
ui/first_pages/index.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Halaman Utama</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMADA</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/person.png" alt=""><span class="status online"></span></a>
|
||||
<h5 class="name"><a href="#">Visitor</a></h5>
|
||||
<h5 class="position">Belum Login</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="/login"><i
|
||||
class="menu-icon ico icon-login"></i><span>Login</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Halaman Utama</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="/login" class="ico-item ico icon-login"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
<h3><i>Gerbang Pembelajaran Interaktif</i><br>SMKS Muhammad Ahmad Dahlan </h3>
|
||||
<img src="/images/first.png" alt="" style="width: 90%; border-radius: 30px;">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Jumlah Siswa</h4>
|
||||
<!-- /.box-title -->
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/siswa.png" alt="" style="width: 100%;">
|
||||
|
||||
</div>
|
||||
<!-- show this icon ico icon-users-1 -->
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="guru-counter"></h2>
|
||||
<!-- /.counter -->
|
||||
<p class="text">9 Siswa</p>
|
||||
<!-- /.text -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.right-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Jumlah Guru</h4>
|
||||
<!-- /.box-title -->
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/guru.png" alt="" style="width: 100%;">
|
||||
</div>
|
||||
<!-- show this icon ico icon-users-1 -->
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="murid-counter"></h2>
|
||||
<!-- /.counter -->
|
||||
<p class="text">1 Guru</p>
|
||||
<!-- /.text -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.right-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
<script src="/socket-io/client-dist/socket.io.js"></script>
|
||||
<script>
|
||||
// console.log('hello');
|
||||
// const socket = io("http://20.20.20.26:3014"); // Connects to your server
|
||||
|
||||
// // socket.emit('scan_dia', 'Hello from client!');
|
||||
|
||||
// socket.on('connect', () => {
|
||||
// console.log('Connected to server:', socket.id);
|
||||
// });
|
||||
|
||||
// socket.on('scan_dia_lagi', (data) => {
|
||||
// alert(data);
|
||||
// console.log('Received scan_dia_lagi event:', data); // ✅ Make sure you're logging the variable
|
||||
// });
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
ui/first_pages/jam_belum.html
Normal file
57
ui/first_pages/jam_belum.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>404 Halaman Tidak Ditemukan</title>
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
<script src="/auth.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="page-404">
|
||||
<div class="content">
|
||||
<div class="title-on-desktop">
|
||||
<svg style="width: 600px; height: 200px" alignment-baseline="middle">
|
||||
<defs>
|
||||
<clipPath id="clip2">
|
||||
<path d="M 0 0 L 600 0 L 600 80 L 0 80 L 0 0 L 0 125 L 600 125 L 600 200 L 0 200 Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<text x="300" y="190" style="width: 600px; height: 200px" text-anchor="middle" font-family="Lato" font-weight="700" font-size="250" fill="#505458" clip-path="url(#clip2)">N<tspan fill="#35b8e0">0</tspan></text>
|
||||
</svg>
|
||||
<div class="title">Belum Waktunya</div>
|
||||
</div>
|
||||
<h1 class="title-on-mobile">Error Kuis & Soalan: Belum Waktunya</h1>
|
||||
<p>Kamu tidak bisa mengakses kuis dan soalan karena belum waktunya menjawab kuis dan soalan. Sila kembali ke kuis dan soalan lain.</p>
|
||||
<a href="/siswa/quiz" class="btn btn-info">Kembali</a>
|
||||
|
||||
</div>
|
||||
</div><!--/#single-wrapper -->
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
57
ui/first_pages/jam_sudah.html
Normal file
57
ui/first_pages/jam_sudah.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>404 Halaman Tidak Ditemukan</title>
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
<script src="/auth.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="page-404">
|
||||
<div class="content">
|
||||
<div class="title-on-desktop">
|
||||
<svg style="width: 600px; height: 200px" alignment-baseline="middle">
|
||||
<defs>
|
||||
<clipPath id="clip2">
|
||||
<path d="M 0 0 L 600 0 L 600 80 L 0 80 L 0 0 L 0 125 L 600 125 L 600 200 L 0 200 Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<text x="300" y="190" style="width: 600px; height: 200px" text-anchor="middle" font-family="Lato" font-weight="700" font-size="250" fill="#505458" clip-path="url(#clip2)">N<tspan fill="#35b8e0">0</tspan></text>
|
||||
</svg>
|
||||
<div class="title">Waktu telah habis</div>
|
||||
</div>
|
||||
<h1 class="title-on-mobile">Error Kuis & Soalan: Waktu telah habis</h1>
|
||||
<p>Kamu tidak bisa mengakses kuis dan soalan karena waktu telah habis. Sila kembali ke kuis dan soalan lain.</p>
|
||||
<a href="/siswa/quiz" class="btn btn-info">Kembali</a>
|
||||
|
||||
</div>
|
||||
</div><!--/#single-wrapper -->
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
142
ui/first_pages/login.html
Normal file
142
ui/first_pages/login.html
Normal file
@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Halaman Login Pengguna</title>
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="single-wrapper">
|
||||
<form action="#" class="frm-single">
|
||||
<div class="inside">
|
||||
<div class="title"><strong>Pembelajaran Interaktif</strong><br><i>SMK Mahda </i></div>
|
||||
<!-- /.title -->
|
||||
<div class="frm-title">Halaman Login</div>
|
||||
<!-- /.frm-title -->
|
||||
<div class="frm-input"><input type="text" id="username" placeholder="No Induk Guru/Siswa"
|
||||
class="frm-inp"><i class="fa fa-user frm-ico"></i></div>
|
||||
<!-- /.frm-input -->
|
||||
<div class="frm-input"><input type="password" id="password" placeholder="Password" class="frm-inp"><i
|
||||
class="fa fa-lock frm-ico"></i></div>
|
||||
<!-- /.frm-input -->
|
||||
<div class="frm-input">
|
||||
<select name="" class="frm-inp" id="select-role">
|
||||
<option value="" selected disabled>Pilih Role</option>
|
||||
<option value="guru">Guru</option>
|
||||
<option value="siswa">Siswa</option>
|
||||
</select>
|
||||
<i class="fa fa-users frm-ico"></i>
|
||||
</div>
|
||||
|
||||
<button type="button" class="frm-submit" onclick="login()">Login<i
|
||||
class="fa fa-arrow-circle-right"></i></button>
|
||||
|
||||
|
||||
<div class="frm-footer">Gerbang Pembelajaran Interaktif<br>SMKS Muhammad Ahmad Dahlan <br>© Rika Rahman
|
||||
2025.</div>
|
||||
<!-- /.footer -->
|
||||
</div>
|
||||
<!-- .inside -->
|
||||
</form>
|
||||
<!-- /.frm-single -->
|
||||
</div><!--/#single-wrapper -->
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/block/jquery.blockUI.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
<script>
|
||||
function login() {
|
||||
|
||||
if ($("#username").val() == "") {
|
||||
toastr.error("No Induk Guru/Siswa Tidak Boleh Kosong");
|
||||
$("#username").focus();
|
||||
return;
|
||||
}
|
||||
if ($("#password").val() == "") {
|
||||
toastr.error("Password Tidak Boleh Kosong");
|
||||
$("#password").focus();
|
||||
return;
|
||||
}
|
||||
if ($("#select-role").val() == "" || $("#select-role").val() == undefined) {
|
||||
toastr.error("Role Harus Dipilih");
|
||||
$("#select-role").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
var username = $("#username").val();
|
||||
var password = $("#password").val();
|
||||
var role = $("#select-role").val();
|
||||
// console.log(username, password, role);
|
||||
|
||||
$.ajax({
|
||||
url: "/login",
|
||||
type: "POST",
|
||||
data: {
|
||||
username: username,
|
||||
password: password,
|
||||
role: role
|
||||
},
|
||||
beforeSend: function () {
|
||||
localStorage.removeItem('datanya');
|
||||
blockUI('Login Sedang Diproses...');
|
||||
|
||||
},
|
||||
success: function (data) {
|
||||
// console.log(data);
|
||||
$.unblockUI();
|
||||
toastr.success(data.message);
|
||||
// create local storage
|
||||
localStorage.setItem("datanya", JSON.stringify(data.data));
|
||||
// localStorage.setItem('role', role);
|
||||
console.log(localStorage.getItem('datanya'));
|
||||
// 2 sec the to halaman login
|
||||
setTimeout(() => {
|
||||
window.location.href = "/"+role;
|
||||
}, 2500);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
|
||||
$.unblockUI();
|
||||
console.log(xhr);
|
||||
toastr.error(xhr.responseJSON !== undefined ? xhr.responseJSON : "Terjadi Kesalahan Server");
|
||||
$("#username").focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
278
ui/guru_pages/index.html
Normal file
278
ui/guru_pages/index.html
Normal file
@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Halaman Utama Guru</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
<script src="/auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMK Mahda</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/admin.png" class="img-avatar" alt=""><span
|
||||
class="status online"></span></a>
|
||||
<h5 class="name"><a href="#" id="h5-title">...</a></h5>
|
||||
<h5 class="position">Guru</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/guru"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon ico icon-table"></i><span>Materi</span></a>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-users"></i><span>List User</span></a>
|
||||
</li> -->
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="/guru/quiz" ><i class="menu-icon ico icon-table"></i><span>Kuis & Soal</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-unlock-alt"></i><span>Ganti Password</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="logout()"><i
|
||||
class="menu-icon ico icon-logout"></i><span>Logout</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Halaman Utama Guru</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="#" class="ico-item ico icon-logout" onclick="logout()"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
|
||||
<div class="row small-spacing">
|
||||
<div class="col-lg-7 col-md-7 col-xs-12">
|
||||
<div class="box-content card">
|
||||
<h4 class="box-title">Profil Guru</h4>
|
||||
<form class="card-content" id="form-guru">
|
||||
<div class="form-group">
|
||||
<!-- show the upload -->
|
||||
<div id="show-upload-gambar-guru">
|
||||
<center>
|
||||
<img src="/images/guru2.png" class="img-avatar" alt="" style="width: 50%;">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group" id="form-gambar-guru">
|
||||
<label for="modal-guru-nama">Photo guru</label>
|
||||
<input type="file" class="form-control" id="gambar-guru" accept="image/*"
|
||||
onchange="showUpload(this, 'gambar-guru')">
|
||||
</div> -->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-guru-nama">Nomor Induk Guru</label>
|
||||
<input type="text" class="form-control" id="nig" disabled value="...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-guru-nama">Nama</label>
|
||||
<input type="text" class="form-control" id="nama" disabled value="...">
|
||||
</div>
|
||||
<!-- <div class="form-group">
|
||||
<label for="modal-guru-nama">Status</label>
|
||||
<input type="text" class="form-control" id="status" placeholder="Masukkan Status">
|
||||
</div> -->
|
||||
<div class="form-group">
|
||||
<label for="modal-guru-nama">No Telpon/HP</label>
|
||||
<input type="text" class="form-control" id="no_telpon" oninput="numberOnly(this)"
|
||||
maxlength="13" disabled value="...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-guru-nama">Jenis Kelamin</label>
|
||||
<select class="form-control" id="jk" disabled>
|
||||
<option value="" disabled selected>-Pilih Jenis Kelamin</option>
|
||||
<option value="Laki-laki">Laki-laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-xs-12">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Jumlah Kuis & Soal</h4>
|
||||
<!-- /.box-title -->
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/materi.png" alt="" style="width: 100%;">
|
||||
</div>
|
||||
<!-- show this icon ico icon-users-1 -->
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="murid-counter"></h2>
|
||||
<!-- /.counter -->
|
||||
<p class="text">1 Kuis & Soal</p>
|
||||
<!-- /.text -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.right-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Jumlah Materi</h4>
|
||||
<!-- /.box-title -->
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/mp.png" alt="" style="width: 100%;">
|
||||
</div>
|
||||
<!-- show this icon ico icon-users-1 -->
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="staf-counter"></h2>
|
||||
<!-- /.counter -->
|
||||
<p class="text">0 Materi</p>
|
||||
<!-- /.text -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.right-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
<!-- <div class="col-xs-12">
|
||||
<div class="box-content card">
|
||||
<img src="/images/habibie.jpg" alt="" style="width: 100%; border-radius: 30px;">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
|
||||
<script>
|
||||
console.log(datanya.jk);
|
||||
$(".img-avatar").attr("src", datanya.jk == "Laki-laki" ? "/images/guru3.png" : "/images/guru2.png");
|
||||
$("#nama").val(datanya.nama);
|
||||
$("#h5-title").html(datanya.nama);
|
||||
$("#nig").val(datanya.nig);
|
||||
$("#jk").val(datanya.jk);
|
||||
$("#no_telpon").val(datanya.no_telpon);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
230
ui/guru_pages/quiz.html
Normal file
230
ui/guru_pages/quiz.html
Normal file
@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Kuis & Soalan</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
<script src="/auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMK Mahda</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/admin.png" class="img-avatar" alt=""><span
|
||||
class="status online"></span></a>
|
||||
<h5 class="name"><a href="#" id="h5-title">...</a></h5>
|
||||
<h5 class="position">Guru</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li>
|
||||
<a class="waves-effect" href="/guru"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon ico icon-table"></i><span>Materi</span></a>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-users"></i><span>List User</span></a>
|
||||
</li> -->
|
||||
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/guru/quiz"><i class="menu-icon ico icon-table"></i><span>Kuis &
|
||||
Soal</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-unlock-alt"></i><span>Ganti Password</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="logout()"><i
|
||||
class="menu-icon ico icon-logout"></i><span>Logout</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Halaman Utama Guru</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="#" class="ico-item ico icon-logout" onclick="logout()"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-12">
|
||||
<div class="box-content card">
|
||||
<h4 class="box-title">List Kuis & Soalan</h4>
|
||||
<div class="card-content">
|
||||
<button type="button"
|
||||
class="btn btn-xs btn-primary btn-rounded btn-bordered waves-effect waves-light"
|
||||
onclick="window.location.href='/guru/tambah_soal'">Tambah Kuis & Soal</button><br><br>
|
||||
<!-- <center>Belum ada kuis & soal</center> -->
|
||||
<div style="overflow-x: scroll;">
|
||||
<table id="example" class="table table-striped table-bordered display"
|
||||
style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mata Pelajaran</th>
|
||||
<th>Hari</th>
|
||||
<th>Mulai</th>
|
||||
<th>Selesai</th>
|
||||
<th>Waktu</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bahasa Indonesia TKA (Kuis 1)</td>
|
||||
<td>Rabu | 08-Okt-2025</td>
|
||||
<td>08.50 AM</td>
|
||||
<td>10.10 AM</td>
|
||||
<td>1 Jam 20 Menit</td>
|
||||
<td id="status-soal1">
|
||||
<span class="label label-default">Loading...</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- onclick to /siswa/soal1 -->
|
||||
<button id="btn-soal1" type="button"
|
||||
class="btn btn-primary btn-circle btn-xs waves-effect waves-light"
|
||||
onclick="window.location.href='/guru/soal1'"><i
|
||||
class="ico fa fa-pencil-square-o"
|
||||
title="Liat Kuis & Soalan"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
|
||||
<script>
|
||||
console.log(datanya.jk);
|
||||
$(".img-avatar").attr("src", datanya.jk == "Laki-laki" ? "/images/guru3.png" : "/images/guru2.png");
|
||||
$("#h5-title").html(datanya.nama);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function cek_list_soal() {
|
||||
$.ajax({
|
||||
url: "/guru/check_status_soal/soal1",
|
||||
type: "get",
|
||||
success: function (data) {
|
||||
$("#status-soal1").html(`<span class="label label-${data.label}">${data.status}</span>`);
|
||||
|
||||
// if(data.bool) {
|
||||
// $("#btn-soal1").attr("disabled", true);
|
||||
// $("#btn-soal1").css("cursor", "not-allowed");
|
||||
// // remove the onclick attribute
|
||||
// $("#btn-soal1").removeAttr("onclick");
|
||||
// // $("#btn-soal1").attr("title", "Anda sudah menjawab kuis ini");
|
||||
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cek_list_soal()
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1385
ui/guru_pages/soal1.html
Normal file
1385
ui/guru_pages/soal1.html
Normal file
File diff suppressed because it is too large
Load Diff
542
ui/guru_pages/tambah_soal.html
Normal file
542
ui/guru_pages/tambah_soal.html
Normal file
@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Kuis & Soalan</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
<script src="/auth.js"></script>
|
||||
<style>
|
||||
.box-title {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
display: inline-block;
|
||||
transition: transform 0.2s ease;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.box-content.card.minimized .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.box-content.card.error {
|
||||
border: 2px solid red !important;
|
||||
box-shadow: 0 0 6px red;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMK Mahda</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/admin.png" class="img-avatar" alt=""><span
|
||||
class="status online"></span></a>
|
||||
<h5 class="name"><a href="#" id="h5-title">...</a></h5>
|
||||
<h5 class="position">Guru</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li>
|
||||
<a class="waves-effect" href="/guru"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon ico icon-table"></i><span>Materi</span></a>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-users"></i><span>List User</span></a>
|
||||
</li> -->
|
||||
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/guru/quiz"><i class="menu-icon ico icon-table"></i><span>Kuis &
|
||||
Soal</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-unlock-alt"></i><span>Ganti Password</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="logout()"><i
|
||||
class="menu-icon ico icon-logout"></i><span>Logout</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Kuis & Soalan</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="#" class="ico-item ico icon-logout" onclick="logout()"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-lg-4 col-md-4 col-xs-12"></div>
|
||||
<div class="col-lg-4 col-md-4 col-xs-12">
|
||||
<div class="box-content card">
|
||||
<h4 class="box-title">Detail Soal</h4>
|
||||
<div class="card-content">
|
||||
<form class="form-horizontal">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="judul_soal"
|
||||
placeholder="Masukkan Judul Soal">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<select name="mata_pelajaran" id="mata_pelajaran" class="form-control">
|
||||
<option value="" disabled selected>-Sila Pilih Mata Pelajaran-</option>
|
||||
<option value="Bahasa Melayu">Bahasa Melayu</option>
|
||||
<option value="Bahasa Inggeris">Bahasa Inggeris</option>
|
||||
<option value="Bahasa Arab">Bahasa Arab</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<select name="kelas" id="kelas" class="form-control">
|
||||
<option value="" disabled selected>-Sila Pilih Kelas-</option>
|
||||
<option value="1">X</option>
|
||||
<option value="2">XI</option>
|
||||
<option value="3">XII</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-9">
|
||||
<input type="number" class="form-control" id="jumlah_soal"
|
||||
placeholder="Masukkan Jumlah Soal">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button type="button"
|
||||
class="btn btn-social btn-success waves-effect waves-light "><i
|
||||
class="ico fa fa-check" onclick="buatSoal()"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group">
|
||||
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-xs-12"></div>
|
||||
</div>
|
||||
|
||||
<div class="row small-spacing">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12" id="container-soal">
|
||||
<!-- <div class="box-content card " id="soal-1">
|
||||
<h4 class="box-title">Soal 1</h4>
|
||||
<div class="card-content">
|
||||
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="jenis_soal">
|
||||
<option value="" disabled selected>-Pilih Jenis Soal</option>
|
||||
<option value="pilihan_ganda">Pilihan Ganda</option>
|
||||
<option value="isian">Isian</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<center><button type="button" class="btn btn-success waves-effect waves-light "
|
||||
onclick="validateQuestions()"><i class="ico fa fa-check"></i> Simpan Soal</button></center>
|
||||
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
|
||||
<script>
|
||||
console.log(datanya.jk);
|
||||
$(".img-avatar").attr("src", datanya.jk == "Laki-laki" ? "/images/guru3.png" : "/images/guru2.png");
|
||||
$("#h5-title").html(datanya.nama);
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function minimizeDiv(id) {
|
||||
const soalDiv = document.getElementById(id);
|
||||
const content = soalDiv.querySelector(".card-content");
|
||||
|
||||
// Toggle a class to track the state
|
||||
soalDiv.classList.toggle("minimized");
|
||||
|
||||
if (soalDiv.classList.contains("minimized")) {
|
||||
// Minimize: smoothly hide
|
||||
$(content).slideUp(200);
|
||||
} else {
|
||||
// Maximize: smoothly show
|
||||
$(content).slideDown(200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let soalData = {}; // Store all question data temporarily
|
||||
let dataAll;
|
||||
|
||||
function saveCurrentData() {
|
||||
soalData = {}; // reset
|
||||
dataAll = [];
|
||||
document.querySelectorAll(".box-content.card").forEach((soalDiv, index) => {
|
||||
const id = soalDiv.id;
|
||||
const jenis = soalDiv.querySelector(".jenis-soal")?.value || "";
|
||||
const inputs = soalDiv.querySelectorAll("textarea, input");
|
||||
|
||||
// ini untuk simpan data agar ditampilkan kemudian
|
||||
soalData[id] = {
|
||||
jenis,
|
||||
values: Array.from(inputs).map((el) => el.value)
|
||||
};
|
||||
// dataAll.push(soalData[id]);
|
||||
|
||||
// ini untuk simpan jawaban untuk dipost
|
||||
const jenisContainer = soalDiv.querySelector(".jenis-container");
|
||||
|
||||
let data = {};
|
||||
if (jenis === "pilihan_ganda") {
|
||||
const pertanyaan = jenisContainer.querySelector("textarea:nth-of-type(1)")?.value || "";
|
||||
const jawabans = Array.from(jenisContainer.querySelectorAll("textarea"))
|
||||
.slice(1, 6)
|
||||
.map(t => t.value || "");
|
||||
const jawabanBenar = jenisContainer.querySelector("input")?.value || "";
|
||||
const pembahasan = jenisContainer.querySelector("textarea:last-of-type")?.value || "";
|
||||
|
||||
data = {
|
||||
jenis: "pilihan_ganda",
|
||||
soal: pertanyaan,
|
||||
A: jawabans[0],
|
||||
B: jawabans[1],
|
||||
C: jawabans[2],
|
||||
D: jawabans[3],
|
||||
E: jawabans[4],
|
||||
benar: jawabanBenar,
|
||||
pembahasan: pembahasan
|
||||
};
|
||||
}
|
||||
else if (jenis === "isian") {
|
||||
const pertanyaan = jenisContainer.querySelector("textarea:nth-of-type(1)")?.value || "";
|
||||
const pembahasan = jenisContainer.querySelector("textarea:nth-of-type(2)")?.value || "";
|
||||
data = {
|
||||
jenis: "isian",
|
||||
soal: pertanyaan,
|
||||
pembahasan: pembahasan
|
||||
};
|
||||
}
|
||||
|
||||
dataAll.push(data);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
console.log(JSON.stringify(dataAll));
|
||||
}
|
||||
|
||||
|
||||
function restoreData() {
|
||||
// console.log(soalData);
|
||||
for (const [id, data] of Object.entries(soalData)) {
|
||||
const soalDiv = document.getElementById(id);
|
||||
if (!soalDiv) continue; // skip deleted
|
||||
if (data.jenis) {
|
||||
soalDiv.querySelector(".jenis-soal").value = data.jenis;
|
||||
tukarJenisSoal(data.jenis, id);
|
||||
// Wait a tiny bit so the elements exist before restoring
|
||||
setTimeout(() => {
|
||||
const inputs = soalDiv.querySelectorAll("textarea, input");
|
||||
data.values.forEach((val, i) => {
|
||||
if (inputs[i]) inputs[i].value = val;
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buatSoal() {
|
||||
// Save current input before rebuild
|
||||
saveCurrentData();
|
||||
|
||||
const jumlah = parseInt(document.getElementById("jumlah_soal").value);
|
||||
const container = document.getElementById("container-soal");
|
||||
const existingCount = container.children.length;
|
||||
|
||||
if (isNaN(jumlah) || jumlah <= 0) {
|
||||
alert("Masukkan jumlah soal yang valid!");
|
||||
return;
|
||||
}
|
||||
|
||||
// If decreasing: remove extras
|
||||
if (jumlah < existingCount) {
|
||||
for (let i = existingCount; i > jumlah; i--) {
|
||||
const soalDiv = document.getElementById(`soal-${i}`);
|
||||
if (soalDiv) soalDiv.remove();
|
||||
delete soalData[`soal-${i}`]; // remove its data
|
||||
}
|
||||
}
|
||||
|
||||
// If increasing: add new ones
|
||||
for (let i = existingCount + 1; i <= jumlah; i++) {
|
||||
const soalDiv = document.createElement("div");
|
||||
soalDiv.className = "box-content card";
|
||||
soalDiv.id = `soal-${i}`;
|
||||
soalDiv.innerHTML = `
|
||||
<h4 class="box-title">Soal ${i}</h4>
|
||||
<div class="card-content">
|
||||
<div class="form-group">
|
||||
<label for="jenis_soal_${i}">Pilih Jenis Soal:</label>
|
||||
<select class="form-control jenis-soal" id="jenis_soal_${i}" data-id="soal-${i}">
|
||||
<option value="" disabled selected>- Pilih Jenis Soal -</option>
|
||||
<option value="pilihan_ganda">Pilihan Ganda</option>
|
||||
<option value="isian">Isian</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="jenis-container"></div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(soalDiv);
|
||||
}
|
||||
|
||||
// Restore any saved data
|
||||
restoreData();
|
||||
}
|
||||
|
||||
// Event listener for dynamic selects
|
||||
$(document).on("change", ".jenis-soal", function () {
|
||||
const jenis = $(this).val();
|
||||
const id = $(this).data("id");
|
||||
tukarJenisSoal(jenis, id);
|
||||
|
||||
// Restore previously typed answers (if exist)
|
||||
if (soalData[id]?.jenis === jenis && soalData[id]?.values?.length) {
|
||||
setTimeout(() => {
|
||||
const inputs = document.querySelectorAll(`#${id} textarea, #${id} input`);
|
||||
soalData[id].values.forEach((val, i) => {
|
||||
if (inputs[i]) inputs[i].value = val;
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
function tukarJenisSoal(jenis, id) {
|
||||
const card = document.querySelector(`#${id} .jenis-container`);
|
||||
card.innerHTML = ""; // clear old content
|
||||
|
||||
if (jenis === "pilihan_ganda") {
|
||||
card.innerHTML = `
|
||||
<div class="form-group">
|
||||
<label>Pertanyaan:</label>
|
||||
<textarea class="form-control" placeholder="Tulis pertanyaan..."></textarea>
|
||||
</div>
|
||||
|
||||
<label>Pilihan Jawaban:</label>
|
||||
${["A", "B", "C", "D", "E"]
|
||||
.map(
|
||||
(huruf) => `
|
||||
<div class="form-group">
|
||||
<label>${huruf}:</label>
|
||||
<textarea class="form-control" placeholder="Jawaban ${huruf}..."></textarea>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
|
||||
<div class="form-group">
|
||||
<label>Jawaban Benar (contoh: A):</label>
|
||||
<input type="text" class="form-control" maxlength="1" placeholder="Masukkan huruf jawaban benar...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Pembahasan:</label>
|
||||
<textarea class="form-control" placeholder="Tulis pembahasan..."></textarea>
|
||||
</div>
|
||||
`;
|
||||
} else if (jenis === "isian") {
|
||||
card.innerHTML = `
|
||||
<div class="form-group">
|
||||
<label>Pertanyaan:</label>
|
||||
<textarea class="form-control" placeholder="Tulis pertanyaan..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Jawaban / Pembahasan:</label>
|
||||
<textarea class="form-control" placeholder="Tulis jawaban atau pembahasan..."></textarea>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function validateQuestions() {
|
||||
let incomplete = [];
|
||||
const soalDivs = $(".box-content.card");
|
||||
const jumlahSoalInput = parseInt($("#jumlah_soal").val()) || 0;
|
||||
|
||||
soalDivs.removeClass("error");
|
||||
|
||||
// 🧩 CASE 1: No question divs
|
||||
if (soalDivs.length === 0) {
|
||||
alert("❌ Belum ada soal yang dibuat!");
|
||||
return;
|
||||
}
|
||||
|
||||
// 🧩 CASE 2: Jumlah soal mismatch
|
||||
if (jumlahSoalInput === 0) {
|
||||
alert("❌ Jumlah soal belum diisi!");
|
||||
return;
|
||||
}
|
||||
if (soalDivs.length !== jumlahSoalInput) {
|
||||
alert(`⚠️ Jumlah soal (${soalDivs.length}) tidak sesuai dengan input jumlah soal (${jumlahSoalInput})!`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 🧩 Validate each question
|
||||
soalDivs.each(function (index) {
|
||||
const soalDiv = $(this);
|
||||
const nomor = index + 1;
|
||||
const jenis = soalDiv.find(".jenis-soal").val();
|
||||
let allFilled = true;
|
||||
|
||||
if (!jenis) {
|
||||
allFilled = false;
|
||||
} else {
|
||||
soalDiv.find(".jenis-container").find("input, textarea").each(function () {
|
||||
if ($(this).val().trim() === "") {
|
||||
allFilled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!allFilled) {
|
||||
incomplete.push(nomor);
|
||||
soalDiv.addClass("error");
|
||||
}
|
||||
});
|
||||
|
||||
if (incomplete.length > 0) {
|
||||
alert("❌ Soal nomor " + incomplete.join(", ") + " belum lengkap!");
|
||||
$("html, body").animate({
|
||||
scrollTop: $("#soal-" + incomplete[0]).offset().top - 100
|
||||
}, 600);
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ Semua lengkap → kumpulkan data
|
||||
saveCurrentData(); // Save current input before rebuild and dataAll
|
||||
console.log(dataAll);
|
||||
|
||||
alert("✅ Semua soal sudah lengkap dan data siap dikirim!");
|
||||
// Di sini bisa kirim via AJAX, atau simpan ke localStorage, dsb
|
||||
// contoh: localStorage.setItem("soalData", JSON.stringify(soalData));
|
||||
}
|
||||
|
||||
// 🧠 Function untuk mengumpulkan data dari semua soal
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
269
ui/siswa_pages/index.html
Normal file
269
ui/siswa_pages/index.html
Normal file
@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Halaman Utama Siswa</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
<script src="/auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMK Mahda</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/siswa_lk.png" class="img-avatar" alt=""
|
||||
style="width:65px; height:65px"><span class="status online"></span></a>
|
||||
<h5 class="name"><a href="#" id="h5-title" class="namanya">...</a></h5>
|
||||
<h5 class="position">Siswa</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/siswa"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon ico icon-table"></i><span>Materi</span></a>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-users"></i><span>List User</span></a>
|
||||
</li> -->
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="/siswa/quiz"><i
|
||||
class="menu-icon ico icon-table"></i><span>Kuis & Soal</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-unlock-alt"></i><span>Ganti Password</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="logout()"><i
|
||||
class="menu-icon ico icon-logout"></i><span>Logout</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Halaman Utama Siswa</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="#" class="ico-item ico icon-logout" onclick="logout()"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
|
||||
<div class="row small-spacing">
|
||||
<div class="col-lg-7 col-md-7 col-xs-12">
|
||||
<div class="box-content card white">
|
||||
<h4 class="box-title">Profil Siswa</h4>
|
||||
<form class="card-content" id="form-siswa">
|
||||
<div class="form-group">
|
||||
<!-- show the upload -->
|
||||
<div id="show-upload-gambar-siswa">
|
||||
<center>
|
||||
<img src="/images/siswa_prm.png" class="img-avatar" alt="" style="width: 20%;">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group" id="form-gambar-siswa">
|
||||
<label for="modal-siswa-nama">Photo siswa</label>
|
||||
<input type="file" class="form-control" id="gambar-siswa" accept="image/*"
|
||||
onchange="showUpload(this, 'gambar-siswa')">
|
||||
</div> -->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-siswa-nama">NIS</label>
|
||||
<input type="text" class="form-control" id="nis" disabled value="...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-siswa-nama">Nama</label>
|
||||
<input type="text" class="form-control" id="nama" disabled value="...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-siswa-nama">Jenis Kelamin</label>
|
||||
<select class="form-control" id="jk" disabled>
|
||||
<option value="" disabled selected>-Pilih Jenis Kelamin</option>
|
||||
<option value="Laki-laki">Laki-laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-siswa-nama">Kelas</label>
|
||||
<input type="text" class="form-control" id="kelas" disabled value="...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modal-siswa-nama">Jurusan</label>
|
||||
<input type="text" class="form-control" id="jurusan" disabled value="...">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-xs-12">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Kuis & Soal</h4>
|
||||
<!-- /.box-title -->
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/materi.png" alt="" style="width: 100%;">
|
||||
</div>
|
||||
<!-- show this icon ico icon-users-1 -->
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="murid-counter"></h2>
|
||||
<!-- /.counter -->
|
||||
<p class="text">1 Kuis & Soal</p>
|
||||
<!-- /.text -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.right-content -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
<!-- <div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title">Jumlah Mata Pelajaran</h4>
|
||||
<div class="content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-6">
|
||||
<img src="/images/mp.png" alt="" style="width: 100%;">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="right-content">
|
||||
<h2 class="staf-counter"></h2>
|
||||
<p class="text">Mata Pelajaran</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
<script>
|
||||
// change class img-avatar src
|
||||
$(".img-avatar").attr("src", datanya.jk == "Laki-laki" ? "/images/siswa_lk.png" : "/images/siswa_prm.png");
|
||||
$(".namanya").text(datanya.nama);
|
||||
$("#nama").val(datanya.nama);
|
||||
$("#nis").val(datanya.nis);
|
||||
$("#kelas").val(datanya.kelas);
|
||||
$("#jurusan").val(datanya.jurusan);
|
||||
$("#jk").val(datanya.jk);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
222
ui/siswa_pages/quiz.html
Normal file
222
ui/siswa_pages/quiz.html
Normal file
@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SMKS Muhammad Ahmad Dahlan | Halaman Kuis & Soalan</title>
|
||||
|
||||
<!-- Main Styles -->
|
||||
<link rel="stylesheet" href="/styles/style.min.css">
|
||||
|
||||
<!-- mCustomScrollbar -->
|
||||
<link rel="stylesheet" href="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
<!-- Waves Effect -->
|
||||
<link rel="stylesheet" href="/plugin/waves/waves.min.css">
|
||||
|
||||
<!-- Sweet Alert -->
|
||||
<link rel="stylesheet" href="/plugin/sweet-alert/sweetalert.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/fontello/fontello.css">
|
||||
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="/plugin/toastr/toastr.css">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
|
||||
<link rel="stylesheet" href="/fonts/material-design/css/materialdesignicons.css">
|
||||
<script src="/auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-menu">
|
||||
<header class="header">
|
||||
<a href="/admin" class="logo">SMK Mahda</a>
|
||||
<button type="button" class="button-close fa fa-times js__menu_close"></button>
|
||||
<div class="user">
|
||||
<a href="#" class="avatar"><img src="/images/siswa_lk.png" class="img-avatar" alt=""
|
||||
style="width:65px; height:65px"><span class="status online"></span></a>
|
||||
<h5 class="name"><a href="#" id="h5-title" class="namanya">...</a></h5>
|
||||
<h5 class="position">Siswa</h5>
|
||||
|
||||
</div>
|
||||
<!-- /.user -->
|
||||
</header>
|
||||
<!-- /.header -->
|
||||
<div class="content">
|
||||
|
||||
<div class="navigation">
|
||||
<h5 class="title">Navigasi</h5>
|
||||
<!-- /.title -->
|
||||
<ul class="menu js__accordion">
|
||||
<li>
|
||||
<a class="waves-effect" href="/siswa"><i class="menu-icon fa fa-home"></i><span>Halaman
|
||||
Utama</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon ico icon-table"></i><span>Materi</span></a>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-users"></i><span>List User</span></a>
|
||||
</li> -->
|
||||
|
||||
<li class="current active">
|
||||
<a class="waves-effect" href="/siswa/quiz"><i class="menu-icon ico icon-table"></i><span>Kuis &
|
||||
Soal</span></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="notAvailable()"><i
|
||||
class="menu-icon fa fa-unlock-alt"></i><span>Ganti Password</span></a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="waves-effect" href="#" onclick="logout()"><i
|
||||
class="menu-icon ico icon-logout"></i><span>Logout</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- /.navigation -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.main-menu -->
|
||||
|
||||
<div class="fixed-navbar">
|
||||
<div class="pull-left">
|
||||
<button type="button"
|
||||
class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
|
||||
<h1 class="page-title">Halaman Kuis & Soalan</h1>
|
||||
<!-- /.page-title -->
|
||||
</div>
|
||||
<!-- /.pull-left -->
|
||||
<div class="pull-right">
|
||||
|
||||
|
||||
<a href="#" class="ico-item ico icon-logout" onclick="logout()"></a>
|
||||
</div>
|
||||
<!-- /.pull-right -->
|
||||
</div>
|
||||
<!-- /.fixed-navbar -->
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-12">
|
||||
<div class="box-content card">
|
||||
<h4 class="box-title">List Kuis & Soalan</h4>
|
||||
<div style="overflow-x: scroll;">
|
||||
<table id="example" class="table table-striped table-bordered display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mata Pelajaran</th>
|
||||
<th>Hari</th>
|
||||
<th>Mulai</th>
|
||||
<th>Selesai</th>
|
||||
<th>Waktu</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bahasa Indonesia TKA (Kuis 1)</td>
|
||||
<td>Rabu | 08-Okt-2025</td>
|
||||
<td>08.50 AM</td>
|
||||
<td>10.10 AM</td>
|
||||
<td>1 Jam 20 Menit</td>
|
||||
<td id="status-soal1">
|
||||
<span class="label label-default">Loading...</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- onclick to /siswa/soal1 -->
|
||||
<button id="btn-soal1" type="button"
|
||||
class="btn btn-primary btn-circle btn-xs waves-effect waves-light" onclick="window.location.href='/siswa/soal1'"><i
|
||||
class="ico fa fa-pencil-square-o" title="Jawab Kuis & Soalan"
|
||||
></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>Gerbang Pembelajaran Interaktif - SMKS Muhammad Ahmad Dahlan © Rika Rahman 2025.</li>
|
||||
<!-- <li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Help</a></li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- /.main-content -->
|
||||
</div><!--/#wrapper -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/script/html5shiv.min.js"></script>
|
||||
<script src="/script/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="/scripts/jquery.min.js"></script>
|
||||
<script src="/scripts/modernizr.min.js"></script>
|
||||
<script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="/plugin/sweet-alert/sweetalert.min.js"></script>
|
||||
<script src="/plugin/waves/waves.min.js"></script>
|
||||
<!-- Full Screen Plugin -->
|
||||
<script src="/plugin/fullscreen/jquery.fullscreen-min.js"></script>
|
||||
|
||||
<!-- Toastr -->
|
||||
<script src="/plugin/toastr/toastr.min.js"></script>
|
||||
|
||||
<script src="/scripts/main.min.js"></script>
|
||||
<script src="/my-js.js"></script>
|
||||
<script>
|
||||
// change class img-avatar src
|
||||
$(".img-avatar").attr("src", datanya.jk == "Laki-laki" ? "/images/siswa_lk.png" : "/images/siswa_prm.png");
|
||||
$(".namanya").text(datanya.nama);
|
||||
|
||||
function cek_list_soal() {
|
||||
$.ajax({
|
||||
url: "/siswa/check_status_list_soal/soal1/" + datanya.nis,
|
||||
type: "get",
|
||||
success: function (data) {
|
||||
$("#status-soal1").html(`<span class="label label-${data.label}">${data.status}</span>`);
|
||||
|
||||
// if(data.bool) {
|
||||
// $("#btn-soal1").attr("disabled", true);
|
||||
// $("#btn-soal1").css("cursor", "not-allowed");
|
||||
// // remove the onclick attribute
|
||||
// $("#btn-soal1").removeAttr("onclick");
|
||||
// // $("#btn-soal1").attr("title", "Anda sudah menjawab kuis ini");
|
||||
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cek_list_soal()
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1600
ui/siswa_pages/soal1.html
Normal file
1600
ui/siswa_pages/soal1.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user