Build a Flashcard Quiz with React

Image for post
Image for post
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.

Image for post
Image for post
flashcard-react

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

Image for post
Image for post
index.js

And the App.js contains only Hello World text.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
FlashcardList.js

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

Image for post
Image for post
Flashcard.js

Now, in localhost we can see the three questions.

Image for post
Image for post
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.

Image for post
Image for post
Flashcard.js

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

Image for post
Image for post
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.

Image for post
Image for post
App.js

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

Image for post
Image for post
App.css

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

Image for post
Image for post
localhost

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

Image for post
Image for post
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.

Image for post
Image for post
App.css

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

Image for post
Image for post
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.

Image for post
Image for post
App.css

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

Image for post
Image for post
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.

Image for post
Image for post
Open DB

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Quiz App

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store