Discover Your Dragon with the Threshing Quiz: A Journey into Coding and Fantasy

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:

Apr 22, 2025 - 21:47

Discover Your Dragon with the Threshing Quiz: A Journey into Coding and Fantasy

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: