My Experience Developing a Web App Using HTML/CSS and Javascript

Web quizzes have been answering the tough questions for ages. Taking an online quiz to figure out “what kind of chicken nugget are you” or “what your next vacation should be based on your mood” provides internet users invaluable information. Over the past couple of weeks my friend Rachel and I have been developing a quiz application for our Web Design class. The app calculates what kind of skier you are based on a series of questions, like “where are you seen falling most?” and “where is your spot in the lift-line?”  The user answers nine ski-oriented questions and is scored based on how they answer. We designed the app using HTML/CSS and Javascript. Our quiz design and layout was inspired by other online quizzes made by students, such as this one and this one.  These quizzes utilize the “radio” button as the way for users to choose their answer. Each radio button is assigned a value, which calculates the user’s quiz result.

Below are the original design sketches for our web application. We wanted to keep the quiz organized and create a streamlined, easy-to-use application.

unnamed-1.pngunnamed.png

After testing the application, we have gathered some feedback on how to make the app more user-friendly. Due to the simple design and familiar radio button associated with many online quizzes, the application we’ve built is pretty easy to use. The user simply chooses from four options under each of the nine questions by clicking the respective radio button. Then, once all nine are answered the user clicks the “submit” button and an answer is generated based on the algorithm we developed. The algorithm is based on an “if then” statement. So, if you click a certain variable, then a value is calculated based on your selection. This generates a score and a result based on the values we associated with each option under every question. To make this generate a score, we used Javascript so communicate with the HTML/CSS. Here is a look at the Javascript we wrote.

Screen Shot 2018-02-28 at 4.40.31 PM.png

Although this quiz is super simple, we learned that there is immense complexity in writing and developing web applications. Writing code requires keen detail and repetition to perfect. The refresh button is our worst best friend.

To find out what kind of skier you are, follow this link to our quiz.

To learn about my web design partner’s experience writing code, visit her blog here.

 

 

Leave a comment