-
Home page
-
Interactive map data visualization created with open source .csv file
-
Section on website that links to the quiz. Followed by more info about plastic waste policies around the world.
-
Quiz to assess user's plastic usage/waste
-
Question and answer choices in quiz
-
Sample quiz results
-
About us page with more info on hover (as seen in photo on the right). Plus a TTB shoutout!
-
Our logo
-
Bootstrap allows our website to be responsive and fit many screen sizes.
Inspiration
We drew inspiration from the beautiful earth around us and the constant issues it faces due to human-generated plastic waste. We wanted to help our environment and provide easily accessible, interactive, and free education on the huge plastic waste issue. As we embrace a technology-filled future, we recognize that our planet needs care and attention now!
What it does
Our website features a quiz that can help you reflect on your plastic usage and produces results that shows how you are helping the environment and how you can improve. It also includes blurbs and a map that visualizes open-source data on plastic usage throughout the world. The website contains lots of information about how certain areas are already protecting the environment through policies and what individuals can do to help.
How we built it
We used BootStrapMade, Flourish, Interact, Atom IDE, GitHub, HTML, CSS, and Javascript to build our website. BootStrapMade provided a framework for our HTML, CSS, and JavaScript. Flourish allowed us to read in data from a .csv file and create an interactive map visual on plastic waste. Interact is a quiz-making web development tool that makes it easy to create quizzes in HTML and JavaScript.
Challenges we ran into
It was difficult to not have a member on our team who was experienced with back-end web development. This restricted our abilities to include more functional tools in our website and forced our focus on interactive design and appearance. We also lost two of our team members: one of them moved to another team, and the other got sick and had to go home.
Accomplishments that we're proud of
Since none of us regularly use web development languages (HTML/CSS, JavaScript) throughout the school year, we are proud of our ability to make an interactive, visually appealing website. We are also happy that we were able to incorporate various web development tools to make the UX/UI easy to use and create the website functions that we desired.
What we learned
We each came in with a different set of skills and level of knowledge, and through collaborating, we learned from each other. Collectively, we learned how to visualize data in an interactive way, collect and organize dynamic content, and design a neat, appealing website to present information.
What's next for reDeuces
Some short-term improvements to our website could include adding more visuals and interactive information to make the site more interesting and informative for the user. To make more long-term changes, it would be cool if we could add more functionality to the website to make it more of a tool, rather than just a platform to raise awareness. One way to improve the website in this way would be to make it into a tool for activism. For example, a user could be able to input their zip code/location and receive information about the policies towards plastic in their area and how to contact their local representatives to inspire change in their government.
Built With
- css
- flourish
- html
- interact-quiz
- javascript
Log in or sign up for Devpost to join the conversation.