Quiz App
LESSON 4
USE THIS CHECKLIST TO TRACK
YOUR PROGRESS
BUILDING THE [Link] PAGE
Go to the [Link] page that we created before, use the !+tab emmet shortcut to create some boilerplate code.
Change the title in the head section to <title>Quick quiz -play</title> (or similar)
Add the link to our style sheet <link rel=”stylesheet” href=”[Link]”>
t’s add a link to the [Link] in the body section of this html page.
<link rel=”stylesheet” href=”[Link]”>
Every page will be inside of a container so let’s start by creating a container using .container+tab short-cut
This creates a div tag with the class container.
Nested inside this div tag create another container using #[Link]-column + tab this creates a div tag with
the ID game and the classes justify-center and flex-column
Create a header <h1> what is the answer to this question? </h1> and let’s give this the id of question
<h1 id=”question”> what is the answer to this question? </h1>
Right click anywhere in your html doc below the code lines and preview iwth live server. The preview should look like this.
Quiz App
LESSON 4
USE THIS CHECKLIST TO TRACK
YOUR PROGRESS
BUILDING THE [Link] PAGE
let’s add some answer options for our question.
.choice-container+tab this will create a div tag with the class choice-container (containing all the answer options)
Nested inside this div tag:
[Link]-prefix+tab this will create a paragraph with the class choice-prefix (A,B,C etc)
[Link]-text+tab this will create a paragraph with the class choice-text (the text for the answer)
Now copy the choice container and two paragraph tags and paste it 3 times so that you have 4 choice options.
Change the prefix to B, C , D and the text to Choice2, Choice 3, Choice 4.
It should look like this:
The preview should look like this.
Quiz App
LESSON 4
USE THIS CHECKLIST TO TRACK
YOUR PROGRESS
STYLING THE [Link] PAGE IN THE [Link] FILE
Go to the [Link] file
.choice-container {
display: flex; Creates a flex box
margin-bottom: 0.5rem; Creates some margin at the bottom of the elements
width: 100%; makes the element fill the full width of the screen
font-size: 1.8rem; makes the font size 18px
border: 0.1rem solid rgb(86,165,235, 0.25); gives a border with colour red green blue values and transparancy 0.25
background-color: white; gives a white background color
}
We are not adding any padding to the container, but will
apply padding to each individual element inside the
container
.choice-prefix {
padding: 1.5rem 2.5rem; creates padding of 15px at the top and bottom and 25px on the sides
background-color: #56a5eb; sets the background colour of the prefix to blue
color: white; sets the text color to white
.choice-text {
padding:1.5rem; This just adds some padding to our text
}
The code and preview should look like this.
Quiz App
LESSON 4
USE THIS CHECKLIST TO TRACK
YOUR PROGRESS
STYLING THE [Link] PAGE IN THE [Link] FILE
Let’s add the hover state (you can copy this form the hover
state from the [Link] file)
.choice-container: hover {
cursor: pointer:
box-shadow: 0 0.4rem 1.4re, rgba(86,185,235,0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
The code should look like this.
