เกมสนุกและสร้างสรรค์ #puzzle #1

โค้ดเกมหากุญแจ ที่เขียนด้วย javascript ใน homepage นี้ มีวัตถุประสงค์ในการสุ่ม กุญแจ (key) และสร้างคำแนะนำ (hint) ทั้ง 5 ข้อ ให้กับผู้เล่นเกมได้ทายตัวเลข 3 ตัวที่ไม่ซ้ำกัน กรอกลงในช่อง 3 ช่องแบบไม่ซ้ำ แล้วกดปุ่ม check ถ้าทายถูกก็จะพบคำว่า “You Crack it.” แต่ถ้าทายผิดก็จะพบคำว่า “Try once again.”

ซึ่งการเรียนรู้แบบสร้างสรรค์เป็นฐาน มีขั้นตอนที่ 1 คือ การกระตุ้นความสนใจ ดังนั้นการเริ่มต้นด้วยการคำนวณชวนคิดอย่างมีจินตนาการ เพื่อตามหาตัวเลข 3 ตัว หรือตามหากุญแจที่หายไป จากลายแทงที่เตรียมให้ทั้งหมด 5 ลายแทงดังตัวอย่าง เชื่อว่าจะช่วยกระตุ้นความสนใจ ก่อนเข้าสู่บทเรียนได้เป็นอย่างดี สำหรับ การเรียนรู้แบบสร้างสรรค์เป็นฐาน (CBL = Creative-Based Learning)

What is the key?


ซึ่ง CBL ประกอบด้วย 5 ขั้นตอน ดังนี้ ขั้นตอนที่ 1 กระตุ้นความสนใจ (Interested) ขั้นตอนที่ 2 ตั้งปัญหารายบุคคลและกลุ่มตามความสนใจ (Problem) ขั้นตอนที่ 3 ค้นคว้าและทดลอง (Search and Test) ขั้นตอนที่ 4 นำเสนอผลงาน (Result) ขั้นตอนที่ 5 สรุปและประเมินผล (Conclusion) พบว่า เวทิสา ตุ้ยเขียว สกนธ์ชัย ชะนูนันท์ และ อัญชลี สิริกุลขจร (2563) ศึกษาเรื่อง แนวทางการจัดการเรียนรู้แบบสร้างสรรค์เป็นฐานที่ส่งเสริมสมรรถนะการแก้ปัญหาแบบร่วมมืออย่างสร้างสรรค์ของนักเรียนในระดับชั้นมัธยมศึกษาปีที่ 4 เรื่อง ปฏิกิริยาเคมี ซึ่งผลการวิจัยมีแนวทาง 5 ขั้นตอน อ้างอิงจาก Luachaiphanit, W. (2015). Creativity-Based Learning (CBL). Journal of Learning Innovations Walailak University,1(2), 23-37. [in Thai]

https://www.thaiall.com/php/whatisthekey.htm

Education on 31 March 2022


พบว่า truehits.net เผยแพร่ข้อมูลเว็บไซต์ด้านการศึกษาใน รูปแบบ XML สำหรับ ประเทศไทย มีเว็บไซต์ด้านการศึกษาจำนวนมาก พบว่า เว็บไซต์ truehits.net เผยแพร่ข้อมูลสถิติการเข้าถึงเว็บไซต์ของสมาชิก มีรายการชื่อเว็บไซต์ที่สามารถนำมาใช้ได้ จากลิงค์ http://truehits.net/xml/ สำหรับกลุ่มการศึกษามีลิงค์ที่ http://truehits.net/xml/education.xml ได้ข้อมูล 10 รายการ ส่วน http://truehits.net/xml/education_all.xml จะมีข้อมูลของสมาชิกในกลุ่มทั้งหมด เมื่อดาวน์โหลดแฟ้มนี้ เมื่อวันที่ 1 เมษายน 2565 พบว่า เป็นรายงานสรุปข้อมูลประจำวันที่ 31 มีนาคม 2565 มีข้อมูลทั้งหมด 578 รายการ สำหรับข้อมูลกลุ่มอื่น สามารถใช้ลิงค์เดิม แต่เปลี่ยนคำว่า education เป็น allmember, government, computer, education, travel, health, entertain, art, social, news, science, organize, person, internet, business, sport ก็จะพบข้อมูลตามชื่อกลุ่มที่เป็นข้อมูลล่าสุด ที่สามารถนำข้อมูลในรูปแบบ XML มาใช้ได้ตามต้องการ

