This project is a Buzzfeed style quiz that takes user input and outputs a travel recomandation.The quiz has 4 questions with four possible answers which have images.I chose to focus on the brain(Javascript) of this quiz.The quiz uses javascript to do some cool animation.I tried to style this quiz but I ended up with a simple and captivating design.
I implememented the following designs some of which are for extra scredit.I did both Option 1 and Option 2 so that I could get some JavaScript.
- Extra:My website reads data from a json and renders it on the page.
- I 4 potential display states:
- initial none selected state - All slides look the smae
- have a :hover effect :The answers transform to a larger size.
- have a clicked/selected state:Text of selected is green and others are written in red.
- Amazing Buttons which buttons appear and dissapear like the Invisible man :).
- I have three button states which get chances to be displayed.
- I have NEXT. To move to next question
- I have DiscOver yourself.Calculates out put and activates a modal.
- I have restart which restarts quiz.
- I have three button states which get chances to be displayed.
- I have an alert system if a user doesnt select a warning meessage appears at the top and dissapears.
- I implemented a weight system which tracks the weights of options selected by the user and returns a recomandation.
- This site is also available for mobile.
I have a modal which slides from the top.Ittttss cooool.
The js behind this is phenomenal.