Skip to content

Commit 152e772

Browse files
kunwarsalujakunwarsaluja
committed
quiz block
1 parent 1d93edb commit 152e772

File tree

2 files changed

+469
-0
lines changed

2 files changed

+469
-0
lines changed

‎blocks/quiz/quiz.css‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
/* Quiz block – scoped to .quiz per AGENTS.md */
2+
.quiz {
3+
max-width: var(--grid-container-width);
4+
margin: 0 auto;
5+
padding: var(--space-s) 0;
6+
}
7+
8+
.quiz .quiz-status {
9+
margin: 0 0 var(--space-s);
10+
font-size: var(--body-font-size-s);
11+
color: light-dark(var(--color-gray-700), var(--color-gray-300));
12+
}
13+
14+
.quiz .quiz-form {
15+
display: grid;
16+
gap: var(--space-m);
17+
}
18+
19+
.quiz .quiz-slider {
20+
overflow: hidden;
21+
padding-inline: 2px;
22+
}
23+
24+
.quiz .quiz-slider-shell {
25+
margin-bottom: 0;
26+
}
27+
28+
/* Base .quiz-question before child selector (no-descending-specificity) */
29+
.quiz .quiz-question {
30+
margin: 0;
31+
border: 1px solid light-dark(var(--color-gray-200), var(--color-gray-700));
32+
border-radius: 12px;
33+
padding: var(--space-m);
34+
background: light-dark(var(--color-light), rgb(21 25 31));
35+
}
36+
37+
.quiz .quiz-question.is-correct {
38+
border-inline-start: 3px solid var(--color-green-500);
39+
}
40+
41+
.quiz .quiz-question.is-incorrect {
42+
border-inline-start: 3px solid light-dark(var(--color-red-500), var(--color-red-300));
43+
}
44+
45+
.quiz .quiz-slider-track {
46+
display: flex;
47+
flex-wrap: nowrap;
48+
width: 100%;
49+
align-items: stretch;
50+
transition: transform 0.3s ease;
51+
}
52+
53+
.quiz .quiz-slider-track > .quiz-question {
54+
flex: 0 0 100%;
55+
box-sizing: border-box;
56+
}
57+
58+
.quiz .quiz-nav {
59+
display: flex;
60+
align-items: center;
61+
justify-content: space-between;
62+
gap: var(--space-s);
63+
margin-top: var(--space-xs);
64+
position: static;
65+
transform: none;
66+
pointer-events: auto;
67+
z-index: auto;
68+
padding-inline: 0;
69+
}
70+
71+
.quiz .quiz-nav-btn {
72+
border: 1px solid light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 16%));
73+
border-radius: 999px;
74+
inline-size: 44px;
75+
block-size: 44px;
76+
padding: 0;
77+
font: inherit;
78+
font-size: 22px;
79+
line-height: 1;
80+
color: inherit;
81+
background: light-dark(rgb(255 255 255 / 72%), rgb(24 27 32 / 70%));
82+
backdrop-filter: blur(8px);
83+
box-shadow: 0 10px 24px rgb(0 0 0 / 14%);
84+
cursor: pointer;
85+
pointer-events: auto;
86+
}
87+
88+
.quiz .quiz-nav-btn:disabled {
89+
opacity: 0.35;
90+
cursor: default;
91+
}
92+
93+
.quiz .quiz-nav-btn.is-hidden {
94+
opacity: 0;
95+
visibility: hidden;
96+
pointer-events: none;
97+
transform: scale(0.9);
98+
}
99+
100+
.quiz .quiz-nav-count {
101+
margin: 0;
102+
position: static;
103+
inset: auto;
104+
text-align: center;
105+
font-size: var(--body-font-size-s);
106+
color: light-dark(var(--color-gray-600), var(--color-gray-300));
107+
pointer-events: auto;
108+
}
109+
110+
.quiz .quiz-question-title {
111+
margin: 0;
112+
padding: 0;
113+
font-size: var(--heading-font-size-xs);
114+
font-weight: 600;
115+
}
116+
117+
.quiz .quiz-instruction {
118+
margin: var(--space-xs) 0 0;
119+
font-size: var(--body-font-size-s);
120+
color: light-dark(var(--color-gray-600), var(--color-gray-300));
121+
}
122+
123+
.quiz .quiz-options {
124+
margin-top: var(--space-s);
125+
display: grid;
126+
gap: var(--space-xs);
127+
}
128+
129+
.quiz .quiz-option {
130+
display: flex;
131+
align-items: flex-start;
132+
gap: var(--space-xs);
133+
border: 1px solid light-dark(var(--color-gray-200), var(--color-gray-700));
134+
border-radius: 10px;
135+
padding: 10px 12px;
136+
background: light-dark(rgb(250 250 250), rgb(29 34 40));
137+
cursor: pointer;
138+
}
139+
140+
.quiz .quiz-option input {
141+
margin-top: 2px;
142+
}
143+
144+
.quiz .quiz-option-label {
145+
font-size: var(--body-font-size-m);
146+
line-height: 1.35;
147+
}
148+
149+
.quiz .quiz-option.is-selected.is-correct {
150+
border-color: var(--color-green-500);
151+
background: light-dark(rgb(36 176 50 / 10%), rgb(24 114 32 / 20%));
152+
}
153+
154+
.quiz .quiz-option.is-selected.is-wrong {
155+
border-color: light-dark(var(--color-red-500), var(--color-red-300));
156+
background: light-dark(rgb(248 20 0 / 9%), rgb(149 12 0 / 20%));
157+
}
158+
159+
.quiz .quiz-feedback-slot {
160+
margin-top: var(--space-xs);
161+
}
162+
163+
.quiz .quiz-feedback {
164+
border-radius: 8px;
165+
padding: 8px 10px;
166+
}
167+
168+
.quiz .quiz-feedback.is-correct {
169+
background: light-dark(rgb(36 176 50 / 10%), rgb(24 114 32 / 20%));
170+
}
171+
172+
.quiz .quiz-feedback.is-incorrect {
173+
background: light-dark(rgb(248 20 0 / 9%), rgb(149 12 0 / 20%));
174+
}
175+
176+
.quiz .quiz-feedback-result {
177+
margin: 0;
178+
font-size: var(--body-font-size-s);
179+
font-weight: 700;
180+
}
181+
182+
.quiz .quiz-feedback-snippets {
183+
margin: 6px 0 0;
184+
padding-inline-start: 16px;
185+
font-size: var(--body-font-size-s);
186+
}
187+
188+
.quiz .quiz-feedback-snippets li {
189+
margin-block: 0.35em;
190+
}
191+
192+
.quiz .quiz-submit {
193+
justify-self: start;
194+
border: 1px solid var(--color-accent);
195+
border-radius: 999px;
196+
padding: 8px 14px;
197+
font: inherit;
198+
font-size: var(--body-font-size-s);
199+
font-weight: 600;
200+
color: #fff;
201+
background: var(--color-accent);
202+
cursor: pointer;
203+
}
204+
205+
.quiz .quiz-submit[hidden] {
206+
display: none;
207+
}
208+
209+
.quiz .quiz-empty {
210+
margin: 0;
211+
}
212+
213+
@media (width >= 900px) {
214+
.quiz .quiz-question {
215+
padding: var(--space-l);
216+
}
217+
}

0 commit comments

Comments
 (0)