i-Radio Fragment System Documentation

Which is correct?

- Wrong answer{:21}
- Correct answer{:20}
{: .i-radio}

What is 2 + 2?

- 3{:21 | No, try again.}
- 4{:20 | Perfect!}
- Explanation{:29 | Math tip: 2 + 2 = 4}
{: .i-radio}

• All buttons appear as soft primary outline (btn btn-primary btn-sm btn-outline)
• Clean, professional appearance
• No feedback visible
• Flag 29 content hidden

• Clicked button transforms:
• Flag 20 → Green solid (btn-success)
• Flag 21 → Red solid (btn-error)
• Other buttons reset to outline state
• Individual feedback appears if provided
• Flag 29 content becomes visible
• State persists until another option selected

# Minimal (just flags)
- Option{:flag}

# With feedback
- Option{:flag | Feedback message}

# With CSS classes
- Option{:flag .class-name | Feedback}

# With pre-click classes (NEW!)
- Option{:flag .btn-secondary .pre-pulse | Feedback}

# Multi-line feedback
- Option{:flag | Line 1
  Line 2
  Line 3}

# Comment (always visible)
- This is always shown

# Explanation (shows after any answer)
- Title{:29 | Detailed explanation}

What causes rain?

- The sun{:21 | The sun evaporates water, but doesn't directly cause rain.}
- Water cycle{:20 | Correct! The water cycle includes evaporation, condensation, and precipitation.}
- Wind{:21 | Wind moves clouds but doesn't create rain.}
- Temperature only{:21 | Temperature is involved but not the complete answer.}
- Note: This is a simplified explanation
- Learn More{:29 | **The Water Cycle:**
  1. **Evaporation**: Sun heats water → water vapor
  2. **Condensation**: Vapor cools → forms clouds
  3. **Precipitation**: Droplets combine → fall as rain
  4. **Collection**: Water returns to rivers, lakes, oceans}
{: .i-radio}

function handleRadioClick(groupIndex, flag, button) {
    // 1. Reset all buttons to outline state
    // 2. Apply success/error class to clicked button
    // 3. Show individual feedback if available
    // 4. Show flag 29 content
    // 5. Store answer in localStorage
    // 6. Dispatch custom event
}

// Listen for answer events
document.addEventListener('i-radio-answered', (event) => {
    console.log(event.detail);
    // { fragmentIndex, flag, isCorrect, feedback, timestamp }
});

1. src/core/pm/services/fragment_builder.py
2. capture_html_flag_feedback() - Parses markdown syntax

3. from_list() - Builds fragment data structure

4. src/core/pm/services/i_radio_utils.py

5. Flag constants (20, 21, 29, -1)
6. Helper functions for validation
7. CSS class mappings

1. src/templates/pm/index.html
2. Fragment rendering template
3. Click handler JavaScript
4. CSS styles

• Pre-click classes: Any CSS class starting with pre- is applied initially
• On first click: All pre- classes are removed from ALL buttons in the group
• DaisyUI override: If custom classes contain btn- variants, they override default styling
• Backward compatibility: Existing i-radio fragments work unchanged

What is 2 + 2?

- 3{:21 .pre-pulse .pre-glow | Wrong, but nice try!}
- 4{:20 .pre-pulse .pre-glow | Perfect!}
- 5{:21 .pre-pulse .pre-glow | Too high!}
{: .i-radio}

Choose your favorite:

- Red{:20 .btn-error .btn-lg .pre-animate-bounce | Fiery!}
- Blue{:20 .btn-info .btn-lg .pre-animate-bounce | Cool!}
- Green{:20 .btn-success .btn-lg .pre-animate-bounce | Natural!}
{: .i-radio}

• .pre-pulse - Pulsing animation
• .pre-bounce - Bouncing animation
• .pre-glow - Blue glow effect
• .pre-animate-spin - Spinning animation
• .pre-bg-warning - Warning background color
• .pre-shadow-lg - Large shadow
• .pre-ring - Ring effect
• And more...

- Answer{:21 | This is wrong because:
  - Reason 1
  - Reason 2
  - Reason 3}
{: .i-radio}

- $x = 2${:21 | Try again: $x^2 = 4$ has two solutions}
- $x = \pm 2${:20 | Perfect! Both $x = 2$ and $x = -2$ work}
{: .i-radio}

- Option{:20 | Here's the code:
  ```python
  def example():
      return "Hello"
  ```}
{: .i-radio}

- Answer{:29 | **Bold**, *italic*, `code`

  1. Ordered list
  2. With items

  - Unordered too
  - Works great}
{: .i-radio}

• Provide feedback for wrong answers explaining why
• Use flag 29 for detailed explanations
• Keep buttons concise - put details in feedback
• Test all paths - click each option
• Use LaTeX for math expressions
• Add comments for instructions
• Use pre-click classes for call-to-action effects
• Override DaisyUI classes when you need custom styling

• Don't make button text too long
• Don't use flag 29 alone (needs interactive options)
• Don't mix unrelated questions in one fragment
• Don't forget to mark at least one answer correct
• Don't use complex HTML in button text

- Wrong 1{:21 | Explanation why wrong}
- Wrong 2{:21 | Explanation why wrong}
- Correct{:20 | Explanation why right}
- Wrong 3{:21 | Explanation why wrong}
{: .i-radio}

Which are fruits?

- Apple{:20 | Yes, a fruit}
- Carrot{:21 | No, a vegetable}
- Banana{:20 | Yes, a fruit}
- Potato{:21 | No, a vegetable}
{: .i-radio}

- Wrong{:21 | Hint: Think about...}
- Also wrong{:21 | Closer! Consider...}
- Correct{:20 | Exactly right!}
- Still wrong{:21 | Remember that...}
- Explanation{:29 | Full solution here}
{: .i-radio}

• v1.0 - Basic flags (20, 21, -1)
• v2.0 - Added feedback with pipe syntax
• v3.0 - Added flag 29 for explanations
• Current - Full feature set with multi-line support