ซึ่งแฟ้ม education.xml จะมีรูปแบบตัวอักษรเป็น ANSI เมื่อแปลงเป็น json ที่ใช้ โค้ดภาษา php โดยใช้ json_encode จะได้แฟ้มข้อมูลรูปแบบตัวอักษรเป็น utf-8 แล้วใช้ class easyui-datagrid ของ jquery-easyui แสดงข้อมูลจาก json เป็นตาราง

https://www.thaiall.com/xml/

https://www.thaiall.com/xml/truehits_education_650331.php

Background ขาดหายไป หรือไล่ระดับไม่เต็มหน้า

ผลงานโปสเตอร์ ในรูปของ PDF File กำหนดขนาดไว้ 8 นิ้ว * 18 นิ้ว ที่นิสิตทำส่ง พบปัญหากับสีพื้น (background) บ่อยครั้งใน 2 กรณี คือ 1) สีพื้นและเนื้อหาข้อมูลมาไม่ครบ และ 2) สีไล่ระดับมาเป็นท่อนเล็ก ๆ ไม่เต็มหน้าเหมือนตอนออกแบบ สำหรับกรณีสีพื้นมาเพียงครึ่งหน้านั้น เกิดจาก Default printer เป็นโปรแกรม PDFCreator ซึ่งกำหนดขนาดกระดาษเป็น A4 เมื่อสั่ง Save as หรือ Print หรือส่งออกไปแล้ว จะทำให้การแสดงผลใน PDF file ถูกจำกัดที่ A4 ส่วนที่อยู่นอกเหนือจากนี้จะหายไป วิธีแก้ไขก็เพียงแต่เปลี่ยน Default Printer

สีไล่ระดับ ที่กำหนดเป็น background นั้น จะมาเป็นท่อนเล็ก ๆ หากต้องการใช้ Feature นี้ ต้องแทรก Shape, Rectangle แล้วกำหนดสีไล่ระดับใน Shape แล้วสั่ง send to back ก็จะแสดงผลได้ตามปกติ เมื่อมีการส่งออกไปเป็น PDF หรือจะใช้ image เป็น background ก็ดูสวยดี แต่ควรต้องคำนึงถึงการแสดงผลแบบ สีคู่ตรงข้าม (Contrast Color) จะได้เห็นเนื้อหาแยกออกจากสีพื้นได้ชัดเจน

http://www.thaiall.com/office/word.htm

สีไล่ระดับ ถ้าทำใน shape จะไม่พบปัญหา

มีแฟ้มแน่นเครื่อง ย่อมส่งผลให้เครื่องช้าเป็นธรรมดา

การล้าง การเคลียร์ การจัดเรียง ย่อมทำให้เครื่องเร็วขึ้น

  1. คลิ๊กซ้ายบน Start button
  2. คลิ๊ก Search
  3. คลิ๊ก Storage settings พบว่า ขนาดที่ถูกใช้ในแต่ละ Categories
  4. คลิ๊ก Other พบว่า ขนาดในแต่ละ Folder ใช้มากน้อยต่างกัน
  5. เข้าไปลบแฟ้มที่ไม่จำเป็น ซึ่งการลบเพื่อไม่ให้เข้าถังขยะ ต้องกด Shift + Del
    ตัวอย่าง folders ที่ได้เข้าไปจัดการ
    [C:\Users\LAB\.android]
    [C:\Users\LAB\.gradle]
    [C:\Users\LAB\VirtualBox VMs]
  1. Disk Cleanup
  2. Defragment and Optimize Drives

PWA เริ่มใช้ที่รุ่น 8.2

