SLS Hackathon 2019 and Heat Transfer Study Guide

30 Participants will be from schools or HQ and will be competing in groups of 3. Roughly 10 groups.

Registration

https://docs.google.com/forms/d/e/1FAIpQLSebOPfI2tit-Mp7GOqnmQdNMpwT2kFFkvFOgtkgdjyISyLvlA/viewform

Tutorial 2:

Create a brand new Game Step-by-step EJSS tutorial

1. unzip the downloaded EjsS_5.3_190422-beta.zip  file into any location easy to find eg. Desktop or D Drive.

   updated instructions, old screenshots use EjsS_5.3_190422-beta.zip if possible

2. navigate to the folder eg it is called EjsS_5.3 and double click the EjsConsole.jar to launch the Ejss program

   

3.  if you are asked to trust it, please do that, for example in Mac, right click and select the Java runtime to open the trusted file.

   

4. a pop up appears, select Open

   

5. Initialization to JavaScript
6. select Ok on the Error on the Ejss server not available for updates, the Spanish professors Paco and Felix are working on it, or you can set it to never check for updates. 

   

7. the first time Ejss editor runs, like all java program, it needs a workspace, just accept the default suggested workspace inside EJSS5.3. 

1. on the Ejss console 5.3 select Basic options and select Programming language as JavaScript as we are only interested in making interactives that run in SLS, mobile phones, etc

   EJSS has be defaulted to JavaScript since 20190422, so you can skip this step

2. close the java flavor of the editor by clicking on the RED x on the top left corner of the editor

   

3. relaunch EjssConsole.jar by double-clicking the file

   

4. again, the editor and the console will be open and look something like this

   

5. Now, we are starting to make a Catch Falling Apple Game
6. roughly we know game needs a time, t and an increment dt to run the simulation.
7. Select the radio button Model and click on the Variables to create a page of variables and click OK 

   

8. in this page, click on the Name and Initial value and the Dimension as shown, for example, t is time, initial value =0, dt is time step, initial value =0.05

   

9. go to Evolution, click on a page for ODE's ordinary differential equations and click OK

   

10. key in Independent Variable as t and Increment as dt 

    

11. Run the sim
12. to test whether the simulation/game is working, to generate it click on the green right arrow

    

13. Setting the Chrome as your browser
14. sometimes, you default browser is non functional like it doesn't support JavaScript ....., to change to Chrome on Windows go to Start - Default Programs 

    

15. Click and choose Set your Default programs

    

16. Select Chrome and give it all defaults

    

17. Set this program as default

    

18. so Chrome should be launching now from EJSS editor instead

    

19. Save the name with no space bar, for example, catchapplegametemplate.ejss and click Save. The files will be in the source folder of your workspace 

    

20. click Ok on the warning of no HTML view

    

21. select HtmlView radio button and click on the panel to create a simulation view as suggested by ejss editor and click OK

    

22. the view should look like this

    

23. Ejss editor comes with Interface, 2D Drawables, and 3D Drawables, select a simple template of SinglePlot

    

     and drop it exactly on the simulation view position

    

     
24. again, click the green left arrow to generate the simulation 

    

25. roughly we know we want to have 4 apples fall down and a basket to catch it so to make the 4 apples fall, understanding array will be useful. Apples will have the position x and y and the speed to control the motion down is vy.  The game may have 8 rounds and 4 options to chose from. n is just a container variable because I usually use n for dimension.
26. go to Model- Variables and create the missing variables mentioned above and their initial values.

    

27. regularly save your work and generate the simulation to see the effects of new changes.
28. the simulation should still run, that means the codes are generated correctly but with not much to show for.
29. select HtmlView radio button and double click on the

    

    plottingPanel, a Properties for plottingPanel will pop up 

    

30. input Width as 100% and Height as ""+window.innerHeight*0.8 

    

31. generate the simulation it should look like this

    

32. This is a bit like graph plotting and defining the 4 boundaries of the graph paper or plottingPanel, we key in the MinimumX as -0.5, MaximumX as 3.5 and MinimumY as 0 and MaximumY as 6 as the size of the plottingPanel

    

33. generate the simulation 

    

34. in the game requires students to click on the plottingPanel so select Interaction-Enabled true

    

35. generate the simulation and you can click on the plottingPanel and there are values shown on the bottom left corner now.

    

36. for the 4 apples, to show them on the plottingPanel click on the 2D drawables, ImageSet

    

    and drop it on the plottingPanel

    

37. double click on the ImageSet and add the numberofElements, X and Y and SizeX and SizeY and pixelSize true

    

38. for file manager, create a folder in the source folder with your file catchapplegametemplate.ejss let call the folder catchapplegametemplate. Since my workspace is /Users/lookang/Google Drive/PublicLawrence/workspace/I will create the folder there to be with the *.ejss.

    

39. a possible folder location in workspace source /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate 

    

