Wednesday, November 30, 2016

Apps as virtual lab edulab





Goals
  1. Generate scalable practices that can be adopted by different schools across the system
  2. Contextualise practices to mp4: How can ICT be used productively to develop knowledge through subject mastery, skills through 21st CC, attitudes through responsible digital citizenry?
  3. What is quality learning in the hands of every learner empowered with technology?










What are learning experiences?


Learning experiences refer to “the interaction between the learner and the external conditions in the environment to which he can react” (Tyler, 1949, p. 63).

Three Key Principles (CAD)
  1. Content Principle
    1. Concept Connection Confusion*** 
  2. Activity Principle
    • Task. Set of instructions to initiate some activity 
    • Activity. The mathematical processes (in the case of mathematics) students are engaged in. Students construct and act upon objects (physical, mental or symbolic). 
    • Participating in the activity draws students’ attention to key features of the concept or idea.
  3. Documentation Principle
    • Communication. Get students to explain, comment and justify their ideas (not evaluate their ideas). 
    • Representation. The forms by which we present mathematical ideas, e.g., verbal, tables, numbers, pictures, symbols etc.. 
    •  KEY: Make students’ thinking VISIBLE

Research Question: What were learning/teaching design features 

  • simple or complex view, 
  • how to design simple dropdown menu controls, 
  • controls inputs via view or separate panel for interactions, 
  • 2 or 3 dimension view, realistic and accurate model, 
  • with or without mathematical modeling capabilities, 
  • allow for creative scenario

in the App that students and teachers find useful for simulating and visualise Physics?


both gravity and modern with be in Term 2


To make video showing students talking about excitment to learn physics
https://www.youtube.com/watch?v=efMu5i1zFBk&list=PLYIwRBA8ZhdM6_fg9pbuS-49JEnoA0LcV&index=1&t=3s

Deliveries


  1. Study Proposal & Report
  2. App/Platform
  3. Final/Progress Report
  4. i-in-Practice publication
  5. Lesson packages
  6. PD workshops


List of devices that does not support WebGL, no 3D on them.

  • Samsung J1 Ace Android 5.1.1(probably a manufacturer defect?)




Dear Applicants

Title of Project: Apps as Virtual Laboratory

We are pleased to inform you that your project has been selected as an eduLab project, subjected to the following conditions:
  1. The role of the consultant(s) in the proposed project need to be elaborated to provide greater clarity on the need for their continued involvement in the proposed project.
  2. The proposed project budget will be reviewed and perhaps reduced.

We will send you further instructions and a letter of offer with details of the approved grant amount by Jan 2017. Meanwhile, there’s no immediate action required from you.

Thank you for championing innovations for learning with ICT! Enjoy your holidays and we wish you a great year ahead!

PS: Please note that the approved grant for your edulab project may differ from your submitted proposal depending on the recommendation of the eduLab Evaluation Panel. In addition, the grant is awarded based on the premise that the aims and deliverables stated in your approved proposal will be fulfilled.



Elaboration


projected 7 days - Design new and enhanced Apps templates for simulation that can be used on Android and iOS Apps Development platforms that tap on both Google and Apple App development based on Easy JavaScript Simulation Modeling Tool (EjsS) and the Ionic Platform. This is not a trivial task as the creation of these Apps need to run seamlessly on both mobile App development platform using the same source codes that requires expert consultant to work on in Singapore.
projected 5 days -  have consultant to rapidly develop, test with students and teachers in face to face settings, site visit to Hwa Chong Institution to understand and propose better ways to serve the Apps
projected 13 days - Teach the project team members and how to create
  • new simulations using drawing elements for scalar field for powerful display of phenomena not avaliable yet on Ejss.
  • new simulations using 3D WebGL in color for 3D simulations in Apps
  • new simulations using a better way to import 3D objects into Apps 
  • enhance the mathematical modeling feature in App
  • add/make video to explain concepts, adapt/design quiz maker, improve/better interaction between Apps and students
  • teach project team how to harness the full power of low-level programming in EjsS as that undocumented JavaScript features can be deployed in our Apps
  • debug and improve the Apps
  • add native Google Store and iOS Game server for increase achievement unlock to motivate students
