Create a simple quiz app using Json in Sketchware

To create a simple quiz app using Json String in Sketchware, follow the steps given below.

1. Create a json array containing all the questions and options. Each object in the array should contain a question with key 'ques', four options for the question with keys 'a', 'b', 'c' and 'd', and the correct answer with key 'ans'.

[
{
"ques" : "The larynx in adults lies in front of hypopharynx opposite the...",
"a" : "second to fifth cervical vertebrae",
"b" : "fifth to seventh cervical vertebrae",
"c" : "third to sixth cervical vertebrae",
"d" : "first two cervical vertebrae",
"ans" : "c"
},

{
"ques" : "Which of the following is the largest cartilage of larynx?",
"a" : "thyroid cartilage",
"b" : "cricoid cartilage",
"c" : "arytenoid cartilages",
"d" : "epiglottis",
"ans" : "a"
},

{
"ques" : "Which one of the following muscles is not a depressor of larynx?",
"a" : "sternohyoid",
"b" : "stylohyoid",
"c" : "sternothyroid",
"d" : "omohyoid",
"ans" : "b"
},

{
"ques" : "Barrets esophagus result in which type of carcinoma?",
"a" : "Adenocarcinoma",
"b" : "Squamous",
"c" : "Adenosquamous",
"d" : "Basal cell carcinoma",
"ans" : "a"
},

{
"ques" : "ADAM TS 13 is associated with",
"a" : "TTP",
"b" : "Churg Strauss",
"c" : "Wegener",
"d" : "Membranous nephropathy",
"ans" : "a"
},

{
"ques" : "T1/2 of Haptaglobin-Hb complex is",
"a" : "5 days",
"b" : "3 days",
"c" : "10 days",
"d" : "10 minutes",
"ans" : "d"
},

{
"ques" : "E-cadherin mutation is seen in which type of carcinoma?",
"a" : "IDC",
"b" : "Lobular carcinoma",
"c" : "Metaplastic carcinoma",
"d" : "Metastatic",
"ans" : "b"
},

{
"ques" : "Classical pathway Macrophage activating molecule?",
"a" : "IFN gamma",
"b" : "IL 13",
"c" : "IL 4",
"d" : "IL 1",
"ans" : "a"
},

{
"ques" : "Massive blood transfusion will cause all except?",
"a" : "Hypercalcemia",
"b" : "Hyperkalemia",
"c" : "Hypokalemia",
"d" : "Hypothermia",
"ans" : "a"
},

{
"ques" : "Durcks granuloma seen in?",
"a" : "Spleen",
"b" : "Heart",
"c" : "Brain",
"d" : "Lymphnode",
"ans" : "c"
}
]

A comma should separate all objects and all key-value pairs, from each other.


2. In Sketchware project, on main.xml page add a Button button1, and a LinearH linear2. Inside linear2 add two TextViews textview1 and textview2.

3. In MainActivity.java add an Intent component i, and a file shared preferences component sp:sp.

4. Create a new page quiz.xml.

5. In MainActivity.java, add onStart event and in this event put blocks as in image below.
* These blocks will make linear2 visible when user returns to the page after completing the quiz, and display his score in textview2.

6. In button1: onClick event, use Intent to move to QuizActivity.

7. On quiz.xml page add four TextViews: textview1 for question number, textview2 for question, textview3 for the word 'Score:' and textview4 for the score. Also add four CheckBoxes for options checkbox1, checkbox2, checkbox3 and checkbox4, and a Button button1.

8. In QuizActivity.java add a file shared preferences component with name sp:sp, same as on MainActivity.java page.

Also add a List Map lmap, a Map variable vmap, three Number variables n, q and score, and a String variable answer.


9. Add three More Blocks, pickQuestion, falseCheckboxes, and
selected CheckBox... to answer String...

10. Define pickQuestion using blocks as shown below.
* It will increase the question number by 1.
* It will pick a random question from the Map List and get it to Map Variable.
* It will display the selected question and it's options in TextViews and CheckBoxes using their keys (The keys used here are same as those used in the Json String created in step 1).
* It will delete the selected question from the List Map.

11. In the QuizActivity, in onCreate event, put following blocks.


* Here n is for question number, and score is for score. Both are set to 0.
* The Json.... to ListMap lmap Block will convert the Json String (shown in step 1), into ListMap lmap.
* The pickQuestion block selects one question from the Map List.

12. Define falseCheckboxes using blocks as shown in image below.
13. Define selected CheckBox... to answer String... using blocks as shown in image below.
* This will set the String answer according to the selected CheckBox, and uncheck other three CheckBoxes.

