Political Activism Map

• 

  Map on Front Page

• 

  Rest of Front Page

• 

  Quiz

Inspiration

Our group's goal was to spread awareness of issues happening around the world in the areas of corruption, anti-LGBT activity, racism, and sexism. We were therefore inspired to create an educational website targeting and testing these topics.

What it does

The website allows the user to explore the embedded Google Map and click on pins to read about the major political activism occurring around the pin's location. When clicking on the button for the political activism quiz, the website will bring the user to 10 questions testing them on information found on the embedded map. When completing the quiz, an alert message will pop up and tell the user its results and recommends whether or not to revisit the map and learn more.

How we built it

Using repl.it, we built a website with HTML, CSS, and Javascript.

Challenges we ran into

We had difficulty with implementing a quiz into the website. When coding with Javascript, we were not sure how to show the results of the quiz. Before testing out the alert() method, we attempted to use document.write() to write out the results, but that did not follow the CSS's code to make it follow the previous fonts and colors. There was a previous issue with creating a bottom bar of the website, too, since it did not appear where it should have. It was removed since it was an unnecessary part.

Accomplishments that we're proud of

We were proud of the design and organization of our website. Being able to have a functional quiz that can be corrected and retaken was also a success.

What we learned

Since the team was not very experienced with web development, we were able to sharpen our skills in all aspects of web development. On top of that, doing research to add information on the map allowed all of us to learn something new about political activism around the world.

What's next for Political Activism Map

The website can become a more interactive resource that provides more information and helpful tools for users to learn about political activism! More places, links/resources, and quizzes can be added.

Built With

• css
• google-maps
• html5
• javascript
• piskel