20240718-24 Web EJS beta Workshop by Francisco Esquembre and Félix J. García Clemente supported by MOE CPDD1 (18-24 July 2024)
Insights from the webEJS Workshop
From July 18 to 24, 2024, we had the privilege of organizing the webEJS Workshop, an exceptional event aimed at empowering HQ educators to create interactive simulations and educational games. Led by Full Professors Francisco Esquembre and Félix J. García Clemente, the creators of webEJS and thought-leaders in interactive learning, this five-day workshop offered a deep dive into the potential of the webEJS platform. It showcased the platform’s versatility in transforming participants' ideas and concepts into dynamic digital simulations.
What is webEJS?
webEJS, short for Web-based Easy JavaScript Simulations, is a powerful webtool that enables educators to develop interactive content across a broad spectrum of subjects. Whether it’s physics, mathematics, or other disciplines, webEJS offers the flexibility to design simulations or games that make learning more engaging and accessible. Its user-friendly interface, combined with the ability to produce high-quality educational resources, makes webEJS a go-to platform for educators looking to enhance their resource development development skillsets.
Highlights from the Workshop
The workshop blended theory, hands-on practice, collaborative learning, and close consultation-mentoring. Some key highlights include:
-
Understanding the Basics: The workshop kicked off with an introduction to the fundamentals of webEJS, breaking down the software's essential components and interface into manageable segments. This session was invaluable for newcomers, providing a solid foundation for the rest of the workshop.
-
Creating-Customizing Simulations: One of the workshop’s most exciting aspects was the hands-on sessions where participants had the opportunity to create and customize their simulations. From simple models to complex, interactives, these sessions demonstrated how webEJS could be tailored to meet specific educational needs. Participants successfully created or customized 26 simulations during these 5 days.
-
Collaboration and Sharing: The workshop underscored the importance of collaboration within the educational community. Participants were encouraged to share their creations and insights, fostering a community of practice where educators can learn from each other’s experiences. The use of collaborative tools Padlet uploads and seating near each other for similar simulation allow them to learn from each other and learning together, that further enhanced this experience.
A Focus on Practical Application
Throughout the workshop, the emphasis remained on practical application. Each daily session was designed not only to teach participants how to use webEJS but also to inspire them to think and work using WebEJS and GenAI tools that could be applied in their specific work settings. Whether it was crafting a simulation or a game, the possibilities were limitless. Existing templates played a crucial role in scaffolding and motivating participants, allowing them to contribute actively to shaping the interactive resources they were developing.
Pedagogical Impact of webEJS on Education: A Vision for the 22nd Century Curriculum and EdTech MasterPlan 2030
As we look ahead to the Curriculum of the 22nd Century, where the skills of tomorrow are cultivated today, the webEJS platform stands out as a valuable tool within the EdTech MasterPlan 2030.
Strategic thrust 1: Greater customisation of students’ learning, as evident when educators go about to customise simulation and games to each subject and topic.
Strategic thrust 2: Strengthen development of students’ digital literacy and technological skills, where WebEJS with GenAI like https://chatgpt.com/ (best general AI) and https://claude.ai/ (best coder) can be used by students to edit exisiting simulation like what the participants did.
Strategic thrust 3: Empower development of students’ 22nd Century Competencies (22CC), where WebEJS can be used by students and teachers as a pedagogical tool, to edit exisiting simulation like what the participants did.
Strategic thrust 4: Strengthen school and department culture of collaboration and EdTech practices, sharing their customised EJS on open platforms lower the barriers to learn across school systems.
Strategic thrust 5: Strengthen teachers’ EdTech practice, where participants productively struggled to learn how to create/customise simulations with GenAI like https://chatgpt.com/ (best general AI) and https://claude.ai/ (best coder)
The workshop underscored the revolutionary potential of webEJS in reshaping educational practices, particularly in STEM education. In a future where interactive learning is key to comprehension and retention, webEJS serves as a critical tool for cultivating the competencies required for the challenges of the 22nd century. It aligns perfectly with the goals of the EdTech MasterPlan 2030, which seeks to integrate advanced technological tools into education to foster a generation of learners who are not only knowledgeable but also agile, adaptive, and prepared for the future.
WebEJS is more than just an open platform—it is a bridge to the future of education, where learning is interactive, immersive, and intimately connected to the skills and knowledge needed in the 22nd century.
Conclusion
The webEJS Beta Workshop was an eye-opening experience, showcasing the transformative power of technology in education—especially when combined with tools like GenAI to assist with coding and custom functions. As we continue to explore and develop new ways to engage students, platforms like webEJS, along with tools such as GeoGebra and Scratch, will play a crucial role in advancing educational technology. For anyone interested in this field, the workshop provided an invaluable opportunity to learn, create, and connect with like-minded educators.
I look forward to seeing more officers in your division applying the skills and insights gained from this workshop in their resource development efforts. I highly recommend webEJS to those looking to elevate their resource development skills to the next level.
Total of 28 EJS was catalogued!
- Project 27: WebEJS workshop Cloze Passage on Connectors Pre U by Jack Kie
- Project 26: WebEJS workshop Newtons Mountain with Escape Velocity Inquiry with_by Kelvin Project 24b: WebEJS workshop Slide and Ladder Game to learn Add and Subtract with added option for dice value of 10 by Geok Cheng Project 24: WebEJS workshop Multiplication Tables by Huey Ming and Geok Cheng Project 23: WebEJS workshop Art Simulator Color Painting for Exploring the Pixly by YT Project 22: WebEJS workshop Future Game Template with Keyboard control added by Sheryl Project 21: WebEJS workshop Economics Marginal Cost-Marginal Revenue MCMR Graph by Christabelle Project 20: WebEJS workshop Vector Addition by Chia Yi Project 19: WebEJS workshop Solve the linear equation by DesK Project 18: WebEJS workshop Music Playing Game by Angela Project 17: WebEJS workshop Particle Model for 3 States of Matter (Solid, Liquid and Gas) Designed for G1 Science by Kuangji Project 16: WebEJS workshop Transit Planner Simulator for Geography by En Qi Project 15: WebEJS workshop 21CC Navigator Gem Matching Game Game by Joseph Project 14: WebEJS workshop Let's Avoid Sea Pollution! Game by Ai Hua Project 13b: WebEJS workshop Nouns to Picture Chicken Rice - Match the apron, rag, spoon, bowl, clogs and plate Game by Cabrina Project 13: WebEJS workshop Stars Of Chek Jawa Interactive Video based interactive by Cabrina Project 12: WebEJS workshop Simple Present Tense Video based interactive by HuayLee Project 11: webEJS workshop Game for Tamil words by Vetha Project 10: Cam and follower EJS Simulation: Cam with Different Shapes and Offsets by Reagan and ZS Project 8: webEJS workshop R0 Infection Model JavaScript Simulation Applet HTML5 by Hazel Project 6: webEJS workshop GeoBoard JavaScript Simulation Applet HTML5 by Margaret Project 5b: webEJS workshop 18 cards matching game correct after 3 clicks template JavaScript Simulation Applet HTML5 by Karen Project 5: webEJS workshop Balancing Chemistry Equation JavaScript Simulation Applet HTML5 with option 11 and 12 added by Karen Project 4: WebEJS workshop Help Cimi Eat the Correct Fish Game by Nor Azlin Project 3: webEJS workshop Game for Chinese words by Tan ZL Project 2b: webEJS workshop Game for Chemistry Ions matching Chemical Name by Winnie Project 2: webEJS workshop Game for F21 Searching Engine and Keywords for Digital Literacy by Kymberly Project 1: webEJS workshop Simulator for 555_Timer_Integrated_Circuit by Lisa
Program:
Dates: July 18th-24th, 2024
Venue: MOEHQ Buona Vista, B3-02 (18 July) P2-01-02 (19,22,23,24 July) or
Contact organisers at This email address is being protected from spambots. You need JavaScript enabled to view it.
- Open Source Physics Singapore Library: https://iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/979-horizontal-spring-dynamics
- Science: https://iwant2study.org/ospsg/index.php/interactive-resources/sciences
- Math: https://iwant2study.org/ospsg/index.php/interactive-resources/mathematics
- Physics: https://iwant2study.org/ospsg/index.php/interactive-resources/physics
- Chemistry: https://iwant2study.org/ospsg/index.php/interactive-resources/chemistry
- Biology: https://iwant2study.org/ospsg/index.php/interactive-resources/biology
- ELL English Literature Examples: https://iwant2study.org/ospsg/index.php/interactive-resources/english
- MTL Mother tongue Examples: https://iwant2study.org/ospsg/index.php/interactive-resources/mother-tongue-languages
- USA Open Source Physics https://www.compadre.org/osp/items/detail.cfm?ID=15448
- https://weelookang.blogspot.com/2024/04/tutorial-1-for-workshop-18-24-july.html?m=1 WebEJS tutorial 1 Familiarisation of interface and use AI to help coding
- https://iwant2study.org/ospsg/index.php/events/883-20190219-sls-hackathon-etd-cpdd Old Tutorial for Game
- suggested template https://webejs.iwant2study.org/editor?&url=https%3A//iwant2study.org/lookangejss/00workshop/2024PacoFelix//ejss_model_lookangtemplateSLS.zip
- lisa_tan 555 timer integrated circuit https://iwant2study.org/ospsg/index.php/1202-five55timeric
- kymberly_see Updated game mechanics for Digital Literacy https://iwant2study.org/ospsg/index.php/871
- winnie_liang Updated game mechanics for KAT Chemistry game https://iwant2study.org/ospsg/index.php/871
- tan_zhen_lin Customizable Chinese word game https://iwant2study.org/ospsg/index.php/855
- nor_azlin_abdul_aziz Malay word reader app https://iwant2study.org/ospsg/index.php/1206
- vethanayake_ramachandran Learn to edit vendor's interactive resources https://code.visualstudio.com/
- karen_chin Chemistry balancing equation with additional capabilities https://iwant2study.org/ospsg/index.php/915
- margaret_teoh Nets and Solids https://iwant2study.org/ospsg/index.php/1098 Geoboard https://iwant2study.org/ospsg/index.php/1211
- hazel_wong R0 infection model https://iwant2study.org/ospsg/index.php/1212
Short Version Workshop Schedule
- 09:00 - 09:30: Introduction to the workshop
- Why, how, and what
- 01 Intro.key by Prof Paco
- 01 Intro.pptx
- EJS → EJSS → EJS → WebEJS
- Online documentation
- 09:30 - 11:00: Exploring the WebEJS authoring toolkit
- 02 WebEJS Guided Tour.key by Prof Paco
- 02 WebEJS Guided Tour.pptx
- Short WebEJS guided tour (Top menu bar, Edition half, Preview half, Output area)
- Downloading, exploring, and editing existing EJSS simulations
- ComPADRE’s OSP, EJS, and EJSS simulations
- webejs_model_Mass and Spring.zip
- webejs_model_John Conway' s Game of Life.zip
- webejs_model_Oscillator chain.zip
- webejs_model_Cut the rope.zip
- webejs_model_Choreographies of N bodies.zip
- webejs_model_Free Fall 3D.zip
- webejs_model_Half Attwood Machine.zip
- webejs_model_Hor. Mass and Spring with Accelerometer.zip
- webejs_model_Hydrogenic Angular Distribution.zip
- webejs_model_Phase and Group Velocity.zip
- webejs_model_Physics Frogger.zip
- webejs_model_Pirate Swing Ride.zip
- webejs_model_Simple Pendulum.zip
- Iwant2study’s EJSS examples
- Saving and publishing edited simulations
- Activity: Search, optionally edit, run, and save existing EJSS simulations
- 11:00 - 13:00: Lunch
- 13:00 - 15:00: EJS architecture in more detail
- 03 EJS architecture.key by Prof Paco
- 03 EJS architecture.pptx
- The Model-Control-View paradigm
- How Model tabs work together
- View elements and their properties
- Interface and drawing elements
- View templates
- Binding model variables to view elements and controls
- Activity: Exploration of existing EJSS simulations
- 15:00 - 15:30: Break
- 15:30 - 17:30: Hands-on tutorial using AI and WebEJS to create a simple ball bouncing inside 4 walls
- Activity: Participants, with help from instructors, will work on WebEJS activity
- 17:30 - 18:00: Closing and Q&A ( 1. work in groups of similar simulation ideas where guidance will benefit more people, increase chance of group learning (figuring out), 2. spending dedicated (10-5 mins) time on each group ) 3. bug fix for the download simulation)
- 09:00 - 11:00: EJS views in more
- 04 EJS Models and Views.key by Prof Paco
- 04 EJS Models and Views.pptx
- detail https://iwant2study.org/lookangejss/00workshop/2024PacoFelix/Simulations/day2/
- direct link for WOG Link1 , Link2 , Link3, Link1.5 with snapping to integers
- webejs_model_TrianglePlaylookang.zip
- webejs_src_ClickMeAndDissapear.zip
- webejs_src_TrianglePlay.zip
- webejs_src_TrianglePlayWithPlotly.zip
- webejs_src_TrianglePlayWithPlotlySimple.zip
- webejs_src_withReaderFile.zip
- Interface elements
- 2D elements
- 3D elements
- Sets, tables, and arrays
- 11:00 - 13:00: Lunch Example to uploadFile, ExampletoExpandWords
- 13:00 - 14:00: Using ChatGPT to help code the personal/group model
- Activity: Participants reference the WebEJS’ ChatGPT tutorial 1
- 14:00 - 15:00: Sharing by participants on prompts for AI
- 15:00 - 15:30: Break
- 15:30 - 17:00: Essential know-how to get the best out of EJS / Debugging
- Modeling a physics (or not) phenomenon
- Types of models
- Variables
- Equations and algorithms
- Debugging
- 17:00 - 17:30: Work on individual/pair projects
- Activity: Participants kick start a new simulation of their choice using AI and WebEJS
- 17:30 - 18:00: Consultation on individual/pair projects
- 09:00 - 11:00: Participants work on their ideas, use BackChannel
https://padlet.com/weelookang/webejs-back-channel-for-help-sharing-of-best-practices-quest-1bc5wjb036kx13ko to share your interactive zip file.- Activity: Work on their idea from new or customize from existing interactive
- 11:00 - 13:00: Lunch
- 13:00 - 15:00: Advanced Programming (Choose a few) participants chose to work on their own projects
- Model Elements
- Using Internet libraries
- Plotting with Plotly
- Model elements for mobile hardware
- CANVAS and SVG drawing
- How to display LaTeX for equations?
- 15:00 - 15:30: Break
- 15:30 - 17:00: Work on individual projects
- Activity: Participants work on their idea from new or customize from existing interactive
- 17:00 - 17:30: Sharing simulation views, progress, and learning
- Activity: Participants show and tell their current simulation
- 09:00 - 11:00: Work on individual projects
- Activity: Work on their idea from new or customize from existing interactive
- 11:00 - 13:00: Lunch
- 13:00 - 15:00: Work on individual projects
- Activity: Participants work on a new simulation of their choice
- 15:00 - 15:30: Break
- 15:30 - 17:00: Preparation of presentations using SLS Resource page on this class https://vle.learning.moe.edu.sg/studentgroup/0451b779-bc3f-4051-8458-731794605c03?tab=resources , set the EJS to downloadable
- Activity: Round up projects and prepare presentations
- 09:00 - 09:30: upload to Padlet Upload to SLS Resource page on this class https://vle.learning.moe.edu.sg/studentgroup/0451b779-bc3f-4051-8458-731794605c03?tab=resources , set the EJS to downloadable. Thumbdrive the model with _source.json or _source.ejss for Lawrence to upload
- 09:30 - 11:00: Presentations by teachers and group discussion
- Activity: Participants present their projects
- 11:00 - 13:00: Lunch
- 13:00 - 15:00: Presentations by teachers and group discussion
- Activity: Participants present their projects
- 15:00 - 15:30: Break ( Photo Taking as a Group)