Add quiz component for FWE

site/lib/_sass/_site.scss

@@ -30,6 +30,7 @@
 @use 'components/next-prev-nav';
 @use 'components/os-selector';
 @use 'components/pill';
+@use 'components/quiz';
 @use 'components/sidebar';
 @use 'components/side-menu';
 @use 'components/site-switcher';

site/lib/_sass/components/_quiz.scss

@@ -0,0 +1,148 @@
+.quiz {
+  display: flex;
+  flex-direction: column;
+
+  background-color: var(--site-raised-bgColor-translucent);
+  border-radius: var(--site-radius);
+  padding: 1rem;
+
+  .quiz-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: var(--site-base-fgColor-lighter);
+  }
+
+  .quiz-progress {
+    font-size: 0.9rem;
+    color: var(--site-primary-color);
+    font-weight: 500;
+  }
+
+  .quiz-question {
+    margin-top: 1.5rem;
+    display: none;
+
+    &.active {
+      display: block;
+    }
+
+    ol {
+      padding: 0;
+      margin: 0;
+      margin-top: 1rem;
+      list-style: upper-alpha;
+      list-style-position: inside;
+
+      li {
+        padding: 1rem;
+        background-color: var(--site-raised-bgColor);
+        border-radius: var(--site-radius);
+        margin-bottom: 0.2rem;
+        transition: background-color 500ms;
+
+        &:not(:where([aria-pressed="true"], [aria-disabled="true"])):hover {
+          background-color: var(--site-inset-bgColor);
+          cursor: pointer;
+        }
+
+        &[aria-pressed="true"]:has(.correct) {
+          background-color: oklch(from var(--site-alert-tip-color) l c h / 0.2);
+        }
+
+        &[aria-pressed="true"]:has(.incorrect) {
+          background-color: oklch(from var(--site-alert-error-color) l c h / 0.2);
+        }
+
+        &:not([aria-pressed="true"])[aria-disabled="true"] {
+          opacity: 0.6;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+
+        .question-wrapper {
+          display: grid;
+          grid-template-rows: min-content 0fr;
+          transition: grid-template-rows 500ms;
+        }
+
+        &[aria-pressed="true"] .question-wrapper {
+          grid-template-rows: min-content 1fr;
+        }
+
+        .question {
+          margin-top: -1lh;
+          margin-left: 1.4rem;
+        }
+
+        .solution {
+          position: relative;
+          padding-left: 1.4rem;
+          font-size: 0.9rem;
+          overflow: hidden;
+
+          p.correct,
+          p.incorrect {
+            padding-top: 0.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+
+            &::before {
+              position: absolute;
+              left: 0;
+            }
+          }
+
+          p.correct {
+            color: green;
+
+            &::before {
+              content: "✓";
+            }
+          }
+
+          p.incorrect {
+            color: red;
+
+            &::before {
+              content: "✗";
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .quiz-complete {
+    min-height: 15rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    strong {
+      font-size: 2rem;
+    }
+  }
+
+  .quiz-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+
+    .quiz-button {
+      &.secondary {
+        background-color: var(--site-inset-bgColor);
+        color: var(--site-base-fgColor);
+      }
+
+      &[disabled] {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+    }
+  }
+}

site/lib/jaspr_options.dart

@@ -35,7 +35,9 @@ import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_fil
     as prefix13;
 import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
     as prefix14;
-import 'package:jaspr_content/components/file_tree.dart' as prefix15;
+import 'package:docs_flutter_dev_site/src/components/tutorial/client/quiz.dart'
+    as prefix15;
+import 'package:jaspr_content/components/file_tree.dart' as prefix16;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -122,8 +124,13 @@ JasprOptions get defaultJasprOptions => JasprOptions(
         ClientTarget<prefix14.LearningResourceFiltersSidebar>(
           'src/components/pages/learning_resource_filters_sidebar',
         ),
+
+    prefix15.InteractiveQuiz: ClientTarget<prefix15.InteractiveQuiz>(
+      'src/components/tutorial/client/quiz',
+      params: _prefix15InteractiveQuiz,
+    ),
   },
-  styles: () => [...prefix15.FileTree.styles],
+  styles: () => [...prefix16.FileTree.styles],
 );
 
 Map<String, dynamic> _prefix2CopyButton(prefix2.CopyButton c) => {
@@ -148,3 +155,7 @@ Map<String, dynamic> _prefix11ArchiveTable(prefix11.ArchiveTable c) => {
   'os': c.os,
   'channel': c.channel,
 };
+Map<String, dynamic> _prefix15InteractiveQuiz(prefix15.InteractiveQuiz c) => {
+  'title': c.title,
+  'questions': c.questions.map((i) => i.toJson()).toList(),
+};

site/lib/main.dart

@@ -19,6 +19,7 @@ import 'src/components/pages/archive_table.dart';
 import 'src/components/pages/devtools_release_notes_index.dart';
 import 'src/components/pages/expansion_list.dart';
 import 'src/components/pages/learning_resource_index.dart';
+import 'src/components/tutorial/quiz.dart';
 import 'src/extensions/registry.dart';
 import 'src/layouts/catalog_page_layout.dart';
 import 'src/layouts/doc_layout.dart';
@@ -96,6 +97,7 @@ List<CustomComponent> get _embeddableComponents => [
   const DashImage(),
   const YoutubeEmbed(),
   const FileTree(),
+  const Quiz(),
   CustomComponent(
     pattern: RegExp('OSSelector', caseSensitive: false),
     builder: (_, _, _) => const OsSelector(),

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

@@ -16,6 +16,7 @@ class Button extends StatelessComponent {
     this.href,
     this.content,
     this.style = ButtonStyle.text,
+    this.ref,
     this.id,
     this.attributes = const {},
     this.classes,
@@ -29,6 +30,7 @@ class Button extends StatelessComponent {
   final String? title;
   final ButtonStyle style;
   final String? icon;
+  final Key? ref;
   final String? id;
   final String? href;
   final Map<String, String> attributes;
@@ -59,6 +61,7 @@ class Button extends StatelessComponent {
 
     if (href case final href?) {
       return a(
+        key: ref,
         id: id,
         href: href,
         classes: mergedClasses,
@@ -68,6 +71,7 @@ class Button extends StatelessComponent {
       );
     } else {
       return button(
+        key: ref,
         id: id,
         classes: mergedClasses,
         attributes: mergedAttributes,