263 lines
12 KiB
PHP
263 lines
12 KiB
PHP
@extends('main.layouts.app')
|
|
|
|
@section('title', 'Kuesioner Hasil')
|
|
|
|
@section('content')
|
|
<style>
|
|
.learning-style-card {
|
|
transition: box-shadow 0.2s;
|
|
border-radius: 18px;
|
|
border: none;
|
|
box-shadow: 0 2px 16px rgba(99,102,241,0.07);
|
|
background: #fff;
|
|
}
|
|
.learning-style-card:hover {
|
|
box-shadow: 0 6px 32px rgba(99,102,241,0.13);
|
|
}
|
|
.learning-style-badge {
|
|
font-size: 15px;
|
|
border-radius: 12px;
|
|
background: #f0f4ff;
|
|
color: #6366f1;
|
|
padding: 6px 18px;
|
|
font-weight: 600;
|
|
transition: background 0.2s;
|
|
}
|
|
.learning-style-badge:hover {
|
|
background: #e0e7ff;
|
|
}
|
|
.main-title {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
color: #6366f1;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
.score-label {
|
|
font-size: 1.1rem;
|
|
color: #6366f1;
|
|
font-weight: 600;
|
|
}
|
|
.score-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #22223b;
|
|
}
|
|
.divider-vertical {
|
|
border-left: 1.5px solid #e0e7ff;
|
|
height: 60px;
|
|
margin: 0 18px;
|
|
}
|
|
.card-gradient {
|
|
background: linear-gradient(90deg, #f0f4ff 0%, #f8f9fa 100%);
|
|
border-radius: 18px;
|
|
}
|
|
.btn-gradient-primary {
|
|
background: linear-gradient(90deg, #6366f1 0%, #00bcd4 100%);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 30px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 16px rgba(99,102,241,0.12);
|
|
transition: background 0.3s, box-shadow 0.2s;
|
|
}
|
|
.btn-gradient-primary:hover {
|
|
background: linear-gradient(90deg, #4f46e5 0%, #0097a7 100%);
|
|
box-shadow: 0 8px 24px rgba(99,102,241,0.18);
|
|
}
|
|
.history-table th, .history-table td {
|
|
vertical-align: middle !important;
|
|
}
|
|
.history-table th {
|
|
background: #f0f4ff;
|
|
color: #6366f1;
|
|
font-weight: 700;
|
|
}
|
|
.history-table tr {
|
|
transition: background 0.2s;
|
|
}
|
|
.history-table tr:hover {
|
|
background: #f8fafc !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-lg-10">
|
|
<div class="text-center">
|
|
<h1 class="main-title">Hasil Kuesioner & Pre-test</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Learning Style Scores -->
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-lg-10">
|
|
<div class="card learning-style-card p-4">
|
|
<div class="row text-center">
|
|
<div class="col-6 col-md-3 mb-3 mb-md-0">
|
|
<img src="{{ asset('frontend/assets/img/icon/Visual.png') }}" alt="Visual Icon" style="width: 32px; height: 32px;">
|
|
<div class="score-label mt-2">Visual</div>
|
|
<div class="score-value">{{ $kuesionerls->visual ?? '0' }}</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3 mb-md-0">
|
|
<img src="{{ asset('frontend/assets/img/icon/video.png') }}" alt="Auditory Icon" style="width: 32px; height: 32px;">
|
|
<div class="score-label mt-2">Auditory</div>
|
|
<div class="score-value">{{ $kuesionerls->auditory ?? '0' }}</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<img src="{{ asset('frontend/assets/img/icon/read.png') }}" alt="Read/Write Icon" style="width: 32px; height: 32px;">
|
|
<div class="score-label mt-2">Read/Write</div>
|
|
<div class="score-value">{{ $kuesionerls->readwrite ?? '0' }}</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<img src="{{ asset('frontend/assets/img/icon/Kinestetik.png') }}" alt="Kinesthetic Icon" style="width: 32px; height: 32px;">
|
|
<div class="score-label mt-2">Kinesthetic</div>
|
|
<div class="score-value">{{ $kuesionerls->kinesthetic ?? '0' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metacognitive Info -->
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-lg-10">
|
|
<div class="card learning-style-card p-4">
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 48px; height: 48px;">
|
|
<i class="bx bx-brain text-white" style="font-size: 26px;"></i>
|
|
</div>
|
|
<div class="score-label">KM</div>
|
|
<div class="score-value" style="color: #6366f1;">{{ $kuesionermeta->km_class ?? 'unknown' }}</div>
|
|
<div class="text-muted" style="font-size: 14px;">Knowledge of Metacognition</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="rounded-circle bg-info d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 48px; height: 48px;">
|
|
<i class="bx bx-cog text-white" style="font-size: 26px;"></i>
|
|
</div>
|
|
<div class="score-label">RM</div>
|
|
<div class="score-value" style="color: #00bcd4;">{{ $kuesionermeta->rm_class ?? 'unknown' }}</div>
|
|
<div class="text-muted" style="font-size: 14px;">Regulation of Metacognition</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Result -->
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-lg-10">
|
|
<div class="card card-gradient shadow-lg border-0 py-5 px-3">
|
|
<div class="text-center">
|
|
<p class="mb-3 fw-semibold" style="font-size: 20px; color: #6366f1;">
|
|
<i class="bx bx-bulb" style="font-size: 24px; vertical-align: middle;"></i>
|
|
Berdasarkan hasil kuesioner, gaya belajar kamu adalah:
|
|
</p>
|
|
<h2 class="fw-bold mb-2" style="font-size: 40px; color: #6366f1; letter-spacing: 1px;">
|
|
{{ $kuesionerls->result ?? 'Belum Ada Hasil' }}
|
|
</h2>
|
|
@if($kuesionerls && $kuesionerls->result)
|
|
<div class="d-flex justify-content-center align-items-center gap-3 mt-4">
|
|
<a href="{{ route('materi-' . strtolower($kuesionerls->result)) }}"
|
|
class="btn btn-gradient-primary px-5 py-3">
|
|
<i class="bx bx-play-circle" style="font-size: 22px; vertical-align: middle;"></i>
|
|
Mulai Belajar!
|
|
</a>
|
|
</div>
|
|
<div class="mt-3">
|
|
<span class="learning-style-badge">
|
|
Gaya belajar ini akan membantumu memahami materi dengan lebih efektif!
|
|
</span>
|
|
</div>
|
|
@else
|
|
<div class="alert alert-warning mt-4" style="border-radius: 12px;">
|
|
Belum ada hasil kuesioner. Silakan isi kuesioner terlebih dahulu.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Table -->
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-lg-10">
|
|
<div class="card shadow border-0" style="border-radius: 18px;">
|
|
<div class="card-header bg-white border-0 d-flex align-items-center" style="border-radius: 18px 18px 0 0;">
|
|
<h5 class="card-title text-primary mb-0" style="font-size: 20px;">
|
|
<i class="bx bx-list-check" style="font-size: 22px; vertical-align: middle;"></i>
|
|
Riwayat Pengisian Kuesioner
|
|
</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="table-responsive px-2 pb-3">
|
|
<table class="table align-middle table-hover mb-0 history-table" style="border-radius: 12px; overflow: hidden;">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">Hasil MAI</th>
|
|
<th class="text-center">Hasil LS</th>
|
|
<th class="text-center">Diisi Tanggal</th>
|
|
<th class="text-center">Terakhir Diedit</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if($kuesionerls)
|
|
<tr>
|
|
<td class="text-center">
|
|
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2" style="border-radius: 8px;">
|
|
KM {{ $kuesionermeta->km_class ?? 'unknown' }}, RM {{ $kuesionermeta->rm_class ?? 'unknown' }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-info bg-opacity-10 text-info px-3 py-2" style="border-radius: 8px;">
|
|
{{ $kuesionerls->result }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<i class="bx bx-calendar"></i>
|
|
{{ $kuesionerls->created_at->format('d M Y') }}
|
|
</td>
|
|
<td class="text-center">
|
|
<i class="bx bx-history"></i>
|
|
{{ $kuesionerls->updated_at->format('d M Y') }}
|
|
</td>
|
|
<td class="text-center">
|
|
<a href="{{ route('kuesioner-ls') }}"
|
|
class="btn btn-outline-primary btn-sm px-3 py-1"
|
|
style="border-radius: 20px; font-size: 14px;">
|
|
<i class="bx bx-edit"></i> Ubah
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@else
|
|
<tr>
|
|
<td colspan="5" class="text-center text-muted" style="font-size: 15px;">
|
|
<i class="bx bx-info-circle"></i> Belum ada data kuesioner gaya belajar.
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section('helpInstructions')
|
|
[
|
|
"<h4>Selamat datang di Hasil Kuesioner!</h4><p>Aku akan memberitahu kamu informasi yang ada pada halaman ini.</p>",
|
|
"<p>Hasil Kuesioner merupakan halaman untuk menampilkan seluruh data dari hasil kuesioner yang telah kamu isi.</p>",
|
|
"<p>Data Visual, Auditory, Read/Write dan Kinesthetic adalah skor gaya belajar yang kamu perolah dari hasil pengisian kuesioner gaya belajar.</p>",
|
|
"<p>Jika skor pada salah satu gaya belajar > 7, maka gaya belajar tersebut adalah gaya belajar kamu!</p>",
|
|
"<p>Jika terdapat lebih dari 2 gaya belajar dengan skor > 7, maka gaya belajar kamu termasuk 'Multimodal'. Selain itu juga dikategorikan sebagai 'Multimodal'</p>",
|
|
"<p>Hasil gaya belajar kamu akan ditampilkan dibawah dengan tombol 'Mulai Belajar!' yang dimana jika di klik akan mengarah ke halama materi pembelajaran sesuai dengan gaya belajar kamu.</p>",
|
|
"<p>Hasil Metakognitif kamu juga ditampikan dengan penggolongan tingkat KM dan RM kamu dari hasil kuesioner metakognitif.</p>"
|
|
]
|
|
@endsection
|
|
@endsection |