Proposed Programme

7 Nov 2016

30 pax Beginners’ Workshop edulab@AST by Loo Kang and Tze Kwang 
– provide 30 pax beginners’ workshop (model simple physical systems such as constant speed (maybe day2) spring mass with damping using EjSS) in eduLab@AST<br< a="">>

 09h00 - 10h30: Introduction to the workshop, Create a brand new simulation Step-by-step EJSS tutorial

1. Unzip the EJSS modeling tool
2. Open the EJSS modeling tool by double clicking on the icon EjsConsole.jar depending on where you unzip, typically it could be the D Drive for edulab laptops.
   
3. the console appears and shortly the editor appears, accept any pop up and click through any info like author and email, you can do later in your free time. 
   
4. If you dont get this page, go to console and change Programming language to Javascript as epub only runs with JavaScript 
   
5. Close the tool click on top right corner X and relaunch it, it should be open as JavaScript in the future as it remembers your preferences 
   
6. to create a simulation go to - Model - Evolution - Click to create a page of ODEs Ordinary Differential Equations, after clicking that area, accept the default name Evol Page, you can change the name later if desired 
   
7. By now, the Evolution page will look like this 
   
8. to move a simple object coordinates (x,y) move to the right with time with velocities (vx,vy), t and time step dt, double click to edit and key in the variables into the inputs fields as shown 
   
9. click the green arrow button to generate the simulation, it will prompt to save, choose the default location and give it  name or accept the default name Unnamed.ejss 
   
10. after File saved successfully Unnamed.ejss, click on the green run button again, EJSS will prompt there is no HTML view, click OK to create the view
    
11. Click to top radio button, HtmlView and Click on the Left panel to create the VIEW as suggested 
12. to create a 2D PlottingPanel view, click the icon from the right Interface Compound Element and release the button, move the mouse to the position of the Simulation view to drop the correct layer to the view
    
     
13. the EJSS will automatically create several displayPanel containing a topPanel with a trail and controlPanel with play, init and reset buttons, time label and a blank input field as a startup kit. 
    
14.  to create an object, select the first object and click and release and move the mouse over to the position of the plottingPanel and click again to drop the 2D object into this position 
    
15. accept the default name by clicking OK 
    
16. observe the shape is inserted into the plotting Panel 
    
17. to edit any element, double click and a pop up appears with more details about the element shape can be controlled via variables assigned later. in key the variables x and y, sizex and sizey, shapetype "ellipse for circle" line and fill color for determining properties of the shape
    
18. notice the pink color indicates EJSS does not understand what thee are, so go to the Variables radio button to create these new variables you define, accept the default names when prompted 
    
19. double click on the Name and key in the variables for this simulation, t, dt, x, y, vx, vy etc 
    
20. trying to run the simulation and the simulation is still not rendering correct.
    
21. now, key in Initial value for the variables, t = 0, dt = 0.05, x =0, y =0, vx =0.1, vy = 0 for example to create and object to move to the left at velocity vx =0.1 
    
22. Time to think, reflect with your neighbour how to make an object move to the 

1. left but faster 
2. up  
3. down 
4. diagonal across 45 degree to the right 
1. test out whether your simulation can do what you discussed, the click on the picture hints to expand the pictures
2. 10h30 - 11h00 Networking and Tea Break
3. Controlling the view of the plottingPanel using variables xmin, xmax, ymin, ymax
4. notice the simulation you may want to control to make the view bigger say xmin = -2, xmax =2, ymin= -2, ymax =2, to do that, create a new tab (for ease of making your work understandable) by right click and declare these variables in the variable page 
   
5. in the new tab, create the variables as shown 
   
6. click on the radio button HtmlView and double click on the plottingPanel 
7. the inputs field control the properties of the plottingPanel, key in as shown 
8. to test your simulation, click green button run to generate the model, the output view should look something like this
   
9. Create a trail that shows where the object was before above the object
10. to move the layering position of elements right click and select the desired move, for this case, select move down 
    
11. to create a trail that follow the coordinates (x,y), key in as show and add 
    1. { "stroke-dasharray":"8 8 8 8" } 
12. that creates a dotted line effect. run the simulation to test the result and it should look something like this
    
13. Simulation do not autostart by default
14. to disable auto , goto Evolution, uncheck the autoplay checkbox 
    
15. Create a slider to allow inquiry
16. go to HtmlView, Interface last tab, first icon for slider, click and release the mouse move your cursor and click on the playPauseButton
    
17. the slider should be create above the playPauseButton as show
18. double click on the slider to edit the input field of the slider to control that variables you have, for example x position or vx velocity etc 
    
19. run the simulation to test your changes. so i change the slider, did the simulation behave as you designed?

    vx slider after dragging left and right a few times

