295 lines
12 KiB
PHP
295 lines
12 KiB
PHP
@extends('layouts/contentNavbarLayout')
|
|
|
|
@section('title', 'Tables - Placement Tes')
|
|
|
|
@section('content')
|
|
|
|
@if ($user->role == "Admin")
|
|
<h4 class="fw-bold py-3 mb-4">
|
|
<span class="text-muted fw-light">Tables Placement Tes</span>
|
|
</h4>
|
|
@endif
|
|
|
|
<!-- Basic Bootstrap Table -->
|
|
<div class="card">
|
|
<h5 class="card-header">Placement Tes</h5>
|
|
@if ($user->role == "Admin")
|
|
<div class="mx-3 text-start">
|
|
<a href="{{ route('placement.create') }}">
|
|
<button type="submit" class="btn btn-sm btn-primary">
|
|
<i class='bx bx-plus'></i>
|
|
Add
|
|
</button>
|
|
</a>
|
|
</div>
|
|
@endif
|
|
@if (isset($user->kelas))
|
|
<div class="row mb-3 px-3">
|
|
<div class="col-md-6 col-lg-12 mb-3">
|
|
<div class="card text-center">
|
|
<div class="card-header">
|
|
Penempatam Kamu
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">{{$user->kelas}}</h3>
|
|
<p class="card-text">Selamat atas hasil placement test yang kamu dapatkan!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
@if ($user->role != "Admin")
|
|
<div id="landing">
|
|
<div class="card-body">
|
|
<ol>
|
|
<li><strong>Waktu Pengerjaan:</strong> Anda memiliki 30 menit untuk menyelesaikan seluruh tes. Pastikan
|
|
Anda menggunakan waktu dengan efisien untuk menjawab semua pertanyaan.</li>
|
|
<li><strong>Ketersediaan Akses:</strong> Pastikan koneksi internet Anda stabil sepanjang ujian. Jika
|
|
terjadi gangguan, Anda mungkin kehilangan waktu berharga. Jika memungkinkan, gunakan koneksi yang
|
|
baik dan stabil.</li>
|
|
<li><strong>Konsentrasi:</strong> Agar dapat menjawab dengan baik, pastikan Anda berada di lingkungan
|
|
yang tenang dan bebas gangguan. Tutup aplikasi atau pemberitahuan yang dapat mengganggu perhatian
|
|
Anda selama tes berlangsung.</li>
|
|
<li><strong>Kerja Individual:</strong> Tes ini harus diselesaikan secara individu. Tidak diperbolehkan
|
|
bekerjasama atau menggunakan bantuan dari orang lain.</li>
|
|
<li><strong>Penyelidikan:</strong> Segala bentuk kecurangan, termasuk mencontek atau menggunakan bahan
|
|
referensi selama ujian, tidak diperbolehkan. Pelanggaran akan mengakibatkan hasil penilaian tidak
|
|
akurat.</li>
|
|
<li><strong>Pengiriman Jawaban:</strong> Pastikan Anda mengirimkan jawaban Anda sebelum waktu habis.
|
|
Jawaban Anda akan dikirimkan secara otomatis apabila waktu habis.</li>
|
|
</ol>
|
|
<p>Dengan menyelesaikan ujian ini, Anda membantu kami menilai kemampuan Anda secara akurat. Selamat
|
|
mengerjakan dan semoga berhasil!</p>
|
|
|
|
<div class="text-center">
|
|
<button id="startTest" class="btn btn-primary">Start Test</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="display:none" id="test">
|
|
<div class="card-body mx-3">
|
|
<b>Catatan</b>
|
|
<ul>
|
|
<li>Jawab pertanyaan berikut untuk menentukan kelasmu!</li>
|
|
<li>Jangan mencontek karena ini adalah penentuan kelas, bukan ujian!</li>
|
|
</ul>
|
|
<hr class="mt-3">
|
|
</div>
|
|
<div class="col-lg-1"></div>
|
|
<div class="col-lg-6">
|
|
<div class="card-body">
|
|
<div>
|
|
<div>
|
|
<span class="badge bg-primary rounded-pill" id="timer">30 mnt</span><br>
|
|
<span><b>Question <span id="index"></span></b></span>
|
|
<br>
|
|
<div class="my-3">
|
|
<textarea class="form-control" id="question" rows="6" readonly></textarea>
|
|
</div>
|
|
<div>
|
|
<span id="answers"></span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button id="prevBtn" class="btn btn-primary">Prev</button>
|
|
<button id="submit" class="btn btn-warning">Submit</button>
|
|
<button id="nextBtn" class="btn btn-primary">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="card-body">
|
|
<div class="text-center">
|
|
<span><b>Question List</b></span>
|
|
<br>
|
|
<div class="d-flex align-content-between justify-content-between flex-wrap" id="questionIndex">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="table-responsive text-nowrap p-3">
|
|
<table class="table" id="table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Soal</th>
|
|
<th>Jawaban</th>
|
|
<th>Jawaban Benar</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($placement as $record)
|
|
<tr>
|
|
<th scope="row">{{$loop->index + 1}}</th>
|
|
<td>{{$record->soal}}</td>
|
|
<td>{{$record->jawaban}}</td>
|
|
<td>{{$record->jawaban_benar}}</td>
|
|
<td>
|
|
<div class="btn-group" role="group" aria-label="Actions">
|
|
<a href="{{route('placement.edit', $record->id)}}" class="btn btn-blue"><i
|
|
class="bx bx-edit-alt"></i> Edit</a>
|
|
<form action="{{route('placement.delete', $record->id)}}" method="POST">
|
|
@csrf
|
|
@method("DELETE")
|
|
<button type="submit" class="btn btn-white"
|
|
onclick="return confirm('Apakah Kamu Yakin?')">
|
|
<i class="bx bx-trash"></i> Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
<!--/ Basic Bootstrap Table -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script defer>
|
|
$(document).ready(function () {
|
|
const user = JSON.parse("{{$user}}".replaceAll(""", '"'));
|
|
let placement = <?php echo $placement; ?>;
|
|
let index = 0;
|
|
let timeoutMinute = 30;
|
|
let timeoutSecond = 0;
|
|
let isStart = false;
|
|
|
|
$('#startTest').click(function () {
|
|
$('#landing').hide();
|
|
$('#test').show();
|
|
|
|
isStart = true;
|
|
})
|
|
|
|
$('#submit').click(function () {
|
|
saveAnswer();
|
|
for (const i in placement) {
|
|
if (!placement[i].input_jawaban) {
|
|
alert(`Soal nomor ${parseInt(i) + 1} belum dijawab!`);
|
|
index = parseInt(i);
|
|
return loadQuestion(placement[index]);
|
|
}
|
|
}
|
|
|
|
sendAnswer();
|
|
});
|
|
|
|
$('#prevBtn').click(function () {
|
|
if (index > 0) {
|
|
index--;
|
|
loadQuestion(placement[index]);
|
|
updateIndex();
|
|
}
|
|
});
|
|
|
|
$('#nextBtn').click(function () {
|
|
if (placement[index + 1]) {
|
|
index++;
|
|
loadQuestion(placement[index]);
|
|
updateIndex();
|
|
}
|
|
});
|
|
|
|
function sendAnswer() {
|
|
for (const i in placement) {
|
|
if (!placement[i].input_jawaban) {
|
|
placement[i].input_jawaban = "TIDAK DIJAWAB";
|
|
}
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/tables/placement/calculate',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
"_token": "{{ csrf_token() }}",
|
|
data: placement,
|
|
user: JSON.stringify(user)
|
|
}),
|
|
success: function (data) {
|
|
// alert(`Hasil klasifikasi: ${data}`);
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function saveAnswer() {
|
|
const answer = $('input[name="jawaban"]:checked').val();
|
|
if (answer) {
|
|
placement[index].input_jawaban = decodeURI(answer);
|
|
}
|
|
}
|
|
|
|
function updateIndex() {
|
|
var html = '';
|
|
for (const q in placement) {
|
|
html += `<button id="questionSelect${q}" class="btn btn-xs m-1 ${q == index ? 'btn-success' : placement[q].input_jawaban ? 'btn-primary' : 'btn-outline-warning'}">${parseInt(q) + 1}</button>`
|
|
}
|
|
$('#questionIndex').html(html);
|
|
|
|
for (const q in placement) {
|
|
$(`#questionSelect${q}`).click(function () {
|
|
index = parseInt(q);
|
|
loadQuestion(placement[q]);
|
|
updateIndex();
|
|
})
|
|
}
|
|
}
|
|
|
|
function loadQuestion(data) {
|
|
$('#index').html(index + 1);
|
|
$('#question').html(data.soal);
|
|
// Update jawaban
|
|
var answers = data.jawaban.split("|").sort(() => Math.random() - 0.5);;
|
|
var html = '';
|
|
for (const i in answers) {
|
|
const answer = answers[i];
|
|
html += `<input type="radio" class="form-check-input" id="jawaban_${i}" name="jawaban" value="` + encodeURI(answer) + '"' + `${data.input_jawaban == answer ? "checked" : ""}` + '>';
|
|
html += `<label style="margin-left: 5px;" for="jawaban_${i}">` + answer + '</label><br>';
|
|
}
|
|
|
|
$('#answers').html(html);
|
|
|
|
$('input:radio[name=jawaban]').change(function () {
|
|
saveAnswer();
|
|
updateIndex();
|
|
})
|
|
|
|
// Check button
|
|
$('#nextBtn').prop('disabled', false);
|
|
$('#prevBtn').prop('disabled', false);
|
|
if (index == (placement.length - 1)) {
|
|
$('#nextBtn').prop('disabled', true);
|
|
} else if (index == 0) {
|
|
$('#prevBtn').prop('disabled', true);
|
|
}
|
|
}
|
|
|
|
loadQuestion(placement[index]);
|
|
updateIndex();
|
|
|
|
const timer = setInterval(function () {
|
|
if (!isStart) return;
|
|
|
|
$("#timer").html(timeoutMinute + "m : " + timeoutSecond-- + "s");
|
|
|
|
if (timeoutSecond < 0) {
|
|
timeoutSecond = 60;
|
|
timeoutMinute--;
|
|
}
|
|
|
|
if (timeoutMinute < 0) {
|
|
sendAnswer();
|
|
clearInterval(timer);
|
|
}
|
|
}, 1000)
|
|
})
|
|
</script>
|
|
@endsection
|