projected 1 day - to discuss, document and reflect about new functionality and features in future versions of EjsS and our Apps.
project 1 day to discuss about how to integrate Learning Analytics in Hwa Chong Institution Moodle Learning Management System in the learning process using our Apps.
projected scaling up 4 days workshop - conduct a 4 days workshop "Apps as Virtual Laboratory" at eduLab@AST for interested teachers and professors in NUS, NTU etc to use and customise our Apps.

total = 26 days consultant + 4 days workshop

based on the template proposed
per day Full professor =  $500 per working day
26x 500 = $ 13 000 consultant
4x 1500 = $ 6000 workshop trainer

airfare and transport $ 2000
hotel per day = $400
30x400 = 12 000

at $33 000

Monday, November 28, 2016

Newsletter of Association for Development of Teaching, Education and Learning (ADTEL)

will this appropriate for best paper?

a short write up on any relevant issue in the area of Teaching.
In this regard we humbly request you to send us a brief Write up/Article(200-300 words)
from an area of your research interest.
Also, we would require your recent photograph & detailed affiliation that will be publish along with the Newsletter


Loo Kang Lawrence Wee
Ministry of Education, Educational Technology Division, Singapore

Open Source Physics at Singapore (OSP@SG) is a project by Singapore Ministry of Education which helps teachers bring real-world physics concepts into the classroom.

The programme is innovative in that it complements real-life experiments by providing interactive resources that help visualisation. The programme also has developed the pedagogy for mathematical modelling, where students’ ideas can be 'tested' or modelled and compared with real life or simulated data. It is accessible anytime, anywhere because students can run the programme on computers and mobile devices. The modelling tools available are free for students all over the world to access and edit. Anyone could remix, redistribute the customized or re-purpose resources under the licenses compatible with creative commons attribution. This helps to enhance the teachers’ productivity in the lesson preparation as they can have easy access to the resources and need not start from scratch.

Since 2012, MOE has been collaborating with schools¹ on OSP@SG, with positive feedback received on the project both in Singapore and around the world. Some benefits include enhanced students’ learning through the student-centric pedagogy where students learn to experiment like real life scientists using modelling and simulation. Students could better visualise, explore and discover abstract physics concepts through manipulation and modelling techniques. In addition, an interest-based learning community for the OSP@SG has been formed. 

This community includes the many OSP experts namely, Professor Francisco Esquembre, Fu-Kwun Hwang, Wolfgang Christian, Felix Garcia and Douglas Brown and many more in the world that helped to develop the materials to sustain the community. By networking and learning with the experts, teachers in local schools are now taking greater ownership of the materials they author by either remixing the models or creating new worksheets to support the guided inquiry or modelling pedagogy afforded through OSP@SG.

footnote
¹ Anderson Junior College, Evergreen Secondary School, Hwa Chong Institution, Innova Junior College, Meridian Junior College, National Junior College, Raffles Girls’ Secondary School, River Valley High School, Saint Andrew’s Junior College, Serangoon Junior College, Victoria Junior College and Yishun Junior College.

Thursday, November 24, 2016

Final meeting of edulab21

Agenda
Date: 25 Nov
YJC
Time 4-6pm

Update on HQ front ,UNESCO ICT prize, Innergy  gold awarded, conference LEAP best paper, MPLT20 conference paper, edulab reviewed presentation completed.
Ebooks
0 Comments


































Open Source Digital library http://www.um.es/fem/EjsWiki/Main/Download download and authoring toolkit and access the library for JavaScript



New designs available on SHM.  Better axes
Modeling if( t< 2, sin(t), 0.5) is added. for example, if (t<3.14,  2*sin(1.00*t+(0.00)) , 1)


School feedback

Positive
Ijc Gravity does help students visualise.
Help students to explore more.

Yjc
Context and physics made real and understandable.
eBook is complete package video

Vjc Good to illustrate concepts.

Rvhs

Area of improvement

Rvhs
Vjc Exercises to use simulation break into smaller simulation with assessment of checking answers
Ijc  text need more work and proofreading.
Yjc Fonts and formatting can improve. More spaces between lines of text on first page etc.

Future plans

Yjc Continue with eBook.
Vjc Tracker
Vjc Notes into epub
Ijc continued to use.
Rvhs

Sunday, November 20, 2016

