Code Studio: Survey Cita Cita

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

Kolom Spreadsheet

Link Spreadsheet:

https://docs.google.com/spreadsheets/d/1yh7QabRTyTB0eeTLqORDSFzbx7muiWPCovfueD3Dk7k/edit?usp=sharing

Link Apps Script:

https://script.google.com/macros/s/AKfycbx6dQ3TPIQZOHcZCzVLEl-qfgzylAKJOsJoL8mHw2aVvqFtdFTAYQym8hhQ8wXEhGKu/exec

Prompt

“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:

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.

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.

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.

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.”

PROMPT

Perbaiki index.html berikut sehingga bisa menyimpan data :

<!doctype html>

<head>

<title>ESQ Talent DNA Assessment Portal</title>

<style>

body { font-family: 'Poppins', sans-serif; background:#f6f8fb; margin:0; padding-top:70px; }

.navbar { box-shadow:0 2px 10px rgba(0,0,0,0.08); }

.hero-section { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding:80px 0; text-align:center; }

.hero-title { font-weight:700; font-size:2.2rem; }

.form-container { max-width:900px; margin: -40px auto 40px; padding:30px; background:#fff; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.08); }

.submit-button { border-radius:50px; padding:12px 28px; }

.hidden-iframe { display:none; }

.status { text-align:center; margin-top:16px; font-weight:600; }

</style>

</head>

<body>

<a class="navbar-brand fw-bold text-primary" href="#">ESQ Talent DNA</a>

</button>

<li class="nav-item"><a class="nav-link" href="#hero">Beranda</a></li>

<li class="nav-item"><a class="nav-link" href="#assessment">Asesmen</a></li>

</ul>

</div>

</nav>

<h1 class="hero-title">Temukan Potensi Terbaikmu dengan ESQ Talent DNA</h1>

<p class="lead mt-3">Asesmen singkat untuk mengenali bakat, karakter, dan kecerdasan emosional/spiritual.</p>

<a class="btn btn-light btn-lg mt-3" href="#assessment">Mulai Asesmen</a>

</div>

</section>

<h2 class="text-center text-primary mb-4">Form Asesmen Siswa</h2>

<label class="form-label">Nama Lengkap *</label>

</div>

<label class="form-label">NISN / ID Siswa *</label>

</div>

<label class="form-label">Jenis Kelamin *</label>

<option value="">Pilih...</option>

<option value="Perempuan">Perempuan</option>

</select>

</div>

<label class="form-label">Kelas / Program Studi *</label>

</div>

<label class="form-label">Alamat Email *</label>

</div>

<label class="form-label">Pilihan Minat / Kategori Bakat *</label>

<label class="form-check-label" for="minat1">Seni & Kreativitas</label>

</div>

<label class="form-check-label" for="minat2">Sains & Teknologi</label>

</div>

<label class="form-check-label" for="minat3">Olahraga & Kesehatan</label>

</div>

<label class="form-check-label" for="minat4">Bisnis & Kewirausahaan</label>

</div>

<label class="form-check-label" for="minat5">Sosial & Kemanusiaan</label>

</div>

<label class="form-check-label" for="minat6">Bahasa & Komunikasi</label>

</div>

<label class="form-label">Cita-cita / Motivasi Hidup *</label>

</div>

</div>

<button type="submit" id="submitButton" class="btn btn-primary submit-button">Kirim Asesmen</button>

</div>

</form>

</div>

</section>

</footer>

// Ganti dengan URL Apps Script .exec Anda

const scriptURL = 'https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec';

// Set form action ke scriptURL

document.getElementById('assessmentForm').action = scriptURL;

const form = document.getElementById('assessmentForm');

const statusEl = document.getElementById('status');

const iframe = document.getElementById('hidden_iframe');

const submitButton = document.getElementById('submitButton');

// Sebelum submit, gabungkan checkbox minat menjadi string dan simpan ke hidden input

form.addEventListener('submit', function(e) {

// kumpulkan nilai checkbox

const checked = Array.from(document.querySelectorAll('input[name="minat"]:checked')).map(cb => cb.value);

document.getElementById('minat_joined').value = checked.join(', ');

// show loading state

submitButton.disabled = true;

submitButton.textContent = 'Mengirim...';

statusEl.textContent = 'Mengirim data ke server...';

statusEl.style.color = '#6c757d';

});

// Ketika iframe selesai load -> anggap pengiriman selesai

iframe.addEventListener('load', function() {

// Jika form belum pernah dikirim, ignore

// tampilkan pesan sukses (Apps Script bisa mengarahkan ke halaman 'thanks' tetapi di sini kita asumsikan sukses)

submitButton.disabled = false;

submitButton.textContent = 'Kirim Asesmen';

statusEl.textContent = '✅ Data asesmen berhasil dikirim. Terima kasih.';

statusEl.style.color = 'green';

// reset form

try { form.reset(); } catch (err) {}

// kosongkan hidden minat

document.getElementById('minat_joined').value = '';

// optional: hide status message after 6s

setTimeout(() => { statusEl.textContent = ''; }, 6000);

});

// Jika pengguna menutup atau terjadi error, status tetap di UI — browser tidak memberikan error detail untuk iframe POST

// Untuk debugging, cek executions pada Apps Script dashboard.

</script>

</body>

</html>

Kolom Spreadsheet

Link Spreadsheet:

https://docs.google.com/spreadsheets/d/1yh7QabRTyTB0eeTLqORDSFzbx7muiWPCovfueD3Dk7k/edit?usp=sharing

Link Apps Script:

https://script.google.com/macros/s/AKfycbx6dQ3TPIQZOHcZCzVLEl-qfgzylAKJOsJoL8mHw2aVvqFtdFTAYQym8hhQ8wXEhGKu/exec

Isi Apps Script:

/**

* Handler untuk POST dari form (form-encoded) atau JSON (fetch).

* Menyimpan ke Sheet1.

function doPost(e) {

try {

// Ambil data: jika dikirim JSON lewat fetch -> e.postData.contents ada

var data = {};

if (e.postData && e.postData.contents) {

try {

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

} catch (err) {

// fallback: mungkin postData.contents berformat x-www-form-urlencoded

data = parseQueryString_(e.postData.contents);

}

} else if (e.parameter) {

// form-encoded biasa -> e.parameter

data = e.parameter;

}

// Buka spreadsheet aktif atau spesifik

var ss = SpreadsheetApp.getActiveSpreadsheet(); // pastikan di-open dari spreadsheet tujuan

var sheet = ss.getSheetByName('Sheet1');

if (!sheet) {

// buat sheet jika tidak ada

sheet = ss.insertSheet('Sheet1');

// buat header

sheet.appendRow([

'Timestamp', 'Nama Lengkap', 'NISN/ID', 'Jenis Kelamin', 'Kelas', 'Email',

'Minat (joined)', 'CitaCita / Motivasi'

]);

}

var timestamp = new Date();

var row = [

timestamp,

data.namaLengkap || data.nama_lengkap || '',

data.nisn || '',

data.jenisKelamin || data.jenis_kelamin || '',

data.kelas || '',

data.email || '',

data.minat_joined || data.minat || '',

data.citaCita || data.cita_cita || ''

];

sheet.appendRow(row);

// Kembalikan HTML kecil agar iframe load -> menandakan selesai

var htmlOutput = HtmlService.createHtmlOutput("<p>Terima kasih — data tersimpan.</p>");

return htmlOutput;

} catch (err) {

var msg = 'Error: ' + err.message;

var htmlOutput = HtmlService.createHtmlOutput('<p>' + msg + '</p>');

return htmlOutput;

}

/**

* Utility: parse query-string style body menjadi object

function parseQueryString_(qs) {

var obj = {};

var parts = qs.split('&');

parts.forEach(function(part) {

if (!part) return;

var pair = part.split('=');

var key = decodeURIComponent(pair[0].replace(/\+/g,' '));

var value = pair[1] ? decodeURIComponent(pair[1].replace(/\+/g,' ')) : '';

obj[key] = value;

});

return obj;

}

Code Studio

Kamis, 30 Oktober 2025

Survey Cita Cita

Prompt

PROMPT

Tidak ada komentar:

Posting Komentar

Google AI Studio

Laporkan Penyalahgunaan