เมื่อ 23 มี.ค.65 เริ่มปรับ /web2 และ /pwa เป็นรุ่น 8.2 มีการปรับที่สำคัญ คือ การทำให้ webpage สามารถแสดงผลเหมือนเป็น mobile app ซึ่งการใช้งาน เริ่มจากเปิด webpage ผ่าน browser บน mobile แล้วเลือก “เพิ่มไปที่ , หน้าจอหน้าแรก” จะมี icon ปรากฎบน mobile ถือเป็นการติดตั้งเรียบร้อยแล้ว ต่อจากนั้น เมื่อเริ่มใช้งาน เราสามารถคลิ๊ก icon บน mobile จะมีหน้าตาเหมือน application แต่ระบบข้างหลัง คือ browser เช่นเดิม

โจทย์นี้ เคยมีเพื่อนต้องการให้แสดง webpage แบบ full screen บน browser ซึ่งมีกรณีศึกษาที่ดำเนินการเทียบเคียงได้กับหนังสืออีเล็กทรอนิกส์ Peter rabbit ทำให้ผมนึกถึงการทำงานของ PWA ที่เคยแกะโค้ดไว้เมื่อปี 2560 แต่เป็นคุณสมบัติการทำ Full screen ที่แตกต่างกัน แล้วเห็นว่าความสามารถของ PWA นี้น่าสนใจ จึงเริ่มต้นนำร่องปรับใช้กับ 2 โฮมเพจนี้ ซึ่งการใช้งานก็เพิ่มโค้ดไปเพียง 2 tag ในบรรทัดที่ 6 คือ 1) กำหนดค่ารายการในแฟ้ม manifest ที่ต้องปรับสำหรับแต่ละหน้า และ 2) เรียกสคลิ๊ป material.min.js ซึ่งเป็นองค์ประกอบสำหรับการออกแบบที่เรียกใช้ค่าจากแฟ้ม manifest

http://www.thaiall.com/pwa/

http://www.thaiall.com/web2/

https://github.com/kongruksiamza/PWATutorial/

เพื่อนสายเดฟส่งคำถามมา

ผมมีเพื่อนสายเดฟ ที่เราทำงานคล้ายกันมาก วันหนึ่งเค้าส่งคำถามเข้ามาทางไลน์ เรื่อง java script และ ebook มีความเป็นมา คือ ต้องการสร้างแคตตาล็อกสินค้า ที่คลิ๊กเลือกสินค้าในแคตตาล็อกได้ พบว่า การทำงานใน desktop ส่งข้อมูลได้ปกติ แต่เมื่อใช้งานใน mobile กลับไม่ตอบสนอง สรุปคือ บน mobile ไม่มีการส่งข้อมูลออกไป ให้กับ server-sided script เพื่อนำไปประมวลผลต่อ

ipages desktop
ipages desktop

ปัญหา คือ คลิ๊กรายการแล้ว
แต่ไม่มีการตอบสนองจากภายในแคตตาล็อก
เข้าไปตรวจ java script พบว่า
ถ้าไม่เรียกใช้ e.preventDefault(); และ e.stopPropagation();
ก็จะทำงานบน Mobile ได้เหมือนกับทำงานบน Desktop
ไม่มีการปิดการทำงานของ mouse click แต่อย่างใด
ที่เล่ามานี้กำลังพูดถึง ipages flipbook
ที่มีรุ่นทำงานบน WordPress และ JQuery Plugin
ซึ่งนำโค้ดไปใช้งาน
บน http://www.thaiall.com/e-book/

ทดสอบ code กับหนังสือหลายเล่ม ทั้งของเพื่อนที่ฝากแก้โค้ด ของ Peter rabbit แต่งโดย Beatrix Potter ที่เป็น demo ของผู้พัฒนาโค้ด แล้วมาจบที่ eduzones magazine ฉบับพิเศษ (special issue) เล่มนี้มี 32 หน้า ผมเคย scan ไว้นานแล้ว ความละเอียดประมาณ 900px * 1200px ซึ่งไม่ใหญ่ และไม่เล็กเกินไป พออ่านออก พบว่า code ทำงานได้รวดเร็ว ต่างกับ flash version ที่เคยเป็นระบบเดิมของ ebook ที่เคยทำไว้เมื่อสิบกว่าปีที่แล้ว แต่ก็ต้องลมไปทั้งระบบ และ code ชุดนี้ถือว่าน่าสนใจ เพราะสามารถทำงานร่วมกับโค้ดภายนอกได้โดยง่าย และ code ก็เป็น open source ที่อ่านง่าย ไม่ยาวเกินไป

