182 lines
7.6 KiB
PHP
182 lines
7.6 KiB
PHP
@extends('layouts.front')
|
|
|
|
@section('content')
|
|
<style>
|
|
|
|
.ql-container.ql-snow {
|
|
border: none;
|
|
}
|
|
.ql-editor {
|
|
box-sizing: border-box;
|
|
line-height: 1.42;
|
|
height: 100%;
|
|
outline: none;
|
|
overflow-y: auto;
|
|
padding: 0px;
|
|
tab-size: 4;
|
|
-moz-tab-size: 4;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.ql-snow .ql-editor pre.ql-syntax {
|
|
background-color: #f3f3f3;
|
|
color: #1f1f1f;
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
<section class="section mt-5" id="interactive">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h1>{{ $course->course_name }}</h1>
|
|
<div class="mt-1">
|
|
<span class="badge text-bg-primary badge-primary rounded-pill">{{ $course->lessons->count() }} Lessons</span>
|
|
<span class="badge text-bg-primary badge-secondary rounded-pill">{{ $course->student_courses->count() }} Students</span>
|
|
</div>
|
|
<p class="mt-3">{{ $course->description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-1">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3>Achievement Badge</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="sortable-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Badge Name</th>
|
|
<th>Badge Point Min</th>
|
|
<th>Badge Point Max</th>
|
|
</tr>
|
|
</thead>
|
|
</tbody>
|
|
@foreach($current_badge as $badgeSetting)
|
|
<tr>
|
|
<td>{{ $badgeSetting->name }} <img src="/image_upload/{{ $badgeSetting->file }}" width="50px"></td>
|
|
<td>{{ $badgeSetting->min }}</td>
|
|
<td>{{ $badgeSetting->max }}</td>
|
|
@endforeach
|
|
</tr>
|
|
</tbody>
|
|
</div>
|
|
</table>
|
|
<i>Note: Achievement Badge di peroleh dari point yang diperoleh</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-1">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3>Leader Board</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="sortable-table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Rank
|
|
</th>
|
|
<th>Name</th>
|
|
<th>Point</th>
|
|
<th>Progress</th>
|
|
<th>Badge</th>
|
|
</tr>
|
|
</thead>
|
|
</tbody>
|
|
|
|
<?php $no = 1; ?>
|
|
@foreach($leader_board as $leader)
|
|
<tr>
|
|
<td> <?= $no ?> </td>
|
|
<td> {{ ucfirst($leader['user']) }} </td>
|
|
<td> {{ $leader['total_score'] }}
|
|
<img class="" src="{{ asset('img/pngwing.com.png') }}" width="23px" alt=""/>
|
|
</td>
|
|
<td>
|
|
<div class="progress mt-2">
|
|
<div class="progress-bar" role="progressbar" style="width: {{ $leader['percentage'] }}%;"
|
|
aria-valuenow="{{ $leader['percentage'] }}" aria-valuemin="0" aria-valuemax="100">{{ $leader['percentage'] }}%</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{ $leader['badge_name'] }}
|
|
<img src="/image_upload/{{ $leader['file'] }}" width="50px">
|
|
</td>
|
|
<?php $no += 1; ?>
|
|
@endforeach
|
|
</tr>
|
|
</tbody>
|
|
</div>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Lesson Content
|
|
</h5>
|
|
<div class="accordion" id="accordionExample">
|
|
@foreach($course->lessons as $index=>$lesson)
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" data-toggle="collapse"
|
|
data-target="#item{{$index}}"
|
|
aria-expanded="{{ $index==0 ? "true" : "false" }}" aria-controls="collapseOne">
|
|
{{ $lesson->title }}
|
|
</div>
|
|
<div id="item{{$index}}"
|
|
class="accordion-collapse collapse {{ $index == 0 ? "show": "" }}"
|
|
aria-labelledby="headingOne" data-parent="#accordionExample">
|
|
<div class="accordion-body">
|
|
<div class="list-group row list-group-flush">
|
|
@foreach($lesson->contents as $content)
|
|
<li
|
|
class="list-group-item list-group-item-action}}"
|
|
>
|
|
{{ $content->title }}</li>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@section("scripts")
|
|
<script type="text/javascript">
|
|
hljs.configure({ // optionally configure hljs
|
|
languages: ['javascript', 'ruby', 'python', 'java']
|
|
});
|
|
|
|
var quill = new Quill('#res', {
|
|
modules: {
|
|
syntax: true,
|
|
toolbar: false
|
|
},
|
|
theme: 'snow',
|
|
onChange:(value) => {
|
|
console.log(value)
|
|
},
|
|
readOnly:true
|
|
});
|
|
|
|
</script>
|
|
@endsection
|