14. Add CheckBox onClick event for all the four CheckBoxes.

In each of these CheckBox onClick events put blocks as shown below.
15. In the event button1 onClick, put following blocks.


* These blocks will increase score if answer is correct,
* display the score in textview4,
* save the score and FinishActivity on 10th question,
* or uncheck all checkBoxes, set String answer to..(empty), and pick a new question.

16. Save and run the project. The Quiz app is ready.

The same method can be used to create a Firebase based Quiz app, if the Json data is uploaded to Firebase and retrieved to ListMap in onChildAdded event.


Komentar

Posting Komentar

Cara pembuatan Apps paling Populer

Create Stopwatch App in Android using Sketchware

Timer component and number variables can be used to add a Stopwatch to your Android App created in Sketchware. To create a Stopwatch App in Sketchware follow the steps below. 1. Start a new project in  Sketchware . Fill app name, package name and app icon. 2. In  VIEW  area, insert a  Textview  and a  Button  widget. In Textview properties set  layout_gravity  as center_horizontal,  text  as 00:00:00.00, and  text_size  as 40sp. In Button properties set  layout_gravity  as center_horizontal,  text  as Start/Stop/Reset and  text_size  as 20sp. 3. In  LOGIC  area add a new  timer  component  t . 4. In  onCreate  event, add five  number variables , one each for hour, minutes, seconds, and milliseconds, and an extra variable for managing Button Click. Set all these number variables to 0. 5. Suppose the five number variables are named as  h ,  m ,...
Baca selengkapnya

TextInputLayout in Sketchware