40. now go to Chrome browser and search and apple image, make sure to use Tools, Label for reuse with modification and download your apple picture and save it in the folder. Note that EJSS editor only supports png format for transparent background, jpg or jpeg works but there will be this white background color that will show up in the simulation, svg is not supported. 

    

41. or you can also use this apple, right click it and save it to your computer.

    

42. copy this apple file into the folder created, for me, it is /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate, it may be inside this path /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate/apple.png 

    

43. go back to Ejss editor, remember we were working on the imageSet, double click on the imageSet to pop up the properties, look for ImageUrl and add it 

    

44. the path looks something like this "./catchapplegametemplate/apple.png"
45. generate the simulation, the output will look like this 

    

46. to make the apple fall down, go to Model - Evolution - double click on the State and add y and the Rate is -1

    

47. generate the simulation, the output will look like this 

    

48. notice the apples all fall at the speed of -1
49. to make the apples fall at random speed, call the Rate -vy[i],

    

    if you try to generate the simulation it will fail, do you know why?

    

50. in programming, it is useful to know what went wrong, Chrome has a useful feature called Developer Tools, to start it, click on the three dots and goto More Tools - DeveloperTools

    

51. the output show this

    

52. so do you know what to do next? hint variables?
53. you probably realized you need to declare the variable vy introduced in evolution page so remove the error of vy not defined

    

54. try to run the simulation again by clicking the green run button and again, chrome warns of another error, this time on i

    

55.  so if you want to use [i], need to make an array of n dimension

    

56. and also another mistake is the variable y also need to be of [i] in the evolution page 

    

57. generate the sim and notice the apples are moving upwards now 

    

58. can you think of a way to way the apples go down?
59. the easiest way will be to make variable vy =1 in the Model - Variable page

    

60. generating the simulation will produce something that looks like this

    

61. can you think of a way to make the apples fall at a different speed?
62. the hint is to introduce javascript such as Math.random() that introduce a random  (inclusive of 0, but not 1) number, which you can google https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random 

    

63. the generated simulation or output will look like this

    

64. while we can feel the excitement (first time can control JavaScript simulation) but did you notice any potential problem?
65. yes, Math.random() may result in a random number that has a small chance to be 0
66. can you think of a way to make the number greater than a minimum speed?
67. yes, google can help and the code is Math.max() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max so Math.max(vy, 0.5) will return a number larger. so if the variable vy is 0,   Math.max(vy, 0.5) returns 0.5, if vy is 0.8, Math.max(vy, 0.5) returns 0.8. copy this code into the vy in the variable page if you have difficulties 
    • Math.max(Math.random(),0.5) 

      

68. the output will look like 

    

69. sometimes, we want to know exactly what are the exact values inside vy, we can use this method to display the value. add this into the HtmlView - plottingPanel - (double click it) - Decoration - TRMessage 

    

    • "vy="+vy
70. generate the output, notice the Top Right Message is displaying vy[0], vy[1], v[2], and vy[3] values in yellow box

    

71. how to create a basket with position (xc,yc) to catch the apple? 
72. go to variable and right click to create a new page 

    

73. and create xc and yc with 0 and 0.5 initial values

    

74. ejss has a cool feature called group for organizing all the drawables in a plottingPanel

    

75. click and drop it on the plottingPanel

    

76. click Ok to agree to put a group on the plottingPanel for organizing on the catcher assets
77. the group should appear just below the imageSet

    

78. can you figure out how to insert a picture of an image? it is similar to the earlier example of apples
79.  look for the HtmlView - 2D Drawables - Image

    

    and drop it on the plottingPanel and agree to the default name (you can change it if you like)

    

80. the image should be netted in the group

    

81. key in these values inside the respective Fields. (xc, yc) controls the actual position of the image, SizeX =200 ad SizeY=200 and PixelSize = true controls the appearance of the image, enabledPosition = "ENABLED_X" because I only want the catcher basket to be drag in X direction only for ease of gameplay and ImageURL = "./CatchingGame/basket3.png" so you need to copy a picture of a basket and copied it to the location in source folder previously used as /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate for me.

    

82. again exercising good internet practices look for an image licensed for reuse like in step 40 

    

83. or you can use this image of a basket, right click on it and save it to the location on your hard disk in the where your workspace is defined, for me it is /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate 

    

84. the location of the source should look like this 

    

85. click the folder catchapplegametemplate and copy the basket inside 

    

86. generate the simulation and the chrome browser should show this, and drag the basket should allow you to move it LEFT and RIGHT only.

    

87.  make the first apple go back to the top return y[0] = 6 , in code y[0]-6 = zero crossing when they reach the bottom, y[0]=0,  to do this, goto Model - Evolution - Events 

    

88. click Events and a pop up will appear, click it to create a page

    

89. click OK to accept the name 
90. and the Event for ODE Evolution Page will show this by default

    

91. type in the Zero condition and Action

    

92. generate the output to see this effect 

    

