Anti-War Knowledge Contest

A screenshot of one of the questions

Inspiration

We were inspired by the recent world political turbulance where Russia attacked Ukraine in an attempt to take over their territories. This move has deeply distressed the general public around the world and attracted widespread condemnation to the injustice done to innocent people. We felt that in order to combat such unwarrented violence, we need to educate people through the effective method of gamification about anti-war knowledge and war histories so that people can more equipped to initiate and participate in anti-war movements and support the injured and lost people of Ukraine while being gratified in the process of learning. Therefore, we built a knowledge contest website to advocate for anti-war social movements.

What it does

The website has a pool of questions on anti-war social movements and war histories for participants to answer. Participants receive immediate feedback on each question selected. The username and scores of the participants are recorded on the leaderboard so that people can compete with others and see their learning outcome.

How we built it

We built it with React, HTML, CSS, and JavaScript to display the questions and match the selection of the participants with our standard answers to generate instant feedback. The backend logic of our project was primarily implemented in React and JavaScript where we set the state of the questions to be correct or incorrect according to the participants' selection. The frontend design of the website was implemented in HTML and CSS including an embedding of a video. The upside down display of the Ukraine natioanl flag was deliberately signaling distress and help, just as the message that world is receiving from Ukraine.

Challenges we ran into

Since we had relatively little experience with the above languages, we had to learn from scratch during a short 12-hour span of the hackathon. It was also difficult to keep track of the other member's work as we were a team of two participating virtually through discord. Despite it looked simple, we stucked with many problems like with the set and rendering function of React language and the display of video on a html website. Luckily, we finally solved them by seeking help from the mentors.

Accomplishments that we're proud of

We were pround that we succesfully built an interactive website within a 12-hour span from scratch with only two people on discord with the help of mentors.

What we learned

We've learned a lot about the basic usage and functionalities of React, HTML, CSS, and JavaScript as well as how to live share and collaborate on our coding progress through Live Share of VSCode. It was also rewarding to manage to complete a project in a challenging environment like a virtual workspace.

What's next for Anti-War Knowledge Contest

Continue with the leaderboard function to make it update in real time as people input their answers. In addition, it is necessary that we increase the size of our question pool so that people will continue learning related knowledge and not get tired and quit the competition as the freshness and excitement fade. We also intend to develop real-time contest to simulate 1-on-1 competition with another player so that people pay more attention to each contest.