Skip to content

Commit 700efd4

Browse files
schultekschultek
committed
add second question
1 parent 1c8c779 commit 700efd4

File tree

4 files changed

+93
-77
lines changed

4 files changed

+93
-77
lines changed

‎site/lib/_sass/components/_quiz.scss‎

Lines changed: 74 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,103 @@
11
.quiz {
22

3-
4-
ol {
5-
padding: 0;
6-
margin: 0;
3+
.quiz-question {
74
margin-top: 1rem;
8-
list-style: upper-alpha;
9-
list-style-position: inside;
105

6+
ol {
7+
padding: 0;
8+
margin: 0;
9+
margin-top: 1rem;
10+
list-style: upper-alpha;
11+
list-style-position: inside;
1112

12-
li {
13-
padding: 1rem;
14-
background-color: var(--site-raised-bgColor);
15-
border-radius: var(--site-radius);
16-
margin-bottom: 0.2rem;
17-
transition: background-color 500ms;
1813

19-
&:not(:where(.selected, .disabled)):hover {
20-
background-color: var(--site-inset-bgColor);
21-
cursor: pointer;
22-
}
14+
li {
15+
padding: 1rem;
16+
background-color: var(--site-raised-bgColor);
17+
border-radius: var(--site-radius);
18+
margin-bottom: 0.2rem;
19+
transition: background-color 500ms;
2320

24-
&.selected:has(.correct) {
25-
background-color: oklch(from var(--site-alert-tip-color) l c h / 0.2);
26-
}
21+
&:not(:where(.selected, .disabled)):hover {
22+
background-color: var(--site-inset-bgColor);
23+
cursor: pointer;
24+
}
2725

28-
&.selected:has(.incorrect) {
29-
background-color: oklch(from var(--site-alert-error-color) l c h / 0.2);
30-
}
26+
&.selected:has(.correct) {
27+
background-color: oklch(from var(--site-alert-tip-color) l c h / 0.2);
28+
}
3129

32-
&.disabled {
33-
opacity: 0.6;
34-
}
30+
&.selected:has(.incorrect) {
31+
background-color: oklch(from var(--site-alert-error-color) l c h / 0.2);
32+
}
3533

36-
p {
37-
margin-bottom: 0;
38-
}
34+
&.disabled {
35+
opacity: 0.6;
36+
}
3937

40-
.question-wrapper {
41-
display: grid;
42-
grid-template-rows: min-content 0fr;
43-
transition: grid-template-rows 500ms;
44-
}
38+
p {
39+
margin-bottom: 0;
40+
}
4541

46-
&.selected .question-wrapper {
47-
grid-template-rows: min-content 1fr;
48-
}
42+
.question-wrapper {
43+
display: grid;
44+
grid-template-rows: min-content 0fr;
45+
transition: grid-template-rows 500ms;
46+
}
4947

50-
.question {
51-
margin-top: -1lh;
52-
margin-left: 1.4rem;
53-
}
48+
&.selected .question-wrapper {
49+
grid-template-rows: min-content 1fr;
50+
}
5451

55-
.solution {
56-
position: relative;
57-
padding-left: 1.4rem;
58-
font-size: 0.9rem;
59-
overflow: hidden;
60-
61-
p.correct,
62-
p.incorrect {
63-
padding-top: 0.5rem;
64-
font-weight: 600;
65-
margin-bottom: 0.5rem;
66-
67-
&::before {
68-
position: absolute;
69-
left: 0;
70-
}
52+
.question {
53+
margin-top: -1lh;
54+
margin-left: 1.4rem;
7155
}
7256

73-
p.correct {
74-
color: green;
57+
.solution {
58+
position: relative;
59+
padding-left: 1.4rem;
60+
font-size: 0.9rem;
61+
overflow: hidden;
62+
63+
p.correct,
64+
p.incorrect {
65+
padding-top: 0.5rem;
66+
font-weight: 600;
67+
margin-bottom: 0.5rem;
68+
69+
&::before {
70+
position: absolute;
71+
left: 0;
72+
}
73+
}
74+
75+
p.correct {
76+
color: green;
7577

76-
&::before {
77-
content: "✓";
78+
&::before {
79+
content: "✓";
80+
}
7881
}
79-
}
8082

81-
p.incorrect {
82-
color: red;
83+
p.incorrect {
84+
color: red;
8385

84-
&::before {
85-
content: "✗";
86+
&::before {
87+
content: "✗";
88+
}
8689
}
8790
}
8891
}
8992
}
90-
}
9193

92-
.quiz-button {
93-
margin-top: 1rem;
94+
.quiz-button {
95+
margin-top: 1rem;
9496

95-
&[disabled] {
96-
opacity: 0.4;
97-
pointer-events: none;
97+
&[disabled] {
98+
opacity: 0.4;
99+
pointer-events: none;
100+
}
98101
}
99102
}
100-
101-
102103
}

‎site/lib/src/components/fwe/client/quiz.dart‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class _InteractiveQuizState extends State<InteractiveQuiz> {
2222

2323
@override
2424
Component build(BuildContext context) {
25-
return div([
25+
return div(classes: 'quiz-question', [
2626
strong([text(component.question.question)]),
2727
ol([
2828
for (final (index, option) in component.question.options.indexed)
@@ -67,7 +67,9 @@ class _InteractiveQuizState extends State<InteractiveQuiz> {
6767
selectedOption = null;
6868
});
6969
},
70-
content: selectedOption == null || component.question.options[selectedOption!].correct
70+
content:
71+
selectedOption == null ||
72+
component.question.options[selectedOption!].correct
7173
? 'Next question'
7274
: 'Try again',
7375
),

‎site/lib/src/pages/custom_pages.dart‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,20 @@ sitemap: false
9393
- text: It should always begin with the name of the member being documented.
9494
correct: false
9595
explanation: Starting with the member name is not required; a concise summary is preferred.
96-
96+
- question: In Flutter, which widget is typically used to create a scrollable list of items?
97+
options:
98+
- text: Column
99+
correct: false
100+
explanation: A Column is not scrollable by default; use ListView for scrollable lists.
101+
- text: ListView
102+
correct: true
103+
explanation: ListView is the standard widget for creating scrollable lists in Flutter.
104+
- text: Row
105+
correct: false
106+
explanation: A Row arranges items horizontally and is not scrollable by default.
107+
- text: Stack
108+
correct: false
109+
explanation: Stack is used for overlapping widgets, not for scrollable lists.
97110
</Quiz>
98111
''',
99112
);

‎site/lib/src/style_hash.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
// dart format off
33

44
/// The generated hash of the `main.css` file.
5-
const generatedStylesHash = 'lnVMS9WxG3de';
5+
const generatedStylesHash = 'J4pC5B3QVq4u';

0 commit comments

Comments
 (0)