20. Create a checkbox for turning off and on the visual of the trail
21. goto radio HtmlView Interface 3 tab top, 4 icon checkbox and click to select, release the mouse and move to the position of the slider and click to drop the checkbox, accept the default name 
    
     
22. double click on the checkbox just created and insert the following variable showv and text to show
    
23. again, the Checked field is pink suggesting EJSS cannot understand it, so go to the Variables radio button and key in Variable name showv Type is boolean 
    
24. run the simulation to test the results 
25. Creating numbers to show in simulation
26. one easy way to create numbers to show is Field, goto HtmlView, Interface 4 tab 4 icon and click to select release the mouse and move over to the position to place the Field say after the slider, right click to move down if need 
    
27. double click on the just created field, key in the Value vx, Format "0.0" Width 30 , Background "Magenta" and Tooltip "velocity in x direction"
    
     
28. the run of the simulation will be something like this 
    
29. Remove messagesLabel
30. right click on the view element you want to remove, select the option Cut or Remove 
    
    
    
     
31. practice removing the timeLabel and timeField as well on your own 
    
32. run simulation to check
33. Calculate velocity from vx and vy
34. at every time step of the simulation, you want the magnitude of velocity to be computed and displayed, we use the Fixed relations to compute, click to create a page of fixed relations 
    
35. type in an equation say 
    • v = Math.sqrt(vx*vx+vy*vy);
36.  notice EJSS will help you with prompts after the function Math.
    
37. completed the equation and trying the compile will result in error or not, but goto Variable page to declare v 
    
38. Copying
39. one of best time about EJSS is the ability to copy, so copy the Field and paste it onto the control panel 
    
40. paste into the controlPanel, it will go all the way to the bottom
41. change the properties as shown 
42. Insert a Label on top of the newly created field2 which is variable v and add text v = 
    
43. key in v = into the Text as shown 
    
44. run your simulation to check does it look like this? if not, why ? 
    
45. Insert pictures
46. it is possible , i will show one best practice way, if the simulation is called Unnamed.ejss, locate the workspace and create a folder to store pictures for the simulation, to find out what, look at your console , for me it is /Users/lookang/Dropbox/Public/lookangEJSworkspace
    
47.  using your file explorer or otherwise, create a new folder of the same name as your *.ejss 
    
48. it should look like this 
    
49. to EJSS know the source file has auxiliary files, go to top right corner click on information and select the folder created and agree OK 
    
50. Cyberwellness find creative commons licenses pictures from Google
51. using chrome, search for pictures you want to add 
    
52. download the picture and save it into that folder Unnamed, select png files are better with transparency 
    

    By Pumbaa80 (Self-published work by Pumbaa80) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

53. select the image 2D and drop it onto the desired position on the plottingPanel 
    
54. make the image share property of the earlier element shape and in the ImageURL select the path of the picture for example  "./Unnamed/256px-Soccer_ball.svg.png" 
    
55. run the simulation to check 
    
56. Increase size of Image
57. go to image and change SizeX and SizeY to say 0.5 for both, 
    
58. run the sim 
    
59. Preparing for mobile deployment
60. to maximise the size of the plottingPanel in the code into the plottingPanel 
    
    • +_view._format(window.innerWidth*0.9,"0")
    • +_view._format(window.innerHeight*0.9,"0")
      
61. run to check 
    
62. How to make the ball round?
63. to create a round ball, set the square aspect to true 
    
64. run and sim to check 
    
65. Enable User Interaction
66. go to plottingPanel Interaction Enable select True 
    
67. go to the image and select EnabledPosition to "ENABLED_ANY" 
    
68. run and check 
69. Axes that always align to XFixedTick, YFixedTick for graphing norms
70. go to initialization radio button and create a page 
    
71. insert the follow code 
    
    • // double slashes are comments lines that computer will ignore, to help you read and understand
    • //coordinates are absolute that assume xmin=0, xmax=1,ymin=0, ymax=1 
    • // set x axis referencing left corner of x-axis 
    • _view.plottingPanel.getAxisX().setPosition([0,0.5]);  
    • // set position of x-axis title 
    •  _view.plottingPanel.getTitleX().setPosition([0.95,0.5]); 
    • // set y axis referencing left corner of y-axis 
    • _view.plottingPanel.getAxisY().setPosition([0.5,0]); 
    • // set position of y-axis title 
    • _view.plottingPanel.getTitleY().setPosition([0.5,0.95]);
72. run and check the result 
    
73. Removing the gutter/border to increase view
74. find this screen and insert [0,0,0,0] where the order of the number gutter width is  [left,top,right,bottom] 
    
75. run the sim 
    
76. Making the axis nicely spaced
77. go to plottingPanel and key in the values as shown 
     
    
    
     
78. run sim to check 
    
79. Insert a picture to fill up the maximum plottingPanel view
    

    https://pixabay.com/en/soccer-pitch-field-diagram-green-304171/

