1 of 35

20230327 BROWN BAG@CPDD��Educators as Designers of Simulations �using Easy JavaScript Simulation (EJSS)�authoring toolkit��

Lawrence_WEE@moe.gov.sg

27 March, 12.30 pm – 1.30 pm

Zoom Presentation 45 min, Q&A 15 min

2 of 35

OBJECTIVES AND CONTENT

BROWN BAG @ CPDD

2

27/3/2023

– To share conceptualisation of interactives and other resources developed using Easy JavaScript Simulation (EJSS)

– To share value proposition of EJSS for teaching and learning

– Thought processes of using EJSS to create interactives

– Development approach - How EJSS authoring toolkit can be “encouraged” to be used to build their scientifically accurate and high quality resources for future ready learning

3 of 35

Conventional Method of Development of interactives

Conventional Development: 3 to 12 months?

– From idea to storyboard

– Storyboard with many inputs in text and lots of discussions

– Final document sent for development

– Multiple rounds of improvements

– Receive final interactive

– Optimise code (“Code-refactoring”)

DRAWBACK: The code seems like a black box, no idea if assets could be recycled

Release to students in SLS. Receive feedback from end-users with little means of improving the resource

EDUCATORS AS

DESIGNERS OF SIMULATION

3

4 of 35

Are there better method(s) �in the Internet Age?

EDUCATORS AS

DESIGNERS OF SIMULATION

4

Why can’t educators be the simulation designers?

– HTML5 tools and editors are generally free

– A.I. such as ChatGPT, Blackbox augment programming

– Easy JavaScript Simulation toolkit makes JavaScript easy

There are libraries of simulations to take and use, as well as existing interactives to copy and modify.

Shorten the development process and reduced mismatches between concept and product.

5 of 35

Free Tools �for HTML5 development

  1. Easy JavaScript Simulation Authoring Toolkit - A free tool for creating interactive simulations and educational games using JavaScript, HTML, and CSS. https://www.um.es/fem/EjsWiki/Main/HomePage
  2. GeoGebra - A free tool for creating interactive geometry and algebra simulations, suitable for teaching math and physics concepts. https://www.geogebra.org/
  3. PhET Simulations - A free collection of interactive simulations covering a range of science and math topics, suitable for teaching various subjects. https://phet.colorado.edu/
  4. Scratch - A free programming language and environment for creating interactive stories, animations, games, and simulations, suitable for teaching computer science and media studies. https://scratch.mit.edu/
  5. Alice - A free 3D programming environment for creating interactive animations and simulations, suitable for teaching computer science and animation. https://www.alice.org/
  6. NetLogo - A free tool for creating agent-based models and simulations, suitable for teaching various subjects. https://ccl.northwestern.edu/netlogo/
  7. Desmos - A free online graphing calculator that can be used to create interactive math simulations, activities, and assessments. https://www.desmos.com/
  8. GDevelop is a free and open-source game development software that can be used to create a variety of games, including simulations. While it is primarily designed for game development, it can be used to create educational simulations as well. https://gdevelop-app.com/
  9. Phaser is a free and open-source game development framework for creating HTML5 games. It is primarily designed for game development, but it can also be used to create educational simulations and interactive experiences. https://phaser.io/
  10. Construct - A free game engine that can be used to create 2D games and interactive simulations. It has a drag-and-drop interface and supports multiple platforms. https://www.construct.net/en

EDUCATORS AS

DESIGNERS OF SIMULATION

5

6 of 35

Easy JavaScript Simulation (EJSS) Toolkit: Concept to Prototype in 7 days

  1. Concept discussion using existing interactives
  2. Simple storyboard with vital keyframes / pictures
  3. Typically, I conduct a short training using EJSS for Research Assistants
  4. Assign task to Research Assistants (RA) / Interns to work on design
  5. Feature development and sharing of files via WhatsApp or email
  6. Learning design using Richard Mayer’s Principles of Multi-Media Learning (2016)
  7. Code Inspection and Refactoring (optimisation for masses, reduce loading time and overheads)
  8. Officer work with RA very closely using EJSS, improve documentation and address bugs and unexpected behaviours etc
  9. Release to end-users for trials and feedback
  10. Receive feedback and improve the resource due to the modular code (enable-disable) and HTML view elements in EJSS toolkit
  11. Interactives made in EJSS continue to be editable even from 2 decades ago

6

7 of 35

RESOURCES DEVELOPED �IN CPDD 2023

8 of 35

EJSS: A tool to create �scientific models for NT Science

