Breadcrumbs

 

 

 

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.

 

 BRANCH  URL to catalogue page  
HUMANITIES   
  1.  

     

     

    Download ModelDownload SourceembedLaunch Website ES WebEJS

    Credits

    ['MarinahToh', 'lookang']

  2.  

     

     

    Download ModelDownload SourceembedLaunch Website ES WebEJS

    Credits

    ['Lim En Qi', 'Francisco Esquembre Martinez', 'Félix J. García Clemente']

  3.  

     

     

    Download ModelDownload SourceembedLaunch Website ES WebEJS

    Credits

    ['Christabelle']

 
 SCIENCES  
  1.  

     

     

    Download ModelDownload SourceembedLaunch Website ES WebEJS

    Credits

    [This email address is being protected from spambots. You need JavaScript enabled to view it.', 'Francisco Esquembre', 'Felix J. Garcia Clemente']

  2.  

     

     

    Download ModelDownload SourceembedLaunch Website ES WebEJS

    Credits

    ['Shaun Quek', 'Loo Kang Wee', 'Francisco Esquembre', 'Félix Jesús Garcia Clemente', 'based on idea by Yah Hui Tan']

 
 ENGLISH LANGUAGE AND LITERATURE  
 
 LEARNING PARTNERSHIP IN EDUCATIONAL TECHNOLOGY  
 
 TECHNOLOGIES FOR LEARNING  
 
 MOTHER TONGUE LANGUAGES
  1.  
 
 GIFTED EDUCATION  
 

 

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!

 

 

 

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. 


Trainers are: 
Full Professor Francisco Esquembre 
 
Facilitators:
This email address is being protected from spambots. You need JavaScript enabled to view it.  

 
 
BackChannel
 
files
 
 
Method 1:
Toolkit: Web EJS SG beta https://webejs.iwant2study.org:8000/editor?  
 
Method 2:
May need to use a Use a VPN to change location anywhere to access the URL. Example https://veepn.com/?utm_source=chrome_extension&utm_medium=app Chrome extension on a VPN as SG is in a block list of the university.
Toolkit: Web EJS beta: https://www.um.es/fem/wikis/runwebejs master that also searching for all 4 webEJS editors including SG WebEJS, added.
 
 
Resources Ideas and Library:
  1. Open Source Physics Singapore Library: https://iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/979-horizontal-spring-dynamics 
  2. Science: https://iwant2study.org/ospsg/index.php/interactive-resources/sciences 
  3. Math: https://iwant2study.org/ospsg/index.php/interactive-resources/mathematics
  4. Physics: https://iwant2study.org/ospsg/index.php/interactive-resources/physics
  5. Chemistry: https://iwant2study.org/ospsg/index.php/interactive-resources/chemistry
  6. Biology: https://iwant2study.org/ospsg/index.php/interactive-resources/biology
  7. ELL English Literature Examples: https://iwant2study.org/ospsg/index.php/interactive-resources/english 
  8. MTL Mother tongue Examples: https://iwant2study.org/ospsg/index.php/interactive-resources/mother-tongue-languages 
  9. USA Open Source Physics https://www.compadre.org/osp/items/detail.cfm?ID=15448 
almost every EJSS is editable on Web EJS
 
Pre-Readings:
 
Participants, idea Storyboard and sample that they can work on 

  1. suggested template https://webejs.iwant2study.org/editor?&url=https%3A//iwant2study.org/lookangejss/00workshop/2024PacoFelix//ejss_model_lookangtemplateSLS.zip 
  2. lisa_tan 555 timer integrated circuit https://iwant2study.org/ospsg/index.php/1202-five55timeric
  3. kymberly_see Updated game mechanics for Digital Literacy https://iwant2study.org/ospsg/index.php/871
  4. winnie_liang Updated game mechanics for KAT Chemistry game https://iwant2study.org/ospsg/index.php/871
  5. tan_zhen_lin Customizable Chinese word game https://iwant2study.org/ospsg/index.php/855
  6. nor_azlin_abdul_aziz Malay word reader app https://iwant2study.org/ospsg/index.php/1206
  7. vethanayake_ramachandran Learn to edit vendor's interactive resources https://code.visualstudio.com/
  8. karen_chin Chemistry balancing equation with additional capabilities https://iwant2study.org/ospsg/index.php/915
  9. margaret_teoh Nets and Solids https://iwant2study.org/ospsg/index.php/1098 Geoboard https://iwant2study.org/ospsg/index.php/1211
  10. hazel_wong R0 infection model https://iwant2study.org/ospsg/index.php/1212 
 
Since this workshop is primarily by nomination from your Branch Head, permission to attend is already granted by them. We encourage attendance for all 5 days, but understand if there are other pressing commitments.
 

Short Version Workshop Schedule

Day 0: Pre-Workshop Preparation
  • Review participant storyboards and pre-reading materials.
    preparation

Day 1: Basics of WebEJS
    • 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)
Day 2: Detailed Exploration and AI Assistance Weekend Break
Day 3: Advanced Programming and Project Work
  • 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
Day 4: Individual Project Work
  • 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
Day 5: Presentations and Wrap-Up
  • 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 downloadableThumbdrive 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)
15:30 - 17:00: Final comments and wrap-up (keep learning!)
 
go to https://sg.iwant2study.org/ospsg/ to check out the catalogued projects