Building a React Stepper Library for Quizzes and Application Flows
Over the last year we’ve built a number of quizzes and application flows (sign ups, onboardings, & product builders). While building these flows we decided to a build a library for handling this seemingly repeatable experiences. As such React Strider was born.
At it’s core React Strider is a library for going forward and backward between a series of components. The library has a few extra whistles for animating between steps (transition based css classing), returning the active index, and allowing you to portal jump to any step within the series.
Building a simple version of the Codecademy Quiz
As a case study, we’re going to be building a simpler version of the latest project I used this library with. I’d like to emphasize the unlimited use cases for this library, presentations, onboardings, checkouts, etc. We’ll be using generic React state in these examples, obviously you could wrap this in mobx, Redux or whatever your favorite flavor of state management is. We’ll not be implementing the timer (the auto selector) because that adds a lot of additional complexity that would make this example harder to navigate.
You can find the completed version of our quiz on codesandbox, but feel free to follow along to get a walkthrough of the process.
Setting up our initial application
Before we start adding advanced logic let’s first pull down the library and add it to our simple react application.
npm install react-strider --save
We’re going to add 2 simple steps (start and end steps). We’re also going to add the hiding/showing class mechanism.
You’ll see we’re passing a number of additional props into our Step Components but we’re not actually using it currently. It’s more meant to inform you that those props are available.
The library as 5 core functions: prev, next, goTo, active, activeIndex. You can pass these functions down to any component nested within a Step. If you wish to track additional state I suggest doing that outside of the Strider library. We’ll show examples of this later.
Setting up our quiz data
We’re going to set up a JSON file (which could be replaced by an api endpoint later on) with all of our questions/answers. For the sake of not over complicating this we’re only going to have 3 possible questions with 2 selectable choices.
Obviously this data could come from a CMS and be structured entirely different. I like structuring mock data in this way because it’s easy to iterate over with key value switches. I’ve also added a fact bit which will add another layer to our simple quiz. This should give you an idea of ways to extend the standard functionality. We’ve put the choices into an Array so that we can iterate over 2 or more selectable choices.
Single Quiz Item Component
Next let’s set up our actual Single Quiz component. This is the most complicated part of our quiz, it handles pushing answers to the App component, disabling selections, displaying the question and possible answers as well as returning additional facts after a selection is made.
You’ll notice we’re doing a number of things in our render. Toggling the question and fact depending on user selection, as well as toggling the Next button. We also have our SelectableAnswer component that iterates over the choices we defined in our data.js above.
handleSelected
This function does a lot. First and foremost it listens to the selection made on the SelectedableAnswer component which we’ll talk through in a second.
- pushing the correct answer back into the score state
- tracks whether a selection is made
- disables the selectable answers from being clickable after a choice is made.
- we also update a choice state that removes the question and displays the fact after a “choice” is made
handleNext
Pushes an answer up to the App component that updates a state of correct answers, we use this at the end of the quiz to return results. We then push the user to the next step of the quiz.
Selectable Answer Component
This component handles displaying our selectable choices from the questions. It listens to the state changes of the single component above in order to display a right or wrong state for your selection, as well as disabling selection after a choice is picked.
The color function handles updating the class of the option, selecting a wrong answer turns the button red and a right answer makes the button green.
Now we have all the moving pieces, we have some light styling that you can check out in the working examples.
We added additional options to the codecademy quiz where we have additional visuals, a timer mechanism that can auto select a wrong answer if the user isn’t fast enough. We also have additional up sell facts and sharing capability that’s powered by react-helmet.
Hope y’all enjoyed this example and remember the use cases for react-strider aren’t limited to just quizzes :).