Live Demo

  1. All controls are at the top from left to right
  2. The interactive view is realistic and accurately modelled
  3. Design with users experience (UI/UX)
  4. Lots of rapid iterations and agile development (hours instead of months)

8

9 of 35

9

EJSS: A tool to create �scientific models for NT Science

Live Demo

  • “Evolution” generates motion through numerical-methods calculations
  • Picture files of pencil and clip (svg, png and gifs) are supported, which introduces realism

10 of 35

EJSS: A tool to create �scientific models for Biology

Live Demo

  1. All controls are at the top from left to right
  2. The interactive view is realistic and “accurately” modelled
  3. Design with users experience (UI/UX)
  4. Lots of rapid iterations and agile development (hours instead of months)
  5. Painless and possibly DIY or temp staff can edits over years instead of the contract period of temp staff or vendors

10

11 of 35

11

EJSS: A tool to create �scientific models for Biology

Live Demo

  • Provide the usual storyboard
  • Provide the picture files of laboratory setup (svg, png and gifs) are supported, which introduces realism
  • The more scientific the virtual lab, the better to be made in EJSS,
    • Simulate bubbles appearing and disappearing based on mathematics and logic
    • Accurate graphically representation
    • Many calculation to find best fit line or spline curve etc

Instead of doing in Adobe Animate and others software tools.

  • As long as collective we and internet or ChapGPT know what to do and how to solve it, this kind of scientific simulation can be made in EJSS.

12 of 35

EJSS: A tool to combine multiple videos into an interactive – Reena

12

Live Demo

  • Video elements
  • CSS positioning
  • Organisation schema using a variable called time (t) to control video scenes (keyframes)
  • Plotting Panel Elements for interactivity

13 of 35

EJSS: A tool to combine multiple videos into an interactive – Reena

13

It is easy to script the logic and thus find exactly where to change to fix bugs.

To expect interns to do this is technically difficult for novices.

In addition, for other interns to make major revisions is also challenging.

This code is a black box to officers who have no knowledge of its internal workings, thus it will be impossible to enhance later using a typical code editor.

14 of 35

EJSS as a tool to create “content page” for multiple interactives –Timothy

14

Live Demo

  • Buttons element
  • HtmlView of buttons used to debug and add code

15 of 35

EJSS as a tool to create “content page” for many interactive –Timothy�

15

Live Demo

  • Buttons element
  • Windows.open()
  • Width: 100% to ensure same width

16 of 35

HTML5 as a tool to develop scientifically accurate models - Andy

16

=

There are very few scientifically accurate titration models in the world.

Most are approximations and lack the corresponding visualisation.

  1. Physics, Chemistry, Mathematics to derive the conservation equations (left)
  2. Sequences and series to generalise for multi-protic acids / bases (Unified equation)
  3. Numerical methods for solving (Newton-Raphson method)
  4. Code refactoring to ensure it runs with minimum computational overhead

17 of 35

SLS MOE LIBRARY AND COMMUNITY GALLERY LESSONS WITH EJSS INTERACTIVES

18 of 35

EJSS for Inquiry-Based Learning �in SLS MOE library�

18

  1. Physics Example
  2. Pre-lab simple instructions
  3. Go to https://iwant2study.org/ospsg and locate resource
  4. Add EJSS Virtual Lab (embed code or upload as media)
  5. Add questions to deepen thinking about the concepts

19 of 35

EJSS as animation generator in SLS MOE library�

19

Physics Example

Animation is added that focuses on concept such as the gradient of the velocity-time graph being the instantaneous velocity.

Interactive is added at the end of lesson for exploration, fun and sense making

20 of 35

EJSS as practice tool in SLS Community Gallery

20

  1. Chemistry lesson designed as a practice tool with hints
  2. Credits to Zenia Chng (developed in 14 days) while on attachment to ETD 2019

21 of 35

EJSS as virtual lab in SLS Community Gallery

21

As the previous SLS Community Gallery Chief Admin, I regularly supported teacher’s lesson submissions by “suggesting” virtual labs

22 of 35

EJSS as reward activity in SLS Community Gallery

22

Addition of gamification elements using EJSS to support Math lessons as reward at the end

23 of 35

VALUE PROPOSITION

OF USING EJSS

FOR TEACHING AND LEARNING

24 of 35

1. Interactive and engaging learning experiences customised for the Singapore curriculum

24

EJSS simulations are designed to be interactive and visually engaging.

“The display of info is also suitable for our students’ learning which reduces the extraneous cognitive loads, compared to similar simulations found on the internet.” - Zenia