Astro Academy Collisions Two equal mass head on side view model built suggests slight difference in contact force is due 3 possible errors?

Astro Academy Collisions Two equal mass head on side view model built suggests slight difference in the contact force due to perspective error?




http://astroacademy.org.uk/resources/collisions/
http://www.opensourcephysics.org/items/detail.cfm?ID=14162

sources of errors

  1. Tracker model builder has systemic error?
  2. video is taken sideways with a slight perspective error that can result in the discrepant data
  3. motion is not perfectly in x direction?


i need to analyse the video more in depth.
my model tracker file can be downloaded here
http://iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/02-dynamics/446-collisionequalmassastroacademy

Monday, November 14, 2016

top 5 OSP apps in Google Play

Submission Details
==================
Contribution ID: 384
Type : Short Paper - Abstract
Title : Deployment of physics simulation apps using Easy JavaScript Simulations
Author(s) : García Clemente, Félix Jesús; Esquembre Martínez, Francisco; Wee, Loo Kang
Presenting Author : García Clemente, Félix Jesús
Presenter's E-Mail: fgarcia@um.es
IEEE EDUCON - Global Engineering Education 2017
https://www.conftool.com/educon2017/
http://www.educon-conference.org/educon2017/paper_preparation.php.


top 5 Open Source Physics apps in Google Play correct as of 14/11/2016
https://docs.google.com/spreadsheets/d/19IoxWE-x3JjHOVllo3W1zFdWfk6E7rcSCtbmQZC4_2Y/edit#gid=0


S/NName of AppDownloads/InstallsDate Published
1AC Generator 3D Virtual Lab40118/08/2016
2DC Motor 3D Simulator Lab71718/08/2016
3Micrometer Simulator333811/08/2016
4Oscilloscope Simulator20514/08/2016
5Vernier Calipers Simulator294810/08/2016











Tuesday, November 8, 2016

TRASI CODE: 31275 Creating Interactive Electronic Textbook









TRAISI CODE: 31275 https://traisi.moe.gov.sg/Utility/UT_Default.asp

Creating Interactive Electronic Textbook 
(31275) 
Course DescriptionOrg AgencyDurationClasses Available(Please Click on a Date)Max Class SizeCourse/ Class FeeComments
Objective:
Basic how to and explore the Easy Java/JavaScript Simulations (EjsS) modelling and authoring tool. Create brand new simple mathematical and physics computational model remix existing models in the digital libraries, especially the Singapore Library. create or remix one model based from an existing example in the library export 1 to 2 existing model with supporting text into a epub file as a electronic interactive textbook-chapter.
Preferred Participants:
All Levels Mathematics and Physics
Other Requisites:
N.A
Technologies for Learning, ETD, MOE 32 Hr(s)

30
 

$0.00
 
undefined 

Traisi


Creating Interactive Electronic Textbook Overview:This 4-day workshop provides a bootstrapping experience to ComPADRE Open Source Physics project and the Easy Java/JavaScript Simulations tool. Objective:Basic how to and explore the Easy Java/JavaScript Simulations (EjsS) modelling and authoring tool.
Create brand new simple mathematical and physics computational model
remix existing models in the digital libraries, especially the Singapore Library.
create or remix one model based from an existing example in the library
export 1 to 2 existing model with supporting text into a epub file as a electronic interactive textbook-chapter.
 Content:Introduction to the workshop
Exploration of the OSP-EJS-ComPADRE Platform
Exploration of EjsS
Independent work and consultations on curriculum design
Creating simple models with EJS
Creating models with EJS part 2
Remixing one model
Exporting as epub
Reflecting/presenting teacher performance task sharing


Target Audience: Level: All Levels Mathematics and Physics Primary, Secondary & JC/CI

SDF: DG: $ 0

Pre-Requisite:   N.A

Date & Venue:   Begin Date/time:End Date/time:Application Closing Date:Venue:07/11/2016 09:00 - 17:3010/11/2016 09:00 - 17:3023/10/2016edulab@AST, Blk J, Level 4, No: 2, Malan Road, Singapore 109433, Academy of Singapore Teachers, Tel: 66641450Frequency:   

Please bring your SSOE Notebooks with fully charged Battery.