80. to add a new tab and called it picturesize in the Initialization page 
    
     
    • orig_listener = _view.plottingPanel.getAxisX().panelChangeListener; _view.plottingPanel.getAxisX().panelChangeListener = function(e) { orig_listener(e); _view.backgroundsoccerfield.setSizeX(_view.plottingPanel.getRealWorldXMax()-_view.plottingPanel.getRealWorldXMin()); _view.backgroundsoccerfield.setSizeY(_view.plottingPanel.getRealWorldYMax()-_view.plottingPanel.getRealWorldYMin()); }
81. add a picture of into the plottingPlanel using the screenshot as guide
82. run sim to check  
    
83. Creating an goalpost for making the ball stop just at the collision
84. in simulations, it is a good idea to make object stop at the moment of collision, for very precise calculations, which is difficult to achieve. In EJSS, it is simple.
85. First create the goalpost by creating an object using the screenshots as guide, now that you have done this before for the ball call it coordinates (x1, y1), size (0.5, 0.5), shapetype "RECTANGLE", RelativePosition "WEST" FillColor "Yellow"
    
86. Declare the variables in the Variable page 
    
87. run and see the result 
    
88. Disabling codes using Tabs
89. remember in the view, xmin, xmax ymin, ymax are -2 and 2 respectively but the computer view goes to -4 and 4 for x, because EJSS automatically shows the best view. it is great, but for this example, we want to restrict the view to exactly xmin, xmax ymin, ymax for precise placement of the goalpost so that the background is in sync with the yellow goalpost. EJSS allow very fast testing of codes so go to Initialization right click and choose disable and EJSS will not generate the codes inside this tab called picturesize
    
     
90. run the sim to check the view 
    
91. in any modeling tool, everything needs to be precise if it is not, a lot of funny things can happen
92. Using Math functions in any part of the simulation
93. to restrict the simulation view of the plottingPanel, use a mathematical function called Math.min(one,two) that calculates the lower value
    • +_view._format(Math.min(window.innerWidth*0.9,window.innerHeight*0.9),"0")
    • +_view._format(Math.min(window.innerWidth*0.9,window.innerHeight*0.9),"0")
94. put this line inside the plottingPanel Width and Height 
    
95. run and see 
    
96. got to Evolution click Events and create a page 
    
97. on the Event page, change the zero condition and action as follow 
    
    •  return x - x1
    • vx = 0;
    • vy = 0; // stop the ball
      
98. you may need to change vy =0 to make the ball travel to the goalpost
99. run and see the result 
    
100. Debugging and Seeing the results
101. one way to quickly see the result is "x ="+_view._format(x,"0.00");
     • "x1 ="+_view._format(x1,"0.00")
     • "x ="+_view._format(x,"0.00")
102. type this two lines inside plottingPanel Decoration the BRMessage and BLMessage respectively 
     
103. run and see 
     
104. Disabling to see effects of change
105. how to know that the changes made is indeed the reason? try to disable that page and see 
     
106. run and see 
     
107. continuing with the rest of the activity, enable back the event page 
108. Creativity Practice to add score
109. you may want to add a score after each successful event. Try it!
110. hints are below 
     1. score = score+1; // tells the score to add by 1 when this line is executed 
     2. "score ="+_view._format(score,"0")
        
        
111. Practice moving the ball back to the centre after scores, Falding Scaffolds
     • x = 0; 
     • y = 0;
       
112. run and see 
     
113. FullScreen on browsers using custom function
114. After googling full screen, you may find this page and wonder how to use the codes there https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 
115. go to Custom and add this code to enable fullscreen 
     
116. copy this code into the custom page
     • //https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
     • // does not work for iOS 
     • /*jslint browser:true */
     • function toggleFullScreen() {
     •   if (!document.fullscreenElement &&    // alternative standard method
     •       !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     •     if (document.documentElement.requestFullscreen) {
     •       document.documentElement.requestFullscreen();
     •     } else if (document.documentElement.msRequestFullscreen) {
     •       document.documentElement.msRequestFullscreen();
     •     } else if (document.documentElement.mozRequestFullScreen) {
     •       document.documentElement.mozRequestFullScreen();
     •     } else if (document.documentElement.webkitRequestFullscreen) {
     •       document.documentElement.webkitRequestFullscreen();
     •     }
     •   } else {
     •     if (document.exitFullscreen) { //Standard
     •       document.exitFullscreen();
     •     } else if (document.msExitFullscreen) { //Internet Explorer 11
     •       document.msExitFullscreen();
     •     } else if (document.mozCancelFullScreen) { //Gecko (Firefox)
     •       document.mozCancelFullScreen();
     •     } else if (document.webkitExitFullscreen) { //Safari (WebKit)
     •       document.webkitExitFullscreen();
     •     }
     •   }
     • }