ข้อมูล magazine.eduzones.com ใน archive.org

Eduzones Magazine สุดยอดหนังสือด้านการศึกษา

ศูนย์ข่าวการศึกษาแห่งอนาคต ฟรีนิวส์

โดนเพื่อน defend เจอดีเลย

วลีที่ได้ยินบ่อยจนชินหู
“ภาพหนึ่งภาพแทนคำนับพัน”
“A picture is worth a thousand words.”

พบ .. ขอเริ่มต้นการรวบรวมการตอบแบบฟอร์ม

[ความเป็นมานั้น]
เหตุเกิดจาก วันหนึ่ง
ช่วงจวนเจียนจะสอบกลางภาคแล้ว
ก็ต้องออกข้อสอบ และสร้างแบบสอบ
รอบนี้สร้างแบบสอบออนไลน์ผ่าน google form
เพราะระบบนี้มี function มากมายที่รองรับความต้องการ
ผู้เข้าสอบต้องเขียนบนกระดาษ ถ่ายภาพ และปรับแสง
แล้วอัพโหลดขึ้นมาตามระบบ ด้วยชื่อแฟ้มที่เป็นระเบียบ
ระบบจะสำรองกระดาษคำตอบหลายชั้น
จากการทดสอบใช้งานมา 3 รอบ
พบว่าใช้งานได้ดีไม่มีปัญหา สำหรับผู้ที่เข้าซ้อมสอบ

[และแล้วก็พบปัญหา]
คาดไม่ถึง สตั้นไปแป๊ปนึง
เพราะมีเพื่อนที่ต้องการจะ defend ข้อสอบ
ผมก็ส่งข้อมูลลิงค์แบบสอบ google form ให้
เพื่อนบอกว่า “เปิดไม่ได้”
ผมก็ตกใจ อึ้งไปแป๊ปนึง
เพราะทำแบบนี้ทุกปี
คือ นำแบบสอบเดิม มาเลือก Make a copy
เปลี่ยนโจทย์ และชื่อแฟ้ม แล้วสร้าง Shorten URL
จากนั้นก็เขียนโพสต์ชี้แจง พร้อมแนบ link

https://www.thaiall.com/google/form.htm

[ตรวจสอบข้อความแจ้งเตือน]
พบว่า Shorten URL ที่สร้างไว้ ไม่เคยถูกเรียกใช้
ซึ่งแบบฟอร์มนี้ เป็นแบบรับแฟ้มที่อัพโหลด upload
แต่ไม่เคยสร้าง Folder สำหรับแฟ้มคำตอบไว้
จึงต้องคลิ๊ก Resume collecting responses
แปลว่า “ขอเริ่มต้นการรวบรวมการตอบแบบฟอร์ม”

[ปัญหานี้ไม่น่ากลัว]
ถ้าผู้สร้างแบบสอบ คือ owner หรือ editor เป็นคนพบ
ก็เพียงแต่คลิ๊กเพื่อเปิดการใช้ นั่นคือ วิธีแก้ปัญหา
แต่สำหรับผู้เข้าทำแบบสอบ
จะต้องแจ้งให้ ผู้สร้างแบบสอบ เป็นคนแก้ไข
เพราะลำพังสิทธิ์ของผู้เข้าสอบ จะไม่สามารถดำเนินการได้
ที่เล่ามา คือ การอธิบายภาพนี้ครับ .. ok นะ

Header background ของ Google form

ตรวจสอบความผิดพลาดในเว็บเพจใด ๆ หรือทั้งไซต์ก็ได้

ใน #ห้องเรียนแห่งอนาคต
เด็ก ๆ ที่มีแหล่งเผยแพร่ของตนเอง
จะตรวจสอบได้ว่า เครือข่ายที่เชื่อมโยงไว้เสียหายหรือไม่
ใช้บริการฟรี คลิ๊กไม่กี่ทีก็ตรวจสอบได้แล้ว
เมื่อแก้ไขสำเร็จเสร็จสิ้นลง
ก็จะมีความสุขที่ลิงค์ฟื้นคืนชีพขึ้นมาใหม่
และแชร์เรื่องราวในแบบที่ตนเองสนใจต่อไป

http://www.thaiall.com/web2/

