PowerApps Simple Quiz Application

Introduction

 
In this article, we will see how we can create a simple quiz app/survey app in PowerApps. 
 

Implementation 

  • Move to the PowerApps
  • Go to the Create > Canvas app from blank
  • Give App name and select format
In this app, we will create the following screens,
  • Home Screen, Result Screen, and 5 screens for 5 questions.
Let's start step by step implementation of screens.
 

Home Screen

 
In this screen, we will add a label (for the quiz) and button (to start the quiz) as below,
 
Home Screen
 
On the selection of the button, we will navigate to the question 1 screen. So we will write the formula on the OnSelect property as below,
  1. Navigate(Question1)  
Now we will add some controls for the all questions screens like labels for question number and question, the radio button for the options and button for the check answer, and store in some variable and move to the next screen. So let's see the implementation.
 

Question 1 Screen

 
The output screen will be like this, 
 
QUestion2
 
We will write a formula on the OnSelect property of the Next button. Now we will set the score as if the answer is wrong then 0 and if right then 5 and then navigate to the Question2 screen. 
  • We will use if condition and in if condition we will get radio button selected value and will check with our answer and will set score = 5 if the answer is true; else will set to 0.
  • then we will reset the radio button selected value
  • and then will navigate to the next screen. 
  1. If(  
  2.     Radio1.Selected.Value = ".stp",  
  3.     Set(  
  4.         Score,  
  5.         5  
  6.     ),  
  7.     Set(  
  8.         Score,  
  9.         0  
  10.     )  
  11. );  
  12. Reset(Radio1);  
  13. Navigate(  
  14.     Question2,  
  15.     ScreenTransition.Fade  
  16. )  

Question2 Screen 

 
The output screen will be like this,
 
QUestion1
  • Here we will check if the answer is true then we will add 5 points to the existing score and then reset the radio and navigate to the next screen. We will do the same for screen questions 3 to 5. 
Execute a formula on Onselect of Next button as below,
  1. If(  
  2.     Radio2.Selected.Value = "iisreset",  
  3.     Set(  
  4.         Score,  
  5.         Score + 5  
  6.     )  
  7. );  
  8. Reset(Radio2);  
  9. Navigate(  
  10.     Question3,  
  11.     ScreenTransition.Fade  
  12. )  

Question 3 screen

 
The output screen will be like this,
 
QUestion3
 
Execute a formula on Onselect of Next button as below,
  1. If(  
  2.     Radio3.Selected.Value = "443",  
  3.     Set(  
  4.         Score,  
  5.         Score + 5  
  6.     )  
  7. );  
  8. Reset(Radio3);  
  9. Navigate(  
  10.     Question4,  
  11.     ScreenTransition.Fade  
  12. )  

Question 4 screen

 
The output screen will be like this,
 
Question4
 
Execute a formula on Onselect of Next button as below,
  1. If(  
  2.     Radio4.Selected.Value = "All the above",  
  3.     Set(  
  4.         Score,  
  5.         Score + 5  
  6.     )  
  7. );  
  8. Reset(Radio4);  
  9. Navigate(  
  10.     Question5,  
  11.     ScreenTransition.Fade  
  12. )  

Question 5 screen

 
The output screen will be like this, 
 
Question5
 
Execute a formula on Onselect of Next button as below,
  1. If(  
  2.     Radio5.Selected.Value = "One",  
  3.     Set(  
  4.         Score,  
  5.         Score + 5  
  6.     )  
  7. );  
  8. Reset(Radio5);  
  9. Navigate(  
  10.     ResultScreen,  
  11.     ScreenTransition.Fade  
  12. )  

Result screen

The controls inside the screen will be like this,
 
Result Screen Controls
 
The output screen will be like this,
 
 
Now will execute a formula of Default property of the Rating control to show stars as per score as below,
  1. If(  
  2.     Score = 5,  
  3.     1,  
  4.     If(  
  5.         Score = 10,  
  6.         2,  
  7.         If(  
  8.             Score = 15,  
  9.             3,  
  10.             If(  
  11.                 Score = 20,  
  12.                 4,  
  13.                 If(  
  14.                     Score = 25,  
  15.                     5  
  16.                 )  
  17.             )  
  18.         )  
  19.     )  
  20. )  
To show score we will set the Text property of Label as below,
  1. Score & "/25"   
After the quiz completion, we will navigate to the home screen so on the click of iconCheck so will execute the formula on the OnSelect property of this icon as below,
  1. Navigate(HomeScreen)  
Output
 
Output - Quiz
 
You can find the full source code from the zip file.
 

Summary

 
In this article, we have seen step by step implementation of how to create a quiz/survey application in powerapps.
 
I hope this helps.
 
Sharing is caring.