93. repeat the steps for second, third and fourth apple bearing in mind the same idea of creating another Event page for y[1], y[2], y[3] respectively
94. EJSS editor has a nice feature called 'Copy this page', right click and selects the option

    

95. change the number 0 to 1 because we are trying to reference the second element in the array of the apples 

    

96. check the output, you should see the apple y[0] and y[1] are able to restart the variable y position when they reach y[0] = 0 and y[1] =0 

    

97. repeat the steps above for y[2] 

    

98. and y[3]

    

99. check the output by clicking on the green run button 

    

100. create a new ODE Evolution Page and 

     

101. name new page collisioncorrect 

     

102. to detect basket (xc, yc) with apple 1 (x[0],y[0]) , use Pythagoras theorem, in code
     • Math.sqrt((x[0]-xc)*(x[0]-xc)+(y[0]-yc)*(y[0]-yc)) 
103. to calculate the separation check if the separation is equal to 0.5, putting it in code
     • return Math.sqrt((x[0]-xc)*(x[0]-xc)+(y[0]-yc)*(y[0]-yc)) -0.5;

       

104. the action will be to increase a score by 2 and place the 4 apples back to the starting top position
     • //alert();
     • score=score+2;
     • y[0]=6;
     • y[1]=6;
     • y[2]=6;
     • y[3]=6;
105. // is comment line, anything after // is not interpreted by the browser and serve as useful comments for human to read
106. the command alert() is useful for debugging the setup breakpoints to see the effects of that code
107. did you notice any problem with the code? yes! the variable score is just introduced and needs to to be declared in the Model- Variables page - say Var Table 2

     

108. to make sure that the score indeed increases by 2, we add in the HtmlView - plottingPanel - Decoration - TLMessage code is
     • "score="+score

109. 

110. the output looks like this, notice the Top Left corner show score

     

111. similarly, create for events for which the basket collide with the other apples
112. copy the collsioncorrect page

     

