Membuat tampilan Form Blogspot yang Tertaut ke Spreadsheet

 

 saya belum faham, untuk "Desain Form HTML (index.html)" buatnya dimana? apakah bisa langsung di blogger/blogspot?

Tentu, ini adalah proyek yang sangat menarik! Membuat form interaktif dengan Google Apps Script (GAS) adalah pilihan yang tepat karena memungkinkan Anda memiliki kontrol penuh atas tampilan, logika, dan penyimpanan data, semuanya gratis dan terintegrasi dengan ekosistem Google.

Kita akan membuat aplikasi web sederhana menggunakan Google Apps Script yang akan melayani form HTML Anda, memproses jawaban, menghitung skor, menyimpan data ke Google Sheet, dan menampilkan hasil langsung kepada pengguna.

Berikut adalah langkah-langkah detailnya:

Langkah 1: Buat Google Spreadsheet Baru (Database Anda)

Ini akan menjadi tempat di mana semua data (Nama, Email, Jawaban, Skor, Stempel Waktu) akan disimpan.

1. Buka browser Anda dan pergi ke sheets.google.com.

2. Buat spreadsheet baru (klik ikon "+").

3. Beri nama spreadsheet Anda, misalnya: Data Kuis Laboratorium Medis.

4. Di baris pertama (header), ketikkan kolom-kolom berikut:

   • Timestamp
   • Nama
   • Email
   • Jawaban Soal 1 (atau sesuai nama soal Anda)
   • Skor

   Ini akan menjadi database Anda.

Langkah 2: Buat Proyek Google Apps Script

1. Dari Google Spreadsheet yang baru Anda buat (Langkah 1), klik Ekstensi > Apps Script.
2. Ini akan membuka editor Google Apps Script di tab baru.
3. Di editor, Anda akan melihat file Code.gs. Ini adalah tempat kita akan menulis kode JavaScript untuk backend.
4. Kita juga akan membuat file HTML untuk tampilan form. Klik File > Baru > File HTML. Beri nama index.html.

Langkah 3: Tulis Kode Google Apps Script (Code.gs)

Salin dan tempel kode berikut ke dalam file Code.gs. Pastikan Anda mengganti ID_SPREADSHEET_ANDA dengan ID dari spreadsheet yang Anda buat di Langkah 1. ID ini bisa Anda temukan di URL spreadsheet Anda (misalnya, https://docs.google.com/spreadsheets/d/ID_SPREADSHEET_ANDA/edit).

/**
 * File: Code.gs
 * Deskripsi: Berisi fungsi backend untuk melayani form HTML, memproses pengiriman, dan menyimpan data.
 */

// Ganti dengan ID Spreadsheet Anda yang sebenarnya
const SPREADSHEET_ID = 'ID_SPREADSHEET_ANDA'; // <-- GANTI INI!
const SHEET_NAME = 'Sheet1'; // Nama sheet tempat data disimpan (biasanya "Sheet1" secara default)

/**
 * Fungsi doGet()
 * Berfungsi untuk melayani halaman HTML utama (form kuis) ketika web app diakses.
 * @returns {HtmlOutput} Konten HTML dari index.html.
 */
function doGet() {
  // Mengambil konten dari file HTML bernama 'index.html'
  const htmlOutput = HtmlService.createTemplateFromFile('index.html').evaluate();

  // Mengatur judul halaman web
  htmlOutput.setTitle('Kuis Laboratorium Medis');

  // Mengatur mode sandbox untuk keamanan (opsional, tapi direkomendasikan)
  htmlOutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // Penting untuk embed di Blogspot

  return htmlOutput;
}

/**
 * Fungsi processForm()
 * Dipanggil dari sisi klien (JavaScript di index.html) saat form disubmit.
 * Memproses data form, menghitung skor, dan menyimpan data ke Google Sheet.
 * @param {Object} formData Objek yang berisi data dari form (nama, email, jawaban).
 * @returns {number} Skor yang didapatkan pengguna.
 */
function processForm(formData) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);

  // Mendapatkan data dari form
  const nama = formData.nama;
  const email = formData.email;
  const jawabanSoal1 = formData.soal1; // Sesuaikan dengan 'name' input radio button Anda

  let score = 0;

  // --- Kunci Jawaban (Sesuaikan dengan soal Anda) ---
  // Contoh: Jawaban benar untuk Soal 1 adalah 'c'
  const kunciJawaban = {
    soal1: 'c' // Misal: 'c' adalah jawaban yang benar untuk soal pertama
  };

  // --- Logika Penilaian ---
  if (jawabanSoal1 === kunciJawaban.soal1) {
    score = 1; // Jika benar, dapat 1 poin
  } else {
    score = 0; // Jika salah, dapat 0 poin
  }

  // --- Simpan Data ke Spreadsheet ---
  const timestamp = new Date();
  sheet.appendRow([timestamp, nama, email, jawabanSoal1, score]);

  // Mengembalikan skor ke sisi klien
  return score;
}

