Exercise 1 HTML and CSS

#Exercise 1 - HTML and CSS

Overview

In this exercise we will build the UI of a pop quiz application. You can see list of exams, see a question and select an answer. Add new question and answers. And see a summary of results and students

Target

In this exercise we will practice the following skills

• HTML Authoring
  • Headers
  • Links
  • Images
  • Tables
  • Lists
  • Forms
• CSS Authoring
  • Selectors
  • Combinators
  • Psaudo Selectors
  • Basic properties (colors, fonts, backgrounds, borders, decorations)
  • Box model
  • Displays and layout

Step 1 - Exam page

• Create a page with list of 3 questions and 4 possible answers under each question
• Using CSS make sure that each question caption is in Segoe UI font, dark blue with light blue background and bottom blue border
• Each possible answer should be without bullets, but with border with round conrers
• Make sure each possible answer gets a darker background when hovering over it
• Challange - make the cursor change into "hand" when the mouse is ober the option. Consult W3Schools to learn how
• Decorate one of the options with a "selected" class and add specific style for selected options

Step 2 - Question Editor

• Create a page for exam authors, so they can enter a new question
• Add a text filed for the caption
• Add 4 text fields, one for each possible answer
• Add one numeric field to enter the index of the correct answer
• Callange - make sure the numeric field is limited to values between 1 and 4
• Add some styling to the form so that it has a special presentation for when one of the inputs gets focus

Step 3 - Scoreboard

• Present a table with list of studens and their score
• The table should have 3 columns: Name, Score and number of correct questions
• The name column should present the name of the students, along with their profile picture in circle
• The score column should be painted green for students with score over 90 and in red for scores below 60