Add interactive quizzes with actionable feedback to FWE

[parlough]

These questions are a bit rough and definitely could use some improvements, but I wanted to get some relevant content down and functional. Please do make changes in this PR or in follow-up PRs.

• Migrates the quiz styles over from the Flutter docs site.
• Adds Markdown support to the quiz question title and explanations.
• Puts the correct answer first in the markdown and shuffles the options when loading.
• Adds new quizzes for each lesson, with some questions based on the draft questions and others completely new. Each option has an explanation added with a slight hint if wrong.

[gemini-code-assist]

Summary of Changes

Hello @parlough, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the educational experience on the FWE site by integrating a new interactive quiz system. This system allows for dynamic, engaging assessments directly within lesson content, providing immediate and actionable feedback to users. The changes involve the creation of a dedicated quiz component, styling adjustments, and updates to the content parsing logic to support Markdown within quiz elements, ensuring a more robust and user-friendly learning environment.

Highlights

• Interactive Quiz Component: A new interactive quiz component has been introduced, allowing for engaging assessment directly within the documentation content.
• Markdown Support: Quiz question titles, option text, and explanations now fully support Markdown formatting, enabling richer and more flexible content creation.
• Dynamic Quiz Behavior: Quiz options are now shuffled upon loading, enhancing the user experience, while the correct answer is placed first in the Markdown source for easier authoring.
• Comprehensive Quiz Content: New quizzes have been added to each lesson across multiple 'get-started' guides, incorporating both existing draft questions and entirely new ones, each with detailed explanations for correct and incorrect answers.
• Styling and Integration: Quiz styles have been migrated from the Flutter docs site and integrated into the FWE site's SASS structure, ensuring a consistent look and feel.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new interactive quiz component to the site. The changes include adding new SASS styles for the quiz, integrating it into the main stylesheet, and adjusting the translucency of a site-wide background color. The quiz component is registered for both client-side and server-side rendering, and its content model now supports Markdown for questions, options, and explanations, with answer options being shuffled. Existing plain text quizzes in various tutorial Markdown files have been converted to use this new interactive quiz component. Review comments suggest replacing hardcoded green and red colors for correct/incorrect answer text in the quiz styles with site-wide theme variables (--site-alert-tip-color and --site-alert-error-color) to ensure visual consistency and proper theming.

[ericwindmill]

I agree that some of the questions could be improved. But we should just land something functional for now. Regardless of how well we write them right now, I'll end up editing them when I do my final pass