What do you get when you mix React, a dash of fantasy logic, and a whole lot of dragon energy? A custom personality quiz that tells you exactly what kind of dragon you’d bond with in the world of Fourth Wing.

Let’s be real—if you’ve devoured Rebecca Yarros’ Fourth Wing, you’ve definitely wondered whether you’d survive the Rider’s Quadrant… and more importantly, which dragon would choose you. Clubtail or Scorpiontail? Fiery Red or fiercely loyal Brown? I needed answers. So, I built a quiz to find out.

I wanted to create a “Which Dragon Would Bond With You?” quiz that didn’t just slap a label on you after a few shallow questions. I wanted this to feel immersive, a little chaotic (like any day in Navarre), and actually rooted in logic and personality mapping.

Each answer choice ties to a series of traits—things like:

  • Cunning, bold, empathetic, or ruthless
  • Which then map to…
  • Dragon colors and tail types

After you answer all 15 questions, your most dominant traits determine your dragon bond. You get a final result like:

Dragon Color: Black
Tail Type: Scorpiontail
(aka: you’re probably terrifying in the best possible way)

⚙️ The Tech Under The Talons

This quiz was built using:

  • React for building reusable components like QuestionCard and Result
  • Framer Motion for animations that bring the questions to life with smooth transitions
  • State management via useState to track current questions and accumulate trait data

At its core, each answer has an array of trait strings (e.g., ["intelligent", "cunning"]). Here’s how it works:

const handleAnswer = (traits) => {
  setUserTraits((prev) => [...prev, ...traits]);
  // move to the next question or show the result
};

Then, when the quiz is over, we count how often each trait appears and map those to color and tail options:

const traitToColor = {
  loyal: ["Brown"],
  bold: ["Orange", "Red"],
  intelligent: ["Green", "Black"],
  // etc...
};

const traitToTail = {
  strong: "Clubtail",
  deadly: "Scorpiontail",
  bold: "Daggertail",
  // etc...
};

Finally, the calculateResult() function returns the most frequent match in each category to determine your dragon.

✨ Little UX Touches

I added Framer Motion animations to each question card so it doesn’t just feel like flipping through a list. Instead, the quiz feels alive, like a mini Trial by Flame. Here’s the snippet that makes each transition buttery smooth:

🧪 What I Learned

This project was more than just a fun fangirl moment—it pushed me to:

  • Structure complex decision logic based on user input
  • Think modularly about UI and data flow
  • Practice DOM animations in React with Framer Motion
  • Design a dynamic, magical user experience with a whole lot of custom logic

If you’re curious about how I built this quiz or want to take it yourself to find your bonded dragon, check out the live site here! And remember: some of us are meant for Gold dragons, others for poison-wielding Black ones. Either way, you better have the grit to back it up.

“Fly or die,” right?