117. download this icon
     
     and add to the Unnamed folder 
     
118. create the button to toggleFullScreen custom function
     
119. add Disabled _isPlaying ImageOnUrl to be "./Unnamed/full_screen.png" OnClick toggleFullScreen() ImageOffUrl "/org/opensourcephysics/resources/controls/images/close.gif" and OffClick toggleFullScreen() 
     
120. run and see 
121. Hitting the left border and stop
122. to create precise time to stop, EJSS can do this easily using Event instead of FixedRelationship which will overshoot during the time step dt.
123. goto Event, start a new tab and name it LeftWall 
     
124. in this LeftWall, think of a way to what is the condition needed for precise calculation of the event. your code should be something like this 
     
     1. return x-0.5/2-xmin; //recall 0.5 was diameter of ball
     2. vx = -vx; // give the velocity back but reverse direction
125. run and check 
     
126. Ease of change, name the variable size = 0.5 and add to the LeftWall event
127. define size as 0.5 
     
128. change the LeftWall event
     • return x-size/2-xmin; //recall 0.5 was diameter of ball 
       
129. the benefits of variabilization is ease of change later on
130. continue to work on your simulation to include
     • collision with top ymax 
       
     • collision with bottom ymin 
       
     • collision with xmax including the goalpost 
       
131. hint are available if need by clicking the images
132. Creating model and source for sharing online
133. right click the right package option and choose the first 2 options 
     
134. ejss_model_Unnamed.zip is the simulation, give it to your students, ask them to unzip it and launch the file that looks like the simulation, for example Unnamed_Simulation.xhtml, test my copy on how it look 
135. ejss_src_Unnamed.zip is the source code for which you want others to edit the simulations
136. 12h15 - 12h30: Reflection, did we cover most of the EJSS simulation creation in a purposeful , just in time manner? 
     1. Exploration of EjsS,EjsS workspace fundamentals
        Structure of a model in EJS
        Variables and their types.
        Initialization, fixed relations, and custom functions
        Introduction to the ODE editor and the Prelim code page
        Binding model variables to view elements and controls
        How to deploy simulation model and source
137. lunch until 1400
     
      

Day 1 Afternoon
14h00 - 17h30: Load, inspect, and run a JavaScript simulation from within EjsSModify a simulation Pendulum 195 choosen to suit O level syllabus (assistance will be given to help with the modifications)
 on OSP@SGExploration of the OSP-EJS-ComPADRE-OSP@SG Platform
e book creation using OSP tools and Independent work and consultations on curriculum design referencing some of the teachers of eduLab project 40+ simulation in

• https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/08-gravity
• https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/09-oscillations

15h30 - 16h00: Break and Networking1600-1730 e book creation using OSP tools What is the UNESCO Singapore ICT mathematical pedagogical innovation about? open this source code to examine that additional codes added for this mathematically modeling approach with if statements. http://iwant2study.org/lookangejss/00workshop/2016WolfgangPacoFelixLookang/

• Unnamedaddmodelling_Simulation.xhtml

Proposed Program

 

Day 2: Morning

• How do OSP, EjsS, and ComPADRE work together? (WC)
• Activity: Search, find, and run existing programs (WC)
• ComPADRE filing cabinets and community tools (WC)
• ComPADRE Books (WC)
• ACTIVITY: Explore ComPADRE and create a personal filing cabinet (All)
• EjsS Readers (FE)
• EPub 3 and Apps (FE)

• Organizing your workspace (WC)
• Online Libraries (FE)
  Load, inspect, and run a JavaScript simulation from within EjsS
• JavaScript Syntax (FC)
• CSS Syntax (FC)
• Simulation design, documentation, and organization (WC)
• Debugging (FC)
  How to use a JavaScript debugger and other tools of the trade.

Lunch: 12:30-14:00

Day 2: Afternoon

Day 3: Morning

• JavaScript variables and type conversions
• Initialization, fixed relations, and custom functions
• Introduction to the ODE editor and the Prelim code page
• Binding model variables to view elements and controls
• Elements and Properties
• 2D Field Elements
• 3D Elements
• Tables and arrays

• Demo of data acquisition techniques. (FE)
• Introduction to the Accelerometer Model Elements.  (WC)

Lunch: 12:30-14:00

Day 3: Afternoon

• Client Server API and demo
• Class polling with a captive portal

ACTIVITY: Participants build and test a simple client-server example.

Day 4: Morning

• CANVAS and SVG drawing. (FG)
• 2D Scalar and Vector Field examples with OSP code libraries.  (WC)
• Sound examples. (WC)
  

Lunch: 12:30-14:00

Day 4: Afternoon

• Presentations by teachers and group discussion
• Final comments and wrap-up

Older Proposed Program