Country Explorer

Prompt

Code in html, css, and javascript an embeddable, self-contained, and complete globe model that can be used to help students in elementary school learn about Earth's features. Use the most accurate model available and this could serve as the template for the model you use: https://skfb.ly/69KtT Create a dropdown list that allows the user to select any continent or ocean (including the Southern Ocean). Animate the globe to rotate the Earth model to show the feature selected. When selected, add a label to the feature on the globe. Thus, user selects North America, rotate the globe to show North America and place a label over it.

Now let's take this to the next geographical level. List every country in the dropdown list sorted by continent. Rotate to the country, highlight it by changing its color, and provide a small label near it to show its name.

Iteration

The dropdown allows no selection at all. When I click Choose a Country, nothing happens. Fix that. Allow the user to click a country on the globe and have its name appear  and highlight the country by changing its color.

Iteration 2

The dropdown selection item is not working at all. Change it to allow only the 7 continents as options. Then allow the user to click any country on the continent to view its name and highlighted shape.

Iteration 3

Nothing happens when I click any country on the globe. Highlight the country and show its name. Check the code to make that happen.

Iteration 4

The globe does not recognize clicks to select countries. I can only drag the globe to rotate or zoom. Make the country boundaries independent instances, so I can click to show the country.

Iteration 5

I get a notification that "undefined is located in Unknown" when I click Australia.

Iteration 6

Now any country that is recognized by a click shows something like this in the selection area: "Antarctica is located in Unknown." Also, the locations are highly inaccurate. Clicking on Canada highlights Poland. Clicking Switzerland highlights the United States. Clicking Mexico highlights Niger, but clicking Niger does nothing. Double check the code to fix the map links with the country on the map.