174 lines
10 KiB
PHP
174 lines
10 KiB
PHP
@extends('layouts.front')
|
|
|
|
@section('content')
|
|
<div class="section-body pb-2">
|
|
<h2 class="section-title">Start Your Lesson now</h2>
|
|
<p class="section-lead">
|
|
levels serve as milestones that learners can progress through, providing structure, motivation, and rewards.<br />
|
|
|
|
</p>
|
|
<!-- Your content goes here -->
|
|
</div>
|
|
<div class="row">
|
|
@foreach($level as $level)
|
|
<div class="col-md-4">
|
|
<div class="card text-center" style="width: 18rem;">
|
|
@php
|
|
$level_down = $level->id - 1;
|
|
$lessons1 = \App\Models\Lesson::where('level_id', $level_down)->pluck('id');
|
|
$content1 = \App\Models\Content::whereIn('lesson_id', $lessons1)->pluck('id');
|
|
$question1 = \App\Models\Question::whereIn('content_id', $content1)->pluck('id')->toArray();
|
|
|
|
$firstContent = $level->lessons->first()->contents->first();
|
|
$check = \App\Models\UserScore::where('user_id', Auth::user()->id)->where('level_id', $level_down)->orderBy('question_id', 'asc')->pluck('question_id')->toArray();
|
|
|
|
$diff = array_diff($question1, $check);
|
|
if(empty($diff)){
|
|
$is_pass = 1;
|
|
} else{
|
|
$is_pass =0;
|
|
}
|
|
|
|
$check_explain = \App\Models\Explains::where("user_id", Auth::id())->where('level_id', $level_down)->where('code', 0)->count();
|
|
@endphp
|
|
<div class="card-body d-flex flex-column">
|
|
{{--level 1 selalu dapat diakses--}}
|
|
@if($level->id == 1)
|
|
<div class="text-center">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h9V6q0-1.25-.875-2.125T12 3q-1.025 0-1.813.613T9.126 5.15q-.125.375-.388.613T8.126 6q-.5 0-.8-.338t-.2-.762Q7.5 3.225 8.85 2.112T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm6-5q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17Z"/></svg>
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title pt-3">{{$level->name}}</h5>
|
|
<p class="card-text">{{$level->description}}</p>
|
|
<a href="{{ route('student_course.my_course.detail.content', [$course_id, $level->id, $firstContent->id]) }}" class="btn btn-primary btn-lg mt-auto" role="button" aria-disabled="true">Start Lesson</a>
|
|
@else
|
|
{{--selain level 1 harus melalui pengecekan. apakah semua question di dalam level telah dikerjakan. jika ya, level terbuka--}}
|
|
@if($is_pass == 1)
|
|
<div class="text-center">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h9V6q0-1.25-.875-2.125T12 3q-1.025 0-1.813.613T9.126 5.15q-.125.375-.388.613T8.126 6q-.5 0-.8-.338t-.2-.762Q7.5 3.225 8.85 2.112T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm6-5q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17Z"/></svg>
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title pt-3">{{$level->name}}</h5>
|
|
<p class="card-text">{{$level->description}}</p>
|
|
<a href="{{ route('student_course.my_course.detail.content', [$course_id, $level->id, $firstContent->id]) }}" class="btn btn-primary btn-lg mt-auto" role="button" aria-disabled="true">Start Lesson</a>
|
|
{{--@elseif($is_pass == 1 && $check_explain == 0)
|
|
<div class="text-center">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h1V6q0-2.075 1.463-3.538T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm6-5q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6v2Z"/></svg>
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title pt-3">{{$level->name}}</h5>
|
|
<p class="card-text">{{$level->description}}</p>
|
|
<input type="hidden" value="{{$course_id}}" id="course_id">
|
|
<input type="hidden" value="{{$level->id}}" id="level_id">
|
|
<input type="hidden" value="{{$firstContent->id}}" id="first_content">
|
|
<span class="mt-auto" tabindex="0" data-toggle="tooltip" title="You must click and fill the form first">
|
|
<button type="button" style="width:100%; height:45px" class="btn btn-secondary" data-toggle="modal" data-target="#modal-explain"> Start Lesson </button>
|
|
</span>--}}
|
|
@else
|
|
{{--jika tidak, level tertutup--}}
|
|
<div class="text-center">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h1V6q0-2.075 1.463-3.538T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm6-5q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6v2Z"/></svg>
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title pt-3">{{$level->name}}</h5>
|
|
<p class="card-text">{{$level->description}}</p>
|
|
<span class="mt-auto" tabindex="0" data-toggle="tooltip" title="You must finish your previous task first">
|
|
<a href="javascript:void(0)" style="width:100%; height:45px" class="btn btn-secondary btn-lg mt-auto" role="button" aria-disabled="true">Start Lesson</a>
|
|
</span>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<div class="modal fade" id="modal-explain" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header text-center">
|
|
<h4 class="modal-title" id="exampleModalLongTitle">Explaining</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="create-explain" enctype="multipart/form-data">
|
|
<div class="modal-body">
|
|
<p>You must fill this form to open next level</p>
|
|
<div class="form-group">
|
|
<label>Explanation <span style="color:red">*</span></label>
|
|
<textarea required class="form-control" name="explanation" style="height:36.5%" placeholder="Write your explanation"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="submit-explain" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
@section('scripts')
|
|
<script>
|
|
$('#create-explain').submit(function(e){
|
|
e.preventDefault();
|
|
var level = $('#level_id').val();
|
|
var course = $('#course_id').val();
|
|
var first_content = $('#first_content').val();
|
|
var level_down = level - 1;
|
|
var url = "{{ route('student_course.explain', ":level_down") }}"
|
|
url = url.replace(':level_down', level_down);
|
|
|
|
var redirect = "{{ route('student_course.my_course.detail.content', [":course_id", ":level", ":first_content"]) }}";
|
|
redirect = redirect.replace(':course_id', course);
|
|
redirect = redirect.replace(':level', level);
|
|
redirect = redirect.replace(":first_content", first_content);
|
|
|
|
console.log(level);
|
|
debugger;
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: url,
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
data: new FormData(this),
|
|
dataType: 'JSON',
|
|
contentType: false,
|
|
cache: false,
|
|
processData: false,
|
|
error: function(err) {
|
|
$("#submit-explain").show();
|
|
Swal.fire(
|
|
'Gagal',
|
|
err.responseJSON.error,
|
|
'error'
|
|
);
|
|
},
|
|
success: function(response) {
|
|
if (response.status == 200 || response.status == 201) {
|
|
Swal.fire(
|
|
'Success!',
|
|
'Your answer submit successfully, go to the next level!',
|
|
'success'
|
|
);
|
|
window.location.href = redirect;
|
|
} else {
|
|
Swal.fire(
|
|
'Error!',
|
|
'Error input data!',
|
|
'error'
|
|
);
|
|
}
|
|
},
|
|
})
|
|
});
|
|
</script>
|
|
@endsection
|