Quiz 1
<?php // ตรวจสอบว่ามีค่า n ส่งมาจากฟอร์มหรือไม่
$triangle = '';
if (isset($_POST['n'])) {
$n = intval($_POST['n']); // แปลงเป็นจำนวนเต็ม
if ($n <= 0) {
$triangle = "กรุณากรอกจำนวนเต็มบวก";
} elseif ($n > 100) {
$triangle = "กรอกค่าน้อยกว่าหรือเท่ากับ 100";
} else {
$width = 2 * $n - 1;
$triangle .= "<pre>";
if ($n % 2 == 0) {
// เลขคู่ -> หัวขึ้น
for ($i = 1; $i <= $n; $i++) {
$stars = 2 * $i - 1;
$spaces = ($width - $stars) / 2;
$triangle .= str_repeat(' ', $spaces) . str_repeat('*', $stars) . "\n";
}
} else {
// เลขคี่ -> กลับหัว
for ($i = 0; $i < $n; $i++) {
$stars = 2 * ($n - $i) - 1;
$spaces = ($width - $stars) / 2;
$triangle .= str_repeat(' ', $spaces) . str_repeat('*', $stars) . "\n";
}
}
$triangle .= "</pre>";
}
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle Quiz</title>
<style>
body { font-family: monospace; padding: 24px; }
input, button { font-size: 16px; padding: 6px; margin: 4px; }
pre { background: #f4f4f4; padding: 12px; border-radius: 6px; }
</style>
</head>
<body>
<h2>Quiz: วาดสามเหลี่ยมด้วย *</h2>
<form method="POST">
<label>กรอกจำนวนเต็ม (1-100): </label>
<input type="number" name="n" value="<?= isset($_POST['n']) ? intval($_POST['n']) : '' ?>" min="1" max="100">
<button type="submit">วาด</button>
<button type="button" onclick="window.location='quiz1.php'">ล้าง</button>
</form>
<?php
// แสดงผลสามเหลี่ยม
if ($triangle !== '') {
echo $triangle;
}
?>
</body>
</html>
Pattern / เทคนิคที่ใช้
-
Input validation → ป้องกันค่าผิดปกติ
-
Conditional branching → เลขคู่ / คี่
-
Looping → วนลูปสร้างแต่ละแถว
-
Mathematical pattern → จำนวนดาว =
2*i-1(หัวขึ้น) หรือ2*(n-i)-1(กลับหัว) -
String manipulation →
str_repeat(' ', ...)+str_repeat('*', ...) -
HTML integration →
<pre>แสดงผลอย่างเรียบร้อย
*** การใช้ Loop + Condition + String Manipulation เพื่อสร้าง pattern
Quiz 2<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ratio Input Calculator</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { width: 100px; padding: 6px; margin: 5px; font-size: 16px; text-align: right; }
button { padding: 6px 12px; font-size: 16px; margin: 5px; }
label { display: inline-block; width: 120px; }
.highlight { background-color: #ffff99; }
</style>
</head>
<body>
<h2>Ratio Calculator</h2>
<p>ผู้ใช้กรอกได้ 1 ช่อง</p>
<div>
<div><label for="field1"> 100:</label><input type="number" id="field1" value=""></div>
<div><label for="field2"> 7:</label><input type="number" id="field2" value=""></div>
<div><label for="field3"> 107:</label><input type="number" id="field3" value=""></div>
<div><label for="field4">3:</label><input type="number" id="field4" value=""></div>
<div><label for="field5">104:</label><input type="number" id="field5" value=""></div>
</div>
<button id="clearBtn">Clear</button>
<script>
const fields = [
document.getElementById('field1'),
document.getElementById('field2'),
document.getElementById('field3'),
document.getElementById('field4'),
document.getElementById('field5')
];
// ค่าอัตราส่วนของแต่ละช่อง
const ratios = [100, 7, 107, 3, 104];
function calculateRatios(changedIndex) {
const inputValue = parseFloat(fields[changedIndex].value);
if (isNaN(inputValue)) return;
// อัตราส่วนฐานจากช่องที่ผู้ใช้แก้ไข
const ratioBase = inputValue / ratios[changedIndex];
fields.forEach((field, i) => {
if (i !== changedIndex) {
field.value = (ratios[i] * ratioBase).toFixed(2);
field.classList.add('highlight');
} else {
field.classList.remove('highlight');
}
});
}
// Event listener สำหรับแต่ละช่อง
fields.forEach((field, index) => {
field.addEventListener('input', () => calculateRatios(index));
});
// Clear คืนค่าเป็นอัตราส่วนหลัก
document.getElementById('clearBtn').addEventListener('click', () => {
fields.forEach((f, i) => {
f.value = ratios[i];
f.classList.remove('highlight');
});
});
</script>
</body>
</html>
---------------------------------------------------------------------------------------
Pattern / เทคนิคที่ใช้
-
DOM Manipulation →
getElementById,addEventListener -
Loop + index mapping → fields ↔ ratios
-
Mathematical ratio calculation →
ratioBase * ratios[i] -
Dynamic UI update → highlight ช่องที่เปลี่ยน
-
Input validation → ตรวจสอบ NaN ก่อนคำนวณ
-
Clear/reset function → คืนค่าเริ่มต้น
*** การคำนวณอัตราส่วนแบบ interactive ใช้ JS เพื่อ update DOM
Quiz 3<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Mapping Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ccc; padding: 6px 12px; text-align: left; }
textarea { width: 300px; height: 100px; margin: 5px 0; }
button { padding: 6px 12px; margin: 5px; }
</style>
</head>
<body>
<h2>Array Mapping (Combine Array Output)</h2>
<h3>Array1 (Code, Name)</h3>
<textarea id="array1">101,AAA
102,BBB
103,CCC</textarea>
<h3>Array2 (Code, City)</h3>
<textarea id="array2">103,Singapore
102,Tokyo
101,Bangkok</textarea>
<br>
<button id="mapBtn">Generate Output</button>
<button id="clearBtn">Clear</button>
<h3>Output Table:</h3>
<div id="output"></div>
<script>
// แปลง textarea เป็น array ของ object
function parseArray(text, valueKey) {
return text.trim().split('\n').map(line => {
const [code, value] = line.split(',').map(x => x.trim());
return { code, [valueKey]: value };
});
}
// Map Array1 กับ Array2
function mapArrays(array1, array2) {
const lookup = {};
array2.forEach(item => {
lookup[item.code] = item.city;
});
return array1.map(item => ({
code: item.code,
name: item.name,
city: lookup[item.code] || ''
}));
}
// Render output table
function renderTable(mappedArray) {
let html = '<table><tr><th>Code</th><th>Name</th><th>City</th></tr>';
mappedArray.forEach(item => {
html += `<tr><td>${item.code}</td><td>${item.name}</td><td>${item.city}</td></tr>`;
});
html += '</table>';
document.getElementById('output').innerHTML = html;
}
document.getElementById('mapBtn').addEventListener('click', () => {
const array1Text = document.getElementById('array1').value;
const array2Text = document.getElementById('array2').value;
const array1 = parseArray(array1Text, 'name');
const array2 = parseArray(array2Text, 'city');
const outputArray = mapArrays(array1, array2);
renderTable(outputArray);
});
document.getElementById('clearBtn').addEventListener('click', () => {
document.getElementById('array1').value = '';
document.getElementById('array2').value = '';
document.getElementById('output').innerHTML = '';
});
</script>
</body>
</html>
-------------------------------------------------------------------------------------
Pattern / เทคนิคที่ใช้
-
String → Array → Object conversion (
parseArray) -
Lookup Table → map code → city
-
Array Mapping →
array1.map() -
DOM Manipulation → แสดง table ใน HTML (
innerHTML) -
Event-driven programming → input → process → output
-
Clear / Reset → คืนค่าเริ่มต้น
*** รวมข้อมูลหลาย array ตาม key และแสดงเป็น table แบบ interactive ด้วย JavaScript
Quiz 4<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chart.js - ทดสอบไฟล์เดียว</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="max-width:600px;margin:auto;padding:20px;">
<h2 style="text-align:center;">ยอดขายรายเดือน (ทดสอบไฟล์เดียว)</h2>
<canvas id="salesChart"></canvas>
<script>
// ✅ ข้อมูลจำลอง (แทน data.json หรือ API)
const sampleData = [
{ "month": "ม.ค.", "total": 120 },
{ "month": "ก.พ.", "total": 150 },
{ "month": "มี.ค.", "total": 180 },
{ "month": "เม.ย.", "total": 90 },
{ "month": "พ.ค.", "total": 200 },
{ "month": "มิ.ย.", "total": 170 }
];
// ✅ จำลอง AJAX (เหมือนโหลดจาก API)
function getData() {
return new Promise(resolve => {
setTimeout(() => {
resolve(sampleData); // ส่งข้อมูลกลับเหมือน API
}, 500); // จำลองดีเลย์
});
}
// ✅ ดึงข้อมูลแล้วสร้างกราฟ
getData().then(data => {
const labels = data.map(item => item.month);
const totals = data.map(item => item.total);
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'ยอดขาย (บาท)',
data: totals,
borderWidth: 1,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: { stepSize: 50 }
}
}
}
});
});
</script>
</body>
</html>
-
Pattern / เทคนิคที่ใช้
-
Chart.js Integration →
new Chart(ctx, {...}) -
Dynamic Data Mapping →
map()เพื่อแยก labels และ data -
AJAX Simulation → Promise + setTimeout → เหมือนโหลด API
-
Responsive Chart →
responsive: true -
Single File Test → ข้อมูล + HTML + JS รวมไฟล์เดียว
***ทำงานกับกราฟแบบ dynamic ในไฟล์เดียว สามารถต่อยอดไปใช้กับ API จริง หรือ JSON
บ้านทาวน์เฮาส์ให้เช่า 2 ชั้น รามคำแหง 72
ที่ตั้ง: 310/152 ซอยรามคำแหง 72 แยก 2 แขวงหัวหมาก เขตบางกะปิ กรุงเทพฯ 10240
เดินทางสะดวก:
ใกล้ห้าง & แหล่งช้อป:
ใกล้สถาบันการศึกษา:
