Beginner onboarding quiz for HotStuff #85
Conversation
Created a simple quiz to help beginners understand HotStuff consensus.
Initial setup for interactive HotStuff quiz
Dark theme styling for HotStuff quiz
Interactive quiz functionality with timer and scoring
Enhanced mobile-friendly layout, added A/B/C/D options, and visual feedback for correct and wrong answers.
asonnino
left a comment
asonnino
left a comment
There was a problem hiding this comment.
This is a really cool idea!
In its current form, the quiz does not focus specifically on HotStuff; instead, it mainly emphasizes the general role of quorum-based consensus in modern blockchain systems. How about specializing the quiz around HotStuff itself, for example by highlighting how HotStuff differs from other consensus protocols and by testing understanding of its distinctive design choices and trade-offs?
| D. Token inflation | ||
|
|
||
| **Correct:** B | ||
| **Explanation:** HotStuff reduces communication overhead and improves performance. |
There was a problem hiding this comment.
HotStuff reduces communication complexity in the happy path
| D. Mining rewards | ||
|
|
||
| **Correct:** B | ||
| **Explanation:** Linear communication makes HotStuff more efficient at scale. |
There was a problem hiding this comment.
Unfortunately, there is no empirical evidence that this is the case. The performance of HotStuff is mostly dictated by the choice of data dissemination layer.
|
|
||
| --- | ||
|
|
||
| *I created this quiz while learning HotStuff myself. |
There was a problem hiding this comment.
Should we remove this sentence since this repo is authored by multiple people?
| --- | ||
|
|
||
| *I created this quiz while learning HotStuff myself. | ||
| Some explanations are simplified — feedback is welcome.* |
There was a problem hiding this comment.
Should we drop this in favour of a generic statement (eg in the Readme of the repo) saying that any feedback is welcome.
There was a problem hiding this comment.
Pull request overview
This PR introduces a beginner-friendly onboarding quiz to help new contributors learn about the HotStuff consensus protocol, along with a visual explainer and quiz for Codex (a Layer 2 stablecoin chain). The implementation includes interactive web-based quizzes with timers, scoring, and styled UI components.
Key Changes
- Interactive HotStuff quiz with 5 questions, 30-second timer per question, and immediate feedback
- Codex visual explainer landing page with feature cards and educational content
- Comprehensive documentation in markdown format covering quiz questions and explanations
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| quiz/index.html | Main HTML structure for the HotStuff quiz interface with start, quiz, and result screens |
| quiz/script.js | Quiz logic including question loading, timer functionality, and answer validation |
| quiz/style.css | Dark-themed styling with custom CSS variables and responsive design |
| docs/hotstuff-beginner-quiz.md | Documentation version of quiz questions with explanations |
| codex-visual-explainer/index.html | Landing page explaining Codex Layer 2 with feature highlights and quiz CTA |
| codex-visual-explainer/quiz.html | Standalone Codex quiz with 10 questions and inline styles |
| codex-visual-explainer/style.css | Shared styling for Codex explainer pages |
| codex-visual-explainer/README.md | Project documentation for the Codex visual explainer |
| codex-visual-explainer/codex-logo.png | Logo image file for Codex branding |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| <!-- FOOTER --> | ||
| <footer class="footer"> | ||
| Built with ❤️ by |
There was a problem hiding this comment.
The heart emoji uses "❤️" in index.html but "💚" (green heart) is used in quiz/index.html. Consider using consistent emoji styling across all files for brand consistency.
| Built with ❤️ by | |
| Built with 💚 by |
| .primary-btn:hover { | ||
| opacity: 0.9; | ||
| } | ||
|
|
There was a problem hiding this comment.
The button element lacks proper focus styling for keyboard navigation accessibility. While there is a hover state defined at line 106, there is no :focus state. Consider adding a :focus pseudo-class with similar or enhanced styling to ensure keyboard users can see which element is focused.
| .primary-btn:focus, | |
| .primary-btn:focus-visible { | |
| outline: 2px solid #ffffff; | |
| outline-offset: 2px; | |
| box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4); | |
| } |
| <p class="credit"> | ||
| Built with 💚 by | ||
| <a href="https://x.com/TheEncryptedAnt" target="_blank"> | ||
| @TheEncryptedAnt | ||
| </a> | ||
| </p> |
There was a problem hiding this comment.
The paragraph element uses class "credit" but this class is not defined in the associated style.css file. This will result in the element not being styled as intended. Consider adding the appropriate CSS class definition or using an existing class.
| q: "Which problem does HotStuff improve over older BFT protocols?", | ||
| options: [ | ||
| "High gas fees", | ||
| "Slow finality and communication", | ||
| "Token inflation", | ||
| "Energy consumption" | ||
| ], | ||
| answer: 1 | ||
| }, |
There was a problem hiding this comment.
Question mismatch: The JavaScript quiz asks "Which problem does HotStuff improve over older BFT protocols?" with answer "Slow finality and communication", but the markdown documentation (Q2) asks "What problem does HotStuff improve compared to older BFT protocols?" with answer "Slow finality and complex communication". The wording differs slightly between the two versions. Ensure consistent phrasing across both the quiz application and documentation.
| const quiz = [ | ||
| { q: "What is Codex primarily focused on?", o: ["NFTs", "Stablecoins and payments", "Gaming", "Memecoins"], a: 1 }, | ||
| { q: "Which layer is Codex built on?", o: ["Layer 1", "Layer 3", "Layer 2", "Sidechain"], a: 2 }, | ||
| { q: "Where does Codex settle transactions?", o: ["Solana", "Polygon", "Ethereum", "BNB Chain"], a: 2 }, | ||
| { q: "What makes Codex fees special?", o: ["High but fast", "Predictable", "Zero gas", "Dynamic spikes"], a: 1 }, | ||
| { q: "What does Native FX enable?", o: ["NFT swaps", "Low-slippage stablecoin swaps", "Bridges", "Mining"], a: 1 }, | ||
| { q: "Codex is optimized for?", o: ["Speculation", "Meme trading", "Payments", "Gaming"], a: 2 }, | ||
| { q: "Which currency type is Codex built around?", o: ["Volatile tokens", "Stablecoins", "BTC only", "NFTs"], a: 1 }, | ||
| { q: "What ensures security in Codex?", o: ["Validators", "Ethereum settlement", "Oracles", "Multisig"], a: 1 }, | ||
| { q: "What is Atomic Offramps about?", o: ["Instant exits", "Reverting failed compliance", "Bridges", "DEX fees"], a: 1 }, | ||
| { q: "Codex is best described as?", o: ["General L2", "Payment-focused L2", "Game chain", "NFT chain"], a: 1 } | ||
| ]; |
There was a problem hiding this comment.
The question data structure uses single-letter abbreviations (q, o, a) which make the code less readable and harder to maintain. Consider using descriptive property names like 'question', 'options', and 'answer' instead to improve code clarity.
| <!-- HEADER --> | ||
| <header class="header"> | ||
| <div class="header-inner"> | ||
| <img src="codex-logo.png" class="logo" alt="Codex Logo" /> |
There was a problem hiding this comment.
The image element lacks an alt attribute. While there is an empty alt attribute present (alt="Codex Logo"), screen readers may still benefit from a more descriptive alternative text. Consider providing a more descriptive alt text like "Codex Layer 2 Protocol Logo" to improve accessibility for visually impaired users.
| <img src="codex-logo.png" class="logo" alt="Codex Logo" /> | |
| <img src="codex-logo.png" class="logo" alt="Codex Layer 2 Protocol Logo" /> |
| <p class="learn"> | ||
| Want to learn more? | ||
| <a href="https://docs.hotstuff.trade/" target="_blank"> | ||
| Read HotStuff Docs ↗ | ||
| </a> | ||
| </p> |
There was a problem hiding this comment.
The paragraph element uses class "learn" but this class is not defined in the associated style.css file. This will result in the element not being styled as intended. Consider adding the appropriate CSS class definition or using an existing class.
| const questions = [ | ||
| { | ||
| q: "What is HotStuff mainly used for?", | ||
| options: [ | ||
| "NFT minting", | ||
| "Blockchain consensus", | ||
| "Crypto trading", | ||
| "Wallet security" | ||
| ], | ||
| answer: 1 | ||
| }, | ||
| { | ||
| q: "Which problem does HotStuff improve over older BFT protocols?", | ||
| options: [ | ||
| "High gas fees", | ||
| "Slow finality and communication", | ||
| "Token inflation", | ||
| "Energy consumption" | ||
| ], | ||
| answer: 1 | ||
| }, | ||
| { | ||
| q: "HotStuff was originally designed for which project?", | ||
| options: [ | ||
| "Ethereum", | ||
| "Bitcoin", | ||
| "Diem (Libra)", | ||
| "Solana" | ||
| ], | ||
| answer: 2 | ||
| }, | ||
| { | ||
| q: "What makes HotStuff scalable?", | ||
| options: [ | ||
| "Proof of Work", | ||
| "Quadratic messaging", | ||
| "Linear communication", | ||
| "Central authority" | ||
| ], | ||
| answer: 2 | ||
| }, | ||
| { | ||
| q: "HotStuff belongs to which family of protocols?", | ||
| options: [ | ||
| "PoS", | ||
| "BFT", | ||
| "PoW", | ||
| "DAG" | ||
| ], | ||
| answer: 1 | ||
| } | ||
| ]; |
There was a problem hiding this comment.
Question set mismatch: The JavaScript quiz includes a question about which project HotStuff was originally designed for (Q3: "Diem (Libra)"), but the markdown documentation has a different question in that position about scalability features. Additionally, the JS quiz asks about protocol families (Q5: "BFT"), while the markdown asks "Who benefits from understanding HotStuff?". The quiz questions in the JavaScript application and the markdown documentation are not aligned, which creates confusion for learners. Consider synchronizing both versions to include the same questions.
| @@ -0,0 +1,64 @@ | |||
| # HotStuff – Beginner Onboarding Quiz | |||
|
|
|||
| This quiz is created to help beginners understand the basics of the HotStuff | |||
There was a problem hiding this comment.
The word "beginI am" appears to be a typo. It should be split into "begin. I am" or "beginners. I am" with proper punctuation and spacing.
| </div> | ||
|
|
||
| <footer> | ||
| Built with ❤️ by |
There was a problem hiding this comment.
The heart emoji is rendered using the HTML entity "❤️" but lacks the "❤" alternative text entity that would be more compatible across different systems. Consider using the numeric entity "❤" or ensuring consistent emoji rendering across browsers.
| Built with ❤️ by | |
| Built with ❤ by |
2 participants
Created a simple quiz to help beginI am learning HotStuff and created this beginner-friendly quiz
to help new contributors understand the basics.
Feedback is welcome.
ners understand HotStuff consensus.