WARIN / RESEARCH
eLearning Forum Asia 2025 · Inclusive AI education

VisualRight: A Web-Native Interactive Playground to Democratize AI Literacy through Visualization and Simulation

AI becomes learnable when students can see a concept move, test it, and receive feedback immediately.

VisualRight ทำให้แนวคิด AI ที่เป็นนามธรรมกลายเป็นสิ่งที่ผู้เรียนทดลองได้ด้วยตนเอง ผ่านภาพ การจำลอง และ feedback แบบทันที โดยไม่ตั้งเงื่อนไขว่าต้องเขียนโปรแกรมเป็นก่อน

2025Punnapa Thianchai, Awirut Phusaensaart, Jittapat Chanyarungroj, Pirun Dilokpatpongsa, Warin Wattanapornprom, and Wittawin Susutti
Research questionคำถามวิจัย

The problem beneath the interface

โจทย์ที่อยู่เบื้องหลังระบบ

AI literacy is increasingly necessary, yet foundational concepts remain inaccessible to many non-programmers. Static instruction often explains the result while hiding the mechanism learners need to understand.

VisualRight ทำให้แนวคิด AI ที่เป็นนามธรรมกลายเป็นสิ่งที่ผู้เรียนทดลองได้ด้วยตนเอง ผ่านภาพ การจำลอง และ feedback แบบทันที โดยไม่ตั้งเงื่อนไขว่าต้องเขียนโปรแกรมเป็นก่อน

The project is important because it does not treat the algorithm as an isolated demonstration. It asks how data, representation, computation, interface, and evaluation must work together before a technical idea becomes a useful research contribution.

จุดสำคัญของงานนี้คือไม่ได้มองอัลกอริทึมเป็นเพียงตัวอย่างแยกส่วน แต่ศึกษาว่าข้อมูล การแทนความรู้ การคำนวณ ส่วนติดต่อ และการประเมินผล ต้องทำงานร่วมกันอย่างไรจึงจะเกิดเป็นผลงานวิจัยที่มีคุณค่าและนำไปต่อยอดได้

Intellectual contributionคุณูปการทางวิชาการ

What this work adds to the conversation

งานนี้เพิ่มอะไรให้กับองค์ความรู้

AI becomes learnable when students can see a concept move, test it, and receive feedback immediately. The contribution is the complete research argument connecting a real problem to a computational design and then testing whether that design produces meaningful evidence. Familiar techniques become research when their selection, combination, implementation, and evaluation reveal something that was not previously clear.

คุณูปการของงานอยู่ที่การเชื่อมปัญหาจริงเข้ากับการออกแบบเชิงคำนวณ และตรวจสอบว่าการออกแบบนั้นสร้างหลักฐานที่มีความหมายหรือไม่ เทคนิคที่คุ้นเคยสามารถเป็นงานวิจัยได้เมื่อการเลือก การผสาน การพัฒนา และการประเมินช่วยเปิดเผยความเข้าใจใหม่อย่างชัดเจน

AI becomes learnable when students can see a concept move, test it, and receive feedback immediately.
VisualRight ทำให้แนวคิด AI ที่เป็นนามธรรมกลายเป็นสิ่งที่ผู้เรียนทดลองได้ด้วยตนเอง ผ่านภาพ การจำลอง และ feedback แบบทันที โดยไม่ตั้งเงื่อนไขว่าต้องเขียนโปรแกรมเป็นก่อน
Method journeyเส้นทางวิธีวิจัย

From research question to a testable system

จากคำถามวิจัยสู่ระบบที่ทดสอบได้

01
Design modular lessons in algorithms, image processing, and reinforcement learning

ขั้นตอนที่ 1 ทำหน้าที่เชื่อมข้อมูลหรือแนวคิดเข้าสู่กระบวนการทดลอง เพื่อให้ผลลัพธ์ตรวจสอบและอธิบายได้

02
Build a serverless, mobile-compatible web architecture

ขั้นตอนที่ 2 ทำหน้าที่เชื่อมข้อมูลหรือแนวคิดเข้าสู่กระบวนการทดลอง เพื่อให้ผลลัพธ์ตรวจสอบและอธิบายได้

