<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Module</title>
<link rel="stylesheet" href="path/to/your/css/file.css">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<?php echo $__env->make('web.frontend.layouts.css', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<style>
.sidebar {
/* width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0; */
width: 75%;
overflow-y: auto;
transition: transform 0.3s ease;
/* z-index: 1040; */
}
@media (max-width: 767.98px) {
.sidebar {
transform: translateY(-100%);
}
.sidebar.active {
transform: translateY(0);
}
.main-content {
margin-left: 0 !important;
}
}
@media (min-width: 768px) {
.main-content {
/* margin-left: 250px; */
}
}
</style>
</head>
<body class="overflow-hidden">
<!-- Content Start -->
<div>
<div class="wrapper d-flex align-items-stretch" style="display: flex; height: calc(150vh - 15rem);">
<div id="navbarToggleExternalContent" class="sidebar bg-light d-none d-md-block show order-last overflow-auto py-5 px-4" style="width: 450px;">
<div class="single-progress mb-5" style="padding-top: 60px;">
<div class="row">
<h6 class="col-6 title">Progress Belajar</h6>
<span class="col-6 text-end progress-number"><?php echo e($percentageProgress); ?> %</span>
</div>
<div class="progress">
<div class="progress-bar wow fadeInLeft" data-wow-duration="0.5s" data-wow-delay=".3s"
role="progressbar"
style="width: <?php echo e($percentageProgress); ?>%; visibility: visible; animation-duration: 0.5s; animation-delay: 0.3s; animation-name: fadeInLeft;"
aria-valuenow="<?php echo e($percentageProgress); ?>" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="chapter-list border shadow rounded" style="height: 80%; overflow-y: auto;">
<div class="scroll-container" style="max-height: 100%; overflow-y: auto;">
<?php $__currentLoopData = $modulChapter; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $modul): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<nav class="navbar navbar-light">
<button class="btn d-flex justify-content-between w-100 my-1" type="button"
data-bs-toggle="collapse" data-bs-target="#chapter-<?php echo e($modul->slug); ?>"
aria-controls="chapter-<?php echo e($modul->slug); ?>" aria-expanded="false"
aria-label="Toggle navigation" onclick="toggleIcon(this, '<?php echo e($modul->slug); ?>')">
<span class="text-wrap fs-4 fw-bold module-toggle <?php echo e($modul->slug == $modules->moduleChapter->slug ? 'active' : ''); ?>">
<?php echo e($modul->name); ?>
</span>
</button>
</nav>
<div class="collapse <?php echo e($modul->slug == $modules->moduleChapter->slug ? 'show' : ''); ?>" id="chapter-<?php echo e($modul->slug); ?>" data-bs-theme="light">
<ul class="ms-5 me-5 p-0">
<?php $__currentLoopData = $modul->modules; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<li class="list-unstyled p-2 d-flex flex-row align-items-center border rounded shadow ">
<label for="module-<?php echo e($item->id); ?>" class="d-flex align-items-center">
<i class="fa-solid <?php echo e(in_array($item->id, $accessedModules->pluck('id')->toArray()) ? 'fa-circle-check text-primary' : 'fa-circle-o'); ?> fs-4 me-2 module-icon"></i>
<a class="fs-4 module-link text-wrap" href="<?php echo e(route('member.contenModul', [$class->id, $item->id])); ?>">
<?php echo e($item->title); ?>
</a>
</label>
</li>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</ul>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<nav class="navbar navbar-light">
<button class="btn d-flex justify-content-between w-100 my-1" type="button"
data-bs-toggle="collapse" data-bs-target="#chapter-ujian-akhir"
aria-controls="chapter-ujian-akhir" aria-expanded="false"
aria-label="Toggle navigation" onclick="toggleIcon(this, 'ujian-akhir')">
<span class="fs-4 fw-bold module-toggle">
Ujian Akhir
</span>
</button>
</nav>
<div class="collapse" id="chapter-ujian-akhir" data-bs-theme="light">
<ul class="ms-5 me-5 p-0">
<li class="list-unstyled p-2 d-flex flex-row align-items-center border rounded shadow ">
<label for="module-ujian-akhir" class="d-flex align-items-center">
<i class="fa-solid fs-4 me-2 module-icon"></i>
<a class="fs-4 module-link" href="<?php echo e(route('exam.start', $class->id)); ?>">
Ujian Akhir
</a>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-content d-flex flex-column" style="height: 100vh; padding-top: 70px; padding-bottom: 70px; width: 75vw;">
<header class="fixed-top bg-light border-bottom py-3">
<div class="d-flex justify-content-center me-5">
<div class="logo ms-3">
<a href="<?php echo e(route('beranda')); ?>"><img id="logo_img" src="<?php echo e(asset('image/logo/logo aja.png')); ?>" alt="logo"><?php echo e(env('APP_NAME')); ?> </a>
</div>
</div>
<button class="btn btn-primary d-block d-md-none position-fixed top-0 right-0 m-3 zindex-dropdown" id="toggleSidebar">
<i class="fa fa-bars"></i>
</button>
</header>
<div class="flex-grow-1 overflow-auto px-4" style="margin-top: 20px; margin-bottom: 20px;">
<div class="fs-5 container">
<?php if(isset($isExamView) && $isExamView): ?>
<?php echo $__env->make('web.dashboard_member.layouts._exam_content', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php else: ?>
<div>
<h3><?php echo e($modules->title); ?></h3>
<?php
$content = $modules->content;
// Temukan semua placeholder soal, contoh: {{soal_1}}
preg_match_all('/\{\{(soal_\d+)\}\}/', $content, $matches);
$placeholders = !empty($matches[1]) ? $matches[1] : [];
// Ambil semua data soal yang relevan dalam satu query untuk efisiensi
$soals = \App\Models\Soal::where('module_id', $modules->id)
->whereIn('placeholder', $placeholders)
->get()
->keyBy('placeholder');
// Ganti placeholder dengan marker unik untuk di-split
$contentWithMarkers = preg_replace('/\{\{(soal_\d+)\}\}/', '##SOAL_PLACEHOLDER:$1##', $content);
$contentParts = preg_split('/(##SOAL_PLACEHOLDER:soal_\d+##)/', $contentWithMarkers, -1, PREG_SPLIT_DELIM_CAPTURE);
?>
<?php $__currentLoopData = $contentParts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $part): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if(str_starts_with($part, '##SOAL_PLACEHOLDER:')): ?>
<?php
$placeholderName = str_replace(['##SOAL_PLACEHOLDER:', '##'], '', $part);
$soal = $soals->get($placeholderName);
?>
<?php if($soal): ?>
<?php echo $__env->make('web.dashboard_member.layouts._live_coding_box', ['soal' => $soal], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php endif; ?>
<?php else: ?>
<?php echo $part; ?>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php endif; ?>
</div>
</div>
<footer class="fixed-bottom bg-light border-top py-3">
<div class="d-flex justify-content-end me-5">
<?php if(!isset($isExamView) || !$isExamView): ?>
<?php if($previousModule): ?>
<a href="<?php echo e(route('member.contenModul', ['classId' => $class->id, 'moduleId' => $previousModule->id])); ?>" class="btn btn-secondary" id="previousButton">Previous</a>
<?php endif; ?>
<?php if($nextModule): ?>
<a href="<?php echo e(route('member.contenModul', ['classId' => $class->id, 'moduleId' => $nextModule->id])); ?>" class="btn btn-primary ms-3" id="nextButton">Next</a>
<?php else: ?>
<button type="button" class="btn btn-success ms-3 <?php echo e($allCourseSoalSolved ? '' : 'disabled'); ?>" id="finishButton" data-bs-toggle="modal" data-bs-target="#ratingModal" <?php echo e($allCourseSoalSolved ? '' : 'disabled'); ?>>Finish</button>
<?php endif; ?>
<?php endif; ?>
</div>
</footer>
</div>
<!-- Footer End -->
<!-- Rating Modal -->
<!-- Modal -->
<div class="modal fade" id="ratingModal" tabindex="-1" aria-labelledby="ratingModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="rating-title fs-1">Beri Review</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="<?php echo e(route('classes.storeRating', $class->id)); ?>" method="POST" class="rating-form custom-radio-rating" onsubmit="return validateForm()">
<?php echo csrf_field(); ?>
<div class="modal-body">
<div id="full-stars-example-two">
<p class="text-center fs-2">Seberapa Puas Anda Dengan Kursus Ini</p>
<div class="rating-group text-center m-auto d-flex justify-content-center mb-2">
<input disabled checked class="rating__input rating__input--none mx-2 px-3" name="rating" id="rating3-none" value="0" type="radio">
<label aria-label="1 star" class="rating__label mx-2 px-3" for="rating3-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating3-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label mx-2 px-3" for="rating3-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating3-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label mx-2 px-3" for="rating3-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating3-3" value="3" type="radio">
<label aria-label="4 stars" class="rating__label mx-2 px-3" for="rating3-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating3-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label mx-2 px-3" for="rating3-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating3-5" value="5" type="radio">
</div>
</div>
<div class="form-group">
<textarea id="comment" class="form-control" name="review" placeholder="Berikan Komentar Anda" rows="5"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="rbt-btn btn-md btn-gradient hover-icon-reverse w-100">
<span class="icon-reverse-wrapper">
<span class="btn-text">Kirim</span>
<span class="btn-icon"><i class="feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather-arrow-right"></i></span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
<?php echo $__env->make('web.frontend.layouts.js', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
const sidebar = document.getElementById("navbarToggleExternalContent");
const toggleBtn = document.getElementById("toggleSidebar");
toggleBtn.addEventListener("click", function () {
sidebar.classList.toggle("active");
sidebar.classList.toggle('d-none');
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Add this new code for dropdown functionality
var moduleToggles = document.getElementsByClassName("module-toggle");
for (var i = 0; i < moduleToggles.length; i++) {
moduleToggles[i].addEventListener("click", function() {
this.classList.toggle("active");
var submodules = this.nextElementSibling;
if (submodules.style.maxHeight) {
submodules.style.maxHeight = null;
} else {
submodules.style.maxHeight = submodules.scrollHeight + "px";
}
});
}
function validateForm() {
var rating = document.querySelector('input[name="rating"]:checked');
var review = document.getElementById('comment').value;
if (!rating || review.trim() === "") {
alert("Mohon isi semua field!");
return false;
}
return true;
}
});
</script>
<script>
// Meneruskan nilai konfigurasi dari Laravel ke JavaScript
window.judge0Config = {
url: "<?php echo e(config('judge0.url', 'https://judge0.britech.id')); ?>",
token: "<?php echo e(config('judge0.token')); ?>"
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' }});
function saveAnswer(soalId, answer, isSolved) {
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
fetch("<?php echo e(route('soal.saveAnswer')); ?>", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrfToken
},
body: JSON.stringify({
soal_id: soalId,
answer: answer,
is_solved: isSolved
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('Jawaban berhasil disimpan ke database.');
} else {
console.error('Gagal menyimpan jawaban:', data.message);
}
})
.catch(error => {
console.error('Error saat menyimpan jawaban:', error);
});
}
require(['vs/editor/editor.main'], function () {
const codingBoxes = document.querySelectorAll('.live-coding-box');
const nextButton = document.getElementById('nextButton');
const finishButton = document.getElementById('finishButton');
const totalSoal = codingBoxes.length;
let solvedSoal = 0;
// Jika ada soal, nonaktifkan tombol Next/Finish secara default
if (totalSoal > 0) {
if (nextButton) nextButton.classList.add('disabled');
if (finishButton) finishButton.classList.add('disabled');
}
function checkCompletion() {
if (totalSoal > 0 && solvedSoal === totalSoal) {
if (nextButton) nextButton.classList.remove('disabled');
if (finishButton) finishButton.classList.remove('disabled');
}
}
const languageMap = {
'63': 'javascript', // JavaScript (Node.js 12.14.0)
'71': 'python', // Python (3.8.1)
'70': 'python', // Python (2.7.17)
// Tambahkan mapping lain jika diperlukan
};
codingBoxes.forEach(function(box) {
const container = box.querySelector('.monaco-container');
const languageId = box.dataset.languageId;
const monacoLanguage = languageMap[languageId] || 'plaintext';
const initialCode = box.querySelector('.initial-code').textContent;
const editor = monaco.editor.create(container, {
value: initialCode.trim(),
language: monacoLanguage,
automaticLayout: true,
theme: 'vs-dark'
});
const runButton = box.querySelector('.btn-run-code');
const outputEl = box.querySelector('.output');
// Ambil jawaban yang diharapkan dari data-attribute, yang berasal dari model Soal
const expectedOutput = box.dataset.answer.trim();
let useStdin = false; // Variabel untuk melacak status stdin
runButton.addEventListener('click', function () {
const sourceCode = editor.getValue();
// Pengecekan dasar untuk mencegah pengiriman kode kosong
if (!sourceCode.trim()) {
outputEl.style.display = 'block';
outputEl.textContent = '⚠️ Kode tidak boleh kosong.';
outputEl.classList.remove('bg-success-subtle', 'text-success-emphasis');
outputEl.classList.add('bg-dark', 'text-white');
return;
}
outputEl.style.display = 'block';
outputEl.textContent = 'Menjalankan kode...';
runButton.disabled = true; // Nonaktifkan tombol selama eksekusi
// Persiapan payload untuk Judge0, termasuk stdin jika diaktifkan
let submissionData = {
language_id: parseInt(languageId),
source_code: sourceCode,
expected_output: expectedOutput
};
if (useStdin) {
const stdin = box.querySelector(`#stdin-${box.dataset.soalId}`).value;
if (stdin) {
submissionData.stdin = stdin;
}
}
const judge0ApiUrl = `${window.judge0Config.url}/submissions?base64_encoded=false&wait=true`;
fetch(judge0ApiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-rapidapi-key': window.judge0Config.token,
},
body: JSON.stringify(submissionData)
})
.then(res => {
if (!res.ok) {
// Tangani error HTTP seperti 500, 404, dll.
return res.json().then(errorData => {
throw new Error(`HTTP error ${res.status}: ${errorData.message || res.statusText}`);
});
}
return res.json();
})
.then(data => {
console.log('Judge0 Response:', data);
// Tangani berbagai status dari Judge0
const statusId = data.status.id;
const statusDescription = data.status.description;
let resultText = `Status: ${statusDescription}\n`;
// Tambahkan pesan output/error
if (data.stdout) resultText += `\nOutput:\n${data.stdout}`;
if (data.stderr) resultText += `\nError:\n${data.stderr}`;
if (data.compile_output) resultText += `\nCompile Error:\n${data.compile_output}`;
if (data.message) resultText += `\nMessage: ${data.message}`;
outputEl.textContent = resultText;
if (statusId === 3) { // Status: Accepted
outputEl.textContent += '\n\n✅ Jawaban benar!';
outputEl.classList.remove('bg-dark', 'text-white');
outputEl.classList.add('bg-success-subtle', 'text-success-emphasis');
saveAnswer(box.dataset.soalId, sourceCode, true);
if (!box.classList.contains('solved')) {
box.classList.add('solved');
solvedSoal++;
checkCompletion(); // Cek apakah semua soal sudah terjawab
}
} else {
outputEl.textContent += '\n❌ Jawaban belum sesuai.';
outputEl.classList.remove('bg-success-subtle', 'text-success-emphasis');
outputEl.classList.add('bg-dark', 'text-white');
}
})
.catch(err => {
console.error('Fetch Error:', err);
outputEl.textContent = `⚠️ Gagal menjalankan kode: ${err.message}`;
outputEl.classList.remove('bg-success-subtle', 'text-success-emphasis');
outputEl.classList.add('bg-dark', 'text-white');
}).finally(() => {
runButton.disabled = false; // Aktifkan kembali tombol
});
});
// Event listener untuk tombol reset kode
box.querySelector('.btn-reset-code').addEventListener('click', function() {
editor.setValue(initialCode.trim());
outputEl.style.display = 'none';
box.classList.remove('solved');
if (box.classList.contains('solved')) {
solvedSoal--;
checkCompletion();
}
});
// Event listener untuk checkbox stdin
box.querySelector(`#useStdin-${box.dataset.soalId}`).addEventListener('change', function() {
useStdin = this.checked;
});
});
});
</script>
</html>
<?php /**PATH C:\laragon\www\web_mudahcoding_2024\resources\views/web/dashboard_member/layouts/content.blade.php ENDPATH**/ ?>
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell