Skip to content

Instantly share code, notes, and snippets.

@mzibari

mzibari/CSS file

Last active February 13, 2020 00:23
Show Gist options
  • Save mzibari/8e690ca2d79e888020f0a37bc714e010 to your computer and use it in GitHub Desktop.
Save mzibari/8e690ca2d79e888020f0a37bc714e010 to your computer and use it in GitHub Desktop.
Download ZIP
Quiz App
Raw
CSS file
*{
text-align: center;
font-family: 'Anton', sans-serif;
font-size: 30px;
}
body{
/*background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/ANC5ACJ7V0.jpg");*/
background-repeat: repeat;
}
h1{
font-size: 38px;
}
.main-div{
padding: 5%;
}
.button{
border-radius: 5px;
padding-left: 12px;
padding-right: 12px;
}
.opaque-background{
background: rgba(44, 37, 37, 0.7);
color: rgb(228, 228, 228);
border-radius: 6px;
margin-left: 10%;
margin-right: 10%;
}
.progress{
margin-bottom: 10px;
}
.result{
font-size: 20px;
color: rgb(153, 153, 153);
}
.hide, .tablet, .desktop{
display: none;
}
.questions{
border: none;
}
.questions *{
display: flex;
margin-top: 10px;
}
@media screen and (min-width: 480px){
.mobile{
display: none;
}
.tablet{
display: flex;
justify-content: center;
}
}
@media screen and (min-width: 768px){
.tablet{
display: none;
}
.desktop{
display: flex;
justify-content: center;
}
}
Raw
HTML answer-page
<!DOCTYPE html>
<html lang="en">
<head>
<title>10 Trick Questions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="HTML, CSS Quiz">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="opaque-background">10 Trick Questions</h1>
</header>
<div class="progress opaque-background">
<div class="mobile result">Q: 1/10 S: 0/10</div>
<div class="tablet result">Question: 1/10 Score: 0/10</div>
<div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
</div>
<main>
<div class="opaque-background main-div">
<section>
<div class="answer">
<span class="explination">You're answer was incorrect.</span>
<p>Explination: A man is only born once, therefore only have one birthday, correct answer is 1</p>
<form action="result-page.html" method="get">
<button type="submit" class="button next">Next</button>
</form>
</div>
</section>
</div>
</main>
</body>
</html>
Raw
HTML index
<!DOCTYPE html>
<html lang="en">
<head>
<title>10 Trick Questions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="HTML, CSS Quiz">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="opaque-background">10 Trick Questions</h1>
</header>
<div class="progress opaque-background hide">
<div class="mobile result">Q: 1/10 S: 0/10</div>
<div class="tablet result">Question: 1/10 Score: 0/10</div>
<div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
</div>
<main>
<div class="opaque-background main-div">
<section>
<p>Do you think you have what it takes to answer all questions correctly?</p>
<form action="questions-page.html" method="get">
<button type="submit" formaction="questions-page.html" class="button start">Start</button>
</form>
</section>
</div>
</main>
</body>
</html>
Raw
HTML questions-page
<!DOCTYPE html>
<html lang="en">
<head>
<title>10 Trick Questions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="HTML, CSS Quiz">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="opaque-background">10 Trick Questions</h1>
</header>
<div class="progress opaque-background">
<div class="mobile result">Q: 1/10 S: 0/10</div>
<div class="tablet result">Question: 1/10 Score: 0/10</div>
<div class="desktop result">Question: 1/10 Score: 0 correct, 0 incorrect</div>
</div>
<main>
<div class="opaque-background main-div">
<section>
<form action="answer-page.html" method="get">
<p class="question">How many birthdays does the average man have?</p>
<fieldset class="questions">
<legend class="choices"></legend>
<label for="ans-1"><input type="radio" name="options" id="ans-1" value="Answer 1">25</label>
<label for="ans-2"><input type="radio" name="options" id="ans-2" value="Answer 2">40</label>
<label for="ans-3"><input type="radio" name="options" id="ans-3" value="Answer 3">60</label>
<label for="ans-4"><input type="radio" name="options" id="ans-4" value="Answer 4">1</label>
<button type="submit" class="button check">Check</button>
</fieldset>
</form>
</section>
</div>
</main>
</body>
</html>
Raw
HTML result-page
<!DOCTYPE html>
<html lang="en">
<head>
<title>10 Trick Questions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="HTML, CSS Quiz">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="opaque-background">10 Trick Questions</h1>
</header>
<main>
<div class="opaque-background main-div">
<section>
<div class="results">
<p class=" result-score">You answered 90% of the questions correctly</p>
<form action="index.html" method="get">
<button type="submit" class="button retake">Retake Quiz</button>
</form>
</div>
</section>
</div>
</main>
</body>
</html>
Raw
Questions
1. How many birthdays does the average man have?
A. 25
B. 40
C. 60
D. 1
Explination: a man is only born once, therefore only have one birthday. Answer is D
2. Some months have 31 days, how many have 28 days?
A. 1
B. 0
C. 6
D. 12
Explination: Every month has at least 28 days. Answer is D
3. If there are 3 apples and you take 2, how many do you have?
A. 3
B. 2
C. 0
D. 1
Explination: You only took 2. Answer is B
4. A doctor gives you 3 pills telling you to take 1 every half an hour, how long will the pills last?
A. 30 minutes
B. 60 minutes
C. 90 minutes
D. 0 minutes
Explination: You start by taking one right away, then take the second one after 30 minutes, then the last one after another 30 minutes. Answer is B
5. A farmer has 17 sheep, all but nine died, how many are left?
A. 8
B. 0
C. 17
D. 9
Explination: All but nine died, meaning 9 have not died. Answer is D
6. You're participating in a race, you overtook the second person, what position are you in?
A. 1st
B. 3rd
C. 2nd
D. 4th
Explination: The second person is in the 2nd place, you pass them and your position becomes 2nd. Answer is C
7. How many 2 cent stamps are in a dozen?
A. 24
B. 6
C. 12
D. 0
Explination: A dozen is 12. Answer is C
8. Mary's father has 5 daughters, Nana, Nene, Nini, Nono. What's the name of the 5th daughter?
A. Nunu
B. Nina
C. Mary
D. Alice
Explination: It's MARY's father. Answwer is C
9. How many animals of each sex did Moses take on the ark?
A. 1
B. 0
C. 2
D. None of the above
Explination: Moses didn't take any animals on the ark, Noah did. Answer is B
10. If a train is traveling south, which way is the smoke going?
A. South
B. North
C. East
D. The direction the wind is blowing
Explination: It doesn't matter which direction the train is heading, The wind will determine that. Answer is D
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment