Conditional Flow — Examples

Concrete flow examples showing what each building block unlocks.

---

Example 1: Quiz with right/wrong feedback

Today (Tag JS)

Question: "What is 2+2?"
  → Answer "4"  → Tag (JS: el.innerText = 'Correct!')
  → Answer "5"  → Tag (JS: el.innerText = 'Wrong!')
  → Answer "3"  → Tag (JS: el.innerText = 'Wrong!')

With variables + conditions (no JS)

Question: "What is 2+2?"
  → Answer "4"  ─┐
  → Answer "5"  ─┤→ Message: "You answered {answer}"
  → Answer "3"  ─┘  ChangeText [target: Feedback, text: "Correct!",  when: answer.position = 1]
                     ChangeText [target: Feedback, text: "Wrong!",    when: answer.position ≠ 1]

All answers converge. {answer} renders automatically. ChangeText only fires when condition matches.

---

Example 2: Quiz with score and dynamic result

Today (Tag JS)

Tag (JS: window.score = 0)
  → Q1 → Correct → Tag (JS: window.score++) → Q2
       → Wrong   ──────────────────────────→ Q2
    → Q2 → Correct → Tag (JS: window.score++) → Q3
         → Wrong   ──────────────────────────→ Q3
      → Q3 → ... → Tag (JS: el.innerText = 'Score: ' + window.score + '/3')

With variables + inline syntax (no JS)

Set [score = 0]
  → Q1 → Correct → Set [score += 1] ─┐
       → Wrong   ────────────────────┘
    → Q2 → Correct → Set [score += 1] ─┐
         → Wrong   ────────────────────┘
      → Q3 → Correct → Set [score += 1] ─┐
           → Wrong   ────────────────────┘
        → Message: "You got {score}/3!"
          ChangeText [target: Result, text: "Perfect! 🏆", when: score = 3]

No JS anywhere. {score} renders live. The perfect-score message is a conditional bonus.

---

Example 3: Form submit → thank you

Today (Tag JS)

Tag (JS:
  document.querySelector('form').addEventListener('submit', () => {
    document.querySelector('#form').style.display = 'none'
    document.querySelector('#thanks').style.display = 'block'
  })
)

With OnEvent (no JS)

[On Form Submit] → ShowHide [hide: Form, show: Thank You block]

Two nodes. Done.

With OnEvent + variables

[On Form Submit] → ShowHide [hide: Form]
                   Message: "Thanks {form.name}, we'll email you at {form.email}!"

Form field values available as {form.fieldName} system variables.

---

Example 4: Timed quiz with countdown

Today: not really possible without heavy JS

With OnEvent + variables

Set [score = 0]
  │
  ├── OnEvent [countdown: 30s, trigger at: 0s]  → ShowHide [hide: Quiz, show: Time's Up]
  │                                                 Message: "Score: {score}/3"
  │
  ├── OnEvent [countdown: 30s, trigger at: 10s] → ChangeText [target: Timer, text: "Only {countdown.remaining}s left!"]
  │
  ├── Question 1 → ...answers + scoring...
  ├── Question 2 → ...
  └── Question 3 → ...
        → ShowHide [hide: Countdown]
          Message: "Final score: {score}/3"

Two OnEvent triggers run in parallel with the main flow. One fires at 10s left (warning), one at 0s (game over).

---

Example 5: Conditional image based on choice

Today (duplicated paths)

Question: "Pick a color"
  → "Red"   → ChangeImage [car-red.jpg]   → Message: "Great choice!"  ← duplicated
  → "Blue"  → ChangeImage [car-blue.jpg]  → Message: "Great choice!"  ← duplicated
  → "Black" → ChangeImage [car-black.jpg] → Message: "Great choice!"  ← duplicated

With conditions (single path)

Question: "Pick a color"
  → "Red"   ─┐
  → "Blue"  ─┤→ ChangeImage [car-red.jpg,   when: Answer "Red"]
  → "Black" ─┘  ChangeImage [car-blue.jpg,  when: Answer "Blue"]
                 ChangeImage [car-black.jpg, when: Answer "Black"]
                   → Message: "Great choice, you picked {answer}!"

One downstream path. Edit "Great choice!" once.

---

Example 6: Product recommendation (multiple choices combined)

Today (exponential path explosion)

2 questions × 2 answers = 4 fully duplicated paths. 3×3 = 27 paths!

With variables + conditions (linear)

Q1: "Budget?"
  → "Low"  → Set [budget = low]  ─┐
  → "High" → Set [budget = high] ─┘
    → Q2: "Style?"
      → "Casual" → Set [style = casual] ─┐
      → "Formal" → Set [style = formal] ─┘
        → Message: "Based on {budget} budget and {style} style:"
          ChangeText [target: Product, text: "Basic Tee",     when: budget = low AND style = casual]
          ChangeText [target: Product, text: "Oxford Shirt",  when: budget = low AND style = formal]
          ChangeText [target: Product, text: "Designer Tee",  when: budget = high AND style = casual]
          ChangeText [target: Product, text: "Silk Suit",     when: budget = high AND style = formal]

Q2 exists once. No path duplication. Scales to any number of questions.

---

Example 7: Progressive disclosure with skip button

Today: skip requires JS

With OnEvent [click]

Message 1
  → Delay [2s] → ShowHide [show: Message 2]
    → Delay [1s] → ShowHide [show: Message 3]

[On Click: "Skip" button] → ShowHide [show: Message 2, Message 3]

OnEvent click trigger runs in parallel. If user clicks Skip, everything appears at once.

---

Example 8: Lead capture with validation feedback

With form variables + conditions

[On Form Submit]
  → Message: "Thanks {form.name}!"
    ChangeText [target: CTA, text: "Check your inbox at {form.email}"]
    ShowHide [hide: Form, hide: Intro, show: Confirmation]

Form field values are immediately available as variables after submit. No JS needed to read them.

---

Example 9: Quiz with correct/wrong CSS feedback ✅ WORKS TODAY

With correct/wrong marking + CSS classes (no JS)

Question: "What is the capital of Norway?"
  → Answer "Oslo"    [✓ correct]  ─┐
  → Answer "Bergen"                ─┤→ CSS operator:
  → Answer "Tromsø"               ─┘    .cavai-answer-correct { background: #e8f5e9; }
                                         .cavai-answer-wrong   { background: #ffebee; }
                                      ChangeText [target: Feedback, text: "Correct!",      when: answer.position = 1]
                                      ChangeText [target: Feedback, text: "Not quite!",    when: answer.position != 1]

Mark one answer as correct with the ✓ toggle. CSS classes are applied instantly on click. Zero JavaScript.

Note: {answer.result} variable (= "correct"/"wrong" string for templates) is planned but not yet implemented.

---

What each building block covers

Example	Variables {x}	Set Variable	When condition	OnEvent	Status
1. Quiz feedback	{answer}		right/wrong		✅ Works
2. Quiz with score	{score}	score += 1	perfect score		✅ Works
3. Form thank you	{form.name}			formSubmit	❌ Needs OnEvent
4. Timed quiz	{score} {countdown}	score += 1		countdown	❌ Needs OnEvent
5. Conditional image	{answer}		which answer		✅ Works
6. Product recommendation	{budget} {style}	budget, style	combo conditions		⚠️ Needs AND/OR
7. Skip button				click	❌ Needs OnEvent
8. Lead capture	{form.*}			formSubmit	❌ Needs OnEvent
9. Quiz CSS feedback	correct/wrong				✅ Works

Examples 1, 2, 5, 9 are fully working today. Examples 3, 4, 7, 8 need OnEvent. Example 6 needs compound conditions.