Tes TOEFL Online

Gambaran Umum

Proyek ini adalah simulasi tes TOEFL berbasis web yang memungkinkan pengguna untuk berlatih dan menilai kemampuan bahasa Inggris mereka melalui platform online bernama mytoefl. Aplikasi ini mensimulasikan lingkungan tes TOEFL yang sesungguhnya.

Fitur

1. Dashboard

• Menampilkan data profil pengguna
• Menampilkan riwayat tes dan rekaman skor
• Fungsi untuk mengedit profil

2. Sistem Tes

• Struktur Tes:
  • Bagian Listening
  • Bagian Structure
  • Bagian Reading
• Bank soal komprehensif (minimal 100 soal dari semua bagian)
• Navigasi yang intuitif antar soal (tombol next/previous)
• Timer otomatis untuk setiap bagian

3. Sistem Penilaian

• Pencatatan dan penyimpanan jawaban
• Tampilan skor sementara secara real-time
• Penghitungan skor TOEFL akhir berdasarkan metode konversi standar TOEFL

4. Fitur Tambahan (Opsional)

• Mode Latihan vs Mode Ujian
• Pembahasan soal setelah tes
• Sistem peringkat atau leaderboard
• Pembuatan sertifikat PDF otomatis

Halaman

1. Beranda - Pengenalan dan login/registrasi
2. Dashboard - Profil pengguna dan riwayat tes
3. Halaman Tes - Lingkungan tes TOEFL

Teknologi

• Frontend: HTML, CSS, JavaScript (89.5%)
• Backend: Node.js
• Database: JSON file-based

Sistem Tes TOEFL Online - Ikhtisar Arsitektur

Arsitektur Proyek

Berikut adalah diagram arsitektur untuk sistem tes TOEFL online kami:

graph TD
    subgraph "Frontend"
        A[Antarmuka Pengguna] --> |HTML/CSS| B[Browser]
        B --> |JavaScript| C[Logika Frontend]
        C --> |Panggilan API| D[Gateway API]
    end
    
    subgraph "Backend"
        D --> E[Layanan Otentikasi]
        D --> F[Layanan Manajemen Tes]
        D --> G[Layanan Manajemen Pengguna]
        D --> H[Layanan Penilaian]
        
        E --> J[(JSON Database)]
        F --> J
        G --> J
        H --> J
        
        F --> K[Repositori Tes]
    end
    
    subgraph "Komponen Tes"
        K --> L[Bagian Reading]
        K --> M[Bagian Listening]
        K --> O[Bagian Writing]
    end
    
    subgraph "Analitik"
        J --> P[Layanan Pelaporan]
        P --> Q[Analitik Skor]
        P --> R[Metrik Kinerja]
    end
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style J fill:#bbf,stroke:#333,stroke-width:2px
    style K fill:#bfb,stroke:#333,stroke-width:2px
    style P fill:#fbb,stroke:#333,stroke-width:2px

Loading

Komponen Arsitektur

Frontend

• Antarmuka Pengguna: Antarmuka web yang digunakan peserta tes
• Browser: Merender HTML/CSS dan menjalankan JavaScript
• Logika Frontend: Kode JavaScript yang menangani fungsionalitas sisi klien

Backend

• Gateway API: Titik masuk untuk semua permintaan frontend
• Layanan Otentikasi: Menangani login pengguna, pendaftaran, dan manajemen sesi
• Layanan Manajemen Tes: Mengelola pembuatan tes, pengiriman, dan kontrol sesi
• Layanan Manajemen Pengguna: Menangani profil pengguna dan riwayat tes
• Layanan Penilaian: Memproses dan menghitung skor tes sesuai standar TOEFL ITP ETS
• Database: Menyimpan data pengguna, konten tes, dan hasil dalam file JSON

Komponen Tes

• Repositori Tes: Kumpulan semua materi tes
• Komponen Bagian: Bagian-bagian tes TOEFL individual (Reading, Listening, Speaking, Writing)

Analitik

• Layanan Pelaporan: Menghasilkan laporan dari data tes
• Analitik Skor: Menganalisis distribusi dan tren skor
• Metrik Kinerja: Mengukur kinerja sistem dan keterlibatan pengguna

Aliran Data

1. Pengguna mengakses aplikasi melalui browser web
2. Layanan otentikasi memvalidasi kredensial pengguna
3. Layanan manajemen tes menyediakan konten tes yang sesuai
4. Respons pengguna dikumpulkan dan dikirim ke layanan penilaian
5. Hasil disimpan dalam file JSON dan tersedia melalui laporan

Alur Penggunaan

sequenceDiagram
    actor Pengguna
    participant UI as Antarmuka Pengguna
    participant Auth as Layanan Otentikasi
    participant Test as Layanan Manajemen Tes
    participant Score as Layanan Penilaian
    participant DB as JSON Database

    Pengguna->>UI: Akses Sistem
    UI->>Auth: Permintaan Login
    Auth->>DB: Validasi Kredensial
    DB-->>Auth: Konfirmasi Akun
    Auth-->>UI: Sesi Diotentikasi
    
    Pengguna->>UI: Mulai Tes TOEFL
    UI->>Test: Permintaan Konten Tes
    Test->>DB: Ambil Soal Tes
    DB-->>Test: Soal Tes
    Test-->>UI: Tampilkan Bagian Tes
    
    Pengguna->>UI: Kirim Jawaban
    UI->>Score: Proses Jawaban
    Score->>DB: Simpan Hasil
    Score-->>UI: Tampilkan Skor
    
    Pengguna->>UI: Lihat Hasil
    UI->>DB: Permintaan Riwayat & Analisis
    DB-->>UI: Data Hasil & Analisis

Loading

Kontributor

Kelompok 1 Dasar Pemrograman Web kelas 2D (UTM)

1. https://github.com/hendprw as Project Manager [Fronted Developer]
2. https://github.com/Renoslendra as Bug Hunter [Dokumentasi Kode]
3. https://github.com/hexfjr as Logic Dev [Backend Developer]

Lisensi

MIT License