In this post, I created an example animated question page. I preferred react-native animatable library for animation. You can use this library or you can find alternative one. You can access updated example application from this link. I shared example project codes on github. You can check it end of this post.
What did I do in this post? I created a simple Question page and I integrated animation library. Questions are coming with animation and when user choose answer, next question is coming with same scenario. If questions finish or user chose wrong answer, result screen is coming with animation. I have a timer too. If times up, again result screen is coming with animation.
What did I use in this example?
Visual Studio Code 1.41.1
I started from create a project step because, this post is first expo example in this blog. Let’s get start.
For create a new project, I used expo init “Project Name” on command prompt. After this command template list came, I chose blank template for my example project. The screenshot is as follows.
After template select, expo suggested to me yarn but I’m using npm. Because of this, I continued with npm.
After selecting the package manager, I waited like 2 mins for a create project. This time can be different for you because of your connection speed or etc. Project create result screenshot is as follows.
Now, my project is ready for development. Before I start, I installed an animation library. You can use as follows command for this and you can check animations from this link.
npm install react-native-animatable –save
After this step, I’m starting to develop my application via VS Code. You can use another alternatives. Firstly, I created Pages folder on root and Styles folder in available assets folder. I used this folders for my example. I didn’t explain a style codes. You can check or update from github links. Let’s start to question page.
I created QuestionPage.js in Pages folder. This example is Single Page application. Because of this, I will call my page from App.js file. The screenshot is as follows.
Before, I was using redux for state management but I used hooks in this example. My variable descriptions are as follows.
resultScreen: I triggered result screen via this variable.
answerAnimation: This variable for animation shape. I shared animation shapes in this post.
wrongAnswerStyle: When quiz start, all answers’ color is same. After user chose, I’m changing wrong answers color. Because user should see what’s correct or wrong. This variable is using for this.
trueAnswerStyle: This is like a wrongAnswerStyle. But this color for correct answer. You can cancel or change this variable.
timerVisible: After user choose an answer, I used timer area hidden with this variable. Because I didn’t show result screen after this. I showed to user correct/wrong answer 2 – 3 seconds.
controlAnswer: After user chose answer, I set users answer to this variable.
trueAnswer: When Question comes, I set true answer for current question in this variable. After user’s chose, I checked with controlAnswer/trueAnswer If this two are same, user gets +10 point and next question appears, If they are different, it goes to next question.
secondCounter: This is for timer. For example; I did 90 seconds. You can change quiz time with this variable.
restartGame: If this variable is true, All other variables will be default value for new game.
clickableStatus: This is for waiting time. If user is looking correct/wrong answers, second answer can’t appear via this variable.
landingScreenProperty: After finished quiz, this variable will be true and user will see result screen.
nextQuestionSecond: This variable for show correct/wrong answers. I did 3 second for this.
I tried to explain variables in this step, you can change this variables or you can update all of them.
Next step for scenario. I tried to explain scenario with codes. First code part is as follows.
This code block is working after user’s choose. Firstly, I changed ClickableStatus because I don’t want a second answer for same question. I did disabled property true for TouchableHightlight
Now, I can check answer. User can’t check another one. If user’s answer is correct, I changed selected answer’s background color and I gave 3 second for waiting before next question. You can change this color. After all of this process, I showed 2 second loading screen before next question. If user’s answer is wrong, I changed all of answers background color. Correct one is green, others are red. After this, I hidden timer and 3 seconds later I showed result screen.
Before I said, If answer is correct, loading screen is coming. I decided that with this code block. If answer is correct, landingScreenProperty will be true and this code block triggered.
Firstly, I updated controlAnswer with default and changed timer value with 0 in this block. Before I decided nextQuestionSecond 3. After 3 second, everything changed with default and everything ready for new question. You can show points or etc. in this 3 second.
This screenshot is last screenshot for methods. I prepared first if case for timer. If resultscreen didn’t show and user didn’t answer yet, this timer triggered.
Second if case for restart game. If user click restart button, this block triggered to restart game.
I showed methods to you. Now, let’s check screens. First screen is Question screen. The screenshot is as follows.
I used view and animated.view in this screen. Animated. came from my library. If you used different or if you didn’t include this library, this won’t come on your project. You can see how can you add this library in your project.
The next screen is result page. The screenshot is as follows.
I added a button on result screen. I didn’t write score but if you want you can add quickly. If user click this button, restartGame value will be true and application will be restart.
The final screen is loading (or landing) screen. I just added static text on this screen. The screenshot is as follows. This page is optional, If you want you can remove this page.
Finally, I wrote a few if case for trigger this pages. The screenshot is as follows.
You can check example as follows link;