ที่ deadlink . com มีบริการตรวจสอบ dead link ของทั้งเว็บไซต์ (whole website) หรือเฉพาะเว็บเพจหน้าหนึ่ง (​single webpage) ถ้าลิงค์ใดที่ร้องขอไปแล้ว ตอบกลับด้วยรหัส 404 แสดงว่าไม่พบเว็บเพจที่ร้องขอ จากนั้นจะเป็นหน้าที่ของผู้พัฒนาเว็บเพจ ที่ต้องเปลี่ยน หรือลบลิงค์นั้นออกจากเว็บเพจ

เมื่อ 8 กุมภาพันธ์ 2565 มีโอกาสนำโฮมเพจ KM มาปัดฝุ่นในส่วนของ dead link โดยเข้าไปใช้บริการตรวจลิงค์เสียหาย แล้วพบจำนวนลิงค์ที่ไม่เสีย 250 รายการ แต่อีก 13 เสียหาย จึงเข้าตรวจสอบและซ่อมแซมทีละลิงค์ ซึ่งความเสียหายที่พบมี 5 ประเภท คือ File Not found , Server Not found , Fobidden , Internal Server Error และ Timeout เมื่อตรวจในรายละเอียด พบว่า ผู้ให้บริการเปลี่ยนเป็น https หรือ บางลิงค์ต้องเข้าซ้ำจึงจะเข้าได้ อาจเป็นเพราะเครื่องบริการตอบสนองช้าเกินกำหนด จึงไม่ทันใจก็เป็นได้

พบภาพแตกที่มุมล่างซ้าย และไม่ใช่ภาพของเรา

simpli.fi

มีอยู่วันหนึ่ง กำลังอัพเกรดระบบไปหลายเรื่อง
พอใกล้จะเสร็จ เตรียมไปนอนหลับพักผ่อน
ได้สังเกตหน้าเว็บเพจอย่างตั้งใจกว่าเดิม
ชำเรืองไปเห็น ปัญหาเข้าให้
พบ ภาพแตก อยู่ที่มุมล่างซ้าย
เปิดภาพดู พบ url ที่ไม่ใช่ของเรา
เอา url ไปค้น พบคำแนะนำว่าเป็น ผู้ร้าย
แนะวิธีการจัดการมาสารพัดเครื่องมือ
ผมเข้าด้วย regedit และ clear ทุกอย่างแล้ว
แต่ภาพแตกก็ไม่หายไปจาก browser
ระหว่างค้นก็แอบสงสัยว่า
ทำไมคนพบปัญหานี้ไม่มากอย่างที่ควร และเก่ามาก
ส่วนวิธีแก้ไขก็ใช้การไม่ได้ ดังที่เค้าเล่ามา
สุดท้าย ยอมแพ้ไปในยกที่หนึ่ง เพราะดึกมากแล้ว

https://www.thaiall.com/web2/umsimpli5.htm

พอไปนอกพัก
นอนไม่หลับ หยิบโทรศัพท์มาเปิดดูหน้าเจ้าปัญหา
พบว่า บนอุปกรณ์ของเราก็พบภาพแตกเช่นกัน
แสดงว่าไม่ใช่ข้อบกพร่อง
ที่ browser หรือเครื่องในบ้านแล้ว
คงเป็นที่ โค้ดของเรา หรือ เครื่องโฮสมีปัญหา
จึงไปส่อง code ในเว็บเพจหน้าหนึ่ง
ค่อย ๆ แกะออกทีละส่วน
ผมแบ่งเป็น 5 ส่วน
สุดท้ายก็พบว่า มาจาก histats.com นั่นเอง
ใจชื่นขึ้น เพราะไม่น่ากังวลแบบที่คาดไว้

สรุปว่า เราไปใช้บริการของเค้าฟรี
ใช้พื้นที่เก็บข้อมูล ใช้ระบบของเค้าเยอะเลย
เค้าก็ส่งอะไรบางอย่างที่เราคาดไม่ถึง
เชื่อมไป 2 ไซต์ที่เราไม่รู้จัก คือ umsimplifi กับ lijitcom
ซึ่งเป็นบริการเกี่ยวกับ
adding value to your business’ marketing efforts
ที่อ่านมาจาก confectionio

