Cyber Quizler

welcome screen
game screen
wrong answer screen
all correct answers screen

Inspiration

In the recent times, the usage of digital devices like mobiles and laptops has skyrocketed. The craze is so much that kids learn to use mobile phones even before learning how to speak properly. Like, we have personally observed kids as young as 18 months using their parents mobile phones, even being able to open specific apps like YouTube. This is just incredible, but also calls for an immediate and worthy action. Cybersecurity and Digital Literacy are very important topics, and one must know the difference between right and wrong. We believe that it is best taught as early as possible, since kids get access to devices so early, why should they wait for like multiple years to learn actual cybersecurity and digital literacy principles. That is our idea behind the game Cyber-Quizler.

What is does

We've made a very bubbly themed website, where the users would need to answer certain questions, and they get to see cute animations after each correct answer. If they fail to answer some question correctly, they'll be back to the bottom. And if they're able to successfully answer all questions, they'll receive praise. The target users of this game are kids, since they like bubbly and engaging websites, and they can learn some very important concepts of digital literacy in a fun manner!

How we built it

We designed the prototype in Figma.
We built the frontend using HTML-CSS.
For loading up and showing the questions, and also to check the correctness of answers, we used Javascript.
To get our graphics, we utilized Canva.
For hosting the website, we've used Github Pages.

Challenges we ran into

We ran into a few challenges such as showing the animation just in time, and multiple times based on user interaction. We had to focus on using simple and understandable language while forming questions so that was also quite challenging. We also kinda struggled with the time boundations since we started coding the actual project a bit late.

Accomplishments that we're proud of

We're proud of making something useful for people. We're also proud of our simple cute aesthetics. Also, definitely we're proud of completing the project in time.

What we learned

Most importantly, we learnt a lot of important cyber security and digital literacy concepts as we were researching through articles. We also learnt to do some fun stuff with CSS and JS.

What's next for Cyber Quizler

Right now, it has 20 questions that are shuffled each time a user enters the website. In the future, we would love to increase the questions many folds. We would also like to make it more engaging through our customized mascot which would maybe utilize TTS and enhance the whole application!
Also, we would want to make a mobile app version of the same in the future!