Course Administrator: Organising Agency: Name:    Neo Chin Heng Technologies for Learning, ETD, MOE Phone:    66641450   Email:    

Trainer: Training Agency: Prof Francisco,Prof Wolfgang University of Murcia (Spain),Davidson College USA,Educational Technology Division (MOE)

Assessment Mode:   Nil

No. of Applications: Max. Class Size: 3 30



Date: 7-Nov to 10-Nov Title: Creating Interactive Electronic Textbook http://www.compadre.org/osp/features/NewsDetail.cfm?ID=549
Time: 0900 - 1730 hours 
Loo Kang 
University of Murcia, Spain
Davidson College USA
Prof Francisco Esquembre
Prof Wolfgang Christian
ETD 
Lawrence WEE

Installation and Tools required, Day 0


  • Recommended to bring and use personal laptop with admin rights to install softwares, edulab has 18 windows laptop to be shared. Software needed for workshop include another list from Prof. Wolfgang
  • Windows/Mac Laptop need these
    • EJSS authoring tool Direct Download  recommended EjsS_5.2_161103.zip official 
    • Bluegriffon XHTML and HTML editor for page creation for epub
    • Chrome Browser
      • Readium An ePub 3 reader plugin for Google Chrome. This plugin reads ePub books stored on a local computer
      • Readiator EPUB Reader shenzhuxi Open source EPUB reader with full EPUB3 support, works offline
    • Java Development Kit, needed to create apps for the iTunes and Google Play stores. Note that the JDK also installs the latest JRE.
    • No installation required https://www.mathtowebonline.com/ for equation conversion from LaTeX to MathML supported by epub
    • eCanCrusher is a simple drag/drop utility to recompress and decompress EPUB folders/directory structures. It converts folder into an .epub file and vice versa. Both Mac and Windows versions are available
    • IDPF ePub 3 Validator or download this http://www.pagina-online.de/produkte/epub-checker/ The International Digital Publishing Forum (IDPF) site to provide validation information for EPUB 2 and 3 documents. Validate your ePub documents before you release them!
  • On your iOS devices need iBook App to open epub
  • On your Android devices need Gitden EPub Reader for Android A good Android reader that supports ePub 3 and JavaScript simulations


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

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 
  23. test out whether your simulation can do what you discussed, the click on the picture hints to expand the pictures
  24. 10h30 - 11h00 Networking and Tea Break
  25. Controlling the view of the plottingPanel using variables xmin, xmax, ymin, ymax
  26. 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 
  27. in the new tab, create the variables as shown 
  28. click on the radio button HtmlView and double click on the plottingPanel 
  29. the inputs field control the properties of the plottingPanel, key in as shown 
  30. to test your simulation, click green button run to generate the model, the output view should look something like this
  31. Create a trail that shows where the object was before above the object
  32. to move the layering position of elements right click and select the desired move, for this case, select move down 
  33. to create a trail that follow the coordinates (x,y), key in as show and add 
    1. { "stroke-dasharray":"8 8 8 8" } 
  34. that creates a dotted line effect. run the simulation to test the result and it should look something like this
  35. Simulation do not autostart by default
  36. to disable auto , goto Evolution, uncheck the autoplay checkbox 
  37. Create a slider to allow inquiry
  38. go to HtmlView, Interface last tab, first icon for slider, click and release the mouse move your cursor and click on the playPauseButton
  39. the slider should be create above the playPauseButton as show
  40. 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 
  41. 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
  42. Create a checkbox for turning off and on the visual of the trail
  43. 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 
  44. double click on the checkbox just created and insert the following variable showv and text to show
  45. 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 
  46. run the simulation to test the results 
  47. Creating numbers to show in simulation
  48. 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 
  49. 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"
  50. the run of the simulation will be something like this 
  51. Remove messagesLabel
  52. right click on the view element you want to remove, select the option Cut or Remove 


  53. practice removing the timeLabel and timeField as well on your own 
  54. run simulation to check
  55. Calculate velocity from vx and vy
  56. 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 
  57. type in an equation say 
    • v = Math.sqrt(vx*vx+vy*vy);
  58.  notice EJSS will help you with prompts after the function Math.
  59. completed the equation and trying the compile will result in error or not, but goto Variable page to declare v 
  60. Copying
  61. one of best time about EJSS is the ability to copy, so copy the Field and paste it onto the control panel 
  62. paste into the controlPanel, it will go all the way to the bottom
  63. change the properties as shown 
  64. Insert a Label on top of the newly created field2 which is variable v and add text v = 
  65. key in v = into the Text as shown 
  66. run your simulation to check does it look like this? if not, why ? 
  67. Insert pictures
  68. 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
  69.  using your file explorer or otherwise, create a new folder of the same name as your *.ejss 
  70. it should look like this 
  71. 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 
  72. Cyberwellness find creative commons licenses pictures from Google
  73. using chrome, search for pictures you want to add 
  74. 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
  75. select the image 2D and drop it onto the desired position on the plottingPanel 
  76. 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" 
  77. run the simulation to check 
  78. Increase size of Image
  79. go to image and change SizeX and SizeY to say 0.5 for both, 
  80. run the sim 
  81. Preparing for mobile deployment
  82. 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")
  83. run to check 
  84. How to make the ball round?
  85. to create a round ball, set the square aspect to true 
  86. run and sim to check 
  87. Enable User Interaction
  88. go to plottingPanel Interaction Enable select True 
  89. go to the image and select EnabledPosition to "ENABLED_ANY" 
  90. run and check 
  91. Axes that always align to XFixedTick, YFixedTick for graphing norms
  92. go to initialization radio button and create a page 
  93. 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]);
  94. run and check the result 
  95. Removing the gutter/border to increase view
  96. find this screen and insert [0,0,0,0] where the order of the number gutter width is  [left,top,right,bottom] 
  97. run the sim 
  98. Making the axis nicely spaced
  99. go to plottingPanel and key in the values as shown 


  100. run sim to check 
  101. Insert a picture to fill up the maximum plottingPanel view
    https://pixabay.com/en/soccer-pitch-field-diagram-green-304171/
  102. 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()); }
  103. add a picture of into the plottingPlanel using the screenshot as guide
  104. run sim to check  
  105. Creating an goalpost for making the ball stop just at the collision
  106. 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.
  107. 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"
  108. Declare the variables in the Variable page 
  109. run and see the result 
  110. Disabling codes using Tabs
  111. 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
     
  112. run the sim to check the view 
  113. in any modeling tool, everything needs to be precise if it is not, a lot of funny things can happen
  114. Using Math functions in any part of the simulation
  115. 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")
  116. put this line inside the plottingPanel Width and Height 
  117. run and see 
  118. got to Evolution click Events and create a page 
  119. on the Event page, change the zero condition and action as follow 
    •  return x - x1
    • vx = 0;
    • vy = 0; // stop the ball
  120. you may need to change vy =0 to make the ball travel to the goalpost
  121. run and see the result 
  122. Debugging and Seeing the results
  123. 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")
  124. type this two lines inside plottingPanel Decoration the BRMessage and BLMessage respectively 
  125. run and see 
  126. Disabling to see effects of change
  127. how to know that the changes made is indeed the reason? try to disable that page and see 
  128. run and see 
  129. continuing with the rest of the activity, enable back the event page 
  130. Creativity Practice to add score
  131. you may want to add a score after each successful event. Try it!
  132. 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")
  133. Practice moving the ball back to the centre after scores, Falding Scaffolds
    • x = 0; 
    • y = 0;
  134. run and see 
  135. FullScreen on browsers using custom function
  136. 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 
  137. go to Custom and add this code to enable fullscreen 
  138. 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();
    •     }
    •   }
    • }
  139. download this icon
    and add to the Unnamed folder 
  140. create the button to toggleFullScreen custom function
  141. add Disabled _isPlaying ImageOnUrl to be "./Unnamed/full_screen.png" OnClick toggleFullScreen() ImageOffUrl "/org/opensourcephysics/resources/controls/images/close.gif" and OffClick toggleFullScreen() 
  142. run and see 
  143. Hitting the left border and stop
  144. to create precise time to stop, EJSS can do this easily using Event instead of FixedRelationship which will overshoot during the time step dt.
  145. goto Event, start a new tab and name it LeftWall 
  146. 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
  147. run and check 
  148. Ease of change, name the variable size = 0.5 and add to the LeftWall event
  149. define size as 0.5 
  150. change the LeftWall event
    • return x-size/2-xmin; //recall 0.5 was diameter of ball 
  151. the benefits of variabilization is ease of change later on
  152. continue to work on your simulation to include
    • collision with top ymax 
    • collision with bottom ymin 
    • collision with xmax including the goalpost 
  153. hint are available if need by clicking the images
  154. Creating model and source for sharing online
  155. right click the right package option and choose the first 2 options 
  156. 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 
  157. ejss_src_Unnamed.zip is the source code for which you want others to edit the simulations
  158. 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
  159. lunch until 1400


