inEQ

Inspiration

Wealth inequality is a problem that has been plaguing our society for years now, but it is especially prevalent during times of the pandemic. As the middle class continues to shrink, we see that more and more people are unable to afford basic necessities, decreasing the overall quality of life around the world. Inequality affects everyone, as it also affects the economy negatively. As when wealth is allocated to the hands of the rich, total consumer spending dips, and unemployment skyrockets. Thus, it is crucial that we continue our fight against wealth inequality, not just for the sake of the financially destitute, but for all members of society.

What it does

We included 4 pages in our project: the home, quiz, resources, and contact page. The home page has general information about our mission, the problem, and complementary statistics. The quiz page is an interactive and engaging method to allow users to guess certain statistics regarding income inequality questions. At the end, it will provide the percentage the user got right, and navigate them to the resources page so they can learn more. As for the resources page, it has all the information stored in one convenient location, so if users don’t know where to start their research, they can begin here! Our unique value proposition is that we provide easy-to-digest and concise information about income equality, so it is not daunting for users to read. In addition, we provide some key definitions regarding income inequality, as well as more links if users are interested in activating change. Finally, the contact page allows users to message us with any comments or inquiries, and ultimately, keep the conversation about this pressing issue going.

How we built it

We used HTML and CSS to style the pages, as well as Javascript for the quiz and contact page. Specifically, for the quiz, we used a div to hold the quiz, a button to submit the quiz and transfer to each section, as well as a div to display the results. Then, we selected these HTML elements and stored references to them in variables.

To build our quiz, we used functions to show results and put it all together. In particular, we included a function that displays the next question to the DOM, a function that checks if the user’s answer is correct, a function that is called when the next button is called, a function that sets options background back to null after displaying the right and wrong colours, unchecking all radio buttons to proceed to the next question, to close warning modal, and a function to close the score modal and reset the game. As well, we used a for-each function to check if the radio button is the same as the answer, as well as following if-then statements for each condition.

Next, we used object literals to display some questions for our quiz. The object literals represent the individual questions and we used an array to hold all our quiz's questions. We thought an array was most effective, as it would make iterating over the questions easier in our code. To build the HTML for each question, we looped through each question using the arrow function to perform our operations. Using forEach loops, we can get the current value, the index, and the array itself as parameters. We want to generate the correct HTML for each question and held an array for the possible list of answers as well. We used a loop to fill in all the possible answers for the current question, so we’re creating HTML radio buttons. With the list of answer buttons, we can push the question HTML and answer it with our outputs. The showing results function will finally loop over the answers, check them, and show results. If the user's answer matches the correct choice, we increase the number of correct answers by one and set it to green. If the answer is wrong, then the score stays the same and we colour the answer red and show the correct answer in green.

Challenges we ran into

We had trouble styling the CSS of the home page, where we had text overflowing out of boxes as well as images scaled improperly. We fixed this by troubleshooting, and commenting out certain parts of CSS, and refreshing our website to see if that was the error, or just manually changing specific dimensions until it worked. It took quite a while but was extremely fulfilling in the end, as it allowed us to build an aesthetically pleasing design and interface for our inEQ project. Moreover, we struggled with the quiz page, incorporating the functioning, and making sure all the if-then conditions were checked. We fixed these function issues by watching videos on how to build basic quizzes and learning more about JavaScript in general to broaden our horizons.

Accomplishments that we're proud of

Overall, we are really proud of the overall design we used for our project. We were able to design a fully functioning quiz which took a while, and we even colour-coded wrong answers with red and right ones with green. Lastly, we were able to create a navigation bar effectively with HTML that was linked to all the pages.

What we learned

We learned how to create a navigation bar and linking it to different HTML pages, as well as specific styling features for CSS to make our website more appealing. Also, we learned how to build a quiz and how to effectively incorporate functions, for-each loops, and if-then statements. We also learned about radio buttons and specific HTML elements that forms needed, which we were unaware of before.

What's next for inEQ

In the future, we aim to add subpages to the resources, where users can specifically navigate to certain topics within income inequality that may interest them. In addition, we will add a more comprehensive and thorough database of links that users could check out, so they can further incentivize change. We also would like to add an interactive page to scale that shows users how pressing the income inequality issue is. For instance, we could show what Jeff Bezos, one of the richest people on earth, could do with all that money (e.g. buying how many big macs, curing world hunger x amount of times, etc). As well, we could incorporate graphs that provide a visual representation of the statistics mentioned. Finally, we could consider adding a community forum so users can ask and answer questions regarding wealth inequality. Specifically, posts can be upvoted and downvoted and will be completely anonymous so users can get the most valuable and authentic answers.

Built With

• css
• html5
• javascript
• pexels
• replit