ROBOTIC
TUTORIALS.COM

Popular Tutorial

Click on the image interested  to know what they are, how to do them and more...
Scroll down to check out to specific topic of tutorials on Electronics and Robotics.
Quiz - Android App
1

Create Project

  1. Create a new project.
  2. Go to Project
  3. Start new project
  4. Enter the name as Math Quiz
  5. OK
2

Add Screen Properties

  1. Go to Properties Panel
  2. Scroll Down
  3. Search for Theme
  4. Set it to Device Default
3

Change Title

Change the Title to ‘Math Quiz’
4

Add Label for First Question

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop Label to the Viewer Panel
  4. Rename the Label to Question_Box1 in Components Panel By clicking it and clicking on Rename
  5. Go to Properties Panel and set the width to Fill parent
  6. set FontSize to 25
  7. Set Text to 1. What is 5+5?
5

Add TextBox for Answer input

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop the TextBox to the Viewer Panel below the Question_Box1
  4. Rename the TextBox to Answer_Box1 by clicking on Rename
  5. Go to Properties Panel
  6. Set BackgroundColor to Light Grey.
  7. Remove the Hint in Text Box 
6

Add Check button for Question1

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop the Button to the Viewer Panel below the Answer_Box1
  4. Rename the Button to Check_Button1 by clicking on Rename
  5. Enter text as Check
7

Add Label Question 2

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop Label to the Viewer Panel
  4. Rename the Label to Question_Box2 in Components Panel By clicking it and clicking on Rename
  5. Go to Properties Panel and set the width to Fill parent
  6. Set FontSize to 25
  7. Set Text to 2. What is 100X5?
8

Add Text box to Input Answer for Question2

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop the TextBox to the Viewer Panel below the Question_Box2
  4. Rename the TextBox to Answer_Box2 by clicking on Rename
  5. Go to Properties Panel
  6. Set BackgroundColor to Light Grey.
  7. Remove Hint in the Text Box
9

Add Button for Question 2

  1. From the Palette
  2. Go to User Interface
  3. Drag and Drop the Button to the Viewer Panel below the Answer_Box2
  4. Rename the Button to Check_Button2 by clicking on Rename
  5. Enter text as Check
  6. Drag and Drop TextToSpeech Component from Palette -> Media
10

Coding the App

 So the User Interface of the app has been developed. Now, Let’s move on to develop code for the app. On Top Right corner click on Blocks
11

Code the Button for Question 1

In This Step we are going add the block which is called when the button is clicked
  1. Go to Blocks section
  2. Click on Check_Button1
  3. Drag and Drop when Check_Button1.click to the viewer panel.
12

Add If-Then Block for Check Button 1

Since we are going to check whether the answer is correct or wrong, inside the click block we have to add an IF condition to check the answer.
  1. Go to Blocks section
  2. Click on Control
  3. Drag and Drop If-Then Block inside when Check_Button1.click block in the viewer panel.
13

Add Condition for the If Block

Now that we have added the if block, we have add the condition inside it to which checks whether the answer typed by the user is same as the answer of the question. Since the Question here is what is 5+5, the answer is 10
  1. Go to Blocks section
  2. Click on Logic
  3. Drag and Drop Equal Condition Block in the If Block
  4. Click on Answer_Box1
  5. Drag and Drop Answer_Box1.Text to the Left Hand Side of the Equal Condition Block
  6. Go to Blocks section
  7. Click on Math
  8. Drag and Drop the Empty Number Block
  9. Click on it
  10. Enter number 10
14

Add TextToSpeech Component

After checking the answer typed by the user and the IF condition is true, we have to make the app speak and affirm the answer. So we are going to add the TextToSpeech Component
  1. Go to Blocks section
  2. Click on TextToSpeech1
  3. Drag and Drop call TextToSpeech1.Speak inside the Then Block
15

Add the Speech Response

