ลิงก์ที่เกี่ยวข้อง
Embedded Files
Prompt สำหรับสร้าง Webapp
1. prompt ถาม Al >> คลิก <<
1. prompt ถาม Al >> คลิก <<
ในฐานะที่คุณเป็นผู้เชี่ยวชาญด้านการสร้างเว็บ ช่วยฉันสร้าง Prompt ระบบแบบประเมินภาวะซึมเศร้า ให้หน่อย
เป็นระบบ CRUD ให้มีหน้าตาสวยงามและทันสมัยสุดๆ ใช้ tailwind css
โดยมีรายละเอียดดังนี้
1.
2.
3.
...
- Header : โลโก้ https://img5.pic.in.th/file/secure-sv1/logo-nn.md.png ขนาดเหมาะสม (ไม่เกิน 150px) มี title ระบบแบบประเมินภาวะซึมเศร้า ไม่ต้องมี background
- Footer: ข้อความ “© 2025 แบบประเมินภาวะซึมเศร้า | khomkrit paisri” อยู่ตรงกลาง ไม่ต้องมี blackground
- ในการทำ crud ขอให้เก็บข้อมูลจริง และให้เก็บในรูปแบบ json data ที่เป็นมาตรฐาน และให้เก็บโดยใช้ localstorage, ให้ใช้ jquery,jquery validate, sweet alert, loading ขนาดเล็ก ให้ด้วยตอนสถานะรอการทำงาน
ขอแค่ prompt นะ และขอเป็นภาษาไทยด้วย
- ขอแค่ prompt นะ และขอเป็นภาษาไทยด้วย ยาวไม่เกิน 4000 อักขระ
2. Prompt สร้าง webapp >> คลิก <<
2. Prompt สร้าง webapp >> คลิก <<
Prompt สำหรับสร้างเว็บระบบแบบประเมินภาวะซึมเศร้า:
สร้างเว็บแอพระบบแบบประเมินภาวะซึมเศร้า (Depression Assessment System) แบบ CRUD โดยใช้:
✅ Tailwind CSS – ออกแบบ UI ให้ดูทันสมัย สะอาดตา มีความเป็นมืออาชีพ
✅ jQuery – ใช้สำหรับ DOM Manipulation
✅ jQuery Validate – สำหรับตรวจสอบความถูกต้องของฟอร์ม
✅ SweetAlert2 – สำหรับแจ้งเตือน (Alert/Confirm) ที่ดูดี
✅ LocalStorage – ใช้จัดเก็บข้อมูลแบบ JSON ในเครื่องผู้ใช้
✅ แสดง Loader ขนาดเล็ก ระหว่างกำลังประมวลผลข้อมูล
โครงสร้างหน้าตาเว็บ:
🧩 Header:
🧩 Header:
แสดงโลโก้จาก URL: https://img5.pic.in.th/file/secure-sv1/logo-nn.md.png
ขนาดโลโก้ไม่เกิน 150px
มีข้อความ "ระบบแบบประเมินภาวะซึมเศร้า" ถัดจากโลโก้
Header ไม่มีพื้นหลัง (transparent)
📋 ส่วนฟอร์ม:
📋 ส่วนฟอร์ม:
มีฟอร์มกรอกข้อมูลสำหรับแบบประเมินภาวะซึมเศร้า เช่น ชื่อผู้ประเมิน, วัน/เวลา, คำถาม 9 ข้อ (PHQ-9), ช่องบันทึกคะแนนรวม
ใช้ jQuery Validate ตรวจสอบข้อมูลก่อนบันทึก
เมื่อกดบันทึก ให้แสดง Loader เล็กๆ ขณะรอ แล้วขึ้น SweetAlert เมื่อเสร็จ
📂 แสดงรายการแบบประเมิน:
📂 แสดงรายการแบบประเมิน:
แสดงข้อมูลจาก LocalStorage ในรูปแบบ JSON
ข้อมูลที่แสดงมี: ชื่อ, วันที่, คะแนนรวม, ปุ่ม "ดู", "แก้ไข", "ลบ"
ใช้ SweetAlert ยืนยันการลบ และแจ้งเตือนเมื่อสำเร็จ
🖱 CRUD:
🖱 CRUD:
Create: ฟอร์มบันทึกแบบประเมินใหม่
Read: ตารางแสดงข้อมูลแบบ real-time
Update: สามารถแก้ไขข้อมูลที่เคยกรอกได้
Delete: สามารถลบรายการออกจาก LocalStorage ได้
🦶 Footer:
🦶 Footer:
แสดงข้อความ © 2025 แบบประเมินภาวะซึมเศร้า | khomkrit paisri
ชิดกลาง (center)
ไม่มีพื้นหลัง (transparent)
function doGet(e) {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setTitle('ระบบแบบประเมินภาวะซึมเศร้า')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
4. index.html แบบจำลอง >> คลิก <<
4. index.html แบบจำลอง >> คลิก <<
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบแบบประเมินภาวะซึมเศร้า</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.loader {
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
<!-- Header -->
<header class="bg-transparent py-6">
<div class="container mx-auto px-4">
<div class="flex items-center justify-center">
<img src="https://img5.pic.in.th/file/secure-sv1/logo-nn.md.png" alt="Logo" class="h-24 w-auto mr-4">
<h1 class="text-3xl font-bold text-gray-800">ระบบแบบประเมินภาวะซึมเศร้า</h1>
</div>
</div>
</header>
<div class="container mx-auto px-4 pb-20">
<!-- Assessment Form -->
<div class="bg-white rounded-lg shadow-lg p-8 mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">แบบประเมินภาวะซึมเศร้า (PHQ-9)</h2>
<form id="assessmentForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">ชื่อผู้ประเมิน *</label>
<input type="text" id="assessorName" name="assessorName" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">วันที่ประเมิน *</label>
<input type="datetime-local" id="assessmentDate" name="assessmentDate" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
</div>
<!-- PHQ-9 Questions -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-800 mb-4">คำถาม PHQ-9 (ในช่วง 2 สัปดาห์ที่ผ่านมา คุณรู้สึกรำคาญหรือหดหู่ใจเพราะปัญหาต่อไปนี้บ่อยแค่ไหน)</h3>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">1. เบื่อหน่าย ไม่สนใจ หรือไม่มีความสุขในการทำกิจกรรมต่างๆ *</label>
<select name="q1" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">2. รู้สึกหดหู่ ท้อแท้ หรือสิ้นหวัง *</label>
<select name="q2" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">3. หลับยาก นอนไม่หลับ หรือนอนมากเกินไป *</label>
<select name="q3" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">4. รู้สึกเหนื่อยหรือไม่มีพลังงาน *</label>
<select name="q4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">5. เบื่ออาหาร หรือกินมากเกินไป *</label>
<select name="q5" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">6. รู้สึกแย่กับตัวเอง หรือรู้สึกว่าตัวเองล้มเหลว หรือทำให้ตัวเองหรือครอบครัวผิดหวัง *</label>
<select name="q6" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">7. มีปัญหาในการจดจ่อ เช่น การอ่านหนังสือพิมพ์ หรือดูโทรทัศน์ *</label>
<select name="q7" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">8. เคลื่อนไหวหรือพูดช้าจนคนอื่นสังเกตเห็น หรือกระสับกระส่าย ไม่สามารถนิ่งอยู่กับที่ได้ *</label>
<select name="q8" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
<div class="phq9-question">
<label class="block text-sm font-medium text-gray-700 mb-2">9. คิดว่าตายไปเสียจะดีกว่า หรือคิดทำร้ายตัวเอง *</label>
<select name="q9" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="">เลือกคำตอบ</option>
<option value="0">ไม่เลย (0 คะแนน)</option>
<option value="1">หลายวัน (1 คะแนน)</option>
<option value="2">มากกว่าครึ่งของจำนวนวัน (2 คะแนน)</option>
<option value="3">เกือบทุกวัน (3 คะแนน)</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">คะแนนรวม</label>
<input type="number" id="totalScore" name="totalScore" readonly
class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">บันทึกเพิ่มเติม</label>
<textarea id="notes" name="notes" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
</div>
<div class="flex gap-4">
<button type="submit" id="submitBtn"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
<span class="loader" id="submitLoader" style="display: none;"></span>
<span id="submitText">บันทึกข้อมูล</span>
</button>
<button type="button" id="cancelBtn"
class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-medium transition-colors">
ยกเลิก
</button>
</div>
</form>
</div>
<!-- Assessment List -->
<div class="bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">รายการแบบประเมิน</h2>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">ชื่อผู้ประเมิน</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">วันที่ประเมิน</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">คะแนนรวม</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">ระดับความรุนแรง</th>
<th class="px-4 py-3 text-center text-sm font-medium text-gray-700">การจัดการ</th>
</tr>
</thead>
<tbody id="assessmentList">
<!-- Data will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-transparent py-6 mt-12">
<div class="container mx-auto px-4">
<p class="text-center text-gray-600">© 2025 แบบประเมินภาวะซึมเศร้า | khomkrit paisri</p>
</div>
</footer>
<script>
$(document).ready(function() {
let editingId = null;
// Set current date/time as default
$('#assessmentDate').val(new Date().toISOString().slice(0, 16));
// Form validation
$('#assessmentForm').validate({
rules: {
assessorName: {
required: true,
minlength: 2
},
assessmentDate: {
required: true
},
q1: { required: true },
q2: { required: true },
q3: { required: true },
q4: { required: true },
q5: { required: true },
q6: { required: true },
q7: { required: true },
q8: { required: true },
q9: { required: true }
},
messages: {
assessorName: {
required: "กรุณากรอกชื่อผู้ประเมิน",
minlength: "ชื่อต้องมีอย่างน้อย 2 ตัวอักษร"
},
assessmentDate: "กรุณาเลือกวันที่ประเมิน",
q1: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 1",
q2: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 2",
q3: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 3",
q4: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 4",
q5: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 5",
q6: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 6",
q7: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 7",
q8: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 8",
q9: "กรุณาเลือกคำตอบสำหรับคำถามข้อ 9"
},
submitHandler: function(form) {
saveAssessment();
}
});
// Calculate total score when answers change
$('select[name^="q"]').change(function() {
calculateTotalScore();
});
function calculateTotalScore() {
let total = 0;
for (let i = 1; i <= 9; i++) {
const value = parseInt($(`select[name="q${i}"]`).val()) || 0;
total += value;
}
$('#totalScore').val(total);
}
function getSeverityLevel(score) {
if (score >= 0 && score <= 4) return { text: 'ไม่มีอาการซึมเศร้า', class: 'text-green-600' };
if (score >= 5 && score <= 9) return { text: 'อาการซึมเศร้าระดับเล็กน้อย', class: 'text-yellow-600' };
if (score >= 10 && score <= 14) return { text: 'อาการซึมเศร้าระดับปานกลาง', class: 'text-orange-600' };
if (score >= 15 && score <= 19) return { text: 'อาการซึมเศร้าระดับรุนแรงปานกลาง', class: 'text-red-600' };
if (score >= 20) return { text: 'อาการซึมเศร้าระดับรุนแรง', class: 'text-red-800' };
return { text: '-', class: '' };
}
function saveAssessment() {
$('#submitLoader').show();
$('#submitText').text('กำลังบันทึก...');
$('#submitBtn').prop('disabled', true);
setTimeout(function() {
const formData = {
id: editingId || Date.now().toString(),
assessorName: $('#assessorName').val(),
assessmentDate: $('#assessmentDate').val(),
answers: {},
totalScore: parseInt($('#totalScore').val()),
notes: $('#notes').val(),
createdAt: editingId ? getAssessmentById(editingId).createdAt : new Date().toISOString(),
updatedAt: new Date().toISOString()
};
// Collect all answers
for (let i = 1; i <= 9; i++) {
formData.answers[`q${i}`] = parseInt($(`select[name="q${i}"]`).val());
}
// Get existing data
let assessments = JSON.parse(localStorage.getItem('depressionAssessments') || '[]');
if (editingId) {
// Update existing
const index = assessments.findIndex(a => a.id === editingId);
if (index !== -1) {
assessments[index] = formData;
}
} else {
// Add new
assessments.push(formData);
}
// Save to localStorage
localStorage.setItem('depressionAssessments', JSON.stringify(assessments));
$('#submitLoader').hide();
$('#submitText').text('บันทึกข้อมูล');
$('#submitBtn').prop('disabled', false);
Swal.fire({
icon: 'success',
title: 'สำเร็จ!',
text: editingId ? 'แก้ไขข้อมูลเรียบร้อยแล้ว' : 'บันทึกข้อมูลเรียบร้อยแล้ว',
confirmButtonColor: '#3b82f6'
});
resetForm();
loadAssessments();
}, 1000);
}
function resetForm() {
$('#assessmentForm')[0].reset();
$('#assessmentDate').val(new Date().toISOString().slice(0, 16));
$('#totalScore').val('');
editingId = null;
$('#submitText').text('บันทึกข้อมูล');
}
function loadAssessments() {
const assessments = JSON.parse(localStorage.getItem('depressionAssessments') || '[]');
const tbody = $('#assessmentList');
tbody.empty();
if (assessments.length === 0) {
tbody.append(`
<tr>
<td colspan="5" class="px-4 py-8 text-center text-gray-500">
ยังไม่มีข้อมูลแบบประเมิน
</td>
</tr>
`);
return;
}
assessments.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
assessments.forEach(assessment => {
const date = new Date(assessment.assessmentDate);
const formattedDate = date.toLocaleDateString('th-TH') + ' ' + date.toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' });
const severity = getSeverityLevel(assessment.totalScore);
tbody.append(`
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3">${assessment.assessorName}</td>
<td class="px-4 py-3">${formattedDate}</td>
<td class="px-4 py-3 font-semibold">${assessment.totalScore}</td>
<td class="px-4 py-3 ${severity.class} font-medium">${severity.text}</td>
<td class="px-4 py-3 text-center">
<button onclick="viewAssessment('${assessment.id}')"
class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm mr-1">
ดู
</button>
<button onclick="editAssessment('${assessment.id}')"
class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm mr-1">
แก้ไข
</button>
<button onclick="deleteAssessment('${assessment.id}')"
class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-sm">
ลบ
</button>
</td>
</tr>
`);
});
}
function getAssessmentById(id) {
const assessments = JSON.parse(localStorage.getItem('depressionAssessments') || '[]');
return assessments.find(a => a.id === id);
}
// Global functions for buttons
window.viewAssessment = function(id) {
const assessment = getAssessmentById(id);
if (!assessment) return;
const date = new Date(assessment.assessmentDate);
const formattedDate = date.toLocaleDateString('th-TH') + ' ' + date.toLocaleTimeString('th-TH');
const severity = getSeverityLevel(assessment.totalScore);
let answersHtml = '';
const questions = [
'เบื่อหน่าย ไม่สนใจ หรือไม่มีความสุขในการทำกิจกรรมต่างๆ',
'รู้สึกหดหู่ ท้อแท้ หรือสิ้นหวัง',
'หลับยาก นอนไม่หลับ หรือนอนมากเกินไป',
'รู้สึกเหนื่อยหรือไม่มีพลังงาน',
'เบื่ออาหาร หรือกินมากเกินไป',
'รู้สึกแย่กับตัวเอง หรือรู้สึกว่าตัวเองล้มเหลว',
'มีปัญหาในการจดจ่อ เช่น การอ่านหนังสือพิมพ์ หรือดูโทรทัศน์',
'เคลื่อนไหวหรือพูดช้าจนคนอื่นสังเกตเห็น หรือกระสับกระส่าย',
'คิดว่าตายไปเสียจะดีกว่า หรือคิดทำร้ายตัวเอง'
];
const scoreText = ['ไม่เลย', 'หลายวัน', 'มากกว่าครึ่งของจำนวนวัน', 'เกือบทุกวัน'];
for (let i = 1; i <= 9; i++) {
const score = assessment.answers[`q${i}`];
answersHtml += `<p><strong>ข้อ ${i}:</strong> ${questions[i-1]} - <span class="text-blue-600">${scoreText[score]} (${score} คะแนน)</span></p>`;
}
Swal.fire({
title: 'รายละเอียดแบบประเมิน',
html: `
<div class="text-left space-y-2">
<p><strong>ชื่อผู้ประเมิน:</strong> ${assessment.assessorName}</p>
<p><strong>วันที่ประเมิน:</strong> ${formattedDate}</p>
<p><strong>คะแนนรวม:</strong> <span class="text-lg font-bold ${severity.class}">${assessment.totalScore} คะแนน</span></p>
<p><strong>ระดับความรุนแรง:</strong> <span class="${severity.class} font-medium">${severity.text}</span></p>
<hr class="my-4">
<div class="space-y-1 text-sm">
${answersHtml}
</div>
${assessment.notes ? `<hr class="my-4"><p><strong>บันทึกเพิ่มเติม:</strong> ${assessment.notes}</p>` : ''}
</div>
`,
width: '600px',
confirmButtonColor: '#3b82f6'
});
};
window.editAssessment = function(id) {
const assessment = getAssessmentById(id);
if (!assessment) return;
editingId = id;
$('#assessorName').val(assessment.assessorName);
$('#assessmentDate').val(assessment.assessmentDate);
$('#notes').val(assessment.notes);
// Set answers
for (let i = 1; i <= 9; i++) {
$(`select[name="q${i}"]`).val(assessment.answers[`q${i}`]);
}
calculateTotalScore();
$('#submitText').text('อัปเดตข้อมูล');
// Scroll to form
$('html, body').animate({
scrollTop: $('#assessmentForm').offset().top - 100
}, 500);
};
window.deleteAssessment = function(id) {
Swal.fire({
title: 'ยืนยันการลบ',
text: 'คุณต้องการลบข้อมูลแบบประเมินนี้หรือไม่?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#6b7280',
confirmButtonText: 'ลบ',
cancelButtonText: 'ยกเลิก'
}).then((result) => {
if (result.isConfirmed) {
let assessments = JSON.parse(localStorage.getItem('depressionAssessments') || '[]');
assessments = assessments.filter(a => a.id !== id);
localStorage.setItem('depressionAssessments', JSON.stringify(assessments));
Swal.fire({
icon: 'success',
title: 'ลบสำเร็จ!',
text: 'ลบข้อมูลแบบประเมินเรียบร้อยแล้ว',
confirmButtonColor: '#3b82f6'
});
loadAssessments();
}
});
};
// Cancel button
$('#cancelBtn').click(function() {
resetForm();
});
// Load assessments on page load
loadAssessments();
});
</script>
</body>
</html>
5. Prompt ปรับเฉพาะ java script ไฟล์ html >> คลิก <<
5. Prompt ปรับเฉพาะ java script ไฟล์ html >> คลิก <<
นี่คือ javascript ของไฟล์ index.html ใน google appscript โดยขอให้ปรับไปใช้ข้อมูลจริงจาก google sheet ในการทำ crud โดย google appscript เรียก google sheet ด้วยการใช้ getActiveSheet หากข้อมูลจำเป็นต้อง ใช้ sheetname อะไร และหากไม่มี sheetname นั้นให้ google appscript สร้าง sheetname นั้นให้ และหากไม่มี column header ให้ google appscript สร้าง column header ให้ด้วย ขอ code.gs และปรับ index.html ให้ด้วย
นี้คือ google app script ของฉัน
https://script.google.com/macros/s/AKfycbyBx2M0ztnnnDxQ16Sx1I_Q9ijxs8oCHjDPXy-LsibFy1es3kFTbXned0BjTSYjk9wwgg/exec
6. Prompt ปรับทั้งไฟล์ html >> คลิก <<
6. Prompt ปรับทั้งไฟล์ html >> คลิก <<
นี่คือโครงสร้างเว็บ ใน google appscript ชื่อว่า index.html โดยขอให้ปรับไปใช้ข้อมูลจริงจาก google sheet ในการทำ crud โดย google appscript เรียก google sheet ด้วยการใช้ getActiveSheet หากข้อมูลจำเป็นต้อง ใช้ sheetname อะไร และหากไม่มี sheetname นั้นให้ google appscript สร้าง sheetname นั้นให้ และหากไม่มี column header ให้ google appscript สร้าง column header ให้ด้วย ขอ code.gs และปรับ index.html ให้ด้วย
นี้คือ google app script ของฉัน
https://script.google.com/macros/s/AKfycbyBx2M0ztnnnDxQ16Sx1I_Q9ijxs8oCHjDPXy-LsibFy1es3kFTbXned0BjTSYjk9wwgg/exec
7. ตัวอย่าง prompt งานกลุ่ม >> คลิก <<
7. ตัวอย่าง prompt งานกลุ่ม >> คลิก <<
ในฐานะที่คุณเป็นผู้เชี่ยวชาญด้านการสร้างเว็บ ช่วยฉันสร้าง Prompt ระบบแบบลงทะเบียนและรับเกียรติบัตรสัปดาห์วันวิทยาศาสตร์แห่งชาติ โรงเรียนเนินสง่าวิทยา ให้หน่อย
เป็นระบบ CRUD ให้มีหน้าตาสวยงามและทันสมัยสุดๆ
- แถบเมนูสีเข้ม อยู่ทางซ้าย จากด้านบนจนสุดด้านล่าง
- เมนูที่ 1 เมนูสมัครเข้าร่ามกิจกรรม
- มีดรอปดาวเลือกกิจกรรม เมื่อเลือกแล้วจะมีข้อความแจ้ง รายละเอียด ห้วงวันเวลาเปิดรับสมัคร ห้วงวันเวลาจัดกิจกรรม/แข่งขัน สถานที่จัดกิจกรรม/แข่งขัน จำนวนผู้สมัครที่จะสามารถกรอกมาได้
- หน้าคำนำหน้า ชื่อ-นามสกุล มีดอปดาวน์เลือกชั้น
- มีช่องกรอก คำนำหน้า ชื่อ-นามสกุล ได้จำนวนแถวเท่ากับจำนวนผู้สมัครที่จะสามารถกรอกมาได้ที่ครูกำหนดไว้
- เมนูที่ 2 เมนู รายชื่อผู้เข้าร่วมกิจกรรม
- user ครู และ admin สามารถ ค้นหา ดู แก้ไข และลบได้
- นักเรียน สามารถค้นหา ดู ได้เท่านั้น
- เมนูที่ 3 เมนู เกียรติบัตร
- มีช่องค้นหาจากชื่อ-นามสกุล มีดอปดาวน์เลือกกิจกรรมหรือทั้งหมด
- ด้านท้ายของเลขที่นักเรียน user ครู และ admin จะต้องกรอกรันรหัสเกียรติบัตรก่อน ทั้งนักเรียน ครู และ admin ถึงจะสามารถกดดาวโหลดไฟล์ได้
- เมื่อกดดาวโหลดไฟล์ ระบบถึงจะประมวลผลไฟล์ภาพเกียรติพร้อมชื่อ-นามสกุลให้ และเมื่อดาวโหลดสำเร็จก็ให้ลบไฟล์ยั้นออกจากระบบเพื่ิอลดพื้นเก็บข้อมูล
- เมนู ล่างสุดเสมอ ลงชื่อเข้าใช้ (ถ้าลงชื่อเข้าใช้แล้ว จะเห็นเป็น logout แทน)
- user:admin และ pass:password1 ใช้สิทธิแอดมิน ทำได้ทุกอย่าง รวมถึงมีเมนูให้สร้าง user/pass ให้ครูได้ด้วย
- user ครู และ admin จะมีเมนู จัดการกิจกรรม คือ สามารถเพิ่มรายชื่อกิจกรรม รายละเอียด ห้วงวันเวลาเปิดรับสมัคร ห้วงวันเวลาจัดกิจกรรม/แข่งขัน สถานที่จัดกิจกรรม/แข่งขัน จำนวนผู้สมัครที่จะสามารถกรอกมาได้
- user ครู และ admin จะมีเมนู อัพโหลดไฟล์เกียรติบัตรแม่แบบ ขนาด A4 แนวนอน โดยจะกรอกเป็นลิงก์ไฟล์รูปภาพเอา โดยจะให้กรอกลิงก์และสามารถเลือกประเภทของฟอนต์ ขนาดของฟอนต์ สีของฟอนต์ตามรหัสสี และสามารถกรอกพิกัดการวางข้อความบนแม่แบบ และจัดกึ่งกลาง สามารถเลือกตัวหนาตัวบาง
- user ครู และ admin จะมีเมนู จัดการข้อมูลนักเรียน ที่ประกอบด้วย 1. คำนำหน้า 2. ชื่อ 3. นามสกุล 4. ชั้น 5. เลขที่ โดยสามารถกรอกทีละคน และอัพโหลดด้วยไฟล์ CSV ได้ จาก Sheet1 และคอลัม 1. คำนำหน้า 2. ชื่อ 3. นามสกุล 4. ชั้น 5. เลขที่ ตามลำดับ
- Header : โลโก้ https://img5.pic.in.th/file/secure-sv1/logo-nn.md.png ขนาดเหมาะสม (ไม่เกิน 150px) มี title สัปดาห์วันวิทยาศาสตร์แห่งชาติ
- Footer: ข้อความ “© 2025 สัปดาห์วันวิทยาศาสตร์แห่งชาติ โรงเรียนเนินสง่าวิทยา | khomkrit paisri” อยู่ตรงกลาง
- ในการทำ crud ขอให้เก็บข้อมูลจริง และให้เก็บในรูปแบบ json data ที่เป็นมาตรฐาน และให้เก็บโดยใช้ localstorage, ให้ใช้ jquery,jquery validate, sweet alert, loading ขนาดเล็ก ให้ด้วยตอนสถานะรอการทำงาน
ขอแค่ prompt นะ และขอเป็นภาษาไทยด้วย
alidate, sweet alert, loading ขนาดเล็กให้ด้วยตอนสถานะรอการทำงาน
- ขอแค่ prompt นะ และขอเป็นภาษาไทยด้วย ยาวไม่เกิน 4000 อักขระ
8. การเชื่อมต่อฐานข้อมูลด้วย firebase >> คลิก <<
8. การเชื่อมต่อฐานข้อมูลด้วย firebase >> คลิก <<
ปรับไปใช้ Firebase Realtime Database
สามารถ sync ข้อมูลแบบ realtime กับ firebase
แล้วให้ทำการเชื่อมต่อกับ Firebase Database ด้วย config ดังต่อไปนี้
const firebaseConfig = {
apiKey: "AIzaSyAT4FCM6dS8kpwUVZLOQTt4ffcHPI35p6c",
authDomain: "science-webapp.firebaseapp.com",
projectId: "science-webapp",
storageBucket: "science-webapp.firebasestorage.app",
messagingSenderId: "1055620244411",
appId: "1:1055620244411:web:5737a762982f7fc2a19a9e",
measurementId: "G-KCGDLSMS6Q"
};
ให้ใช้ Firebase JavaScript SDK v11+ with import via CDN (no npm)
ให้ code HTML มีการ setup Firebase และ Javascript ใน file เดียว
Page updated
Google Sites
Report abuse