Skip to content

Commit ae1d177

Browse files
schultekparlough
schultek
and
parlough
authored
Add quiz component for FWE (#12648)
Adds a Quiz component for use in FWE. --------- Co-authored-by: Parker Lougheed <parlough@gmail.com>
1 parent 4bb09a2 commit ae1d177

File tree

11 files changed

+489
-4
lines changed

11 files changed

+489
-4
lines changed

‎site/lib/_sass/_site.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@use 'components/next-prev-nav';
3131
@use 'components/os-selector';
3232
@use 'components/pill';
33+
@use 'components/quiz';
3334
@use 'components/sidebar';
3435
@use 'components/side-menu';
3536
@use 'components/site-switcher';

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.quiz {
2+
display: flex;
3+
flex-direction: column;
4+
5+
background-color: var(--site-raised-bgColor-translucent);
6+
border-radius: var(--site-radius);
7+
padding: 1rem;
8+
9+
.quiz-title {
10+
margin: 0;
11+
font-size: 1.5rem;
12+
font-weight: 500;
13+
color: var(--site-base-fgColor-lighter);
14+
}
15+
16+
.quiz-progress {
17+
font-size: 0.9rem;
18+
color: var(--site-primary-color);
19+
font-weight: 500;
20+
}
21+
22+
.quiz-question {
23+
margin-top: 1.5rem;
24+
display: none;
25+
26+
&.active {
27+
display: block;
28+
}
29+
30+
ol {
31+
padding: 0;
32+
margin: 0;
33+
margin-top: 1rem;
34+
list-style: upper-alpha;
35+
list-style-position: inside;
36+
37+
li {
38+
padding: 1rem;
39+
background-color: var(--site-raised-bgColor);
40+
border-radius: var(--site-radius);
41+
margin-bottom: 0.2rem;
42+
transition: background-color 500ms;
43+
44+
&:not(:where([aria-pressed="true"], [aria-disabled="true"])):hover {
45+
background-color: var(--site-inset-bgColor);
46+
cursor: pointer;
47+
}
48+
49+
&[aria-pressed="true"]:has(.correct) {
50+
background-color: oklch(from var(--site-alert-tip-color) l c h / 0.2);
51+
}
52+
53+
&[aria-pressed="true"]:has(.incorrect) {
54+
background-color: oklch(from var(--site-alert-error-color) l c h / 0.2);
55+
}
56+
57+
&:not([aria-pressed="true"])[aria-disabled="true"] {
58+
opacity: 0.6;
59+
}
60+
61+
p {
62+
margin-bottom: 0;
63+
}
64+
65+
.question-wrapper {
66+
display: grid;
67+
grid-template-rows: min-content 0fr;
68+
transition: grid-template-rows 500ms;
69+
}
70+
71+
&[aria-pressed="true"] .question-wrapper {
72+
grid-template-rows: min-content 1fr;
73+
}
74+
75+
.question {
76+
margin-top: -1lh;
77+
margin-left: 1.4rem;
78+
}
79+
80+
.solution {
81+
position: relative;
82+
padding-left: 1.4rem;
83+
font-size: 0.9rem;
84+
overflow: hidden;
85+
86+
p.correct,
87+
p.incorrect {
88+
padding-top: 0.5rem;
89+
font-weight: 600;
90+
margin-bottom: 0.5rem;
91+
92+
&::before {
93+
position: absolute;
94+
left: 0;
95+
}
96+
}
97+
98+
p.correct {
99+
color: green;
100+
101+
&::before {
102+
content: "✓";
103+
}
104+
}
105+
106+
p.incorrect {
107+
color: red;
108+
109+
&::before {
110+
content: "✗";
111+
}
112+
}
113+
}
114+
}
115+
}
116+
117+
}
118+
119+
.quiz-complete {
120+
min-height: 15rem;
121+
display: flex;
122+
flex-direction: column;
123+
justify-content: center;
124+
align-items: center;
125+
126+
strong {
127+
font-size: 2rem;
128+
}
129+
}
130+
131+
.quiz-actions {
132+
display: flex;
133+
justify-content: space-between;
134+
margin-top: 1rem;
135+
136+
.quiz-button {
137+
&.secondary {
138+
background-color: var(--site-inset-bgColor);
139+
color: var(--site-base-fgColor);
140+
}
141+
142+
&[disabled] {
143+
opacity: 0.4;
144+
pointer-events: none;
145+
}
146+
}
147+
}
148+
}

‎site/lib/jaspr_options.dart‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_fil
3535
as prefix13;
3636
import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
3737
as prefix14;
38-
import 'package:jaspr_content/components/file_tree.dart' as prefix15;
38+
import 'package:docs_flutter_dev_site/src/components/tutorial/client/quiz.dart'
39+
as prefix15;
40+
import 'package:jaspr_content/components/file_tree.dart' as prefix16;
3941

4042
/// Default [JasprOptions] for use with your jaspr project.
4143
///
@@ -122,8 +124,13 @@ JasprOptions get defaultJasprOptions => JasprOptions(
122124
ClientTarget<prefix14.LearningResourceFiltersSidebar>(
123125
'src/components/pages/learning_resource_filters_sidebar',
124126
),
127+
128+
prefix15.InteractiveQuiz: ClientTarget<prefix15.InteractiveQuiz>(
129+
'src/components/tutorial/client/quiz',
130+
params: _prefix15InteractiveQuiz,
131+
),
125132
},
126-
styles: () => [...prefix15.FileTree.styles],
133+
styles: () => [...prefix16.FileTree.styles],
127134
);
128135

