# ✅ TUGAS SELESAI - Loading 30 Detik Countdown Setelah Submit Tryout

**Tanggal:** 21 Oktober 2026  
**Status:** SELESAI ✓

---

## 📋 Tugas dari prompt.txt

> "saat setelah mengerjakan, peserta akan klik selesai & kirim, nah saya mau ada loading berupa 30 detik hitungan mundur di tengah dan ada tulisan sedang mengalihkan ke pembahasan, silahkan tunggu"

---

## 🔧 Solusi yang Diterapkan

### **Perubahan 1: Fungsi `showWaitingOverlay()` di `layouts/exam.blade.php`**

**SEBELUM:**
- Loading dengan progress bar animasi smooth
- Durasi default: 2.8 detik (2800ms)
- Menampilkan persentase: 0% → 100%
- Hint text berubah-ubah: "Memproses jawaban..." → "Menghitung skor..." → "Menyiapkan pembahasan..."

**SESUDAH:**
- Loading dengan **countdown 30 detik**
- Durasi: **30 detik (30000ms)**
- Menampilkan **countdown**: 30s → 29s → 28s → ... → 0s
- Hint text **tetap**: "Sedang mengalihkan ke pembahasan, silahkan tunggu..."

---

## 📝 Detail Perubahan per File

### 1. **resources/views/layouts/exam.blade.php** (Baris 194-251)

#### Fungsi `showWaitingOverlay()` - Logic Baru

```javascript
function showWaitingOverlay(redirectUrl, duration) {
    duration = duration || 30000; // Default 30 detik
    const overlay  = document.getElementById('waitingResultOverlay');
    const bar      = document.getElementById('waitingProgressBar');
    const pct      = document.getElementById('waitingPercentText');
    const hint     = document.getElementById('waitingHintText');

    if (!overlay) { window.location.href = redirectUrl; return; }

    overlay.style.display = 'flex';

    let countdown = Math.floor(duration / 1000); // 30 detik
    let progress = 0;

    // Update countdown setiap detik
    const countdownInterval = setInterval(function () {
        countdown--;
        if (countdown < 0) countdown = 0;
        
        // Update progress bar (0-100% dalam 30 detik)
        progress = ((30 - countdown) / 30) * 100;
        bar.style.width = progress + '%';
        pct.textContent = countdown + 's';
        
        // Update hint text
        hint.textContent = 'Sedang mengalihkan ke pembahasan, silahkan tunggu...';
        
        if (countdown <= 0) {
            clearInterval(countdownInterval);
        }
    }, 1000);

    setTimeout(function () {
        clearInterval(countdownInterval);
        bar.style.width     = '100%';
        pct.textContent     = '0s';
        hint.textContent    = 'Membuka pembahasan...';
        setTimeout(function () {
            window.location.href = redirectUrl;
        }, 400);
    }, duration);
}
```

**Perubahan Kunci:**
1. ✅ **Countdown Timer:** `countdown--` setiap 1 detik
2. ✅ **Display Format:** Dari "0%" menjadi "30s", "29s", dst
3. ✅ **Progress Bar:** Linear 0-100% dalam 30 detik
4. ✅ **Pesan Tetap:** "Sedang mengalihkan ke pembahasan, silahkan tunggu..."

---

### 2. **resources/views/tryout/index.blade.php** (2 tempat)

#### A. Baris 287-303 (Waktu Habis Otomatis)
**SEBELUM:**
```javascript
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 800);
```

**SESUDAH:**
```javascript
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 30000);
```

---

#### B. Baris 417-430 (User Klik "Selesai & Kirim")
**SEBELUM:**
```javascript
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 800);
```

**SESUDAH:**
```javascript
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 30000);
```

---

## 🎯 Hasil Setelah Perubahan

### **Flow User:**

1. **User mengerjakan tryout**
2. **User klik "Selesai & Kirim"** (atau waktu habis)
3. **Muncul overlay di tengah layar:**
   - 🎨 Background: Semi-transparent dengan blur
   - 🔵 Icon: Animasi spinning circle
   - 📊 Progress Bar: Bertambah dari 0% → 100%
   - ⏱️ **Countdown:** "30s" → "29s" → ... → "0s"
   - 💬 **Pesan:** "Sedang mengalihkan ke pembahasan, silahkan tunggu..."