เมื่อไปค้นดูสถิติ
พบเพื่อนคนไทยใช้บริการมากกว่า 2000 เว็บไซต์
ทั้ง โรงเรียน มหาวิทยาลัย อบต. กระทรวง ไปจนถึงกองทัพ
ซึ่งภาพแตกที่มุมล่างซ้ายนี่
ถ้ามองข้ามไป แล้วใช้บริการเก็บสถิติของเค้าก็ทำได้
แต่ถ้ากังวลด้วยเหตุผลต่าง ๆ
ก็เพียงแต่หยุดใช้บริการของเค้า
เพียงเท่านี้ภาพแตกก็จะหายไป
สำหรับผม ยังใช้บริการในไซต์หลักของผมต่อไป

เปลี่ยน php version ใน apache handlers

apache handlers

20220202 วันนี้มีเรื่องเล่า กรณีปัญหาจาก thainame . net ที่เกิดขึ้นเมื่อหลายวันก่อน คือ wordpress บน hosting ของผมตัวหนึ่ง down ไปพักหนึ่ง เพราะมีการย้ายเครื่องบริการ ตามแผน Maintainance ของผู้ให้บริการที่ผมไปเช่าเค้าอยู่ ซึ่งเข้าใจในสิ่งที่เค้าต้องทำ ต่อมามีโอกาสเข้าไปตรวจสอบเพื่อแก้ไข ได้ควานหาปัญหาจาก code ของ wordpress ว่าปัญหาเกิดจากจุดใดอยู่พักหนึ่ง หาว่าทำไมเปิด blog ขึ้นมาแล้ว ถึง redirect ไป url ที่มีชื่อ host ที่ผมไม่ได้กำหนดขึ้นมาแทนที่ ปัญหาอยู่ตรงที่ ระบบบล็อกรีไดเร็คไปยังที่อยู่ใหม่ที่ผิดพลาด ต่อมา พบตำแหน่งใน code จึงรู้ต้นเหตุว่าในระบบฐานข้อมูล ในตาราง options พบระเบียนที่เก็บข้อมูล WordPress Address (URL) และ Site Address (URL) มีค่าเปลี่ยนไป จึงใช้ phpmyadmin เข้าไปเปลี่ยนกลับให้ถูกต้อง ก็พบว่า blog กลับมาใช้งานได้ปกติ

แล้วตัวผมเองก็มีความต้องการใหม่ขึ้นมา คือ อยากอัพเกรด theme ใหม่ แต่ระบบเตือนว่ารุ่นของ php เป็น 5.6 ซึ่งเก่าแล้ว เมื่อเข้าไปเปลี่ยนเป็น php 7.4 ผ่าน php selector ใน cpanel ซึ่งเป็นตัวเลือกสูงสุดที่มีให้ใช้งานได้ แต่ถ้าจะใช้ php 8.1 ต้องเข้า upgrade แบบเสียค่าใช้จ่าย ผลการเปลี่ยนแปลงใน cpanel ไม่พบปัญหา และใน control panel แสดงเป็น 7.4 ตามที่เปลี่ยนไป แต่ปัญหาอยู่ตรงที่ เปลี่ยนเป็น 7.4 แล้วแต่ phpinfo ยังแสดง php 5.6 อยู่ นั่นหมายความว่า ผมเขียน code ด้วย php และทำงานได้ แต่ตัวแปลภาษายังเป็นรุ่น 5.6 เช่นเดิม นั่งทำใจค้นข้อมูลอยู่เกือบสัปดาห์หนึ่ง มีคนบ่นใน community ของผู้ให้บริการเหมือนผม แต่ไม่มีคำตอบที่น่าพึงพอใจ แล้ววันหนึ่งตอนที่สมองโล่งหน่อย ก็เข้าไปตรวจใน apache handlers เพียงไม่นาน พบว่า เรากำหนดได้ว่าสกุล php จะใช้ application ใด แล้วผมก็เปลี่ยนจาก 5.6 เป็น 7.4 ณ ตำแหน่งนี้ สรุปว่า ตรวจสอบด้วย phpinfo และเขียน code php พบว่าทำงานด้วย 7.4 ตามที่ต้องการแล้ว

site address