03
Use visualization and hands-on simulation

ขั้นตอนที่ 3 ทำหน้าที่เชื่อมข้อมูลหรือแนวคิดเข้าสู่กระบวนการทดลอง เพื่อให้ผลลัพธ์ตรวจสอบและอธิบายได้

04
Embed real-time formative assessment and adaptive feedback

ขั้นตอนที่ 4 ทำหน้าที่เชื่อมข้อมูลหรือแนวคิดเข้าสู่กระบวนการทดลอง เพื่อให้ผลลัพธ์ตรวจสอบและอธิบายได้

05
Conduct a mixed-methods evaluation with high-school and undergraduate learners

ขั้นตอนที่ 5 ทำหน้าที่เชื่อมข้อมูลหรือแนวคิดเข้าสู่กระบวนการทดลอง เพื่อให้ผลลัพธ์ตรวจสอบและอธิบายได้

Technical anatomyกายวิภาคของระบบ

Five design decisions that hold the study together

ห้าการตัดสินใจที่ทำให้งานวิจัยเชื่อมเป็นระบบเดียว

Design modular lessons in algorithms, image processing, and reinforcement learning

This stage defines the evidence base. Its quality controls what the system can learn and what the final claim can legitimately cover.

ส่วนนี้กำหนดว่าระบบรักษาข้อมูลอะไร ลดความกำกวมอย่างไร เพิ่มต้นทุนด้านใด และอาจเกิดความผิดพลาดในเงื่อนไขใด การอ่านงานวิจัยจึงต้องมองทั้งสิ่งที่วิธีนี้ทำได้และสิ่งที่วิธีนี้เลือกไม่เก็บไว้

Build a serverless, mobile-compatible web architecture

This is the representation decision: raw observations become signals an algorithm can compare, classify, estimate, or optimize.

ส่วนนี้กำหนดว่าระบบรักษาข้อมูลอะไร ลดความกำกวมอย่างไร เพิ่มต้นทุนด้านใด และอาจเกิดความผิดพลาดในเงื่อนไขใด การอ่านงานวิจัยจึงต้องมองทั้งสิ่งที่วิธีนี้ทำได้และสิ่งที่วิธีนี้เลือกไม่เก็บไว้

Use visualization and hands-on simulation

Here the central computational idea is implemented. The value lies in how the method is adapted to the research question, not merely in naming an algorithm.

ส่วนนี้กำหนดว่าระบบรักษาข้อมูลอะไร ลดความกำกวมอย่างไร เพิ่มต้นทุนด้านใด และอาจเกิดความผิดพลาดในเงื่อนไขใด การอ่านงานวิจัยจึงต้องมองทั้งสิ่งที่วิธีนี้ทำได้และสิ่งที่วิธีนี้เลือกไม่เก็บไว้

Embed real-time formative assessment and adaptive feedback

This stage turns model output into an interaction, recommendation, prediction, simulation, or decision that a person can inspect and use.

ส่วนนี้กำหนดว่าระบบรักษาข้อมูลอะไร ลดความกำกวมอย่างไร เพิ่มต้นทุนด้านใด และอาจเกิดความผิดพลาดในเงื่อนไขใด การอ่านงานวิจัยจึงต้องมองทั้งสิ่งที่วิธีนี้ทำได้และสิ่งที่วิธีนี้เลือกไม่เก็บไว้

Conduct a mixed-methods evaluation with high-school and undergraduate learners

Evaluation reconnects the technical artifact to the original question. Metrics, user evidence, and error patterns determine how far the conclusion can travel.

ส่วนนี้กำหนดว่าระบบรักษาข้อมูลอะไร ลดความกำกวมอย่างไร เพิ่มต้นทุนด้านใด และอาจเกิดความผิดพลาดในเงื่อนไขใด การอ่านงานวิจัยจึงต้องมองทั้งสิ่งที่วิธีนี้ทำได้และสิ่งที่วิธีนี้เลือกไม่เก็บไว้

Evidence summaryสรุปหลักฐาน

What the study supports

ข้อสรุปที่หลักฐานรองรับ

