Botánica Andina

Posted on Mar 29

I Built an Andean Plant Quiz That Recommends Medicinal Herbs Based on Your Health Profile

#showdev #opensource #health #javascript

Have you ever wondered which Andean medicinal plant might help with your specific health concern? I built a free interactive quiz that recommends plants like maca, uña de gato, or muña based on your lifestyle and needs.

Why I Built This

I work on Botánica Andina, an evidence-based encyclopedia of Andean medicinal herbs. We already had a herb-drug interaction checker that cross-references 503+ documented interactions — but users kept asking: "Which plant should I actually try?"

The problem is that most "which supplement should I take" quizzes are thinly disguised product pages. I wanted to build something that:

Recommends based on published research, not marketing
Links to actual PubMed studies for every recommendation
Warns about contraindications (not just benefits)
Works entirely client-side — no data collection, no tracking

How It Works

The quiz asks 7 questions about:

Your primary health goal (energy, immunity, digestion, stress, etc.)
Current medications (to flag interactions)
Dietary preferences (vegan-compatible options)
Age range and activity level

The Scoring Algorithm

Each Andean plant has a profile vector across health dimensions:

const plants = {
  maca: {
    energy: 0.9, immunity: 0.3, digestion: 0.2,
    stress: 0.6, cognition: 0.5, hormonal: 0.8,
    contraindications: ["hormone-sensitive conditions", "thyroid disorders"]
  },
  cat_claw: {
    energy: 0.2, immunity: 0.9, digestion: 0.4,
    stress: 0.1, cognition: 0.2, hormonal: 0.1,
    contraindications: ["immunosuppressants", "anticoagulants"]
  },
  muna: {
    energy: 0.3, immunity: 0.4, digestion: 0.9,
    stress: 0.3, cognition: 0.2, hormonal: 0.1,
    contraindications: []
  }
  // ... 12 plants total
};

User answers create a "need vector" that gets dot-producted against each plant profile. The top 3 matches get shown with:

A confidence score (how well the plant matches your profile)
Key benefits backed by specific studies
Warnings if any of your medications interact

The Interaction Safety Check

This is the part I'm most proud of. Before showing results, the quiz cross-references your medication list against our interaction database:

function checkSafety(plant, medications) {
  const interactions = interactionDB[plant.id] || [];
  const warnings = [];

  for (const med of medications) {
    const match = interactions.find(i =>
      i.drug_class.some(dc => med.toLowerCase().includes(dc))
    );
    if (match) {
      warnings.push({
        severity: match.severity,
        mechanism: match.mechanism,
        source: match.pubmed_id
      });
    }
  }
  return warnings;
}

If a severe interaction is detected, the plant gets removed from recommendations entirely — not just flagged. I've seen too many supplement sites that bury warnings in footnotes.

Technical Stack

The entire quiz runs as a single HTML file — zero dependencies, no build step:

Vanilla JavaScript (~400 lines)
CSS animations for smooth transitions between questions
Schema.org FAQPage markup for SEO
Responsive design (works on mobile)

Total page weight: 18KB (including all plant data). Lighthouse score: 100/100 across all categories.

Why No Framework?

I considered React, but for a 7-question quiz with static data, a framework adds complexity without benefit. The entire state is just:

let currentQuestion = 0;
let answers = {};

No need for Redux, Context, or even useState. Sometimes the best framework is no framework.

What I Learned

1. Ethnobotany data is messy

Plant names vary wildly across regions. "Uña de gato" in Peru is Uncaria tomentosa, but in Mexico it refers to a completely different plant (Mimosa pudica). I had to normalize everything to binomial nomenclature to avoid confusion.

2. Confidence scoring needs calibration

My first version used simple keyword matching, which led to maca being recommended for literally everything (it scores moderately on every axis). I added normalization so plants only rank high when they have a strong signal, not just an average-across-the-board signal.

3. Medical disclaimers are non-negotiable

Even with "this is not medical advice" banners, I added specific contraindication checks that actively prevent dangerous recommendations. The quiz refuses to recommend uña de gato if you're on immunosuppressants, period. No checkbox can override this.

Results So Far

The quiz has been live for 3 weeks:

Average completion rate: 89% (most people finish all 7 questions)
Most common health goal: "Energy and fatigue" (34%)
Most recommended plant: Maca (28% of results)
Interaction warnings triggered: 12% of sessions

The high completion rate surprised me — I expected drop-off after question 3-4. I think the progress bar and the "personalized" feel keeps people engaged.

Try It

Take the Andean Plant Quiz

It takes about 90 seconds. No signup, no email collection, no tracking.

If you're interested in the herb-drug interaction data behind it, check out the Interaction Checker — it covers 503+ documented interactions between medicinal herbs and pharmaceutical drugs, all sourced from PubMed, EMA, and WHO databases.

The full plant database (12 Andean species with evidence profiles) is available on Botánica Andina.

What health tools have you built? I'd love to hear about projects at the intersection of tech and wellness.

DEV Community