Using WebEJS to Create and Run Simulations for Moving Ball

macmath.inf.um.es

1. 1. Click on Click to start WebEJS

   

2. 2. Click on Model

   

3. 3. Click on Evolution

   

4. 4. Click on Click to create a page of ODEs

   

5. 5. Drag highlighted input

   

6. 6. Click on OK

   

7. 7. Type "t" to introduce a variable called t for time

   

8. 8. Type "dt" to introduce a variable called delta time

   

9. 9. Click on Variables, to start declaring them

   

10. 10. Click on Click to create a page of variables

    

11. 11. Click on OK

    

12. 12. Type "t"

    

13. 13. Type "0"

    

14. 14. Type "dt"

    

15. 15. Type "0.05"

    

To continue the same idea, declare position x

1. 16. Type "x"

   

2. 17. Type "0" to set the initial value to zero

   

3. 18. Type "y" for position in y direction

   

4. 19. Type "0", again is to set initial value to zero

   

5. 20. Click on Evolution, to add ability to move variable x and y

   

In the Evolution page, click on d/dt

1. 21. Click on Evol Page 1

   

2. 22. Click on x : (double) : or alternatively type in x in the Value field

   

3. 23. Click on Value

   

4. 24. Click on OK

   

5. 25. Click on Evol Page 1, at the d/dt to try to insert the variable y

   

6. 26. Click on y : (double) : or alternatively type in y on the Value field

   

7. 27. Click on Value

   

8. 28. Click on OK

   

9. 29. Click on Evol Page 1, on the right of the = sign to try to add the Rate value for dx/dt

   

10. 30. Type "vx"

    

11. 31. Click on OK

    

12. 32. Click on Evol Page 1

    

13. 33. Type "vy"

    

14. 34. Click on OK

    

15. 35. Click on Variables

    

16. 36. Type "vx"

    

17. 37. Type "1"

    

18. 38. Type "vy"

    

19. 39. Type "0"

    

20. 40. Click on Play/Pause

    

21. 41. Click on Reset

    

22. 42. Click on Play/Pause

    

23. 43. Click on Evolution

    

24. 44. Uncheck Autoplay

    

25. 45. Click on Reset

    

26. 46. Click on Play/Pause

    

WebEJS 1.0beta

1. 47. Click on Run the simulation

   

Web EJS launches it own preview on a new tab such as macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

1. 48. Click on Play/Pause

   

2. 49. Click on Reset

   

WebEJS 1.0beta

1. 50. Click on View

   

2. 51. Click on narrativePanel

   

3. 52. Click on image

   

4. 53. Click on controlPanel…

   

5. 54. Click on image

   

6. 55. Click on IO

   

7. 56. Click on image

   

8. 57. Click on controlPanel

   

9. 58. Drag highlighted image

   

10. 59. Click on OK

    

11. 60. Click on controlPanel

    

12. 61. Click on slider

    

13. 62. Type "vx"

    

14. 63. Type "-1"

    

15. 64. Type "1"

    

16. 65. Type "0.5"

    

17. 66. Type "slider for velocity in x direction"

    

18. 67. Click on Done

    

19. 68. Click on Run the simulation

    

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