113. Frequently Asked Questions: SLS Hackathon and Interactive Learning Resources

     • What was the main goal of the 2019 SLS Hackathon? The primary goal of the 2019 SLS Hackathon was to engage early adopters of the Singapore Student Learning Space (SLS) by teaching them how to use Easy JavaScript Simulations (EJSS) to create simple, interactive resources like simulations and games. These resources were intended to make their SLS lessons more engaging for students and to allow teachers to learn basic coding skills for educational purposes. The ultimate aim was for these teacher-created resources to be uploaded and integrated into actual SLS lessons.
     • What is EJSS, and why was it used in the SLS Hackathon? EJSS, or Easy JavaScript Simulations, is an authoring tool that allows users, particularly educators with limited coding experience, to create interactive simulations and games using JavaScript. It was chosen for the SLS Hackathon because it simplifies the process of developing HTML5-based resources that can run within the SLS platform, as well as on mobile phones and other devices. EJSS provides a visual interface and step-by-step tutorials to guide users through the creation process, focusing on making interactive learning content accessible to teachers.
     • What types of interactive resources were created during the SLS Hackathon? The SLS Hackathon resulted in the creation of a diverse range of interactive resources, primarily simulations and games, covering various subjects and educational levels (Primary, Secondary, Junior College). Examples include simulations for physics concepts like heat transfer (heat gain/loss by different materials), kinematics, and vector addition. Games were also developed for subjects like English (cloze passage, sentence scrambler, grammar), Mathematics (target sum, number multiples, basic arithmetic), and even computing (bubble sort). This variety demonstrates the versatility of EJSS in creating engaging content across different disciplines.
     • How were these interactive resources intended to be used in the classroom? The interactive resources created during the SLS Hackathon were designed to enhance the interactivity of SLS lessons. Teachers could embed these simulations and games directly into their online lessons to provide students with hands-on, visual learning experiences. For example, a heat transfer simulation could allow students to explore how different materials conduct heat in a dynamic way, while a grammar game could make practicing language skills more engaging and fun. The goal was to move beyond passive consumption of information towards active learning through exploration and play.
     • Can teachers with no prior coding experience create these types of resources? Yes, the SLS Hackathon specifically targeted teachers, many of whom likely had limited or no prior coding experience. EJSS is designed to be user-friendly, with tutorials and a graphical interface that simplifies the development process. The hackathon provided training and support to empower teachers to create their own interactive resources. The focus was on enabling teachers to learn the basics of coding in JavaScript within the EJSS environment to produce functional educational tools.
     • What is the significance of the "Catch Falling Apple Game" tutorial mentioned in the source? The "Catch Falling Apple Game" tutorial serves as a step-by-step guide to introduce participants (and potentially other teachers) to the fundamentals of using EJSS to create a simple interactive game. It covers essential aspects of EJSS development, including setting up the model (variables, evolution), creating a view (displaying elements), handling user interactions, implementing game logic (like collision detection and scoring), and even incorporating multimedia elements like sound. This tutorial acts as a practical entry point for teachers to learn the basic principles of creating educational simulations and games with EJSS.
     • How does the "Heat Transfer for Primary School" resource relate to the SLS Hackathon? The "Heat Transfer for Primary School" resource, credited to the Yumin Primary Team and lookang, appears to be a direct outcome of the type of activities encouraged during the SLS Hackathon. Several projects listed from the hackathon focused on heat transfer concepts developed by Yumin Primary. This resource, compiled with a later version of EJS (EJS 6.1 BETA), likely utilizes the skills and approaches learned during the hackathon to create specific interactive content for primary school students to understand heat transfer.
     • Where can educators access and use these types of interactive learning resources? The document mentions that the created models can be embedded in a webpage using an iframe code, suggesting that these resources can be hosted online and integrated into various learning platforms, including the SLS. The Open Educational Resources / Open Source Physics @ Singapore website (https://iwant2study.org/lookangejss/) serves as a repository where many of these simulations and their source code are available, often under Creative Commons licenses, allowing educators to use, adapt, and share them. The specific example of uploading a zipped model to the SLS also indicates a direct pathway for integrating these resources into the national learning platform.
114. change the x[0] to x[1] and y[0] to y[1], -0.5 change to -0.25 as it should be harder to get the wrong apples and the score=score-1

     

115. test your simulation by generating the output and drag your basket to catch the second apple at position (x[1],y[1]). you should notice the score decrease by 1

     

116. copy for the third apple (x[2],y[2]) by right click and copy page

     

117. copy for the fourth apple (x[3],y[3])

     

118. the output looks like this, drag your basket and catch them. Did the score change accord to your code?

     

119. so for clarity of the apples, let's add numbers to the apple using an array, goto Model-Variables -Var Table and add text [1,2,3,4] 

     

120. go to HtmlView - plottingPanel 2D drawables - sets of 2D drawables - TextSets and add it to the plottingPanel below the imageSet, so that the numbers will appear on top of the image apples. 

     

121. double click on the textSet and in the pop-up dialogue box, add these fields with the respective variables, n is the number of elements to display, Position x and y and the text which was defined as [1,2,3,4]

     

122. run the output to test

     

123. to shuffle the apples,  create a new page on Model - Custom  

     

124.  google shuffle javascript function and look the function, or you can just go to my GitHub https://github.com/lookang/codesforejss/blob/master/function%20shuffleArray(array) and copy this code in the Model - Custom - Page. You may rename the page name to reflect shuffleArray(array) but it is not critical, just for ease of finding your codes.

     

125. to use this function, type shuffleArray(x) but where should this be done?
126. since we may want this shuffleArray(x) to run at the beginning of the simulation, go to Model - Initialization - create a new page and call it shuffleArray(array)

     

127. it should look like this

     

128. test your simulation by clicking on the green run button. Notice the shuffleArray(x) shuffles the position x[0],x[1],x[2],x[3], so the correct answer is still 1 which in my screenshot is now x[2]. This code helps us to simplify our correct solution to always the apple with the number 1.

     

129. let's add sound when the basket catches the apple 1, to do that, find a sound file and copy it the workspace folder, for me, it was at /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate 

     

130. or you can use this file called Ding Sound Effect.m4a  
131. even though the file is in the directory folder, EJSS editor needs a way to know how to call the sound file out, so go to HtmView - Interface - Audio, and click and drop it on the wrappedPanel, do not change this name audio as we will be referencing it.

     

132. double click on the audio and a pop-up properties panel will appear for which the audioUrl is the location of the file "./catchapplegametemplate/Ding Sound Effect.m4a". You can click on

     

     and select via the pop-up prompts and click Ok
133. the property pop-in looks like this

     

134. as I have decided to use this sound file when the user collides apple 1 with the basket, go to Model - Evolution - Events - collisioncorrect Page and add this code in the Action
     • _view.audio.play(); // the name audio refers to this name on the wrappedPanel 

       

135. the Events collisioncorrect Page looks like this 

     

136. the order of the _view.audio.play(); after score=score+2 decides how the browser will sequentially execute top to bottom, but in this case, it is not critical
137. run the simulation to test the simulation, the sound from the file Ding Sound Effect.m4a will be executed when the basket catches the apple 1 (correct answer by my design). There should be no sound for basket catches apple 2, 3 and 4 but feel free to add yourself other wrong answer sounds onto the respective positions of the other Events for basket meets apple 2, 3, and 4 respectively 

     

138. to make the game really interesting, let's design a game with 8 number of rounds with 4 apples as options (mentioned earlier before).
139. create a new page of variable 
140. and name it for teachers to change

     

141. and use answerstringarray to store the words on the apples and catchanswerarray stores to words on the basket.  Copy these values into  answerstringarray and catchanswerarray and declare the Dimension as [numberofoption][numberofrounds+1]
     • [["感到","及时","前来","各式"],["苦苦","草草","大开","人才"],["支持","各式","感到","苦苦"],["及时","前来","大开","人才"],["前来","各式","感到","苦苦"],["大开","人才","及时","支持"],["人才","感到","苦苦","各式"],["各式","及时","前来","人才"],["","","",""]]
     • ["气愤","哀求","鼓励","阻止","探望","眼界","培养","各样","","","",""]
142. answerstringarray is where the 4 possible answers are stored in an array the "" keep the string format, [] defines each array and , comma separates each array from each other and the final first and last [] is the format for array
143. it is not important if you don't understand Chinese as we will keep the numbers on the apples so just drag the basket horizontally and catch the apple 1 for correct. In addition, this tutorial demonstrates the flexibility of the EJSS editor as a tool for almost any interactive simple game created by ordinary teachers like us.
144. the Model-Variables - for teachers to change looks like this 

     

145. whenever we introduce a big change to the simulation, run to test that it still runs correctly, usually, it is better to save a new name (lower save icon)

     

     to the filename and revert to older versions and restart adding new codes than to debug (which usually is more painful than revert to earlier working file). So save this before continuing. Let's name it catchapplegametemplatev01.ejss 

     

146. run your simulation and check this code didn't break your game 

     

147. let's create a placeholder for showing some textanswer to overlay on the apples for Teaching and Learning purposes. Go to HtmlView - plottingPanel - textSet and right click to copy it 

     

148. and paste it in the same position, note that EJSS editor automatically rename the paste as textSet2

     

149. double click on textSet2 the properties pop up already has the earlier values, change the Text to textanswer 

     

150. note that EJSS editor doesn't know you want it to be a variable as it is not defined and automatically add the string "" to it. 

     

151. if you want EJSS to understand textanswer is a variable, you can use %textanswer% 

     

152. it now appears with a pink background suggesting EJSS editor doesn't understand what it is. Do you know how to fix this?
153. go to Model - Variables - Var Table tab and add it as shown

     

     • ["感到","及时","前来","各式"]
154. run the simulation to check 

     

155. I will introduce a comboBox to allow users to change different levels of difficulties, go to HtmlView - Interface - ComboBox 

     

156. click the combobox and drop it on the executionPanel above the runPauseButton, agree to create it 

     

157. double click on the Options Properties for comboBox and add the options 
     • ["sec 1","sec 2","sec 3","sec 4"]
158. this will create an option but it needs to know what to do so go to https://github.com/lookang/codesforejss/blob/master/comboBox and copy the code and paste inside OnChange and edit accordingly to fit your options 

     

159. the codes should look like this
     • var opts = _view.comboBox.getProperty("SelectedOptions");  // array of options
     •     var option = (opts.length > 0)? opts[0]:""; // selected option 
     • if ( option=="sec 1"){
     •   
     •   }
     • else if ( option=="sec 2"){
     •  
     •   }
     •   else if ( option=="sec 3"){
     •  
     •   }
     •   else if ( option=="sec 4"){
     •  
     •   }
160. run and simulation to check

     

161. since the Chinese words and the number overlay as they share the same position (x[],y[]) but yet I do not want to move it too much, I can use Relative Position. 
162. go to HtmlView - plottingPanel - textSet and double click to start the property, 

     

     look for  Relative Position and add "NORTH" via the button  and click on the bottom icon which says "NORTH"
     

     

163. do the same for textSet2 but this time is "SOUTH" 

     

164. run the output to check 

     

165. now that the apple is done with words and number, do the same of the basket go to Model - Variables - Var Table 2 tab and add the variable name as textcatch and "气愤" as an initial value so that when the simulation first run, it has this value.

     20190422 note error: do not include [] as it may cause bug in iOS deployment, just pure string "气愤"

166. to assign textcatch to a placeholder for the variable textcatch,  go to HtmlView -2D drawables - textand add it to the plottingPanel - group

     

     which is for the basket, click ok

     

     and it looks like this.

     

167.  to edit the properties of text, double click on it and add position X as xc position Y as yc and the text as %textcatch% and RelativePosition as "SOUTH"

     

168.  the output looks like this 

     

169. let the simulation run for a few rounds, did you something amiss? the apples did not shuffle! Where should you add codes to make the apples shuffle?
170. yes! add shuffle anywhere that makes sense. for example right after the event of a correct collision of basket and apple [0] hint: go to Models - Evolution - Event  Page collisioncorrect and add shuffleArray(x); 

     

171. run the output and notice the first apple actually changes position after the correct collision is detected and actions executed.

     

172. in addition to adding sound via actual mp3 files, in step 128, it is possible to harness the power of web API from text to speech synthesis. go to https://github.com/lookang/codesforejss/blob/master/function%20speech%20() and copy this code in a new custom page in Model - Custom - right-click to create a new page for ease of management of codes 

     

173. and name it as speech 

     

174. copy and paste the codes and replace all the existing default to become it 

     

175. to use this code speech(), we need to replace the inside with the words needs for text to speech synthesis. for example, if we wanted the simulation to say 感到 when the simulation gets a correct response basket collide with apple 1, where should the code be added to?
     • speech(感到) ;
176. yes, add to Models - Evolution - Events - collisioncorrect - Action  

     

177. run the simulation to test and speech should be added when basket collide with apple 1, for this API to work on Windows, Mac, Linux and Android Chrome browser.
178. to get this API on work on iOS, it is necessary to add this speech code to any button on the simulation as required by Apple, so let just use the play button, go to HtmlView - runPauseButton - OnClick 

     

     • _play();
     • speech("玩"); // needed for iOS
179. run the simulation and use a iOS device to test, which will be difficult without a web server that you can FTP the file up https://iwant2study.org/lookangejss/chinese/ejss_model_catchapplegametemplatev01/catchapplegametemplatev01_Simulation.xhtml, you just have to believe me and watch this https://www.youtube.com/watch?v=CtPRZRnNksE YouTube
180. to dynamically speech the correct answer, use this code, recall that textanswer[0] refers to the zeroth element in the array textanswer and textcatch is the basket text.

     

     • speech(textanswer[0]+textcatch);
181. run the simulation to test the dynamic speech
182. adding a scoring mechanism to correct
183. I use an counter variable called correct, which will increase by 1 every time the user gets the correct answer. Please declare your variables in the appropriate page, see screenshot for the hint

     

184. go to Models - Evolution - Events - collisioncorrect to add the line
     • correct = correct +1; // game mechanism counter to increase correct by one
185. run to test your new additional code works before progressing on
186. the idea is if correct is equal to 8, the simulation will pause and show a Dialog Box to congratulate the user and show the score and the maximum possible score, else we replace textanswer and textcatch will increment to the next set in the array in a increasing by 1  

     

     • if (correct==8){ // game mechanism counter
     •   _pause();
     •   _tools.showOkDialog("游戏结束，恭喜你得到"+score+"/"+2*numberofrounds+" !");
     •   }
     •   else{
     • textanswer=answerstringarray[correct]; //since correct is increase by 1, use this to change 4 options
     • textcatch=catchanswerarray[correct]; // change basket text as well
     • } // game mechanism counter
187. check the output and run the game until correct==8 

     

188. adding a negative scoring mechanism to incorrect
189. to push the boundary of gaming, let say if the user got the answer wrong, a penalty is impose. To do that, can you think of a way to add using these codes and where should it be added to detect the incorrect collisions?
     • score=score-1;
190. yes, go to Model - Evolution - Event - collisioncorrect 2 and rename it collisionwrong2 for ease of human reading and add the score=score-1 to the Action field

     

191. test the effects of the new code on the apple 2 , notice the score will decrease by 1

     

192. do the same of the apple 3 

     

193. and 4

     

194. test your apple 3 and 4 by click on the green right arrow
     , does it decrease the score by 1? 

     

195. adding data analytics?
196. in my interactions with teachers who use my simulations, they have suggested that it would be nice if as they walk around to facilitate learning with the simulations that there be a log of the various things the user got correct or wrong. the following is a data log mechanism and displaying it on the simulation top right corner.
197. add variable log and make sure the initial value is left blank because i am using the fact that it is undefined in the beginning

     

198. add this code to the Model - Evolution - Events - Collisioncorrect0 , wht it does is to add to itself and next line and add textanswer[0] ( apple 1 text) and basket textcatch and add a unicode for correct tick. 

     

     • log = log+"\n"+textanswer[0]+textcatch+"✅"; // even though the unicode is not showing up correctly in EJSS editor, it work perfectly in Chrome
199. to make it appear at the top right corner text, go to HtmlView - plottingPanel - double click on it and a pop up properties - select Decoration - TRMessage and add this line of code

     

     • "分数="+score+"/"+2*numberofrounds+"\n"+log 

       

200. what it does is to display a string called "分数=" and concatenate with variable score and concatenate with 2 multiply by numberofrounds which has an initial value of 8 and next line and concatenate with the log, run the simulation to check 

     

201. unsatisfied with the undefined at first, we will assign a value if it is undefined initially by going to https://github.com/lookang/codesforejss/blob/master/undefined copy the code and paste it on the Model - Initialization - create a new page

     

     
     
     and name it undefined
202. alternately you can use the code here
     • if (log==undefined){
     •   log="";
     •   }
203. the run simulation should have this log without the initial undefined

     

204. similarly, can you figure out a way to show even the incorrect answers? to strength the learning analytics ?
205. go to Model - Evolution - Events - collisionwrong2 and add this code that the log and add to itself and next line and concatenate textanswer[1] and concatenate textcatch and concatenate the unicode ❌. 

     

     • log = log+"\n"+textanswer[1]+textcatch+"❌";
206.  test your run simulation

     

      
207. repeat the steps for apple 3 using the code
     • log = log+"\n"+textanswer[2]+textcatch+"❌";
208. and apple 4 
     • log = log+"\n"+textanswer[3]+textcatch+"❌";
209. run the simulation to test the codes

     

210. the final analytics cum gamification, is even if the user does not choose the apples, we can minus 0.5 marks to the score and also display to the teacher, what are some of the inactions by the user.
211. go to Model - Evolution - Event and add a logic that count 4 times for each apple to be reposition back to 6, score minus 0.5 and add to the log. my code is 

     

     • notrynumber = notrynumber+1;
     • if (notrynumber%4==0) {
     • score=score-0.5;
     • log = log+"\n"+"口口"+textcatch+"❓";
     • }
212. remember that notrynumber is a newly introduced variable, how should you make EJSS understand it?
213. yes, go to Model - Variables - Var Table 2 and add it

     

214. do you still recall how to make EJSS display the value of any variable?
215. yes, use any empty BRMessage for example add 

     

     • "notrynumber = "+notrynumber
216. the run simulation should be able to show notrynumber becoming 1 if the user did not catch apple 2 

     

217. add the same code into Event 2 

     

218. Event 2 2

     

219. Event 2 2 2

     

220. run the simulation, notice the score does -0.5 when all 4 apples are reposition back to y =6 but the notrynumber is stuck and for the game to be fair, we need to reset this number notrynumber back to 0 when the correct collision is detected.
221. go to Model - Evoltuion - Events - collisioncorrect and add 

     

     • notrynumber=0;
222. Buggy apple disappearing?
223. some times, the apple has go down to below 0 without triggering the Action for Event, Event 2 Event 2 2 and Event 2 2 2 which control the apple reposition with they reach y = 0. The Type Zero crossing sometimes cannot detect this Zero Condition so to ensure Zero condition is met, try Type as State, which means y = 0 is sure to be detected.

     

224. change the Type to State event for Event 2 

     

225. Event 2 2

     

226. Event 2 2 2 

     

227. missing apple should happen anymore when Event State Type is selected

228. comboBox menu for user to change the levels of difficulties
229. navigate to HtmlView - comboxBox - double click for the pop up properties. click on the the Onchange to edit

     

230. the Code for comboBox Onchange looks like this for earlier parts 

     

231. using this template code, we can control what the combo Box does when the respective option are selected. we have designed a simple way for teachers to key in their own questions here by adding new option, for example sec 5 or TPSS sec 1 etc. the following is for sec 1 and we assign answerstringarray and catchanswerarray. this is to ensure when the user change from unknown option to sec 1 and option is understanding and assign correctly 

     20190422 error on iOS deployment: for catchanswerarray just use pure string, do not need to add []

     • answerstringarray=[["感到","及时","前来","各式"],["苦苦","草草","大开","人才"],["支持","各式","感到","苦苦"],["及时","前来","大开","人才"],["前来","各式","感到","苦苦"],["大开","人才","及时","支持"],["人才","感到","苦苦","各式"],["各式","及时","前来","人才"],["","","",""]]; // last option round for blank
     • catchanswerarray=["气愤","哀求","鼓励","阻止","探望","眼界","培养","各样",""]; // last option round for blank
232. do the same for sec 2 using their own respectively answerstringarray and catchanswerarray

     20190422 error on iOS deployment: for catchanswerarray just use pure string, do not need to add [] on each array

     •  answerstringarray=[["礼品","眼睛","苦干","读书"],["眼睛","内容","提供","享用"],["苦干","内容","预先","享用"],["读书","礼品","埋头","享用"],["提供","埋头","内容","预先"],["丰富","礼品","注视","享用"],["定位","提供","礼品","技巧"],["美食","技巧","注视","提供"],["","","",""]]; // last option round for blank
     • catchanswerarray=["精美","注视","埋头","技巧","住宿","内容","预先","享用",""]; // last option round for blank
233. do the same for sec 3 using their own respectively answerstringarray and catchanswerarray

     20190422 error on iOS deployment: for catchanswerarray just use pure string, do not need to add [] on each array

     • answerstringarray= [["草原","造型","画作","竹子"],["大地","风景","活动","画作"],["动物","草原","竹子","大地"],["造型","大地","草原","竹子"],["风景","活动","动物","画作"],["活动","画作","大地","动物"],["画作","草原","竹子","大地"],["竹子","大地","风景","活动"]];
     •  catchanswerarray=["宽阔","照耀","罕见","独特","宜人","休闲","欣赏","青翠"]; 
234. do the same for sec 4 using their own respectively answerstringarray and catchanswerarray

     20190422 error on iOS deployment: for catchanswerarray just use pure string, do not need to add [] on each array

     • answerstringarray=[["时间","紧张","树木","性格"],["紧张","讨回","身体","树木"],["优惠","女佣","性格","讨回"],["树木","时间","身体","紧张"],["女佣","性格","时间","身体"],["性格","讨回","紧张","树木"],["身体","时间","女佣","优惠"],["讨回","紧张","性格","身体"]];
     • catchanswerarray=["计划","关系","折扣","枯萎","依赖","坚强","锻炼","公道"];
235. test the simulation notice it does not do the assignment to %textanswer% and %textcatch% on the plottingPanel texts so we need to add the assignment 

     20190422 error on iOS deployment: for catchanswerarray just use pure string, do not need to add [] on each array

     • textanswer=answerstringarray[correct]; //change 4 options
     • textcatch=catchanswerarray[correct];
236. test the simulation again and this time notice the combo Box does change the options now

     

237.  sometimes we want the simulation to start only after the user click play, to do that, go to Model - Evolution - AutoPlay check box off it  

     

238. test your simulation is should not auto start anymore
239. you may have notice the vy does not change anymore during the running of the simulation, do you know how to change it (code) and where to add the new code?
240. yes, you could create a new custom function let call it vyspeedchange () 

     

241. right click on the function where you want to add 

     

242. select Open Code Wizard and select 'for' loop and click Ok

     

243. write a code that reassigns new random values into the array of vy such as this 

     

     • function vyspeedchange () {
     •   for (var counter=0; counter<n  ; counter++) {
     •   vy[counter] = Math.max(Math.random(),0.5);
     • }
     • }
244. to make this function run in any part of the simulation, just add vyspeedchange () , for example in Model - Evolution - Events - collisioncorrect 

     

245.  test your new simulation, the vy should be reassigned new random values so that the user cannot use the speed of falling to guess the answers.
246. Moving on the adding target speech in an array, there is a way in EJSS editor to assign a variable name to the interacted element and thus do something like speech the word for learning.
247. let name the variable vocabaudio in the Model - Variables - Var Table as it is on the apples

     

248. go to HtmlView - plottingPanel - textset2

     

     and add ElementInteracted as vocabaudio, EnabledPosition as "ENABLED_NO_MOVE" , Sensitivity as 0 for the whole text to be interactable and OnPress as speech(textanswer[vocabaudio]); 

     

249. run the simulation and try to press on the apples text for speech
250. beautifying
251. on a small handphone, every inch of the screen is used for productive inquiry and game play, to remove the border or Gutters use 

     

     • [0,0,0,0]

252. the simulation run will look like this

     

253. go to HtmlView and remove the labelPanel by right click and remove

     

254. the run simulation look like this now 

255. to control the lines on the plottingPanel go to HtmlView - plottingPanel - Axes and set these values XFixedTick as 0 and YFixedTicK AS 0 will force the  (0,0) to be the reference point for the axes. XAutoTicks and YAutoTicks must be set to false in order for user input to work, else EJSS will allows try to autoticks. XTicks and YTicks are the numbers of ticks to draw for the plottingPanel. But XTickStep = 1 and YTickStep = 6 is better in controlling the actual spacing. so XTickStep =1 means there will be a space of 1 for every 1 unit in x direction so , x = 0, 1, 2,3,4,5 etc. YTickStep =6 means Y =0, 6, 12 etc will have a line 

256. run the simulation 

257. Ejss editor allows for drag and drop, drag and drop until you get executionPanel plottingPanel and audio together 

     

258. run the simulation

259. so now the simulation is compactly layout, remove the unnecessary wrappedPanel and narrativePanel

     

260. so you roughly end up with this

     

261. run the simulation

     

262. packaging the simulation for sharing
263. click on the top right corner

     

     of the EJSS editor to show the properties on information about and add in the metadata to help people find your simulation more easily

     

264. add the information 

     

265. to prepare the thumbnail simulation logo, do a screenshot and copy the file into the source folder for me is /Users/lookang/Google Drive/PublicLawrence/workspace/source/catchapplegametemplate

     

266. use a image editor to resize the logo to 320 px width x 180px height

     

267. go to the Run options and add the User files folder 

     320x180

     

268. zipped model
269. to zip the model choose this icon

     

     and right click to package current simulation

     

270. the model will be in the export folder of the workspace. 

     https://vle.learning.moe.edu.sg/my-library/lesson/edit/8a20faf5-6a5c-4d7d-a9af-cf2dc9f87804

     
     
271. the model can now be uploaded to SLS https://vle.learning.moe.edu.sg/login. Enjoy!
272. the actual model is downloadable here https://sg.iwant2study.org/ospsg/index.php/856 and the source  as well licensed https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode Attribution-NonCommercial-ShareAlike.
273. the embed code should work in SLS by June 2019 and the code can be copied at the Digital Library 

• <iframe width="100%" height="100%" src="https://iwant2study.org/lookangejss/chinese/ejss_model_catchapplegametemplatev01/catchapplegametemplatev01_Simulation.xhtml" frameborder="0"></iframe>

1. check back for the rest of the exciting stuff and leave a comment and I will try to add to the tutorial ( updating on to fly)

Email to successful 30