Math & Problem Solving Lists

In educational content, structure is everything. We can’t just use simple bullet points for everything. Here we demonstrate new list styles designed for step-by-step solutions, quizzes, and fun notes.

1. Step-by-Step Solutions

The steps variant is perfect for derivations or algorithms. Notice the connected vertical line.

Problem: Solve for $x$ in $x^2 - 5x + 6 = 0$

• Factor the Quadratic Equation Find two numbers that multiply to $6$ and add to $-5$. These are $-2$ and $-3$. So, $(x-2)(x-3) = 0$.

• Set Each Factor to Zero Either $x - 2 = 0$ or $x - 3 = 0$.

• Solve for x $x = 2$ or $x = 3$.

• Final Verification Plug $2$ back in: $4 - 10 + 6 = 0$. Correct.

2. Quiz / Multiple Choice

The options variant automatically labels items as A, B, C, D and provides a clickable card-like feel.

Question: What is the derivative of $\sin(x)$?

• $\cos(x)$
• $-\cos(x)$
• $\tan(x)$
• $\sec^2(x)$

Question: Which vector is orthogonal to $(1, 2)$?

• $(2, 1)$
• $(-2, 1)$
• $(1, -2)$
• $(0, 0)$ (Trivial, but technically yes)

3. Colorful Notes

The scribble-colorful variant cycles through our brand colors for a fun, highlight-marker feel. Great for quick tips or “Why this matters” sections.

• **Remember**: The dot product of orthogonal vectors is zero.
• **Tip**: Always check the determinant before finding the inverse.
• **Note**: Eigenvalues can be complex numbers.
• **Fact**: Matrices are just linear maps in disguise.
• **Fun**: Linear algebra powers your video games!

Usage Code

/* Steps */
<List variant="steps">
  <li>Step 1 content...</li>
  <li>Step 2 content...</li>
</List>

/* Options */
<List variant="options">
  <li>Option A</li>
  <li>Option B</li>
</List>