To create an EditText with animation features, we can use the EditText in a TextInputLayout which is a Layout interface in android.support.design.widget library. In Sketchware we cannot add it in xml file but we can create it programmatically. Follow the instructions given below for a simple example. 1. In VIEW area of your project add two Linear horizontal  linear2  and  linear3 , and a Button  button1 . 2. Switch On AppCompat and design. 3. Create a more block  extra  and define the block using an add source directly block. Put following code in it. } EditText edittext1, edittext2; { Here we declare two EditText fields,  edittext1  and  edittext2 . 4. In onCreate event, i. Use add source directly block and use codes to define edittext1, set it's LayoutParams, set it's hint, and set it's text color. edittext1 = new EditText(this); edittext1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayou...
Baca selengkapnya

How to find and​ highlight a word in a text field in Sketchware?

We can highlight a particular searched character sequence in a TextView or EditText field or any other text field by using Spannable. To use Spannable class to highlight a searched text in Sketchware Android Project, follow the steps given below. 1. In VIEW area of your project, add an EditText field ( edittext1 ) which will act as input field for search term. Add a TextView ( textview1 ) which will display the number of results found. And add another TextView ( textview2 ) or EditText (edittext2) field which will contain the text in which the word is to be searched. 2. In LOGIC area, in onCreate event set the text to be searched in TextView field. 3. If you want the app to search from any text added by user, use EditText instead textview2 in step no.1 and do not set the text in onCreate. 4. Add a new String variable  text . Add three number variables  total, len  and  y . 4. Add a new event  edittext1 onTextChanged . 5. In the event  edittext1 onTextChange...
Baca selengkapnya

A Flash Light App in Sketchware

To create a Torch Flashlight application for Android with Sketchware follow the steps given below. 1. Create a new project in Sketchware. In VIEW area add an ImageView  imageview1 . Set it's width and height to 100, and scale type to FIT_XY. 2. Using Image Manager add two images  ic_flash_on_black  and  ic_flash_off_black . 3. Set  ic_flash_off_black  as the image of imageview1. 4. In Library manager switch on  AppCompat and Design . 5. Add a  Camera component . 6. Add two Boolean variables:  flashLightStatus  and  hasCameraFlash . 7. Add two More Blocks:  flashLightOn  and  flashLightOff . 8. In  onCreate  event, use add source directly block and put following code: hasCameraFlash = getPackageManager(). hasSystemFeature(PackageManager.FEATURE_CAMERA_FLASH); 9. In More Block  flashLightOn , use add source directly block and put following code: android.hardware.camera2.CameraManager cameraManager = (andr...
Baca selengkapnya

How to enable download in webview in Sketchware apps?

How  to enable download in an app created with Sketchware? Suppose you have created an app in Sketchware which uses webview to open a site. You can seamlessly explore the site in your app. But the download links in the webview field do not work. But it is possible to make it work by exporting the source code. You can edit the code in either Android studio or Eclipse to add your desired features and then recompile it. I tried to do that but soon realized that setting up environment for development of Android app is not easy for a naive like me. But it can be done by code injection or by using another mobile app called Anacode. Enabling download from webview in Sketchware using add source directly block. 1. In VIEW area of your app insert a WebView (webview1). 2. In LOGIC area, in  onCreate  event, a. Add  write String... to file path ...  Block. This will add WRITE_EXTERNAL_STORAGE permission. b. Then add an  add source directly  block. In this block pu...
Baca selengkapnya

Intent - Open File By Type

java.io.File _PathOpenFile = Environment.getExternalStorageDirectory(); java.io.File myFile = new java.io.File(_PathOpenFile + "/aan.zip"); java.io.File url = myFile; Uri uri = Uri.fromFile(url); Intent intent = new Intent(Intent.ACTION_VIEW); if (url.toString().contains(".doc") || url.toString().contains(".docx")) { intent.setDataAndType(uri, "application/msword"); } else if(url.toString().contains(".pdf")) { intent.setDataAndType(uri, "application/pdf"); } else if(url.toString().contains(".ppt") || url.toString().contains(".pptx")) { intent.setDataAndType(uri, "application/vnd.ms-powerpoint"); } else if(url.toString().contains(".xls") || url.toString().contains(".xlsx")) { intent.setDataAndType(uri, "application/vnd.ms-excel"); } else if(url.toString().contains(".zip") || url.toString().contains(".rar")) { intent.setDataAndType(uri, "applica...
Baca selengkapnya

Code for implementing Notifications in Sketchware

This tutorial shows a Sketchware android project example in which a Notification is displayed when a Button is clicked and when the Notification is clicked, it opens a new Activity. 1. Create a new project in Sketchware. In VIEW area add an EditText  edittext1 , and a Button  button1 . 2. Using Image Manager add an images  mail_white . This will be used as the Notification icon. 3. In Library manager switch on  AppCompat and Design . 4. Create a new VIEW  two.xml  /  TwoActivity.java . 5. Add a More Block:   createChannel . 6. In More Block  createChannel , use add source directly block and put following code: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { CharSequence name = "Channel name 1"; String description = "Notification channel"; int importance = NotificationManager.IMPORTANCE_DEFAULT; NotificationChannel channel = new NotificationChannel("id 1", name, importance); channel.setDescription(description); NotificationManager not...
Baca selengkapnya

How to share an image from Drawable folder?

To share an image in drawable folder of your sketchware android project, first save the image in app cache and then share the saved image using it's Uri. The code to be used is provided below. 1. First add the image (my_image.jpg) to be shared in your Sketchware android project using image manager. 2. Add a Button button1 which will act as share button. 3. In event button1 onClick, use add source directly block and add following code: Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.my_image); String path = getExternalCacheDir()+"/shareimage.jpg"; java.io.OutputStream out = null; java.io.File file=new java.io.File(path); try { out = new java.io.FileOutputStream(file); bitmap.compress(Bitmap.CompressFormat.JPEG, 100, out); out.flush(); out.close(); } catch (Exception e) { e.printStackTrace(); } path=file.getPath(); Uri bmpUri = Uri.parse("file://"+path); Intent shareIntent = new Intent(); shareIntent = new Intent(android.content.Intent.ACTION...
Baca selengkapnya

ActionBar back button

getActionBar().setDisplayHomeAsUpEnabled(true); /* */} @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { int itemId = item.getItemId(); switch (itemId) { case android.R.id.home: finish(); break; } return true;
Baca selengkapnya

Animation Transtition Animation

/*this will go in button click, activity start, or whatever*/ android.transition.TransitionManager.beginDelayedTransition(linear1,makeFadeTransition()); toggleVisibility(imageview1,imageview2,imageview3,imageview4); android.transition.TransitionManager.beginDelayedTransition(linear1,makeSlideTransition()); toggleVisibility(imageview1,imageview2,imageview3,imageview4); android.transition.TransitionManager.beginDelayedTransition(linear1,makeExplodeTransition()); toggleVisibility(imageview1,imageview2,imageview3,imageview4); /*This stays at the bottom of all code in onCreate*/ } private android.transition.Fade makeFadeTransition(){ android.transition.Fade fade = new android.transition.Fade(); fade.setDuration(2000); fade.setInterpolator(new AnticipateInterpolator()); return fade; } private android.transition.Slide makeSlideTransition(){ android.transition.Slide slide = new android.transition.Slide(); slide.setSlideEdge(Gravity.TOP); slide.setInterpolator(new BounceInterpolator()); slide.s...
Baca selengkapnya