{ "information": { "Title": "Transit Planner", "Author": [ "Lim En Qi", "Francisco Esquembre Martinez", "F\u00e9lix J. Garc\u00eda Clemente" ], "AuthorLogo": [ "./images/Enqi.jpg", "./images/Paco.jpg", "./images/Felix.jpg" ], "Password": "unused", "Keywords": "transport; planning; ", "Abstract": "", "Copyright": "", "Level": "12-16 years old ", "Language": "English", "Logo": [ "./logo.png" ], "RunAlways": "true", "ModelTab": "", "ModelTabTitle": "", "ModelName": "", "FixedNavigationBar": "false", "CSSFile": "", "DetectedFiles": [ "./images/Enqi.jpg", "./images/Felix.jpg", "./images/Paco.jpg", "./logo.png" ], "AuxiliaryFiles": [ "./images/", "./logo.png", "./images/BusStop.png" ], "HTMLHead": "", "SaveInXMLFormat": "false", "IncludeSource": "true", "UseIndexHtml": "false", "IncludeLibrary": "true", "UglifyJS": "false", "PreviewFullModel": "false", "UseInterpreter": "true", "UseDeltaForODE": "false" }, "description": { "pages": [ { "Name": "Game Instructions", "Active": "true", "Internal": "false", "Type": "DESCRIPTION_EDITOR", "Locale": "_default_", "Title": "Game Overview", "External": "false", "Code": "\n\n\n

Transit Planner

In Transit Planner, you will take on the role of a city planner to construct transport networks. What makes a good transport network? As you build, take note of the choices you have made and why you have done so. Remember to stay within your allocated budget! 

How to play

  1. Select your level. Scroll down to read the mission brief for each level.  
  2. To start building your transport network, choose from different transport infrastructure options from the dropdown bar. Click on any space in the gameplay area to place your chosen transport infrastructure. 
  3. After placing your transport infrastructure, hover over the icons to see how much each transport infrastructure costs! You can also drag the icons in the gameplay area to reposition them anytime as you play. 
  4. To form a connection (route) between transport infrastructure, double click on the icons. A yellow highlight will appear around the icon you have clicked - this will represent the 'start point' of your connection.
  5. Double click on another icon to mark the 'end point' of your connection (route). An arrow connecting the two icons selected will be drawn. The arrow direction represents the direction of the connection.
  6. To remove a connection, double click on the rectangle in the middle of the connection.
    \"\"
    Remember that every transport infrastructure needs to have minimum 1 connection (route) to form a complete transport network!
  7. To remove transport infrastructure and connections, drag them to the bin on the top left corner of the gameplay area.\u200b
  8. As you build your transport network, the 'Check Network' button will prompt a green or red light depending on whether your transport network is valid.
  9. You can only progress to the next level if you have fulfilled the mission objectives and have a complete transport network (green light shown). 
    Clicking on the 'Reset' arrow beside 'Check Network' will bring you back to Level 1. 
  10. Before you progress to the next level, reflect on the guiding questions. You may compare your transport network with your friends as well! Have fun! 
\n\n" }, { "Name": "Teacher's Guide", "Active": "true", "Internal": "false", "Type": "DESCRIPTION_EDITOR", "Locale": "_default_", "Title": "Educator's Guide", "External": "false", "Code": "\n\n\n

Educator's Guide

Through this interactive game, students will be able to:

As students progress through the levels, they will face new challenges that require them to adapt their strategies to learn more about effective urban transport design. Guiding questions also have been included in each level to scaffold students' reflection on the complexity of planning transport systems.

\n\n" }, { "Name": "Credits", "Active": "true", "Internal": "false", "Type": "DESCRIPTION_EDITOR", "Locale": "_default_", "Title": "Credits", "External": "false", "Code": "\n\n\n

Credits

This interactive game was created as a product of my participation in a Web Easy Javascript (EJS) beta Workshop on 18-24 July 2024 by Prof Francisco Esquembre, Prof F\u00e9lix J. Garc\u00eda Clemente and Lawrence Wee, supported by MOE CPDD1 (Singapore). I would like to thank Prof Francisco Esquembre, Prof F\u00e9lix J. Garc\u00eda Clemente and Lim Xuan Hao for helping me with the coding of this game. If not for their help, my ideas for the game will not come to fruition for someone with little programming knowledge. The conceptualisation of Transit Planner was inspired by a triangle plot Web EJS interactive and 'Mini Metro: London' game (link). Last but not least, I would like to thank Lawrence Wee for his support in organising this workshop and sharing his repository of Web EJS templates with us!

Graphics:

Bike icons created by Freepik - Flaticon - Source (https://www.flaticon.com/free-icon/bicycle_130276)
Tree icons created by Freepik - Flaticon - Source (https://www.flaticon.com/free-icon/tree_490091?term=tree&related_id=490091)
Mall icons created by Freepik - Flaticon - Source (https://www.flaticon.com/free-icon/mall_998685?term=shopping+mall&related_id=998685)\u200b

All other graphics in the game are drawn by Lim En Qi. 

\n\n" } ] }, "model": { "variables": { "pages": [ { "Name": "Screen", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "width", "Value": "900", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "height", "Value": "600", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "minimum", "Value": "0", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "maximumY", "Value": "10", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "maximumX", "Value": "maximumY*width/height", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] }, { "Name": "Gameplay", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "DefaultMessage", "Value": "\"Transit Planner Game \\nClick to create \\nHover to inspect \\nDouble click to try to connect\"", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "actualMessage", "Value": "DefaultMessage", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "totalCost", "Value": "0", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "currentLevel", "Value": "\"Level 1\"", "Type": "String", "Dimension": "[1]", "Comment": "", "Domain": "" }, { "Name": "LevelOptions", "Value": "[\"Level 1\", \"Level 2\", \"Level 3\"]", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "message", "Value": "\"\"", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "enabled", "Value": "true", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "levelDisabled", "Value": "true", "Type": "boolean", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "networkImage", "Value": "\"\"", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "LevelBackground", "Value": "", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "currentBackground", "Value": "", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] }, { "Name": "Points", "Active": "true", "Internal": "false", "Type": "undefined", "PageComment": "", "Variables": [ { "Name": "maxPoints", "Value": "50", "Type": "int", "Dimension": "", "Comment": "The maximum number of vertex in our polygon", "Domain": "" }, { "Name": "xCoord", "Value": "0", "Type": "double", "Dimension": "[maxPoints]", "Comment": "", "Domain": "" }, { "Name": "yCoord", "Value": "0", "Type": "double", "Dimension": "[maxPoints]", "Comment": "", "Domain": "" }, { "Name": "nPoints", "Value": "0", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "interPoint", "Value": "-1", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "size", "Value": "0.7", "Type": "double", "Dimension": "[maxPoints]", "Comment": "", "Domain": "" }, { "Name": "values", "Value": "0", "Type": "double", "Dimension": "[maxPoints]", "Comment": "", "Domain": "" }, { "Name": "colors", "Value": "\"black\"", "Type": "String", "Dimension": "[maxPoints]", "Comment": "", "Domain": "" }, { "Name": "transportImg", "Value": "\"\"", "Type": "String", "Dimension": "[maxPoints]", "Comment": "\"./BusStop.png\"", "Domain": "" }, { "Name": "sizeY", "Value": "0.7", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] }, { "Name": "Options (Transport)", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "ImageFiles", "Value": "", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "TransportOptions", "Value": "", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "ValuePerTransportOption", "Value": "[5,10,15,20,25,40,70]", "Type": "double", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "currentTransport", "Value": "\"Bus Stop\"", "Type": "String", "Dimension": "[1]", "Comment": "\"Bus Stop\"", "Domain": "" }, { "Name": "instructionsString", "Value": "'Anything...'", "Type": "String", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "InstructionsOptions", "Value": "", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] }, { "Name": "Connections", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "maxConn", "Value": "10*maxPoints", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "originPoint", "Value": "", "Type": "int", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "finalPoint", "Value": "", "Type": "int", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "nConn", "Value": "0", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "xConn", "Value": "", "Type": "double", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "yConn", "Value": "", "Type": "double", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "sxConn", "Value": "", "Type": "double", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "syConn", "Value": "", "Type": "double", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "lastPointSelected", "Value": "-1", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "interactedConn", "Value": "", "Type": "int", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "hlX", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "hlY", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "hlSize", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "valueConn", "Value": "15", "Type": "double", "Dimension": "[maxConn]", "Comment": "", "Domain": "" }, { "Name": "hlSizeY", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] }, { "Name": "For Reference", "Active": "false", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "ColorOptions", "Value": "[\"Blue\",\"Red\",\"Green\"]", "Type": "String", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "ValuePerOption", "Value": "[10,20,30]", "Type": "double", "Dimension": "[]", "Comment": "", "Domain": "" }, { "Name": "currentColor", "Value": "\"Blue\"", "Type": "String", "Dimension": "[1]", "Comment": "", "Domain": "" } ] } ] }, "initialization": { "pages": [ { "Name": "Init", "Active": "true", "Internal": "false", "Type": "undefined", "Comment": "", "Code": "// Init\nImageFiles = [\n \"BicycleParking.png\",\n \"BusStop.png\",\n \"CarPark.png\", \n \"TrainStation.png\",\n \"BusInterchange.png\",\n \"TrainInterchange.png\", \n \"IntegratedTransportHub.png\",\n ];\n \nTransportOptions = [\n \"Bicycle Parking\",\n \"Bus Stop\",\n \"Car Park\", \n \"Train Station\",\n \"Bus Interchange\",\n \"Train Interchange\", \n \"Integrated Transport Hub\"\n ];\n \nInstructionsOptions = [\n \"

Level 1 Mission

Construct a transport network with as many connections as you can! (Money: 100)

Reflect: How many connections have you built? How many nodes (points) do you have?
You may compare your network with your friend's. What are the similarities and differences in your transport networks?

\",\n \"

Level 2 Mission

Construct a transport network that connects the 3 neighbourhoods and comprises at least 2 transport modes! (Money: 200) Note that each neighbourhood is at least 15mins walk away from other neighbourhoods.

Reflect: What considerations did you have when constructing your transport network?

\",\n \"

Level 3 Mission

Construct an efficient public transport network that connects the 5 neighbourhoods! (Money:400)
Note that each neighbourhood is at least 15mins walk away from other neighbourhoods.

Reflect:What considerations did you have when constructing your transport network?

\"\n ];\n \nLevelBackground = [\n \"./images/Level1Background.png\",\n \"./images/Level2Background.png\",\n \"./images/Level3Background.png\",\n ];\ncurrentBackground = LevelBackground[0];\ninstructionsString = InstructionsOptions[0];" } ] }, "evolution": { "information": { "FPS": "20", "SPD": "1", "RealTimeVariable": "", "Autoplay": "false" }, "pages": [] }, "fixed_relations": { "pages": [ { "Name": "Connections", "Active": "true", "Internal": "false", "Type": "undefined", "Comment": "", "Code": "// Connections\nfor (var i=0; i=0) {\n hlX = xCoord[lastPointSelected];\n hlY = yCoord[lastPointSelected];\n hlSize = size[lastPointSelected]*1.5;\n hlSizeY = hlSize;\n}\n\n" }, { "Name": "Check", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "// Check\n\ntotalCost = 0;\n\nif (nPoints>0) for (var i=0; i0) for (var i=0; i 9) {\n checkConnections(index);\n nPoints--;\n for (i = index; i < xCoord.length; i++) {\n xCoord[i] = xCoord[i+1];\n yCoord[i] = yCoord[i+1];\n transportImg[i] = transportImg[i+1];\n }\n lastPointSelected=-1;\n }\n else {\n if (tooCloseToAnother(index, data.position)) {\n if (lastValidPosition) {\n xCoord[index] = lastValidPosition[0];\n yCoord[index] = lastValidPosition[1];\n }\n }\n \n }\n}\n\nfunction checkConnections(point) {\n for (var i=nConn-1; i>=0; i--) {\n if (originPoint[i]==point || finalPoint[i] == point) removeConnection(i);\n }\n for (i=0; ipoint) originPoint[i]--;\n if (finalPoint[i]>point) finalnPoint[i]--;\n }\n}" }, { "Name": "On move", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "// On move\n\nlastValidPosition = null;\nfunction checkPoint(data) {\n if (!tooCloseToAnother(data.index,data.position)) {\n // console.log(JSON.stringify(data));\n lastValidPosition = data.position;\n // console.log(\"lastValidPosition = \"+lastValidPosition);\n }\n else {\n // console.log(' INVALID POINT'+data.position)\n }\n}\n\nfunction tooCloseToAnother(index, point) {\n for (var i=0; i0" } ] } ] }, { "Name": "wrappedPanel", "Type": "WrappedPanel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "drawingPanel", "Type": "DrawingPanel", "Expanded": "true", "Properties": [ { "name": "Width", "value": "\"100%\"" }, { "name": "MinimumX", "value": "0" }, { "name": "MaximumX", "value": "maximumX" }, { "name": "MinimumY", "value": "0" }, { "name": "MaximumY", "value": "maximumY" }, { "name": "OnPress", "value": "%pointSelected%" }, { "name": "Enabled", "value": "enabled" }, { "name": "TRMessage", "value": "actualMessage" }, { "name": "ShowAreaRectangle", "value": "false" } ], "Children": [ { "Name": "Level1Background", "Type": "Image2D", "Properties": [ { "name": "ImageUrl", "value": "%currentBackground%" }, { "name": "X", "value": "0" }, { "name": "Y", "value": "0" }, { "name": "SizeX", "value": "maximumX" }, { "name": "SizeY", "value": "maximumY" }, { "name": "RelativePosition", "value": "\"SOUTH_WEST\"" } ] }, { "Name": "DustbinImg", "Type": "Image2D", "Properties": [ { "name": "X", "value": "0.5" }, { "name": "Y", "value": "9.4" }, { "name": "EnabledPosition", "value": "\"ENABLED_NO_MOVE\"" }, { "name": "ImageUrl", "value": "\"./images/Dustbin.png\"" }, { "name": "Visibility", "value": "true" }, { "name": "RelativePosition", "value": "\"CENTERED\"" }, { "name": "SizeX", "value": "50" }, { "name": "SizeY", "value": "50" }, { "name": "PixelSize", "value": "true" } ] }, { "Name": "Bin", "Type": "Shape2D", "Properties": [ { "name": "X", "value": "0" }, { "name": "Y", "value": "10" }, { "name": "FillColor", "value": "\"rgba(255,0,0,0.5)\"" }, { "name": "SizeX", "value": "2" }, { "name": "SizeY", "value": "2" }, { "name": "ShapeType", "value": "\"RECTANGLE\"" }, { "name": "DrawLines", "value": "false" } ] }, { "Name": "shape2DHighlight", "Type": "Shape2D", "Properties": [ { "name": "FillColor", "value": "\"Yellow\"" }, { "name": "Visibility", "value": "lastPointSelected>=0" }, { "name": "X", "value": "hlX" }, { "name": "Y", "value": "hlY" }, { "name": "SizeX", "value": "hlSize" }, { "name": "SizeY", "value": "hlSizeY" }, { "name": "OnDoubleClick", "value": "%pointSelected%" }, { "name": "LineWidth", "value": "\"0\"" }, { "name": "ShapeType", "value": "\"ELLIPSE\"" }, { "name": "DrawLines", "value": "false" } ] }, { "Name": "arrowSet2D", "Type": "ArrowSet2D", "Properties": [ { "name": "NumberOfElements", "value": "nConn" }, { "name": "Visibility", "value": "nConn>0" }, { "name": "X", "value": "xConn" }, { "name": "Y", "value": "yConn" }, { "name": "SizeX", "value": "sxConn" }, { "name": "SizeY", "value": "syConn" }, { "name": "LineColor", "value": "\"#2e1a1a\"" }, { "name": "MarkEnd", "value": "\"TRIANGLE\"" }, { "name": "MarkEndColor", "value": "\"#2e1a1a\"" }, { "name": "MarkMiddle", "value": "\"RECTANGLE\"" }, { "name": "EnabledPosition", "value": "\"ENABLED_NO_MOVE\"" }, { "name": "ElementInteracted", "value": "interactedConn" }, { "name": "OnDoubleClick", "value": "removeConnection(interactedConn);" } ] }, { "Name": "imageSet2D", "Type": "ImageSet2D", "Properties": [ { "name": "ImageUrl", "value": "%transportImg%" }, { "name": "NumberOfElements", "value": "nPoints" }, { "name": "Visibility", "value": "nPoints>0" }, { "name": "X", "value": "xCoord" }, { "name": "Y", "value": "yCoord" }, { "name": "SizeX", "value": "size" }, { "name": "SizeY", "value": "sizeY" }, { "name": "EnabledPosition", "value": "\"ENABLED_ANY\"" }, { "name": "ElementInteracted", "value": "interPoint" }, { "name": "OnRelease", "value": "%deletePoint%" }, { "name": "OnDoubleClick", "value": "%addConnection%" }, { "name": "OnEnter", "value": "actualMessage = \"Value=\"+values[interPoint];" }, { "name": "OnExit", "value": "actualMessage = DefaultMessage;" }, { "name": "OnDrag", "value": "%checkPoint%" } ] } ] }, { "Name": "controlPanel", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "CSS", "value": "{\"display\":\"block\"}" }, { "name": "BorderStyle", "value": "\"solid\"" }, { "name": "BorderColor", "value": "\"Gray\"" }, { "name": "BorderWidth", "value": "0" }, { "name": "Width", "value": "398" } ], "Children": [ { "Name": "firstRowPanel", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "Display", "value": "\"inline-flex\"" } ], "Children": [ { "Name": "executionPanel", "Type": "Panel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "comboBoxTransportOptions", "Type": "ComboBox", "Properties": [ { "name": "Options", "value": "TransportOptions" }, { "name": "SelectedOptions", "value": "currentTransport" }, { "name": "Width", "value": "150" }, { "name": "Height", "value": "30" }, { "name": "Font", "value": "\"normal normal medium Tahoma, Verdana, sans-serif\"" } ] }, { "Name": "labelSpacing", "Type": "Label", "Properties": [ { "name": "Text", "value": "\" \"" } ] }, { "Name": "buttonCheck", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"Check Network\"" }, { "name": "OnClick", "value": "%checkNetwork%" }, { "name": "ImageUrl", "value": "networkImage" }, { "name": "Font", "value": "\"normal bold medium Tahoma, Verdana, sans-serif\"" } ] }, { "Name": "labelSpacing_2", "Type": "Label", "Properties": [ { "name": "Text", "value": "\" \"" } ] }, { "Name": "resetButton", "Type": "Button", "Properties": [ { "name": "Tooltip", "value": "\"Reset\"" }, { "name": "ImageUrl", "value": "\"/org/opensourcephysics/resources/controls/images/reset.gif\"" }, { "name": "OnClick", "value": "%_reset%" } ] } ] } ] } ] } ] }, { "Name": "narrativePanel", "Type": "Panel", "Properties": [ { "name": "Html", "value": "instructionsString" } ] } ] } ], "RootProperties": [] }, "metadata": { "APP": "WebEJS", "CreatedWith": "WebEJS : the web version of Easy JavaScript Simulations", "MoreInfo": "1.0", "version": "https://t.um.es/webejs" } }