1. 69. To debug the error, go to developer mode (click the top right corner, 3 dots and choose'More Tools' and "Developer Tools"

   

2. 70. inspect the error message and look for clue why it doesn't display correctly. The hint is sometimes unclear, so it is important to add small chunks of edits slowly and check regularly. the error is caused by the tooltip is missing the quotations "" for the strings

   

WebEJS 1.0beta

1. 71. Type ""slider for velocity in x direction""

   

2. 72. Click on Done

   

3. 73. Click on Play/Pause

   

4. 74. Click on Reset

   

5. 75. Type "-1"

   

6. 76. Click on Play/Pause

   

7. 77. Click on Buttons

   

8. 78. Drag highlighted image

   

WebEJS 1.0beta

1. 79. Drag highlighted image

   

2. 80. Click on OK

   

3. 81. Click on firstRowPanel

   

4. 82. Drag highlighted element

   

5. 83. Click on image

   

6. 84. Click on slider

   

7. 85. Click on image

   

8. 86. Click on Close

   

9. 87. Click on firstRowPanel…

   

10. 88. Click on controlPanel

    

11. 89. Click on image

    

12. 90. Click on label

    

13. 91. Click on image

    

14. 92. Click on label

    

15. 93. Click on Text

    

16. 94. Click on Main

    

17. 95. Type ""vx = ""

    

18. 96. Click on Done

    

19. 97. Click on firstRowPanel

    

20. 98. Click on image

    

21. 99. Click on label

    

22. 100. Click on image

    

23. 101. Click on slider

    

24. 102. Click on image

    

25. 103. Drag highlighted input

    

26. 104. Click on plottingPanel…

    

27. 105. Click on image

    

28. 106. Click on MinimumX

    

29. 107. Type "100%"

    

30. 108. Type "80vh"

    

31. 109. Click on Done

    

32. 110. Click on plottingPanel…

    

33. 111. Type ""100%""

    

34. 112. Type ""80vh""

    

35. 113. Click on Done

    

36. 114. Click on  …

    

37. 115. Click on controlPanel

    

38. 116. Type ""100%""

    

39. 117. Click on Done

    

40. 118. Click on  …

    

41. 119. Click on controlPanel

    

42. 120. Type "{"display":"inline-block"}"

    

43. 121. Click on Done

    

44. 122. Click on firstRowPanel

    

45. 123. Type ""inline-block""

    

46. 124. Click on Done

    

47. 125. Click on firstRowPanel

    

48. 126. Click on executionPanel

    

49. 127. Click on runPauseButton

    

50. 128. Type ""Play""

    

51. 129. Type ""Pause""

    

52. 130. Click on Done

    

53. 131. Click on Play

    

54. 132. Click on resetButton

    

55. 133. Type ""Reset""

    

56. 134. Click on Done

    

WebEJS 1.0beta

1. 135. Click on Model

   

2. 136. Click on Evol Page 1

   

3. 137. Click on Click to create a page of Events

   

4. 138. Click on Page name

   

5. 139. Click on Create page…

   

6. 140. Type "hit right border"

   

7. 141. Click on OK

   

8. 142. Click on hit right border

   

9. 143. Type "return x -xmax1.0; // Condition for hit right border "

   

10. 144. Click on hit right border

    

11. 145. Type "vx = -vx "

    

12. 146. Click on Done

    

13. 147. Click on Variables

    

14. 148. Type "xmin"

    

15. 149. Type "-1"

    

16. 150. Type "xmax"

    

17. 151. Type "1"

    

18. 152. Type "ymin"

    

19. 153. Type "-1"

    

20. 154. Type "ymax"

    

21. 155. Type "1"

    

22. 156. Click on Initialization

    

23. 157. Click on Evolution

    

24. 158. Click on Play

    

25. 159. Click on Reset

    

26. 160. Click on Variables

    

27. 161. Click on vx

    

28. 162. Type "dx"

    

29. 163. Type "0.3"

    

30. 164. Type "dy"

    

31. 165. Type "0.3"

    

32. 166. Click on View

    

33. 167. Click on shape2D

    

34. 168. Click on Main

    

35. 169. Click on SizeX

    

36. 170. Click on Main

    

37. 171. Type "dx"

    

38. 172. Click on SizeY

    

39. 173. Click on Main

    

40. 174. Type "dy"

    

41. 175. Click on Done

    

42. 176. Click on Play

    

43. 177. Click on Reset

    

44. 178. Click on Model

    

45. 179. Click on Evolution

    

46. 180. Click on Evol Page 1

    

47. 181. Click on hit right border

    

48. 182. Type "return (x+dx) -xmax; // Condition for hit right border "

    

49. 183. Click on Done

    

50. 184. Click on Play

    

51. 185. Click on Reset

    

52. 186. Click on Evol Page 1

    

53. 187. Click on hit right border

    

54. 188. Type "return (x+dx/2) -xmax; // Condition for hit right border "

    

55. 189. Click on Done

    

56. 190. Click on Play

    

57. 191. Click on Reset

    

58. 192. Click on Evol Page 1

    

59. 193. Click on hit right border

    

60. 194. Type "_pause() "

    

61. 195. Click on Done

    

62. 196. Click on Play

    

63. 197. Click on Run the simulation

    

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

1. 198. Click on Play

   

2. 199. Click on Reset

   

WebEJS 1.0beta

1. 200. Click on Evol Page 1

   

2. 201. Drag highlighted element

   

3. 202. Cut text area titled "_pause()"

   

4. 203. Click on hit right border

   

5. 204. Type "vx = -vx "

   

6. 205. Click on Done

   

7. 206. Click on Reset

   

8. 207. Click on Play

   

9. 208. Click on Reset

   

10. 209. Click on Run the simulation

    

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

1. 210. Click on Play

   

WebEJS 1.0beta

1. 211. Click on Run the simulation

   

2. 212. Click on Play