25 of 35

2. Encourages exploration and experimentation

25

EJSS simulations can foster a spirit of exploration and experimentation among students.

Through manipulating variables and observe the resulting changes, this can help to develop critical thinking and problem-solving skills, as well as encourage students to take an active role in their own learning.

26 of 35

3. Customization and flexibility

26

EJSS allows users to create custom simulations tailored to the needs of their students.

Teachers can design simulations aligned to their curriculum and learning objectives, and can easily modify simulations to keep up with student’s needs.

27 of 35

4. Evolving Global developments

27

Constant improvements with features to enhance the teaching and learning experience.

One new feature is data analytics, which provides teachers with valuable insights into student performance and engagement.

Through data analytics, teachers track student’s progress, identify areas where students are struggling, and adjust their instruction to meet the needs of their students.

28 of 35

5. Cost-effective & Licensed CC-BY-NC-SA for world use

28

EJSS is an open-source software.

It is freely available for all to use and modify.

This makes it a cost-effective solution for school teachers and MOE HQ officers to develop learning artefacts en masse in comparison with expensive commercial software. Most simulations are licensed creative commons by attribution, non-commercial uses and adaptations must be shared under the same terms

29 of 35

6. Community Development approach

29

Transparency, Collaboration, Flexibility, Community support, Accessibility

Working with temp staff, ECDs and vendors, they are “strongly encouraged” to use EJSS authoring toolkit to build their interactive, for scientifically accurate and high quality resources for future ready learning (unlimited changes anytime and by anyone) supported by the Open Source Physics educators

30 of 35

Should we abide by conventional methods of solely relying upon interns and vendors for development?

IS LEARNING TO DEVELOP

LEARNING RESOURCES SUCH AS SIMULATION ALIGNED TO MOE’S NEEDS?

31 of 35

e-Pedagogy SkillsFuture for Educators

e-Pedagogy

Leverage digital technology” to deepen students’ learning.

How deep is “Leverage”?

  1. Emergent
  2. Proficient
  3. Accomplished
  4. Leading

Question to ponder

Is creating interactive “leading” in leveraging technology?

31

32 of 35

Strengthening Digital Literacy

“In an increasingly digitalised world, it is essential to equip students to thrive in a digital society and take on the jobs of the future.”

Question to ponder

Is creating an interactive a “leading” digital literacy in a digital society?

32

33 of 35

Levels of Practice

  1. Leading – mentor and support others in making-using EJSS productively by teachers and students, talk to me, Darren Tan, Andy Luo, Fang Fang etc 👨👩
  2. Accomplished – able to make your own simple EJSS interactive
  3. Proficient– able to embed or upload EJSS to SLS and to ask for help in customisation from EJSS community users 👨👨👩
  4. Emergent – aware of such a tool that generate simulation interactive 👨👨👨👩👩👩

33

34 of 35

References

  1. Suggested Toolkit version: https://gitlab.com/ejsS/JavaScriptEditor/release/-/blob/master/JavaScript_EJS_6.02_BETA_201228.zip required Java Runtime, other EJSS toolkit versions will work as well with different bugs fixes and features
  2. Suggested Tutorial: https://iwant2study.org/ospsg/index.php/events/883-20190219-sls-hackathon-etd-cpdd has 272 step-by-step guide on how to create a falling apple game, also can look through past teachers interactive/games for many different subjects
  3. Open Source Physics Singapore Digital Library for teachers to download and upload to SLS as interactive media  https://iwant2study.org/ospsg/index.php/interactive-resources
  4. https://vle.learning.moe.edu.sg/mrv/search?keyword=ejss&location=COMMUNITY&resource=LESSON&subject=&level=  119 ejss were added on Community Gallery
  5. https://vle.learning.moe.edu.sg/mrv/search?keyword=ejss&location=MOE&resource=MEDIA&resourceType=3&subject=&level=  41 ejss were added on MOE library by CPDD officers who used ejss toolkit to make their own curriculum aligned interactive or download and use from the OSP@SG Digital Library, upload to RMS etc.
  6. https://weelookang.blogspot.com/2023/02/eight-point-compass-with-randomised.html for 2022 EJSS development with Data Analytics (knowing what students did on the simulations)
  7. https://scholar.google.com/citations?en=th&user=Tvy7ptIAAAAJ&view_op=list_works&sortby=pubdate some of my research interest for collaboration purposes 
  8. https://www.hostinger.com/tutorials/what-is-javascript

34

35 of 35

THANK YOU

BROWN BAG @ CPDD

35

27/3/2023