[Free]Create Quiz App with Airtable

Hello,

Today, i am gonna show you that how you can create Quiz App or Test app in Kodular with Airtable support.

And also you can get the marks of the Users.

I used Dynamic component extension you can download and import it.

Images Of Quiz App:-


Airtable view for all Quizzes
Create 3 Column as (title, questions, base_id)

In this Airtable base there other base id store, i mean that for every quiz there will be a separate base and that base id, questions and title we have to mention in above base

Properties for Screen(Quizzes):-


1.1 First of all here i have dragged a linear Progress bar.
1.2 Then i have taken a cardview, inside that cardview i have taken a horizontal_arrangement, inside this arrangement i have taken image, space and vertical_arrangement.
1.3 Inside vertical_arrangement you have to drag three labels for Title, Question no and for base_id.
1.4 Now inside Screen you have to take vertical_scroll_arrangement, inside this you have to take vertical_arrangement to show all Quizzes.
1.5 Drag and drop these components also below mentioned:-
Spreadsheet, notifier, tiny_db, and dynamic component extension.```

Blocks for Screen(Quizzes):-
1.6 First create all variables and set them as given in image.

1.7 Now when Class9(there all Quizzes load) Screen initialize then get all the columns as in image.

Screenshot_2021-11-30-15-13-43-472

1.8Then when got column use switch if you want only one spreadsheet component to get 3 columns.

1.9 When all columns get then set them into variable then use for each number block and then create cardview Vertical_arrangement then give component name i give the last block of cardview then the id must different for every component else it will give error as you can see that cardview has a different id which cardview join number.

2.0 Then set cardview properties in blocks from any component section from there you can get all these blocks. Then create horizontal with different id in cardview and set all properties with any horizontal component as given in image

2.1 Then create image, space and vertical_arrangemenr in horizontal component and set properties.
Set image to that you want. Upload your image in assets and write the file name there.

2.2 Then set vertical arrangement properties and Iā€™d must be different from other.

2.3 In vertical arrangement create 3 labels as we talked before
Label 1 for Title
Label 2 for total no. of questions
Label 3 for base_id(this label will be visible to false)

Example:-
Set any label text to select list item list [list]= Title or questions or base_id
[Index]= number variable from for each number block.

2.4 Then when any dynamic label click then open another screen with start value. We have to send title, question and base_id.

Screenshot_2021-11-30-15-57-50-834

Now Properties for Another Screen when any Quiz Selected

You can create any design before starting quiz when start button click visible to false this arrangement and visible to true quiz arrangement

Quiz arrangement

NOTE for blocks
Now there we have store all things in variable:-
Start value Title, question, base_id

Airtable



Kodular Blocks


Now we have know that which question is this and store it in variable.

Go on another Question:-
When question next button click then we have to add current question + 1
This will be our row no. Of Airtable ,column name will be as given in the image, Use Get cell block for get question, choices as much you want. I implemented 3 choices, and then answer
If the current question equals to total question then show another arrangement where wrong answers and corresponding answers mentioned.

Now there are three choices in 3 labels.
When label click if it is equals to answer then next question button visible to true else label card view colour to red. And one more label visible to true for showing correct answer and then next question button visible to true. And you can set the answers and wrong answered how many times.

There i have uploaded a AIA in which there is uploading system also if you thought this is difficult then you can reply me below.

Apk:-
Study_Test.apk (6.6 MB)
Aia:-
Study.aia.zip (166.3 KB)

:blush:I hope you like this Guide.
This is my first guide.

Thanks,

2 Likes

Hi, great first guide. I had to do a lot of editing because you used some markdown code wrong. Can you check if everything is still as it should be?

1 Like

Thanks @Peter
I checked it

1 Like