muhammad_thoriq/mutu-rsab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
JokoPrasetio 2025-12-04 09:09:44 +07:00
parent 2205bc6a27
commit ec7a1af1d0
1 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
resources/views/soal/index.blade.php
View File

@ -86,82 +86,114 @@
.dual-form-wrapper .form-label { .dual-form-wrapper .form-label {
font-weight: 600; font-weight: 600;
} }
/* Skala di atas slider */ /* Skala di atas slider */
.range-scale { .range-scale {
position: relative; position: relative;
height: 40px; height: 45px;
margin-bottom: 8px; margin-top: 0px;
border-top: 2px solid #495057;
padding-top: 2px;
}
.range-track-colored {
position: relative;
margin-top: 0px;
} }
.range-track-colored .range-colored { .range-track-colored .range-colored {
width: 100%; width: 100%;
-webkit-appearance: none; -webkit-appearance: none;
background: #ffffff; /* default putih, nanti diwarnai JS */ background: #ffffff;
height: 8px; height: 10px;
border-radius: 4px; border-radius: 5px;
border: 1px solid #dee2e6;
} }
/* hilangkan track default browser */ /* hilangkan track default browser */
.range-colored::-webkit-slider-runnable-track { .range-colored::-webkit-slider-runnable-track {
background: transparent; background: transparent;
height: 8px; height: 10px;
} }
.range-colored::-moz-range-track { .range-colored::-moz-range-track {
background: transparent; background: transparent;
height: 8px; height: 10px;
} }
/* thumb */ /* thumb */
.range-colored::-webkit-slider-thumb { .range-colored::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 14px; width: 18px;
height: 14px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: #000; background: #0d6efd;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
z-index: 2; z-index: 2;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} }
.range-colored::-moz-range-thumb { .range-colored::-moz-range-thumb {
width: 14px; width: 18px;
height: 14px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: #000; background: #0d6efd;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
z-index: 2; z-index: 2;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} }
.range-scale-item { .range-scale-item {
position: absolute; position: absolute;
bottom: 0; top: 0;
transform: translateX(-50%); transform: translateX(-50%);
text-align: center; text-align: center;
font-size: 10px; font-size: 11px;
color: #555; color: #495057;
display: flex;
flex-direction: column;
align-items: center;
}
.range-scale-label {
display: block;
margin-bottom: 4px;
font-weight: 500;
} }
.range-scale-mark { .range-scale-mark {
display: block; display: block;
width: 1px; width: 1px;
height: 8px; height: 8px;
margin-top:-10px; background-color: #495057;
background-color: #555;
} }
/* Tick besar tiap 10 */ /* Tick besar untuk angka 1 dan kelipatan 10 */
.range-scale-item-major .range-scale-mark { .range-scale-item-major .range-scale-mark {
height: 12px; height: 12px;
background-color: #000; width: 2px;
background-color: #212529;
}
.range-scale-item-major .range-scale-label {
font-weight: 600; font-weight: 600;
color: #212529;
font-size: 12px;
} }
/* Tick khusus angka 1 biar lebih pendek (opsional) */ /* Tick khusus angka 1 */
.range-scale-item-one .range-scale-mark { .range-scale-item-one .range-scale-mark {
height: 10px; height: 12px;
background-color: #212529;
width: 2px;
} }
.range-scale-item-one .range-scale-label {
color: #212529;
font-weight: 600;
font-size: 12px;
}
</style> </style>
@endsection @endsection
@ -430,28 +462,6 @@
@elseif ($type === 'option_with_range') @elseif ($type === 'option_with_range')
@if ($rangeMin !== null && $rangeMax !== null) @if ($rangeMin !== null && $rangeMax !== null)
<div class="range-slider-wrapper" data-range-wrapper="{{ $detail->id }}"> <div class="range-slider-wrapper" data-range-wrapper="{{ $detail->id }}">
<div class="range-scale" aria-hidden="true">
@foreach ($rangeTicks as $tick)
@php
$value = (int) $tick['value'];
$label = $tick['label']; // bisa null
$isMajor = ($value === 1) || ($value % 10 === 0);
$isOneTick = ($value === 1);
@endphp
<div class="range-scale-item
{{ $isMajor ? 'range-scale-item-major' : '' }}
{{ $isOneTick ? 'range-scale-item-one' : '' }}"
style="left: {{ $tick['position'] }}%;">
<span class="range-scale-mark"></span>
@if(!is_null($label))
<span class="range-scale-label">{{ $label }}</span>
@endif
</div>
@endforeach
</div>
{{-- Track warna + slider --}} {{-- Track warna + slider --}}
<div class="range-track-colored"> <div class="range-track-colored">
<input type="range" <input type="range"
@ -468,7 +478,27 @@
@if ($isConsentQuestion) data-consent-input="1" required @endif @if ($isConsentQuestion) data-consent-input="1" required @endif
@if($formLocked) disabled @endif> @if($formLocked) disabled @endif>
</div> </div>
<div class="range-scale" aria-hidden="true">
@foreach ($rangeTicks as $tick)
@php
$value = (int) $tick['value'];
$label = $tick['label']; // bisa null
$isMajor = ($value === 1) || ($value % 10 === 0);
$isOneTick = ($value === 1);
@endphp
<div class="range-scale-item
{{ $isMajor ? 'range-scale-item-major' : '' }}
{{ $isOneTick ? 'range-scale-item-one' : '' }}"
style="left: {{ $tick['position'] }}%;">
<span class="range-scale-mark"></span>
@if(!is_null($label))
<span class="range-scale-label">{{ $label }}</span>
@endif
</div>
@endforeach
</div>
<div class="text-center mt-2 fw-semibold"> <div class="text-center mt-2 fw-semibold">
Nilai saat ini: Nilai saat ini:
<span data-range-output="{{ $detail->id }}">{{ $rangeDefaultDisplay ?? $rangeMinDisplay }}</span> <span data-range-output="{{ $detail->id }}">{{ $rangeDefaultDisplay ?? $rangeMinDisplay }}</span>