/**
 * Fungsi include()
 * Fungsi helper untuk menyertakan file CSS atau JavaScript eksternal di HTML.
 * Digunakan di index.html untuk menyertakan file CSS/JS.
 * @param {string} filename Nama file yang akan disertakan.
 * @returns {string} Konten file yang disertakan.
 */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Langkah 4: Desain Form HTML (index.html)

Salin dan tempel kode berikut ke dalam file index.html yang Anda buat di Langkah 2.

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kuis Laboratorium Medis</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
      background-color: #f3f4f6; /* Warna abu-abu muda */
    }
    .container {
      max-width: 600px;
      margin: 40px auto;
      padding: 30px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    input[type="text"], input[type="email"] {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      box-sizing: border-box;
      font-size: 16px;
    }
    input[type="radio"] {
      margin-right: 8px;
      transform: scale(1.2); /* Memperbesar radio button */
    }
    label {
      display: block;
      margin-bottom: 10px;
      font-size: 16px;
      color: #374151;
    }
    button {
      background-color: #3b82f6; /* Biru */
      color: white;
      padding: 14px 24px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      transition: background-color 0.3s ease, transform 0.2s ease;
      width: 100%;
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
    button:hover {
      background-color: #2563eb; /* Biru lebih gelap */
      transform: translateY(-2px);
    }
    .result-message {
      text-align: center;
      margin-top: 25px;
      padding: 20px;
      background-color: #ecfdf5; /* Hijau muda */
      color: #047857; /* Hijau tua */
      border: 1px solid #10b981;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
    }
    .loading-spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-left-color: #3b82f6;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 1s linear infinite;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Kuis Laboratorium Medis</h1>
    <p class="text-center text-gray-600 mb-8">Isi formulir di bawah ini untuk memulai kuis.</p>

    <form id="quizForm" class="space-y-5">
      <div>
        <label for="nama" class="block text-gray-700 text-lg font-medium mb-2">Nama Lengkap Anda:</label>
        <input type="text" id="nama" name="nama" required placeholder="Masukkan nama Anda">
      </div>

      <div>
        <label for="email" class="block text-gray-700 text-lg font-medium mb-2">Alamat Email Anda:</label>
        <input type="email" id="email" name="email" required placeholder="contoh@domain.com">
      </div>

      <div class="bg-blue-50 p-6 rounded-lg border border-blue-200">
        <h2 class="text-xl font-semibold text-blue-800 mb-4">Pendahuluan Soal 1: Sterilisasi Alat Medis</h2>
        <p class="text-gray-700 mb-4">
          Dalam praktik laboratorium medis, sterilisasi alat merupakan prosedur krusial untuk mencegah kontaminasi dan infeksi silang. Berbagai metode sterilisasi digunakan, masing-masing dengan kelebihan dan kekurangannya. Salah satu metode yang umum adalah sterilisasi panas, baik panas kering maupun panas basah.
        </p>
        <h3 class="text-lg font-medium text-gray-800 mb-3">Soal 1:</h3>
        <p class="text-gray-900 mb-4">
          Metode sterilisasi yang paling efektif untuk alat-alat yang tahan panas dan lembab, seperti instrumen bedah dan media kultur, adalah:
        </p>
        <div class="space-y-3">
          <label class="flex items-center text-gray-800">
            <input type="radio" name="soal1" value="a" class="form-radio text-blue-600">
            <span class="ml-2">A. Sterilisasi Panas Kering (Oven)</span>
          </label>
          <label class="flex items-center text-gray-800">
            <input type="radio" name="soal1" value="b" class="form-radio text-blue-600">
            <span class="ml-2">B. Sterilisasi Gas Etilen Oksida</span>
          </label>
          <label class="flex items-center text-gray-800">
            <input type="radio" name="soal1" value="c" class="form-radio text-blue-600">
            <span class="ml-2">C. Autoklaf (Sterilisasi Panas Basah)</span>
          </label>
          <label class="flex items-center text-gray-800">
            <input type="radio" name="soal1" value="d" class="form-radio text-blue-600">
            <span class="ml-2">D. Filtrasi</span>
          </label>
          <label class="flex items-center text-gray-800">
            <input type="radio" name="soal1" value="e" class="form-radio text-blue-600">
            <span class="ml-2">E. Radiasi UV</span>
          </label>
        </div>
      </div>

      <button type="submit" id="submitButton">
        Kirim Jawaban
        <span id="loadingSpinner" class="loading-spinner hidden"></span>
      </button>
    </form>

    <div id="resultMessage" class="result-message hidden"></div>
  </div>

  <script>
    // Fungsi yang akan dipanggil ketika form berhasil disubmit ke Apps Script
    function showResult(score) {
      const resultDiv = document.getElementById('resultMessage');
      const submitButton = document.getElementById('submitButton');
      const loadingSpinner = document.getElementById('loadingSpinner');
      const quizForm = document.getElementById('quizForm');

      resultDiv.innerHTML = `Terima kasih telah mengerjakan soal ini, Anda mendapatkan ${score} Poin.`;
      resultDiv.classList.remove('hidden'); // Tampilkan pesan hasil

      quizForm.style.display = 'none'; // Sembunyikan form setelah submit

      // Sembunyikan spinner dan aktifkan tombol kembali
      loadingSpinner.classList.add('hidden');
      submitButton.disabled = false;
    }

    // Fungsi yang akan dipanggil jika ada error saat submit form
    function showError(error) {
      const resultDiv = document.getElementById('resultMessage');
      const submitButton = document.getElementById('submitButton');
      const loadingSpinner = document.getElementById('loadingSpinner');

      resultDiv.innerHTML = `Terjadi kesalahan: ${error.message}. Mohon coba lagi.`;
      resultDiv.classList.remove('hidden');
      resultDiv.style.backgroundColor = '#fee2e2'; // Warna merah muda untuk error
      resultDiv.style.borderColor = '#ef4444'; // Border merah untuk error
      resultDiv.style.color = '#dc2626'; // Teks merah untuk error

      // Sembunyikan spinner dan aktifkan tombol kembali
      loadingSpinner.classList.add('hidden');
      submitButton.disabled = false;
    }

    // Event listener untuk submit form
    document.getElementById('quizForm').addEventListener('submit', function(event) {
      event.preventDefault(); // Mencegah form submit secara default

      const submitButton = document.getElementById('submitButton');
      const loadingSpinner = document.getElementById('loadingSpinner');
      const resultDiv = document.getElementById('resultMessage');

      // Sembunyikan pesan hasil sebelumnya jika ada
      resultDiv.classList.add('hidden');

      // Tampilkan spinner dan nonaktifkan tombol
      loadingSpinner.classList.remove('hidden');
      submitButton.disabled = true;

      // Kumpulkan data dari form
      const formData = {
        nama: document.getElementById('nama').value,
        email: document.getElementById('email').value,
        soal1: document.querySelector('input[name="soal1"]:checked')?.value // Ambil nilai jawaban soal 1
      };

      // Validasi sederhana: pastikan nama, email, dan jawaban soal 1 terisi
      if (!formData.nama || !formData.email || !formData.soal1) {
        showError({ message: 'Harap isi Nama, Email, dan jawab semua pertanyaan.' });
        return;
      }

      // Panggil fungsi processForm di Google Apps Script
      google.script.run
        .withSuccessHandler(showResult) // Jika berhasil, panggil showResult
        .withFailureHandler(showError)   // Jika gagal, panggil showError
        .processForm(formData);
    });
  </script>
</body>
</html>

Penjelasan Kode index.html:

• HTML Structure: Membuat form dengan input nama, email, dan satu soal pilihan ganda.
• CSS (Tailwind & Custom): Menggunakan Tailwind CSS untuk styling dasar dan beberapa CSS kustom untuk tampilan yang lebih menarik dan responsif.
• JavaScript:
  • showResult(score): Fungsi ini dipanggil oleh Google Apps Script setelah berhasil memproses form. Ini akan menampilkan pesan terima kasih dan skor.
  • showError(error): Fungsi ini dipanggil jika ada kesalahan saat memproses form.
  • Event Listener submit: Mencegah pengiriman form default, mengumpulkan data, menampilkan loading spinner, dan kemudian memanggil fungsi processForm di Google Apps Script menggunakan google.script.run. Ini adalah jembatan antara frontend (HTML) dan backend (Apps Script).

Langkah 5: Deploy Proyek Apps Script sebagai Aplikasi Web

1. Di editor Google Apps Script, klik tombol "Deploy" (ikon roket) di kanan atas, lalu pilih "New deployment".
2. Pilih jenis deployment "Web app".
3. Konfigurasi deployment:
   • Description: (Opsional) Beri deskripsi, misalnya "Kuis Lab Medis v1".
   • Execute as: Pilih "Me (your_email@gmail.com)". Ini penting agar script memiliki izin untuk menulis ke Google Sheet Anda.
   • Who has access: Pilih "Anyone". Ini agar siapa pun yang memiliki link bisa mengakses kuis Anda.
4. Klik "Deploy".
5. Google mungkin akan meminta Anda untuk "Authorize access" untuk pertama kalinya. Ikuti langkah-langkah otorisasi:
   • Klik "Review permissions".
   • Pilih akun Google Anda.
   • Jika muncul peringatan "Google hasn't verified this app", klik "Advanced" (atau "Go to [Nama Proyek Anda] (unsafe)").
   • Klik "Allow" atau "Izinkan".
6. Setelah otorisasi selesai, Anda akan mendapatkan "Web app URL". Salin URL ini. Ini adalah link ke kuis Anda.

Langkah 6: Sematkan (Embed) Kuis ke Blogspot Anda

1. Buka dashboard Blogspot Anda.

2. Buat Postingan Baru atau Edit Postingan yang Sudah Ada.

3. Di editor postingan Blogspot, beralihlah ke mode HTML View (biasanya ada ikon < > atau pilihan "HTML" di sudut editor).

4. Tempelkan kode <iframe> berikut, ganti URL_WEB_APP_ANDA dengan URL yang Anda dapatkan di Langkah 5.

   <div style="text-align: center; margin: 20px 0;">
     <iframe src="URL_WEB_APP_ANDA"
             style="width: 100%; max-width: 700px; height: 800px; border: none; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);"
             allowfullscreen="true"
             webkitallowfullscreen="true"
             mozallowfullscreen="true">
     </iframe>
   </div>
   <p style="text-align: center; font-size: 14px; color: #666;">
     Jika kuis tidak tampil, pastikan browser Anda mengizinkan konten pihak ketiga.
   </p>
   

   • width: 100%; max-width: 700px;: Membuat iframe responsif dan tidak terlalu lebar di desktop.
   • height: 800px;: Sesuaikan tinggi ini jika kuis Anda lebih panjang atau lebih pendek.
   • border: none; border-radius: 15px; box-shadow: ...: Memberikan tampilan yang lebih modern dan menyatu dengan blog Anda.

5. Publikasikan atau Perbarui Postingan Anda.

Sekarang, kuis Anda akan muncul di Blogspot, dan ketika pengguna mengisi serta mengirimkan jawaban, data akan masuk ke Google Sheet Anda, dan mereka akan langsung melihat skornya!

Langkah 7: Melakukan Ranking di Google Spreadsheet

Untuk melakukan ranking di Google Spreadsheet, Anda bisa menggunakan fitur bawaan Google Sheets setelah data terkumpul.

1. Buka Google Spreadsheet Data Kuis Laboratorium Medis Anda.

2. Untuk melihat ranking berdasarkan skor tertinggi:

   • Pilih seluruh data Anda (misalnya, dari kolom A hingga E).
   • Klik Data > Urutkan rentang > Opsi pengurutan rentang lanjutan...
   • Pilih "Data memiliki baris header".
   • Untuk "Urutkan menurut", pilih kolom "Skor".
   • Pilih "Z -> A" (menurun) untuk mendapatkan skor tertinggi di atas.
   • Anda juga bisa menambahkan level pengurutan kedua, misalnya berdasarkan Timestamp (A -> Z) jika ada skor yang sama.
   • Klik "Urutkan".

3. Untuk melihat ranking dalam periode tertentu:

   • Anda bisa menggunakan fitur Filter.
   • Pilih seluruh data Anda (klik ikon kotak di pojok kiri atas antara A dan 1).
   • Klik Data > Buat filter.
   • Sekarang Anda akan melihat ikon filter di setiap header kolom.
   • Klik ikon filter di kolom Timestamp.
   • Pilih "Filter menurut kondisi" atau "Filter menurut nilai" untuk memilih rentang tanggal tertentu.
   • Setelah memfilter, Anda bisa mengurutkan data yang difilter seperti langkah di atas.

Ini akan membantu Anda menganalisis hasil kuis dan melihat siapa saja yang mendapatkan skor tertinggi dalam periode yang Anda inginkan.

Selamat mencoba! Ini adalah solusi yang cukup kuat dan fleksibel untuk kebutuhan Anda.