01Participants reported high usability and strong engagement.ผลลัพธ์ลำดับที่ 1 แสดงความเชื่อมโยงระหว่างการออกแบบระบบกับหลักฐานที่สังเกตได้ โดยต้องตีความภายในขอบเขตของชุดข้อมูล ผู้เข้าร่วม และเงื่อนไขการทดลอง
02Quantitative and qualitative evidence indicated improved conceptual understanding.ผลลัพธ์ลำดับที่ 2 แสดงความเชื่อมโยงระหว่างการออกแบบระบบกับหลักฐานที่สังเกตได้ โดยต้องตีความภายในขอบเขตของชุดข้อมูล ผู้เข้าร่วม และเงื่อนไขการทดลอง
03Open access, mobile compatibility, and accessibility-oriented design extend the platform’s potential reach.ผลลัพธ์ลำดับที่ 3 แสดงความเชื่อมโยงระหว่างการออกแบบระบบกับหลักฐานที่สังเกตได้ โดยต้องตีความภายในขอบเขตของชุดข้อมูล ผู้เข้าร่วม และเงื่อนไขการทดลอง
Research interpretationการตีความงานวิจัย

The metric is the beginning of the explanation

ตัวเลขคือจุดเริ่มต้นของคำอธิบาย

The reported results matter because they show that the proposed system can work under the study conditions. The deeper value is explanatory: the study identifies which representation and workflow made the outcome possible, where the approach is likely to transfer, and what uncertainty remains. That makes the work useful to researchers, developers, educators, and students designing the next experiment.

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

For researchers

A reproducible starting point for comparison, ablation, and extension.

จุดเริ่มต้นสำหรับการทำซ้ำ เปรียบเทียบ และแยกวิเคราะห์องค์ประกอบของวิธี

For practitioners

A concrete architecture plus a clear warning about the boundary between prototype evidence and deployment.

สถาปัตยกรรมที่จับต้องได้ พร้อมขอบเขตระหว่างหลักฐานจากต้นแบบกับการนำไปใช้จริง

For educators

A case showing how a student project can connect domain need, algorithm, product thinking, and evaluation.

กรณีศึกษาที่เชื่อมโจทย์จริง อัลกอริทึม การคิดเชิงผลิตภัณฑ์ และการประเมินผล

For students

Proof that a focused question and a carefully evaluated system can develop into scholarly work.

ตัวอย่างว่าคำถามที่ชัดและระบบที่ประเมินอย่างรอบคอบสามารถพัฒนาเป็นผลงานวิชาการได้

Evidence boundaryขอบเขตของหลักฐาน

Read the result at the right scale

อ่านผลลัพธ์ให้พอดีกับขอบเขต

Perceived learning and short evaluation outcomes do not establish long-term retention. Future studies should include pre/post instruments, comparison groups, and broader learning contexts.

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

Student research tracksเส้นทางวิจัยสำหรับนักศึกษา

Four credible ways to continue

สี่ทิศทางที่ต่อยอดเป็นงานวิจัยได้จริง

Each direction changes one meaningful assumption and can become a prototype, an experiment, and a defensible contribution. Students can begin with reproduction, document the baseline, then introduce one carefully justified change.

แต่ละทิศทางเปลี่ยนสมมติฐานสำคัญเพียงหนึ่งส่วน และสามารถพัฒนาเป็นต้นแบบ การทดลอง และคุณูปการที่อธิบายได้ นักศึกษาสามารถเริ่มจากการทำซ้ำ สร้าง baseline ที่ชัด แล้วจึงเพิ่มการเปลี่ยนแปลงที่มีเหตุผลรองรับ

01 · Run a controlled learning-gain study
02 · Publish reusable lesson modules
03 · Add teacher analytics with privacy controls
04 · Evaluate low-bandwidth classrooms
Lab fitเหมาะกับนักศึกษาแบบไหน

You do not need a finished idea to begin

ไม่ต้องมีไอเดียที่สมบูรณ์จึงจะเริ่มได้

Curious builder

You enjoy turning a question into a working system and learning where it breaks.

คุณชอบเปลี่ยนคำถามให้เป็นระบบที่ทำงานได้ และอยากรู้ว่าระบบจะพลาดตรงไหน

Careful experimenter

You want to compare alternatives fairly and explain more than a headline score.