For the affirming phrase we can use anything like "Good one","Great, Correct Answer".. etc. It is totally your choice
  1. Go to Blocks section
  2. Click on Text
  3. Drag and Drop Empty Text Block inside the message of  call TextToSpeech1.Speak
  4. Click on it
  5. Enter Text as Good Job, It’s the correct answer
16

Add Else Block

As of now we have covered only the True case of the IF condition. For the False case we have to add ELSE to the IF 
  1. Click on Settings in If-Then Block
  2. Drag and Drop the else block as shown in figure
  3. Go to Blocks section
  4. Click on TextToSpeech1
  5. Drag and Drop call TextToSpeech1.Speak under the else Block 
17

Add Response for the else case

If the answer is not correct then we have to make the app speak negative responses.So similarly we have to add the TextToSpeech Component here. Phrases such as "No", "Wrong Answer", "Try again" can be given as the message for the TextToSpeech component to speak out.
  1. Go to Blocks section
  2. Click on Text
  3. Drag and Drop Empty Text Block inside the message of  call TextToSpeech1.Speak
  4. Click on it
  5. Enter Text as Wrong Answer,Try Again.
18

Code For Question 2

Similarly We are going to do the above steps for the next question
  1. Go to Blocks section
  2. Click on Check_Button2
  3. Drag and Drop when Check_Button2.click to the viewer panel
  4. Go to Blocks section
  5. Click on Control
  6. Drag and Drop If-Then Block inside when Check_Button2.click block in the viewer panel
  7. Go to Blocks section
  8. Click on Logic
  9. Drag and Drop Equal Condition Block in the If Block
  10. Click on Answer_Box2
  11. Drag and Drop Answer_Box2.Text to the Left Hand Side of the Equal Condition Block
  12. Go to Blocks section
  13. Click on Math
  14. Drag and Drop the Empty Number Block
  15. Click on it
  16. Enter number 500
19

Add Responses for Question 2

  1. Go to Blocks section
  2. Click on TextToSpeech1
  3. Drag and Drop call TextToSpeech1.Speak inside the Then Block
  4. Go to Blocks section
  5. Click on Text
  6. Drag and Drop Empty Text Block inside the message of  call TextToSpeech1.Speak
  7. Click on it
  8. Enter Text as Good Job, It’s the correct answer
  9. Click on Settings in If-Then Block
  10. Drag and Drop the else block as shown in figure
  11. Go to Blocks section Click on TextToSpeech1
  12. Drag and Drop call TextToSpeech1.Speak under the else Block
  13. Go to Blocks section
  14. Click on Text
  15. Drag and Drop Empty Text Block inside the message of  call TextToSpeech1.Speak
  16. Click on it
  17. Enter Text as Wrong Answer,Try Again.
20

Testing The App

  1. Now the developing part has been completed. Let’s test it on our android mobile.
  2. Go to Connect in task bar present on the top then select AI companion to test via WiFi (or) select USB to test via USB Cable. 
21

Downloads

  1. Click on the Download button to download the final project file with all the code and User Interface.
  2. A file called MathQuiz.aia will be downloaded.
  3. You can import this project file into your MIT App Inventor by going to File -> Import project (.aia)  from my computer.
Download
HAPPY ROBOTING !!!

Submit Your Projects

Submit Project

Your Project Can win Rs.500 to Rs.5000 !!!

Mail us your project in a proper tutorial format (see the other tutorials to get an idea)to win thousands in cash and the tutorial will be published with your name and college forever! Only use the Robot parts available from Here to get better chance to win

Popular Info

New Publications

Ultrasonic based autonomous robot to scan its surrounding and move forward

Online Robotic Shop

We are proud to have India's number one robotic store with the most unique products
 Click Here

Education

We believe in sharing of knowledge to the greatest extent.
Click Here to explore our Educational Robotic Kits 
Home | Shop | Terms & Conditions | Privacy Policy | Disclaimer | Contact Us
Copyright © SP Robotic Works. All Rights Reserved.