Day 1 Afternoon
14h00 - 17h30: Load, inspect, and run a JavaScript simulation from within EjsS

Modify 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


15h30 - 16h00: Break and Networking

1600-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/

Proposed Program


TRAISI Workshop: Creating an Interactive Electronic Textbook
http://www.opensourcephysics.org/features/newsdetail.cfm?id=549 Resources are shared by Prof Wolfgang

Computational Modeling
with
Open Source Physics and Easy Java/JavaScript Simulations

WORKSHOP SCHEDULE
Day 2: Morning:  What is available

09h00 - 09h30: Introduction to the workshop (All)
09h30 - 11h00 Exploration of the OSP-EJS-ComPADRE Platform
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)
Deployment of simulations: Web servers and EjsS Readers (FE)
More deployment: EPub 3, iBooks and Apps (FE)
ACTIVITY: Download and view EPubs using Readium Plugin or iBooks.  (All)

ACTIVITY: Download and organize a personal collection into the online or mobile EJS Reader. (All)

11h00 - 11h15: Break
11h15 - 13h00:  Step-by-step tutorial packaging EjsS models into an eEPub. (WC)
Step-by-step tutorial to create the Modeling Wealth Inequality ePub.
http://www.compadre.org/osp/items/detail.cfm?ID=13337

