Skip to content

Commit 804a91d

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

File tree

5 files changed

+352
-129
lines changed

5 files changed

+352
-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: 148 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,161 @@
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: 10px 0px 5px 0px;
2231
}
2332

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

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

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

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

0 commit comments

Comments
 (0)