# US Geography Map Project

### Link to the demo website:
https://codepen.io/lzh3191/pen/oNaKyzr

## Eric, Evan, Yuening, Zihe

Our project is called US Geography Map Project. We built a online Geography learn and quiz game. This game is meant to help kids explore states in a way that allows them to not only learn the Geography, but also lets them learn about each state by providing information cards. Bootstrap was used throughout the design.

## Navigation Bar
There is a navigation bar at the top of the page which includes "About Us","Learning Resources" and "Contact Us". "About Us" is aiming to introduce our team. After the users click it, they will be led to another page. "Learning Resources" provides users with resouces to facilitate them to learn geography."Contact Us" displays the name and the email of each individual in our project team.

## About Us
The About Us page is pretty simple. It's just a short description of the team and a picture created from DALL-E. The image radius does change on-hover, however.

## Learning Resources
The Learn Page is the main project. It's basically a state / geography learning game. The premise is very simple. You're given a state map and you need to find the state that is listed in the header. Normally, it would be through click, but the code we found has a hover feature. We've also removed quite a bit of states due to the excess of code.

1. Game - Current functionality

We currently have the map set up right now where the Javascript detects a `click` event through an event listener. It then checks the element that the mouse has clicked and using if statements, the element is tagged with 'path', it'll then use further logic to check, based on the name id, which state it is. We've put in some custom code where if the correct state is selected, it'll print "You found [state]!" and display a corresponding information card by setting the hidden property to false with a querySelector. Otherwise, it'll say "Not state". This would also set the .info-card hidden property to true.

2. Game - Future Functionality
Although the functionality has not yet been set up, when the player gets the right state, the scoreboard will then be updated. Also, the state would get stored in a dataset in the Javascript to prevent it from appearing again until the game is over. Afterward, the computer would use a random number generator to select a new state from the remaining ones. The scoreboard also has a hint option if you get stuck, a skip option if the player really gets stuck and frustrated, and a retry button to start over. As mentioned, these functions have not been set up yet, but there would be ActionListeners which would then tell the Javascript to reset the scoreboard and clear any array or dataset storing the completed states.

## Contact Us
This part has our names and emails. If any website user want to contact us, they can find us through our emails. The navigation bar option "contact us" is linking with this session.

# US Geography Map Project

## Components

Each main piece of the website is stored in a section, such as the info-card, the scoreboard, the nav bar, and the state maps. These are all their own separate entities within main.

1. Navigation Bar (Contribution: Zihe & Evan)

Navigation bar is made up by "About Us","Learning Resources" and "Contact Us". “About us" serves to provide information about our team since the users might be curious about who we are. "Learn" is about how this game works."Contact Us" can link to the contact information of our team members, making it convenient for the users to share feedback or questions with us.

2. Scoreboard (Contribution: Yuening)

The scoreboard is helping users to track their learning process. If users click the right place, the place on the map will stay lighted. And they get 1 points, which would show on the scoreboard.

If users click the wrong place, the place on the map will not be lighted up and scoreboard will not change until they get the right one. Users will have three choices "hint", "skip", and "retry" in the fully designed game.
- Hint: If users click this button, they can get a hint for the place of that state. A desciption about the state will appear around the scordboard. (e.g. <span style="color:red">Hint: Texas is a state in the South Central region of the United States. It is the second-largest U.S. state by both area and population.</span>)
- Skip: If users click this button, they can skip this state. Instead, another state will appear on the top of the map.
- Retry: If users click this button, they can re-select a place on the map.

3. State map (Contribution: Eric & Evan)

The map with several states in the Middle-West is adapted from https://codepen.io/codecustard/pen/NWpZxey by codecustard. We have taken the html and Javascript from the original code and modify the map to fit into our website. Since the map itself is too large and distrubing during the coding, we only take a portion of states around Texas to make it easier to track our html. It is essential for us to make sense about how the interactive part of the map work in the future, so we can finally build a map game according to our original thought.

4. Info card (Contribution: Eric)

The info-card has 3 main layers or divs: .info-card, .frame, and [.title, .state, .info-block]. This is structured in a way to keep everything organized. The info-card itself is the main backdrop that acts as a parent so the children don't get impacted by style changes from other sections. The frame is the main box that stores the primary information, then of course the last layer has the flag, title, image, and content. These are all their own sections, but need to be organized in a way that they can be grouped together.