คุณอยากเปรียบเทียบทางเลือกอย่างเป็นธรรม และอธิบายได้มากกว่าคะแนนสูงสุด

Domain translator

You see a problem in education, finance, media, society, or industry that technology could clarify.

คุณเห็นปัญหาในด้านการศึกษา การเงิน สื่อ สังคม หรืออุตสาหกรรมที่เทคโนโลยีช่วยทำให้ชัดขึ้นได้

Future researcher

You want experience moving from literature and prototype to evaluation and scholarly communication.

คุณอยากมีประสบการณ์ตั้งแต่ทบทวนวรรณกรรม สร้างต้นแบบ ประเมินผล ไปจนถึงสื่อสารทางวิชาการ

Publication recordข้อมูลการตีพิมพ์

Research metadata

ข้อมูลบรรณานุกรมของงานวิจัย

APAPunnapa Thianchai, Awirut Phusaensaart, Jittapat Chanyarungroj, Pirun Dilokpatpongsa, Warin Wattanapornprom, and Wittawin Susutti (2025). VisualRight: A Web-Native Interactive Playground to Democratize AI Literacy through Visualization and Simulation. eLearning Forum Asia 2025.IEEEP. Thianchai, Awirut Phusaensaart, Jittapat Chanyarungroj, Pirun Dilokpatpongsa, Warin Wattanapornprom, Wittawin Susutti, “VisualRight: A Web-Native Interactive Playground to Democratize AI Literacy through Visualization and Simulation,” eLearning Forum Asia 2025, 2025.BibTeX@inproceedings{thianchai2025visualright, title={VisualRight: A Web-Native Interactive Playground to Democratize AI Literacy through Visualization and Simulation}, author={Punnapa Thianchai and Awirut Phusaensaart and Jittapat Chanyarungroj and Pirun Dilokpatpongsa and Warin Wattanapornprom and Wittawin Susutti}, booktitle={eLearning Forum Asia 2025}, year={2025} }

Locate the indexed record on Google Scholarค้นหาระเบียนบน Google Scholar

Research FAQ

Questions worth asking before the next experiment

คำถามที่ควรถามก่อนเริ่มการทดลองถัดไป

What is genuinely contributed?

The contribution is the relationship among the problem, representation, method, system, and evidence—not the algorithm name alone.

คุณูปการอยู่ที่ความสัมพันธ์ระหว่างโจทย์ การแทนข้อมูล วิธีการ ระบบ และหลักฐาน ไม่ใช่เพียงชื่ออัลกอริทึม

Can the metric be compared directly?

Only when datasets, splits, preprocessing, labels, and evaluation protocols are comparable.

เปรียบเทียบโดยตรงได้เมื่อชุดข้อมูล การแบ่งข้อมูล การเตรียมข้อมูล นิยาม label และวิธีประเมินใกล้เคียงกัน

Is it deployment-ready?

The study provides validated direction. Deployment adds privacy, monitoring, maintenance, distribution shift, and operational risk.

งานนี้ให้ทิศทางที่ผ่านการตรวจสอบระดับหนึ่ง การใช้งานจริงยังต้องพิจารณาความเป็นส่วนตัว การติดตาม การบำรุงรักษา data shift และความเสี่ยงเชิงปฏิบัติการ

Where should reproduction start?

Rebuild the smallest end-to-end baseline, match the original evaluation, and analyze errors before adding complexity.

เริ่มจาก baseline แบบ end-to-end ที่เล็กที่สุด ทำวิธีประเมินให้ตรง และวิเคราะห์ข้อผิดพลาดก่อนเพิ่มความซับซ้อน

Build the next resultสร้างผลลัพธ์ถัดไป

Join a lab where student work moves from question to publication.

เข้าร่วมพื้นที่ที่พางานนักศึกษาจากคำถามไปสู่ผลงานตีพิมพ์

Bring a difficult question, a domain you care about, or the willingness to test an idea properly.

นำคำถามที่ท้าทาย ปัญหาที่คุณสนใจ หรือความตั้งใจที่จะทดสอบไอเดียอย่างจริงจังเข้ามา

Talk to the labรู้จักห้องปฏิบัติการ