Asesment talent

 

https://smadt.net/linksite/talent6.html

https://docs.google.com/spreadsheets/d/1-kkhD-bz7fuL1C-_BWp2LWS64VdrJ_hawJGDHEosO38/edit?gid=0#gid=0

https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec

function doPost(e) {

  try {

    const data = JSON.parse(e.postData.contents);

    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');

    sheet.appendRow([

      new Date(),

      data.nama_lengkap || '',

      data.kelas || '',

      data.minat_utama || '',

      data.hobi || '',

      data.preferensi_kerja || '',

      data.cara_pemecahan_masalah || '',

      data.skor_eq || '',

      data.skor_sq || '',

      data.catatan_tambahan || ''

    ]);

    return ContentService

      .createTextOutput(JSON.stringify({ status: 'success', message: 'Data tersimpan' }))

      .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {

    return ContentService

      .createTextOutput(JSON.stringify({ status: 'error', message: err.message }))

      .setMimeType(ContentService.MimeType.JSON);

  }

}

“Buatkan halaman web asesmen siswa untuk program ESQ Talent DNA dengan gaya profesional, bersih, dan responsif menggunakan Bootstrap 5 CDN. Halaman ini harus memiliki struktur lengkap yang terdiri atas beberapa bagian utama:

1. Header responsif di bagian paling atas halaman yang memuat nama situs “ESQ Talent DNA Assessment Portal” serta menu navigasi horizontal berisi dua tautan utama, yaitu Beranda dan Asesmen. Gunakan navbar Bootstrap dengan warna latar belakang biru lembut (bg-primary-subtle) dan teks berwarna kontras; pastikan menu berubah menjadi ikon hamburger pada tampilan mobile, sehingga tetap responsif di berbagai perangkat.

2. Hero Section ditempatkan tepat di bawah header, menampilkan latar belakang gambar lembut bertema pengembangan diri atau kepribadian, dengan teks utama besar berisi tagline seperti “Temukan Potensi Terbaikmu dengan ESQ Talent DNA” serta subjudul yang menjelaskan bahwa asesmen ini membantu siswa memahami kekuatan, karakter, dan bakat alami mereka; tambahkan tombol CTA bertuliskan “Mulai Asesmen Sekarang” yang menggulir otomatis ke bagian form asesmen di bawahnya.

3. Bagian Asesmen yang berisi form HTML dengan Bootstrap form components; form harus mencakup kolom input berikut:

   • Nama lengkap

   • NISN atau ID siswa

   • Jenis kelamin (dropdown: Laki-laki / Perempuan)

   • Kelas atau program studi

   • Alamat email

   • Pilihan minat atau kategori bakat (checkbox atau select multiple)

   • Jawaban singkat tentang cita-cita atau motivasi hidup

   • Tombol kirim dengan teks “Kirim Asesmen”

   Pastikan form tersebut dihubungkan dengan Google Apps Script endpoint berikut:
   https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec
   dengan metode POST, menggunakan fungsi JavaScript fetch() untuk mengirim data ke spreadsheet, serta tambahkan notifikasi alert yang menampilkan pesan sukses atau gagal pengiriman data.

4. Footer diletakkan di bagian bawah halaman dengan warna lembut yang senada dengan header; isi footer dengan teks seperti “© 2025 ESQ Talent DNA Program — Powered by Google Apps Script Integration” serta tautan kecil menuju dokumentasi atau kontak pengembang.

Gunakan layout Bootstrap berbasis container dan row agar setiap elemen sejajar dengan baik di berbagai ukuran layar; pastikan seluruh teks menggunakan font modern seperti Poppins atau Roboto, dengan ukuran yang proporsional antara judul, subjudul, dan teks isi; sertakan pula padding dan margin yang cukup untuk menjaga ruang visual yang lega; dan berikan transisi halus pada tombol CTA agar tampil elegan saat di-hover.”