Skip to content

Commit 266108f

Browse files
Privat33r-devPrivat33r-dev
committed
Redesign quiz from scratch
1 parent 2f2988e commit 266108f

File tree

5 files changed

+353
-129
lines changed

5 files changed

+353
-129
lines changed

‎_posts/2017-09-19-ops-s1-hello.markdown‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,3 +242,7 @@ Which command lists your Docker images?
242242
- (x) docker image ls
243243
- ( ) docker run
244244
- ( ) docker container ls
245+
246+
{:.quiz}
247+
What command would you use to inspect "ubuntu" Docker image?
248+
> docker image inspect ubuntu

‎_posts/2017-09-19-ops-s1-swarm-intro.markdown‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,8 @@ What is a stack?
197197

198198
{:.quiz}
199199
A stack can:
200-
- (x) be deployed from the commandline
201-
- (x) use the compose file format to deploy
202-
- ( ) run a Dockerfile
203-
- ( ) be used to manage your hosts
204-
- (x) be used to manage services over multiple nodes
200+
- \[x] be deployed from the commandline
201+
- \[x] use the compose file format to deploy
202+
- \[ ] run a Dockerfile
203+
- \[ ] be used to manage your hosts
204+
- \[x] be used to manage services over multiple nodes

‎_sass/_custom.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
body {
2+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
3+
font-size: 16px;
4+
}
5+
16
.panel-left .container {
27
width: 100% !important;
38
}

‎css/quiz.css‎

Lines changed: 149 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,162 @@
1-
/* Carousel base class */
2-
.carousel {
3-
height: 500px;
4-
margin-bottom: 60px;
1+
:root {
2+
--primary-color: #0083da;
3+
--primary-highlight-color: #056fb6;
4+
--primary-text-color: #000000;
5+
--background-color: #ffffff;
6+
--background-color2: #97cfec;
7+
--second-bg-color: rgb(244, 244, 244);
8+
--wrong-choice-color: red;
9+
--wrong-choice-color2: rgb(255, 231, 231);
10+
--correct-choice-color: green;
11+
--correct-choice-color2: rgb(164, 238, 201);
512
}
6-
/* Since positioning the image, we need to help out the caption */
7-
.carousel-caption {
8-
z-index: 10;
13+
14+
:root[data-theme='dark'],
15+
:root[data-force-color-mode="dark"] {
16+
--primary-color: #4a6572;
17+
--background-color: #eeeeee;
18+
--second-bg-color: #dddddd;
919
}
1020

11-
/* Declare heights because of positioning of img element */
12-
.carousel .item {
13-
height: 500px;
14-
background-color: #777;
21+
body {
22+
background-color: var(--background-color);
23+
color: var(--primary-text-color);
1524
}
16-
.carousel-inner > .item > img {
17-
position: absolute;
18-
top: 0;
19-
left: 0;
20-
min-width: 100%;
21-
height: 500px;
25+
26+
.quiz-title {
27+
font-weight: 400;
28+
font-size: 20px;
29+
line-height: 22px;
30+
margin-top: 20px;
31+
margin-bottom: 5px;
2232
}
2333

24-
.carousel-caption {
25-
text-align: left;
26-
top: 0%;
34+
.quiz-question-content {
35+
display: flex;
36+
flex-flow: column;
37+
gap: 10px;
2738
}
2839

29-
.carousel-caption label {
30-
margin-bottom: 20px;
31-
font-size: 21px;
32-
line-height: 1;
40+
.quiz-question-content.open-ended {
41+
flex-flow: row;
3342
}
3443

35-
.quiz-success {
36-
color: #5cb85c;
44+
.quiz-question-content input.answer {
45+
flex: 3 1 0%;
46+
border: none;
47+
border-radius: 4px;
48+
padding: 10px;
49+
background: var(--second-bg-color);
3750
}
3851

39-
.quiz-error {
40-
color: #d9534f;
52+
.quiz-question-content input.answer:focus {
53+
border: none !important;
4154
}
55+
56+
.quiz-question-content button.check {
57+
border: none;
58+
border-radius: 4px;
59+
min-height: 30px;
60+
background-color: var(--primary-color);
61+
flex-grow: 1;
62+
max-width: 40%;
63+
cursor: pointer;
64+
color: var(--background-color);
65+
font-size: 14px;
66+
font-weight: 600;
67+
}
68+
69+
.quiz-question-content button.check:hover {
70+
background: var(--primary-highlight-color);
71+
}
72+
73+
.quiz-question-content button.check:active {
74+
transform: translateY(1px);
75+
}
76+
77+
input[type="radio"],
78+
input[type="checkbox"] {
79+
font: inherit;
80+
width: 1em;
81+
height: 1em;
82+
border: 0.15em solid currentColor;
83+
border-radius: 0.15em;
84+
transform: translateY(-0.075em);
85+
place-content: center;
86+
vertical-align: middle;
87+
position: relative;
88+
z-index: 1;
89+
margin: 15px;
90+
/* I am not happy with this solution, but putting checkbox inside of the
91+
label, prevents checkbox:checked ~ .control-label from working. */
92+
margin-bottom: -45px;
93+
display: none;
94+
}
95+
96+
input[type="checkbox"]:checked::before {
97+
transform: scale(1);
98+
}
99+
100+
.control-label {
101+
box-shadow: none;
102+
font-size: 1em;
103+
display: flex;
104+
vertical-align: middle;
105+
border: var(--second-bg-color) solid 1px;
106+
border-radius: 4px;
107+
background: var(--second-bg-color);
108+
padding: 10px;
109+
/* padding-left: 50px; */
110+
cursor: pointer;
111+
font-weight: 400;
112+
}
113+
114+
.control-label:hover {
115+
border: 1px solid var(--primary-color);
116+
background: var(--background-color2);
117+
}
118+
119+
input[type="checkbox"]:checked~.control-label,
120+
input[type="radio"]:checked~.control-label {
121+
font-weight: 600;
122+
transform: scale(1);
123+
transition: 520ms transform ease-in-out;
124+
border: 1px solid var(--primary-color);
125+
}
126+
127+
.no-select {
128+
user-select: none;
129+
}
130+
131+
.post-content {
132+
display: flex;
133+
flex-direction: column;
134+
}
135+
136+
.font-medium {
137+
font-weight: 500;
138+
}
139+
140+
.font-semibold {
141+
font-weight: 600;
142+
}
143+
144+
.wrong-choice {
145+
color: var(--wrong-choice-color);
146+
background: var(--wrong-choice-color2);
147+
}
148+
149+
.correct-choice {
150+
color: var(--correct-choice-color);
151+
background: var(--correct-choice-color2);
152+
}
153+
154+
.chosen-choice {
155+
border: currentColor solid 1px !important;
156+
border-radius: 4px;
157+
}
158+
159+
.question-description {
160+
color: gray;
161+
font-size: 14px;
162+
}

0 commit comments

Comments
 (0)