what makes this PA so annoying is angular, if it wasn't for the angular framework you could do this class in an afternoon, if you have already used angular before and know javascript, you could do this class in 2 hours. anyway, the first thing you want to do download and install this node package https://nodejs.org/en/download , then install angular https://angular.io/cli , follow along and create your program and launch it using "ng serve" in command prompt while the directory is the root directory of your program, leave the cmd window open. once you visit http://localhost:4200 and you see an angular page, you know it was installed and is running correctly. angular will compile in real time so leave it open to check for errors.

this is where it gets confusing.

you're going to want to venture into the src folder of your angular project and edit the index.html to make it blank (I can't remember if the angular page that shows up is the index.html or the app.component.html file, which ever one it is, remove its contents). then you are going to want to create a new component ( " ng generate component world" in cmd) this component is the only component you need , when you create it , its going to ask you about routing , just say no (I don't actually understand this function/feature). then in app.component.html , you are going to put

<app-world></app-world>

now you are pretty much done in angular, you must leave the "ng serve" compiling in real time. nothing is to go in index.html, and only the above html is to go in app.component.html. your project is to go in world.component.html and world.component.ts. angular will skip over any <script> you have in the html file so any JavaScript must be in your type script file "world.component.ts"

lastly I'm not going to post code here but I will explain how you must do things to make it super simple. You need to use the svg world map provided to you in the rubric. an svg map is a nifty little file that has a bunch of "pathways" located in xml data. inspect the html of the svg map provided in the rubric to see what I mean. use a "for" statement to add a mouse click event listener to each pathway. once clicked , get an attribute of the element that can be used as an identifier that will accurately be able to build a correct https://api.worldbank.org url to pull data from.

you are to save your svg file in the src folder and embed your svg file in the world.component.html , remember to place the image into a table with the image on one column and the facts on another column. have the facts be identified by an ID in a <p> tag that will be changed to the returned api data gathered in the mouse click function of your .ts file. that's it , remember to test using localhost. I put the entire project in a zip file and uploaded it that way and passed.

funny thing is, once you actually complete this project its the easiest thing in the world. I hope i was clear enough while also be unclear enough for this to not to be unethical.