Hey guys, today I am going to be taking a beginners tutorial on making a basic and simple quiz app for beginners. We’ll build it from scratch without skipping a single step so that you won’t be lost or confused at any point.
Before we start programming and setting up some fews codes in the logic center… let’s make a basic and simple Quiz app UI for Beginners or newbie Sketchware Developers.
Creating a new project and Designing Basic Quiz App UI
One of the most important thing in App Development is the UI, UI simply means USER INTERFACE, a good UI improves user experience and their satisfaction thereby bringing you good ratings and more users to your app.
Today I am not going to talk all about UI/UX, but I can give you guidelines on how to make a basic one for your Quiz app using your mobile device and the Sketchware app. In case you don’t have Sketchware in your phone, you can easily download and install it in your Android Device through this link.
First thing to do is to open a new project in your Sketchware studio, name it whatever you want.
After doing that, we now have to design a quick home screen. Drag and drop a linearV, set it’s height and width to match parent and set it’s gravity to center_horizontal and center_vertical. After that, you can opt in to drop an ImageView that fit the home page or you can just drop a textview and write your welcome notes. Then place a button and set it’s text to “Start Quiz” to be used to navigate to the main quiz activity.
Now in the main quiz layout, we’ll first drop a linearH, set it’s height to wrap_content and it’s width to match_parent. In the linear H you can now drop textviews and images to display your score and maybe a title like seen in this image below.
When that is done, now drop a scrollV below that previous linearH and set it’s width to match_parent and then, drop a linearV in the scrollV. In the current linearV we droped in the scrollV will contain all main quiz objects you want, you can make it look like mine by dropping a linearV that will half of the previous linearV and then drop four buttons (all their width should be match_parent) below the current linearV, just as seen in the screenshot below.
Now, we are done with the Home and Quiz page, let’s make a quick result page.
Create a new view and call it result, then in the result view, drop a linearV, make its height and width match_parent and place all your result object in it, just like mine. It should be so easy now cause I have explained it in the Quiz layout, but let me show you a hint.
And that’s all, we are done with the basic Quiz App UI in Sketchware, let’s now move to the next Step, Setting up Questions and Answers for your Sketchware Quiz App.
Setting up Questions and Answers for your Quiz App in Sketchware
So we have successfully made the app UI and now it’s time to work on the logic area.
We will start from the MainActivity.java which is the class of the home page.
In the MainActivity.java, there is no much work to be done, all we have to do is create an intent component which we can use to move to the class which is the main Quiz area. So, create an Intent component and name it “d”, then, move to event area and set a clickListener for “Start Quiz” button, to be fast, you can use my codes below, just copy and paste in an ASD ( add source directly ) block.
//d is your intent component d.setClass(getApplicationContext(), Main2Activity.class); startActivity(d);
Or you can opt in to do it manually by using the intent blocks just as seen in the screenshot below.
Now we are fully done with the home page, let’s move to the main Quiz Activity.
In the Quiz Activity, first create two moreblocks, name one Questions and the other Answers, then, create two number variables in that activity and name one Questions and the other Answers. Now open Questions and define it by adding this blocks
NOTE: When doing it, you should know your widgets IDs and it should go like this :
- //Your Question No
- Textview textview1.setText(“….”);
- //Your Question
- Textview textview2.setText(“….”);
- //Option 1
- Textview button1.setText(“….”);
- //Option 2
- Textview button2.setText(“….”);
- //Option 3
- Textview button3.setText(“….”);
- //Option 4
- Textview button4.setText(“….”);
Then the question goes on till infinity, just copy the blocks and insert your strings. Now for the Answers moreblock, use an if-then block and set the answers to your questions, example:
Now the Questions and Answers for the Quiz Game is set, let’s move to how we can use it in the game without getting bugs.
Mixing the Questions and Answer to produce a Good Quiz App in Sketchware
We have almost arrived at the end of this tutorial, please take your time to read and understand this to avoid getting unnecessary bugs or compile logs.
After you have finished setting up your questions and answers, call them in the onCreate event of that activity, just as seen in the below screenshot.
Then go to ‘View’ in the logic area and create an event for all the four buttons that’ll display the answers and also the “next/continue” button.
Open one of the answer button and put these blocks below to make them function when a user taps on the wrong answer or the right answer.
Then repeat it to all the options buttons but replace their IDs. In the “continue” button click event, place this blocks
And that is all about creating a Simple and Basic Quiz app in Sketchware. Hope you learnt and enjoyed everything? If you did, share this with your friends.
If you are still getting errors or you are confused, you can message us directly through the Messenger icon in this site or you can download the project of the Quiz App below and import directly into your studio.
Thanks for reading, I hope you enjoyed it, I am expecting your comments. Have a nice day!