How to create a Leaderboard or Scoreboard App

Intro

In this tutorial I will show you how to make a Leaderboard or Scoreboard app in a Dynamic Quiz app, using Airtable Spreadsheet.
So, first of all I have just imported my own Dynamic Quiz app’s aia to Kodular, because I want to add Scoreboard to my Dynamic Quiz app. And also I have created a Splash Screen. Now Drag a Clock and set Timer as 3000 ms. Set Timer enabled and untick to Timer Always Fires. You can drag Tiny DB to skip Login for every users, who recently Logged in from same device. I am skipping this step because I already told you about this in last video. So now in the Block section I have just created a redirect, after the Clock Timer Finished it will go to another Screen, named Login. So create new screens Login, Signup, Home and Scoreboard. No need to create a Quiz screen because in the Dynamic Quiz App’s AIA file there is a Quiz screen named cat1, so I will use this screen for Quiz. You may create another fresh project and create all things new.

Signup Screen

In Signup screen I have just created three fields. First of all drag Horizontal Arrangement and set Height as Automatic and Width as 80 percent, also tick IsCard and Is Rounded Card, set backgroud colour as White. Now drag TextBox into this arrangement and set TextBox’s backgroud colour as White and set Text Size as 18 and Width as fill parent. Make 3 fields like this and name all textboxes like name_txtBox, email_txtBox and password_txtBox. Now after this drag a Button which will be Signup button, named signup_btn. Drag Notifier and Firebase Authentication. Here you need a google-service.json file to be upload in Assets of Kodular in order to use Firebase Authentication. I already made a tutorial about how can you create whole things using Firebase Authentication, so you may check that tutorial if you don’t know. Also drag a Label to create a Login screen redirect under the Signup button. Now see the design

Now see the Blocks

Login Screen

In Login screen I have created two fields, Email and Password. Create two fields like Signup screen styling. And here drag Airtable Spreadsheet, TinyDB, Firebase Authentication, Firebase Database and Notifier. Set API Key, Base Id and Table name of Airtable and set API key and URL of Firebase Database. Now see the designing

Now see the Blocks

Home Screen

Now in the Home Screen I am getting a simple look. Here you can see a High Score label and two buttons of Scoreboard and Play Quiz. Also user’s name. Drag Firebase Database and TinyDB. See the design

Now see the Blocks

Quiz Screen

Here cat1 screen is Quiz screen. So in this screen just add a Airtable Spreadsheet named as Store, which API key, Base Id and Table name is same as in Login screen. See the design

Now see the blocks, only the new blocks (not the quiz app blocks)

this block is used after Notifier1. After Message Dialog in else

Scoreboard

Here first drag a Vertical Scroll arrangement and set height and width as fill parent. Import ColinTree List View extension and two Airtable Spreadsheets with same API, Base Id and Table Name, named as name and score and drag a Notifier. Set ColinTree ListView as below

• AsyncImageLoad – Tick
• CacheImage – Tick
• ElementHeight – 100
• IconHeight – 80
• IconShape – Rounded
• IconTextFontBold – Tick
• IconTextFontSize – 24
• IconWidth – 80
• SubTextColor – Black
• SubTextFontBold – Tick
• SubTextFontSize – 20
• SubTextHeight – 40
• Text Color – White
• TextFontBold – Tick
• TextFontSize – 14
• TextHeight – 18

See the design

Now see the Blocks

That’s it, now here you can see avatar.png(a image of user) which I already uploaded in Assets of Kodular.

Download

Video Tutorial

Part 1

Part 2