IMPORTANT: The schedule is not heavenly scripture and may change. Activities and topics not covered in the morning will be covered in the afternoon.  Ask questions if during the presentations if something is unclear.

Lunch: 12:30-14:00
Day 2: Afternoon: Do it yourself.
14h00 - 16h00: Tutorial

Participants  will complete the step-by-step tutorial as described in Chapter 03 of the EjsS Manual and then package it as an ePub
15h15 - 15h30: Break
15h30 - 17h30: EjsS Best Practice
Organizing your workspace (WC)
Online Libraries (FE)
Load, inspect, and run a JavaScript simulation from within EjsS 
How much JavaScript do you need to know? (JavaScript 101) (FE) slides provided by Professor Paco


How much HTML and CSS do you need to know? (HTML 101) (WC)

ACTIVITY: Download and organize the SOURCES of a personal collection into EjsS itself. Open simulations and navigate in the examples. (All)

Day 3: Morning

09h00 - 11h00: EjsS models in depth (FE) http://iwant2study.org/lookangejss/00workshop/ Use EJSS to get the templates from Professor Paco's AM workshop

http://iwant2study.org/lookangejss/00workshop/2016WolfgangPacoFelixLookang/Day3/
Model anatomy
How EjsS model tabs work together
JavaScript variables and type conversions
The ODE editor and its Prelim code page
Binding model variables to view elements and controls
Participants explore examples to fully understand them. They make simple changes to existing models.
Use examples from ComPADRE: Ferris Wheel ID:12944, Harmonic Oscillator ID: 13103, Oscillator Chain ID:12977
11h00 - 11h15 Break
11h15 - 12h30 EjsS views in depth (FE)
Elements and properties
Interface elements
View templates
2D elements
3D elements
Sets, tables and arrays
ACTIVITY: Participants will explore and improve the view of existing simulations
Lunch: 12:30-14:00
Day 3: Afternoon

14h00 - 15h15 Starting a new project (WC and FE)
Modeling a physics phenomenon
Types of models
Variables
Equations and algorithms
Designing a view: common templates

15h15 - 15h30 Break
14h00 - 17h00 Work in individual project (All)
ACTIVITY: Participants with help from instructors work on a new simulation of their choice