4. **Setelah 30 detik:**
   - Progress bar: 100%
   - Countdown: "0s"
   - Pesan berubah: "Membuka pembahasan..."
   - **Redirect** ke halaman hasil tryout

---

## 📐 Tampilan Overlay

```
┌────────────────────────────────────┐
│                                    │
│          ⟳ (spinning icon)         │
│                                    │
│   Menunggu Hasil & Pembahasan     │
│  Jawaban kamu sedang diproses &   │
│     hasil sedang disiapkan...     │
│                                    │
│  ▓▓▓▓▓▓▓▓░░░░░░░░░░░  (progress)  │
│                                    │
│  Sedang mengalihkan ke pembahasan,│
│        silahkan tunggu...         │
│                                    │
│              28s                   │
│                                    │
└────────────────────────────────────┘
```

**Keterangan:**
- **28s** = Countdown mundur dari 30 detik
- **Progress bar** = Bertambah seiring countdown berkurang
- **Pesan tetap** = Tidak berubah-ubah seperti sebelumnya

---

## 🧪 Testing

### Test Case 1: User Klik "Selesai & Kirim"
1. Login sebagai user
2. Mulai tryout
3. Jawab beberapa soal
4. Klik tombol **"Selesai & Kirim"**
5. **Expected:** 
   - Popup konfirmasi muncul
   - Setelah klik OK → Overlay muncul
   - Countdown: 30s → 29s → ... → 0s
   - Pesan: "Sedang mengalihkan ke pembahasan, silahkan tunggu..."
   - Setelah 30 detik → redirect ke halaman hasil

### Test Case 2: Waktu Habis Otomatis
1. Login sebagai user
2. Mulai tryout
3. Tunggu sampai timer habis (atau set durasi pendek untuk testing)
4. **Expected:**
   - Otomatis submit
   - Overlay muncul dengan countdown 30 detik
   - Redirect ke halaman hasil setelah 30 detik

---

## 📁 File yang Dimodifikasi (2 files)

1. ✅ `resources/views/layouts/exam.blade.php` (Fungsi showWaitingOverlay)
2. ✅ `resources/views/tryout/index.blade.php` (2 tempat panggilan fungsi)

---

## ⚙️ Technical Details

### Mekanisme Countdown
```javascript
let countdown = 30; // 30 detik

const countdownInterval = setInterval(function () {
    countdown--;
    progress = ((30 - countdown) / 30) * 100;
    bar.style.width = progress + '%';
    pct.textContent = countdown + 's';
    
    if (countdown <= 0) {
        clearInterval(countdownInterval);
    }
}, 1000); // Update setiap 1 detik
```

### Sinkronisasi Progress Bar
- Countdown: **30s → 0s** (berkurang)
- Progress: **0% → 100%** (bertambah)
- Formula: `((30 - countdown) / 30) * 100`
  - countdown = 30 → progress = 0%
  - countdown = 15 → progress = 50%
  - countdown = 0 → progress = 100%

---

## 📌 Catatan Tambahan

### Kenapa 30 Detik?
- ✅ **Cukup lama** untuk memberi feedback ke user
- ✅ **Tidak terlalu lama** sehingga user tidak frustasi
- ✅ **Memberi kesan** sistem sedang memproses dengan serius

### Apakah Bisa Diubah?
Ya, durasi bisa diubah dengan mengubah parameter di panggilan fungsi:

```javascript
// Ubah menjadi 15 detik
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 15000);

// Ubah menjadi 60 detik
showWaitingOverlay(`/tryout/hasil/${tryoutId}`, 60000);
```

**Lokasi perubahan:** `resources/views/tryout/index.blade.php` (2 tempat)

---

## ✅ Status

**SELESAI DAN SIAP DIGUNAKAN!**

Sekarang setelah user klik "Selesai & Kirim", akan muncul:
- ⏱️ **Countdown 30 detik** (bukan progress bar biasa)
- 💬 **Pesan tetap:** "Sedang mengalihkan ke pembahasan, silahkan tunggu..."
- 📊 **Progress bar** yang sinkron dengan countdown

---

**Dibuat oleh:** Kiro AI  
**Tanggal:** 21 Oktober 2026, 15:27 WIB