Design two page quizz web app !

- Design two pages for an online quiz web app

- Pages need to be designed with Flat-UI [url removed, login to view]

- Pages need to be responsive (should work on phones, tablets and desktops). Can and should have different layouts for all of these such that all the information below is accurately and pleasantly displayed.

- First page - Login Page should show:

= A header and footer

- header should contain brand

- header should contain nav

- one flat color background with a login form centered on screen

- login form should have email, password, action button and "forgot password" link

- if "forgot password" link is pressed the form should change to show only email field and action button to "reset password"

- Second page - Quiz page should show:

= A header and footer

- header should contain brand

- header should contain nav

- nav should show the name of the user logged in

- nav should have dropdown that allows user to change profile ( first name, last name, email, username, password, checkbox to confirm if quiz results should be emailed ) in the dropdown !

- nav should have option to log out

= A Question & Answers section

- a quiz question (each question can be up to four sentences ie. small paragraph) - clearly emphasize that this is the question

- four (4) quiz answers Note: answers are single choice ( you can only pick one answer out of the four), (each answer can be up to four sentences ie. small paragraph), clearly emphasize that this is the answer section

- action button to go to the next random question (please pick a funny tag line for the call to action something like "Give me another one!")

- if the incorrect answer has been chosen highlight the correct answer (with something green) and the answer that was chosen (with something red)

- an explanation section - this is a small paragraph of text that will appear only after the question has been answered and only if an explanation is attached to the question

= A Settings section (can be part of nav or footer)

- switch to selet language (English or French)

- switch to select level (Basic or Advanced)

- switch to toggle ON/OFF if the app should show the correct answer once the question has been answered wrong

= A status section (can be part of nav or footer)

- a running tally of correct / incorrect answers ( ex. a label or image with the number 30 for incorrect answers highlighted by the color red and the number of correct answers highlighted by the color green)

- a small area for a one-liner (ex. "You need to focus on your studies!" if you have more wrong answers or "You are going to ace the exam !" if you have more correct answers please use color to emphasize a positive vs negative )

- section should be easily visible for the user such that the user always knows how many questions he's answered correct and how many incorrect.


- two HTML files (one for login page and another for the quiz page)

- any custom CSS/JS files ( that are NOT part of Flat-UI or Bootstrap 3 ... see details in Testing and Review Process)

Testing and Review Process

- the files you provide will be copied into the folder generated by [url removed, login to view] (the same place where the package's [url removed, login to view] resides)

- since Flat-UI already contains bootstrap and the flat-ui css please tailor your development around this and do not include any css/js/html from bootstrap or flat-ui in your deliverable

Habilidades: Bootstrap, Design Gráfico, Interface do usuário / AI, Design de Sites

Ver mais: wrong header, web flat design, web development studies, web development background, web design studies online, web design random, web design paragraph, web design phones, web design color number, web design bootstrap, user centered design, responsive design web page, responsive app design, red background design, question web graphic design, question answer graphic, profile paragraph, profile page design bootstrap, process package design, paragraph web design, online tally, online master graphic design, online log design, online graphic design process, online graphic design app

Acerca do Empregador:
( 0 comentários ) Windsor, Canada

ID do Projeto: #5149008