Build PowerApps Quiz App – Step by Step

In this PowerApps Tutorial, We will discuss what is PowerApps Quiz app or PowerApps Survey. Also, By taking a simple scenario, We will see how to create a Quiz app using PowerApps.

What is PowerApps Quiz App

• Before going to start with the PowerApps Quiz, you need to know what does the mean of a Quiz app in PowerApps? A quiz app means it is a survey app that contains single or multiple questions where each question has multiple-choice options.
• Like that, When the survey app will create using some PowerApps input Controls, then it is known as PowerApps Survey or PowerApps Quiz. Let’s have a look at the below scenario.

Create PowerApps Quiz App

Suppose in the PowerApps screen, you want to create a Quiz app that contains multiple numbers of questions (with multiple-choice options). When a user will complete the task, then all the user answers will save into any Data sources like SharePoint, Excel, etc. Follow this below steps that we need to do:

Step-1: (Create SharePoint Online List)

First of all, I have a SharePoint Online List named Quiz Details. When the user will finish the task, then all the quiz answer details will save in this SharePoint list. This list has these below columns:

• Title: By default, this is a Single line of text column. In this column, I want to store the user full name who will finish the quiz task.
• Quiz1, Quiz2, Quiz3, Quiz4: These are the Multiple lines of text columns. As my app will have only four multiple-choice questions, that’s why I have created only four columns. You can create more number of columns depending upon your number of questions.

Step-2: (Create PowerApps App)

• Sign in the PowerApps app with your credentials.
• Create a blank new Canvas app and choose any one Layout either Tablet or Phone. Here, in this example, I have chosen the Phone layout.
• On the PowerApps Blank screen, connect the SharePoint Data source and add the SharePoint Online List to the app.
• To add the SharePoint list, Go to View tab -> Data Sources -> Search SharePoint -> Add a new or existing connection -> Select the SharePoint Site -> Choose the specific SharePoint List (Quiz Details) -> Hit on the Connect button. Then the specific SharePoint list will be added as shown below.

Step-3: (Create PowerApps Welcome screen, Quiz screen and Thank you screen)

Now in the Powerapps app, We will create three blank screens (Insert -> New screen -> Blank) named as “Welcome screen“, “Quiz screen” and “Thank you screen“.

1. Welcome Screen:

In this Welcome screen, it has the below Powerapps input controls as:

• Welcome to QuizBox: This one is the Label input control where I have set it’s Text property to “Welcome to QuizBox”.
• QUIZ TIME: This one is the Background image of the screen that I have uploaded from my local system.
• Play Quiz: This is a PowerApps Button where I have set it’s Text property to “Play Quiz”. Select the Button (Play Quiz) and set its OnSelect property as:

OnSelect = Navigate(QuizScreen)

So that when a user will click on the button, it will navigate to the next screen i.e. Quiz Screen. You can refer to the below screenshot.

2. Quiz Screen:

Once the user will click on the Play Quiz button (from the Welcome screen), it will navigate to the Quiz screen where it has multiple questions (with multiple-choice options). This screen has these below input controls as:

• Quizizz: It is a Label control where I have set its Text property to “Quizizz”.
• Questions: I have inserted four Labels for four different questions and set their Text property.
• Options: These are the Powerapps Radio Button controls where I have inserted the choice values on their Items property.

• Finish: This is a PowerApps Button where I have set it’s Text property to “Finish“. Select the Finish button and set its OnSelect property as:

OnSelect = Patch(
    'Quiz Details',
    Defaults('Quiz Details'),
    {
        Title: User().FullName,
        Quiz1: rdQuiz1.SelectedText.Value,
        Quiz2: rdQuiz2.SelectedText.Value,
        Quiz3: rdQuiz3.SelectedText.Value,
        Quiz4: rdQuiz4.SelectedText.Value
    }
);
Navigate(ThankYouScreen);

Where,

1. Patch = Patch is the Powerapps function that helps to modify single or multiple records of a data source. To learn more details about the Powerapps Patch function, you can follow this link: PowerApps Patch Function with examples
2. ‘Quiz Details’ = SharePoint list name where the quiz details of a user will save.
3. Defaults(‘Quiz Details’) =  Defaults function helps to create a new record in the SharePoint list i.e. Quiz Details.
4. Title = This is the default column of the SharePoint list where the user name (who will finish the Quiz task) will save.
5. Quiz1, Quiz2, Quiz3, Quiz4 = These are the SharePoint multiple line choice columns where the user’s choice-value answers will save.
6. rdQuiz1, rdQuiz2, rdQuiz3, rdQuiz4 = These are the names of Radio button control.
7. ThankYouScreen = This is the last or third screen. When a user will finish the task, it will navigate to the Thank you screen.

3. Thank You Screen:

This is the third or last screen. When a user will finish the quiz task, then it will navigate to this screen for thanking purposes. This screen has these below input controls:

• THANK YOU FOR PARTICIPATING: This is a Label control where I have set its Text property to “THANK YOU FOR PARTICIPATING!!” like the below screenshot.
• Your Quiz Details Submitted Successfully: This is also a Label control where I have set its Text property to “Your Quiz Details Submitted Successfully”.
• Circle icon: You can see a Circle icon (Insert -> Icons -> Circle) has been added in the below screenshot.
• Check icon: Similarly, a Check icon has been added with the Circle icon as shown below.

As you can see, In this screen, I have uploaded an image to screen’s Background image property.

Step-4: (Save, Publish and Play the app)

• That’s it to create the PowerApps Quiz app. Next, just Save and Publish the app. Once you published, then play the app to see how it works exactly.
• Click on the Play Quiz button (from the Welcome screen). When you will click on the button, it will navigate to the Quiz screen.
• Choose the correct quiz answer options from the Quiz screen and then hit on the Finish button.
• When you will click on the Finish button, the quiz answer details will save into the SharePoint List (Quiz Details). Also, at the same time, the Thank you screen will appear as shown below.

Step-5: (Check the SharePoint Online list)

Go to the SharePoint Online List (Quiz Details). You can see the user answer details have been saved including the User’s full name as in the below screenshot.

Also, you may like the below PowerApps Tutorials:

• PowerApps upload file to SharePoint document library
• PowerApps Gallery Control Filter Example
• PowerApps Get Current User (ID, EMail, Department, Location, Photo, etc)
• PowerApps send email on submit
• PowerApps Email Attachment Control – How to Use
• PowerApps Microphone Control – How to use
• How to Create Login Screen in PowerApps
• PowerApps Popup message Box with Examples
• Get users from SharePoint Group in PowerApps
• PowerApps: Submit data to two SharePoint Lists

In this PowerApps Tutorial, We discussed what is PowerApps Quiz and how to create a Quiz app using PowerApps.