129136
Map<String, dynamic> _prefix2CopyButton(prefix2.CopyButton c) => {
@@ -148,3 +155,7 @@ Map<String, dynamic> _prefix11ArchiveTable(prefix11.ArchiveTable c) => {
148155
'os': c.os,
149156
'channel': c.channel,
150157
};
158+
Map<String, dynamic> _prefix15InteractiveQuiz(prefix15.InteractiveQuiz c) => {
159+
'title': c.title,
160+
'questions': c.questions.map((i) => i.toJson()).toList(),
161+
};

‎site/lib/main.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import 'src/components/pages/archive_table.dart';
1919
import 'src/components/pages/devtools_release_notes_index.dart';
2020
import 'src/components/pages/expansion_list.dart';
2121
import 'src/components/pages/learning_resource_index.dart';
22+
import 'src/components/tutorial/quiz.dart';
2223
import 'src/extensions/registry.dart';
2324
import 'src/layouts/catalog_page_layout.dart';
2425
import 'src/layouts/doc_layout.dart';
@@ -96,6 +97,7 @@ List<CustomComponent> get _embeddableComponents => [
9697
const DashImage(),
9798
const YoutubeEmbed(),
9899
const FileTree(),
100+
const Quiz(),
99101
CustomComponent(
100102
pattern: RegExp('OSSelector', caseSensitive: false),
101103
builder: (_, _, _) => const OsSelector(),

‎site/lib/src/components/common/button.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ class Button extends StatelessComponent {
1616
this.href,
1717
this.content,
1818
this.style = ButtonStyle.text,
19+
this.ref,
1920
this.id,
2021
this.attributes = const {},
2122
this.classes,
@@ -29,6 +30,7 @@ class Button extends StatelessComponent {
2930
final String? title;
3031
final ButtonStyle style;
3132
final String? icon;
33+
final Key? ref;
3234
final String? id;
3335
final String? href;
3436
final Map<String, String> attributes;
@@ -59,6 +61,7 @@ class Button extends StatelessComponent {
5961

6062
if (href case final href?) {
6163
return a(
64+
key: ref,
6265
id: id,
6366
href: href,
6467
classes: mergedClasses,
@@ -68,6 +71,7 @@ class Button extends StatelessComponent {
6871
);
6972
} else {
7073
return button(
74+
key: ref,
7175
id: id,
7276
classes: mergedClasses,
7377
attributes: mergedAttributes,

0 commit comments

Comments
 (0)