<style>
.quiz-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
border-bottom: 1px solid #C3C9DA;
padding-bottom: 20px;
font-weight: 600;
}
.quiz-starter .starter-label {
display: inline-block;
width: 110px;
}
.quiz-starter p {
font-size: 15px;
font-weight: 500;
color: #6e798a;
}
.question {
min-height: 155px;
}
input[type="text"] {
padding: 12px 50px 12px 20px;
border-radius: 10px;
border: 1px solid #6b738530;
box-shadow: none !important;
}
.gradient-border {
background: #fff;
border: 2px solid #2f57ef;
color: #212529;
transition: .3s;
}
.gradient-border:hover {
color: #fff;
background: #2f57ef;
}
.serial {
width: 30px;
height: 30px;
background: #F2F3F5;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#quizTimer {
width: 80px;
}
</style>
<?php
$now = date('Y-m-d h:i:s');
$quiz = App\Models\Lesson::where('id', request()->route()->parameter('id'))
->firstOrNew();
$questions = DB::table('questions')
->where('quiz_id', $quiz->id)
->get();
$submits = DB::table('quiz_submissions')
->where('quiz_id', $quiz->id)
->where('user_id', auth()->user()->id)
->get();
?>
<div class="row px-4">
<div class="col-12">
<h4 class="quiz-title text-center mt-4"><span><?php echo e($quiz->title); ?></span></h4>
<div class="timer-container d-none">
<div class="d-flex align-content-center gap-2 justify-content-end">
<span>
<i class="fi fi-rr-clock-five"></i>
</span>
<span class="fw-600 fs-6"><?php echo e(get_phrase('Time left : ')); ?></span>
<p class="text-center fw-600 fs-6" id="quizTimer"></p>
</div>
</div>
<div class="d-flex justify-content-between">
<div class="description"><?php echo $quiz->description; ?></div>
</div>
</div>
</div>
<?php if(!empty($quiz->start_time) && !empty($quiz->end_time)): ?>
<?php
$startDateTime = strtotime($quiz->start_time);
$endDateTime = strtotime($quiz->end_time);
$now = time();
?>
<?php if($now >= $startDateTime && $now <= $endDateTime): ?>
<div class="row px-4 quiz-starter">
<div class="col-md-6">
<p>
<?php $duration = explode(':', $quiz->duration); ?>
<span class="starter-label"><?php echo e(get_phrase('Duration')); ?></span>
<span>: <?php echo e($duration[0] ?? '0'); ?> <?php echo e(get_phrase('Hour')); ?></span>
<span><?php echo e($duration[1] ?? '0'); ?> <?php echo e(get_phrase('Minute')); ?></span>
<span><?php echo e($duration[2] ?? '0'); ?> <?php echo e(get_phrase('Second')); ?></span>
</p>
<p>
<span class="starter-label"><?php echo e(get_phrase('Total Marks')); ?></span>
<span>: <?php echo e($quiz->total_mark < 10 ? '0' : ''); ?><?php echo e($quiz->total_mark); ?></span>
</p>
<p>
<span class="starter-label"><?php echo e(get_phrase('Pass Marks')); ?></span>
<span>: <?php echo e($quiz->pass_mark < 10 ? '0' : ''); ?><?php echo e($quiz->pass_mark); ?></span>
</p>
<p>
<span class="starter-label"><?php echo e(get_phrase('Retake')); ?></span>
<span>: <?php echo e($quiz->retake < 10 ? '0' : ''); ?><?php echo e($quiz->retake); ?></span>
</p>
</div>
<div class="col-md-6">
<p>
<span class="starter-label"><?php echo e(get_phrase('Question Type')); ?></span>
<span class="text-capitalize">:
<?php echo e(str_replace('_', ' ', implode(', ', $questions->pluck('type')->unique()->toArray()))); ?></span>
</p>
<p>
<span class="starter-label"><?php echo e(get_phrase('Attempts')); ?></span>
<span>: <?php echo e($submits->count() < 10 ? '0' : ''); ?><?php echo e($submits->count()); ?></span>
</p>
<p>
<span class="starter-label"><?php echo e(get_phrase('Total Question')); ?></span>
<span>: <?php echo e($questions->count() < 10 ? '0' : ''); ?><?php echo e($questions->count()); ?></span>
</p>
</div>
<div class="col-12 d-flex justify-content-center gap-3">
<?php $__currentLoopData = $submits; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $submit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<button type="button" class="eBtn gradient-border result-btn" onclick="getResult(this)"
id="<?php echo e($submit->id); ?>"><?php echo e(get_phrase('View Result')); ?> <?php echo e(++$key); ?></button>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php if($submits->count() < $quiz->retake): ?>
<button type="button" class="eBtn gradient border-0"
id="starterBtn"><?php echo e(get_phrase('Start Quiz')); ?></button>
<?php endif; ?>
</div>
</div>
<?php else: ?>
<div class="row px-4 quiz-starter">
<div class="col-md-12 text-center">
<h3 class="m-3 text-danger">
The exam will be available on: <?php echo e(date('d-m-Y h:i A', strtotime($quiz->start_time))); ?>
</h3>
<p>
If the questions do not appear on the screen at the scheduled time, please reload the page.
</p>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
<div class="load-content px-4"></div>
<script src="<?php echo e(asset('assets/frontend/default/js/jquery-3.7.1.min.js')); ?>"></script>
<script>
let starterContainer = document.querySelector('.quiz-starter');
let starterBtn = document.querySelector('#starterBtn');
let questionSection = document.querySelector('.question-section');
let quizTimer = document.querySelector('#quizTimer');
let description = document.querySelector('.description');
let resultSection = document.querySelector('.result-section');
let backBtn = document.querySelector('#backBtn');
// start quiz
starterBtn.addEventListener('click', function() {
starterContainer.classList.add('d-none');
description.classList.add('d-none');
$.ajax({
type: "get",
url: "<?php echo e(route('load.quiz.questions')); ?>",
data: {
quiz_id: "<?php echo e($quiz->id); ?>"
},
success: function(response) {
$('.load-content').html(response);
startTimer();
}
});
});
function startTimer() {
let timerContainer = document.querySelector('.timer-container');
timerContainer.classList.remove('d-none');
let duration = "<?php echo e($quiz->duration); ?>";
let durationArr = duration.split(":");
let hour = parseInt(durationArr[0]);
let minute = parseInt(durationArr[1]);
let second = parseInt(durationArr[2]);
// update the initial timer
quizTimer.innerHTML = (hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second)
// decrease the timer every second
let timerInterval = setInterval(() => {
if (hour === 0 && minute === 0 && second === 0) {
clearInterval(timerInterval);
endQuiz();
return;
}
if (second === 0) {
if (minute === 0) {
hour--;
minute = 59;
} else {
minute--;
}
second = 59;
} else {
second--;
}
// update the timer
quizTimer.innerHTML = (hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second);
}, 1000);
}
// load results
function getResult(elem) {
let id = $(elem).attr('id');
description.classList.add('d-none');
starterContainer.classList.add('d-none');
$.ajax({
type: "get",
url: "<?php echo e(route('load.quiz.result')); ?>",
data: {
submit_id: id,
quiz_id: "<?php echo e($quiz->id); ?>"
},
success: function(response) {
$('.load-content').html(response);
}
});
}
// end quiz
function endQuiz() {
submitQuiz();
}
</script>
<?php /**PATH /home1/cwmsozbb/public_html/resources/views/course_player/quiz/index.blade.php ENDPATH**/ ?>