Build a Flashcard Quiz with React

React

Welcome to a new React JS project, where we are going to build a Flashcard Quiz app using React.

So, fire up your terminal and create a new react app flashcard-react with the below command.

flashcard-react

We will remove all the unnecessary boiler-plate code and our index.js will look like below.

index.js

And the App.js contains only Hello World text.

App.js

Next, create a components folder src folder and two files FlashcardList.js and Flashcard.js inside it. Next, we will use sample question data before, getting the data from the API endpoint for the quiz.

So, in App.js create a variable SAMPLE_CARDS, which contains various things related to the question as objects inside an array.

App.js

Next, we will create an state variable cards and assign it to SAMPLE_CARDS using useState hook. After that we will pass the cards to the FlashcardList component as flashcards props.

App.js

Next, head over to FlashcardList.js file and use the flashcards props. We are mapping over it and passing individual object to the Flashcard component.

FlashcardList.js

Now, in the Flashcard.js file, we are just showing the question for now.

Flashcard.js

Now, in localhost we can see the three questions.

Questions

We will next implement the flip logic in cards. So, in Flashcard.js we will use the state variable flip and set it to false. The click of the div will set it to toggle and display the question or answer accordingly.

Flashcard.js

So, if we move to localhost we can see the flipping in action.

Flipping

We will now complete our Flashcard.js component with the html structure.

Flashcard.js

Now, we will create our styles. So, create a new file App.css and also include it in App.js file.

App.js

Now, in App.css we will put the basic styles, plus the styles for card.

App.css

If we go to localhost we can see the cards and also the answer in back with 180deg rotation.

localhost

Now, we don’t want the backside of the card to be shown. So, we will give the backface-visibility: hidden property.

App.css

Next, we want to flip the card based on the click. For that we are having a transform on the card, where are creating a variable rotate-y, which is set to 180deg on flip. We also need to have transform-style: preserve-3d for this to work.

App.css

So, now in localhost we can see this in action.

Flipper in action

We will add two more properties for nice smoother transition. We will also have a nice box-shadow on hover of the box.

App.css

We will also have style for the options in card. So, put the in App.css.

App.css

Now, it’s time to hit the API endpoint and generate the questions for our quiz. We will be using the open trivia DB for the same.

Open DB

For using the API, we need axios. So, install it and use the useEffect hook to cal the opentdb endpoint once.

App.js

Now, we will create our array of object similar to SAMPLE_CARDS in the .then block. Here, we are also using decodeString function in question, because we are receiving HTML characters also in some questions.

App.js

Now, we will put styles in our App.css file. Here, we are styling the card-grid and also making the height more and removing the width.

App.css

I found two small bugs in above. The first to show a question from SAMPLE_CARDS and that can be fixed with passing an empty array to useState.

The second thing is that we need decodeString() in everything, because sometime the answers also contained special HTML characters.

App.js

Now, our small flashcard quiz app is complete with 10 random questions from Trivia DB. You can find code for the same in this github repo.

Quiz App