Day 4: Morning
09h00 - 10h00 Advanced Programming  (CHOOSE A FEW)
Debugging (WC)
How to use a JavaScript debugger and other tools of the trade.
Sound examples. (WC)
Model elements (FE)
2D Scalar and Vector Field examples with OSP code libraries.  (WC)
Mobile Device Data Acquisition (FE and WC)
Demo of data acquisition techniques. (FE)
Introduction to the Accelerometer Model Elements.  (WC)
Client-Server Computing (FE)
Client Server API and demo 
Class polling with a captive portal
CANVAS and SVG drawing. (FG)

11h00 - 11h15 Break
11h15 - 12h30 Project Work (All)
Independent project work and consultation with instructors.
Lunch: 12:30-14:00
Day 4: Afternoon
14h00 - 17h00 Project Work (All)
Independent project work and consultation with instructors.

Final comments and wrap-up


Survey and Feedback N=21


Title of Workshop / Sharing / ActivityI have learnt something new.The Instructional resources provided are useful.I can incorporate what I have learnt into the design of my lessons.
Strongly Agree211919
Agree022
Disagree000
Strongly Disagree000

What do you like best about the session?

  1. Tutorial page
  2. To learn to modify existing simulations and to make simple ones
  3. The hands-on of the simulation on EJSS with trainers assisting when in doubt
  4. creating apps
  5. on time help
  6. The step by step instructions and also notes online
  7. Handson session to enhance understanding
  8. A story-soccer game instruction.
  9. Ability to do hands on work
  10. The workshop was organised very concisely and the blog greatly allowed for differentiated learning. Very smooth delivery.
  11. Seeing outcome of my work
  12. adequate handholding (with valid examples) & reassurance (& encouragement) given to provide scaffold & assistance for learning & hands-on
  13. Patient facilitators; step-by-step instruction; detailed supporting notes for our reference
  14. Hands on practice and support from trainers
  15. Simple Instructions to Follow
  16. Quick help with debugging and clear guidance on how to use the tools effectively
  17. Lots of learning
  18. Hands on building of materials and solving problems that we faced while building
  19. Hands on activities 
  20. learning from the experts, fellow colleagues. the support & help rendered are ever-ready & present
  21. Practice and guidance by the experts. Be able to view result of my simulation & very rewarding.


What are the areas of improvement for the session?

  1. higher teacher-student ratio
  2. provide more guided steps
  3. Write out the architecture of the system so that learners can follow closely on the logic of the individual steps
  4. Perhaps some pre session activities or reading before the session 
  5. Prepare relevant simulation for modification according to O or A level syllabus
  6. Screen font is quite small
  7. Perhaps the session could be video so that we could review when e course is over. 
  8. Complete documentation/ tutorials on each field of the platform
  9. I think pre-reading materials and activities would be useful
  10. Learning curve is very steep for people who do not know how to code at all. A prerequisite for simple coding should be placed
  11. on my part, i'd need to follow-up & put into practice. on the part of organiser - to make available the resources & render help as participants try out & deploy in their lesson

Other comments about the session

  1. Would be powerful for students to create these simulations and to include modelling. 
  2. It is enriching to learn what are the areas we could change in the simulation.
  3. Awesome!
  4. Alot of resources created in sg by sg teachers...well done!
  5. It was really great and useful! Thanks to all the professors 




older WORKSHOP SCHEDULE

Day 2: Morning


09h00 - 09h30: Introduction to the workshop (All)
09h30 - 11h00 Exploration of the OSP-EJS-ComPADRE Platform
  • 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)
ACTIVITY: Download and view EPubs using Readium Plugin or iBooks.  (All)

ACTIVITY: Download and organize a personal collection into the online or mobile EJS Reader. (All)

11h00 - 11h15: Break
11h15 - 13h00: EjsS Best Practice
  • 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.
ACTIVITY: Modify a simulation. (All)
Assistance will be given to help with the modifications.

Lunch: 12:30-14:00

Day 2: Afternoon


14h00 - 15h00:  Step-by-step tutorial packaging EjsS models into an eEPub. (WC)
Step-by-step tutorial to create the Modeling Wealth Inequality ePub.
http://www.compadre.org/osp/items/detail.cfm?ID=13337
15h00 - 15h15: Break
15h15 - 17h00: Project work

