Offline Quiz App in Kodular / Thunkable / Appy Builder

Offline Quiz App in Kodular / Thunkable / Appy Builder

Starting with the app demo, upon opening the app we can see a splash screen, which then proceeds to main screen, on the upper section you can see two categories i.e. questions and marks. Above the question category it shows 1/25 which means question number 1 out of 25 questions, similarly you can see above the marks category which shows 0/125 meaning 0 marks out of total 125 making 5 marks per question. Below that there is a question bar where the question is stated, below which there are 4 answer bars with different answer options to choose from, upon choosing the correct answer to a question by tapping on the correct answer bar, it will disable all the other options and will turn green on the selected true answer bar representing the true answer and also adds 5 marks above the marks category. Bellow is the next button which upon pressing will take you to the next question which will change the question category numbers as the questions proceeds. Similarly when you press a wrong answer bar it will turn red disabling all other options and the marks category on upper bar remains unchanged. You can add any number of questions in the app, question numbering and marks calculation is automated. After the last question, a different screen appears showing total scores based on how the questions were answered, below that there is option to play again which will start showing all the questions again from the start, followed by view answers option which upon clicking will show a brief ad and will proceed to show all the correct answers to the questions.

Proceeding to computer screen in the Kodular, we see the screen 1 which is the splash screen of the app, on screen 1 I’ve taken an image with pixel density of 200×200, the clock timer is set on 3000 (i.e. 3 seconds). Proceeding to blocks section, when screen initializes it puts the timer on true, after starting the timer it proceeds to screen 2 after 3 seconds. Looking at screen 2, we can see the main screen of the app, at the top there is an ad banner, below which is a 3% space, there’s a horizontal arrangement, inside it I’ve taken a vertical arrangement and another separate horizontal arrangement, you can make it as complex or as simple as you want. The question and marks section arrangement width is set to 40%, below it there’s a space of 3% and has vertical arrangement, the vertical arrangement is put into card and I’ve taken a label inside it which you can see, then there are buttons with width is set to 96% and height is set to automatic. The height of question bar should always be set to automatic as some questions are short and others are large so the height would adjust according to the question automatically. After the 4 answer bar button, below them is located the next button to go to next question.

Looking at the blocks section, we can see that I’ve taken variables in the variable section, initialize global should be taken. I’ve renamed it one for the question and added a block named “Make a List”. Then you take a blank text and keep adding to it. If you want to add more questions you can keep adding under the item, 25 questions are already added you can add as many as you want. I’ve taken initialize global for each section, one for questions, one for answers in option A, one for Option B, one for Option C, one for Option D and one for correct answers. You have to take one variable of index, then you take a block and type 1 on it, it is basically number which we have to run the variable with. I’ve added the ad banner for when the screen is initialized and label 1 is for question which takes question from Global question which I’ve already taken. Answer label is set to hide, it should be stayed that way all the time because it is being used in the backend. On button 1 we will have part A of the answer, on button 2 part B and so on. On the question no. label which will show the current question number, it will show global index. The main part here is to increase the question, for that I’ve provided an index button which will work here, first I’ve added a condition here which is if global index is 25 (total number of question). If its equal, it will proceed to proceed to screen 3 which is the statistic screen, it will take marks label text with start value to next screen. When the next button is clicked it will make the background of the text button white, grey and will enable true to the button. Now I’ve set the next global index, by taking that block so when the next button is clicked it will add +1 to the running global index. Looking at the button section, when you give correct answer to the question, it turns the answer green and adds +5 marks, if you give wrong answer it disables the buttons turning the option red and no points are awarded. You can add more just by duplicating existing buttons and change the button number accordingly.

In the designer part you can see, there’s an ad banner and some added space and I’ve taken labels in a horizontal arrangements. In the blocks section, after the screen initializes it loads the ad banner and the ad, label 1 is currently zero because the start value is taken from here. Then there is button 1 of “play again” which will show an ad and then proceed to screen two again, then clicking on button 2 it will show ad and will visible true on button 3, this is the go back button. In the main screen I’ve taken an extension of Collin tree list, looking at its block part you have to take vertical scroll arrangement, the answers are also being taken from there from the previous reference point.

Leave a Reply