{"id":19091,"date":"2026-02-17T13:56:13","date_gmt":"2026-02-17T06:56:13","guid":{"rendered":"https:\/\/lpn.mcu.ac.th\/?page_id=19091"},"modified":"2026-02-17T13:56:13","modified_gmt":"2026-02-17T06:56:13","slug":"qa","status":"publish","type":"page","link":"https:\/\/lpn.mcu.ac.th\/?page_id=19091","title":{"rendered":"Q&amp;A"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3-1024x341.png\" alt=\"\" class=\"wp-image-19051\" srcset=\"https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3-1024x341.png 1024w, https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3-300x100.png 300w, https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3-768x256.png 768w, https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3-1536x512.png 1536w, https:\/\/lpn.mcu.ac.th\/wp-content\/uploads\/2026\/02\/3.png 1800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<p><!DOCTYPE html><br \/>\n<html><br \/>\n<head><br \/>\n  <base target=\"_top\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n    :root {\n      --primary-color: #2563eb;\n      --bg-color: #f8fafc;\n      --card-bg: #ffffff;\n      --text-color: #1e293b;\n      --light-text: #64748b;\n    }<\/p>\n<p>    body {\n      font-family: 'Kanit', sans-serif;\n      background-color: var(--bg-color);\n      color: var(--text-color);\n      margin: 0;\n      padding: 20px;\n      display: flex;\n      justify-content: center;\n    }<\/p>\n<p>    .container {\n      width: 100%;\n      max-width: 600px;\n    }<\/p>\n<p>    h1 {\n      text-align: center;\n      font-weight: 600;\n      color: var(--primary-color);\n      margin-bottom: 30px;\n    }<\/p>\n<p>    \/* Form Style *\/\n    .ask-box {\n      background: var(--card-bg);\n      padding: 25px;\n      border-radius: 16px;\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n      margin-bottom: 30px;\n    }<\/p>\n<p>    input, textarea {\n      width: 100%;\n      padding: 12px;\n      margin-bottom: 15px;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      font-family: 'Kanit', sans-serif;\n      box-sizing: border-box; \/* \u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49 padding \u0e44\u0e21\u0e48\u0e14\u0e31\u0e19 layout *\/\n      transition: border-color 0.2s;\n    }<\/p>\n<p>    input:focus, textarea:focus {\n      outline: none;\n      border-color: var(--primary-color);\n    }<\/p>\n<p>    button {\n      background-color: var(--primary-color);\n      color: white;\n      border: none;\n      padding: 12px 24px;\n      border-radius: 8px;\n      cursor: pointer;\n      font-family: 'Kanit', sans-serif;\n      font-weight: 500;\n      width: 100%;\n      transition: opacity 0.2s;\n    }<\/p>\n<p>    button:hover {\n      opacity: 0.9;\n    }<\/p>\n<p>    \/* Q&A List Style *\/\n    .qa-card {\n      background: var(--card-bg);\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n      margin-bottom: 15px;\n      border-left: 4px solid var(--primary-color);\n    }<\/p>\n<p>    .q-text {\n      font-weight: 600;\n      font-size: 1.1em;\n      margin-bottom: 8px;\n    }<\/p>\n<p>    .a-text {\n      color: var(--light-text);\n      line-height: 1.6;\n      background-color: #f1f5f9;\n      padding: 10px;\n      border-radius: 8px;\n    }<\/p>\n<p>    .meta {\n      font-size: 0.8em;\n      color: #94a3b8;\n      margin-top: 10px;\n      text-align: right;\n    }<\/p>\n<p>    \/* Loading *\/\n    #loading { text-align: center; color: var(--light-text); }\n  <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<h1>Q&#038;A \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e06\u0e4c\u0e25\u0e33\u0e1e\u0e39\u0e19<\/h1>\n<div class=\"ask-box\">\n<form id=\"qaForm\" onsubmit=\"handleFormSubmit(this)\">\n        <label>\u0e0a\u0e37\u0e48\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/label><br \/>\n        <input type=\"text\" name=\"name\" placeholder=\"\u0e23\u0e30\u0e1a\u0e38\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e48\u0e19\" required><\/p>\n<p>        <label>\u0e04\u0e33\u0e16\u0e32\u0e21<\/label><br \/>\n        <textarea name=\"question\" rows=\"3\" placeholder=\"\u0e2d\u0e22\u0e32\u0e01\u0e23\u0e39\u0e49\u0e2d\u0e30\u0e44\u0e23\u0e16\u0e32\u0e21\u0e21\u0e32\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22...\" required><\/textarea><\/p>\n<p>        <button type=\"submit\" id=\"btnSubmit\">\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e16\u0e32\u0e21<\/button><br \/>\n      <\/form>\n<\/p><\/div>\n<div id=\"loading\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25&#8230;<\/div>\n<div id=\"qa-list\"><\/div>\n<\/p><\/div>\n<p>  <script>\n    \/\/ 1. \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e27\u0e47\u0e1a\n    window.onload = function() {\n      loadData();\n    };<\/p>\n<p>    function loadData() {\n      google.script.run.withSuccessHandler(showData).getQAData();\n    }<\/p>\n<p>    function showData(data) {\n      const list = document.getElementById('qa-list');\n      const loading = document.getElementById('loading');\n      loading.style.display = 'none';<\/p>\n<p>      let html = '';\n      if(data.length === 0) {\n        html = '<\/p>\n<div style=\"text-align:center; color:#999;\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e04\u0e33\u0e16\u0e32\u0e21\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e33\u0e15\u0e2d\u0e1a<\/div>\n<p>';\n      } else {\n        data.forEach(item => {\n          \/\/ \u0e41\u0e1b\u0e25\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e49\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\n          const date = new Date(item.timestamp).toLocaleDateString('th-TH');<\/p>\n<p>          html += `<\/p>\n<div class=\"qa-card\">\n<div class=\"q-text\">Q: ${escapeHtml(item.question)}<\/div>\n<div class=\"a-text\">A: ${escapeHtml(item.answer)}<\/div>\n<div class=\"meta\">\u0e16\u0e32\u0e21\u0e42\u0e14\u0e22: ${escapeHtml(item.name)} | ${date}<\/div>\n<\/p><\/div>\n<p>          `;\n        });\n      }\n      list.innerHTML = html;\n    }<\/p>\n<p>    \/\/ 2. \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e16\u0e32\u0e21\n    function handleFormSubmit(formObject) {\n      event.preventDefault();\n      const btn = document.getElementById('btnSubmit');\n      btn.textContent = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07...';\n      btn.disabled = true;<\/p>\n<p>      google.script.run.withSuccessHandler(() => {\n        formObject.reset();\n        btn.textContent = '\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e16\u0e32\u0e21';\n        btn.disabled = false;\n        alert('\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e16\u0e32\u0e21\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22! \u0e23\u0e2d\u0e41\u0e2d\u0e14\u0e21\u0e34\u0e19\u0e21\u0e32\u0e15\u0e2d\u0e1a\u0e19\u0e30\u0e04\u0e23\u0e31\u0e1a');\n      }).submitQuestion(formObject);\n    }<\/p>\n<p>    \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19 XSS\n    function escapeHtml(text) {\n      if (!text) return text;\n      return text\n        .replace(\/&\/g, \"&amp;\")\n        .replace(\/<\/g, \"&lt;\")\n        .replace(\/>\/g, \"&gt;\")\n        .replace(\/\"\/g, \"&quot;\")\n        .replace(\/'\/g, \"&#039;\");\n    }\n  <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-19091","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/19091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19091"}],"version-history":[{"count":3,"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/19091\/revisions"}],"predecessor-version":[{"id":19094,"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/19091\/revisions\/19094"}],"wp:attachment":[{"href":"https:\/\/lpn.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}