- Ethan Whitton
- Joshua Wu
Since this app was developed using only JavaScript, CSS, and HTML, all you need to do is open index.html in your web browser of choice.
A version of this application is also available at https://123joshuawu.github.io/csspeed/
We plan to create a basic CSS matching game. Users can test and practice their HTML and CSS skills on a set of barebones, pre-loaded, interactive components. They will be presented with the preview of a component on one side of their screen. The other side will contain CSS text area, alongside a respective preview window. The goal is to get your component looking as similar as possible to the given component. The score is awarded based on how similar the component is to the desired and how fast the desired component is achieved. Users are given a personal leaderboard of their past scores.
We are targeting beginner ITWS students who simply want to explore the world of CSS and HTML. This can be generalized to most beginner web developers. People who want to practice their HTML/CSS skills can use the site like a UI-based l33tcode, trying to get top scores and quicker times. Or, they could approach the website in a more relaxed manner, more so looking to experiment and explore.
Our product could be vital in closing the gap between those who are fumbling through page layouts, and those who are already creating stunning and satisfying user experiences. It uses hands-on and gamification techniques to teach concepts that are otherwise hard to grasp. Future steps towards 508 compliance could set this up to be an educational assistance tool that can be used on a broader scale.
We plan on creating pages that hold different barebone components. These components would be preloaded with plain, default structures, styles, and animations using raw HTML and CSS. After any user inputs to the HTML or CSS fields, the dynamically-loaded preview will adjust to comply with the user’s change. We will start with two shapes: circles and rectangles. Both shapes will have a set of randomized CSS properties like border, width, height. Next, we will implement our score calculation. Scores will be calculated base on how close the user's styles are to the desired styles. Finally, we setup storing and loading scores using local storage so we can show a personal leaderboard.
We successfully completed the core functionality of our application. We were able to give the user two choices for shapes: circle and rectangle. There were also around seven randomized CSS properties that would be used to challenge the user. While developing this application, we also practiced our own CSS skills. In the process, we also picked up some new skills, for example implementing the typing animation on the landing page. We also practiced the new standard of virtual team work.
We believe that gamification is the future of education. Bringing the fun of gaming to the fulfilling learning new knowledge through education is a win-win combination. A quote that we fond resonated deeply with us was:
“That’s what games are, in the end. Teachers. Fun is just another word for learning.” ― Raph Koster