Participants with minimal EjsS experience are encouraged to complete the step-by-step tutorial as described in Chapter 03 of the EjsS Manual and then package it as an ePub
Participants with Java experience are encouraged to convert a Java model into a JavaScript model as described in Chapter 04 of the EjsS Manual and then package it as an ePub.

Day 3: Morning


09h00 - 11h00: EjsS in depth (FE and FC)
  • 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

Use examples from ComPADRE: Ferris Wheel ID:12944, Harmonic Oscillator ID: 13103, Oscillator Chain ID:12977
11h00 - 11h15 Break
11h15 - 12h30 Mobile Device Data Acquisition (FE and WC)
  • Demo of data acquisition techniques. (FE)
  • Introduction to the Accelerometer Model Elements.  (WC)
ACTIVITY: Participants will build an EjsS Data Acquisition App and develop kinematics experiments for use in Singapore schools.

Lunch: 12:30-14:00

Day 3: Afternoon


14h00 - 15h15 Client-Server Computing (FE)
  • Client Server API and demo
  • Class polling with a captive portal
15h15 - 15h30 Break
14h00 - 17h00 Client-Server Project (All)

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


Day 4: Morning

09h00 - 10h00 Advanced Programming
  • CANVAS and SVG drawing. (FG)
  • 2D Scalar and Vector Field examples with OSP code libraries.  (WC)
  • Sound examples. (WC)
11h00 - 11h15 Break
11h15 - 12h30 Project Work (All)
Independent project work and consultation with instructors.

Lunch: 12:30-14:00

Day 4: Afternoon

14h00 - 17h00 Project Work (All)
Independent project work and consultation with instructors.


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


Older Proposed Program


8 Nov 2016
30 pax Advanced Workshop edulab@AST Wolfgang and Paco

– provide 30 pax intermediate workshop (model simple physical systems such as free fall with collision detection using EjSS) in eduLab@AST
09h00 - 10h30: collate some of the features that are useful for their own simulations that they want to add, discuss as a group and show step by step how to achieve it.
·         How to make axis appear with values inside the graph instead of on the gutter for example
·         How to use the JS library from internet
·         How to draw 2D scalar field drawing available in EJS but not yet in EJSS

10h30 - 11h00 break and Networking

11h00 - 12h00 Enhancing the View
     Software installation and preparing for e-pub creation, select one model they work on and one more from the OSP library and prepare the content (xhtml) using Blue Griffon to reduce the errors.

Lunch: 12:00-14:00

1400-1730
Demo how to get a similar model on OSP
edit xhtml files using Blue Griffon
compile both personal and edited library models to be epub
deploy in epub reader via personal devices or chrome browser epub reader extensions

9 Nov 2016
30 pax (Beginner of 60 pax) Expert Workshop in edulab@AST Wolfgang and Paco

09h00 - 10h30 consultation on personally motivating task on the epub contents (text, animated gifs, multiple choice quiz/assessment, )
demo some EJSS solutions to common questions from participants  

10h30 - 11h00 break and Networking 

11h00-12h00 time-tabled time for working on their e-pub projects
Lunch: 12:00-14:00
Day 3 Afternoon
14h30 - 17h30: Independent work, consultations, and breakout sessions based on interest as well as referencing some of the teachers of eduLab project. Workshop on 20+ simulation in
http://iwant2study.org/ospsg/index.php/interactive-resources/physics/02-newtonian-mechanics/08-gravity/153-epub3-gravity

15h30 - 16h00: Break and Networking


10 Nov 2016
30 pax (Advance to Beginners)  Expert 2 Workshop edulab@AST  Wolfgang and Paco

·         09h00 - 11h00: Final Demo and lecture on Curriculum Development and Distribution

·         Debugging simulations using chrome developer tools
·         Optimizing for mobile devices screen size and processor speed
·         Multi-model files and ePubs http://www.compadre.org/osp/features/NewsDetail.cfm?ID=549
·         Creating Android and iOS apps
·         Translating a simulation
·         Contributing to the OSP Collection
10h30 - 11h00 Break and Networking

11h00-12h00 time-tabled time for working on their e-pub projects e book creation using OSP tools

12h00 - 14h00 Lunch

1400-1730 Presentations by teachers and group discussion on their simulation and ebook creations