Skip to content

Latest commit

 

History

History
186 lines (123 loc) · 18.2 KB

README.md

File metadata and controls

186 lines (123 loc) · 18.2 KB
Raw

Quiz of Aves

GitHub GitHub code size in bytes GitHub repo size GitHub release (latest by date) GitHub All Releases GitHub search hit counter Minimum API level

This App has been developed as part of the Udacity Android Basics Nanodegree Course for the Exercise Project "Quiz App". Quiz of Aves is a Quiz on Birds.

App Compatibility

Android device running with Android OS 4.1 (API Level 16) or above. Designed for Phones and NOT for Tablets.

Rubric followed for the Project

  • Questions should be in a variety of formats such as free text response, checkboxes, and radio buttons.
  • Checkboxes are only used for questions with multiple right answers. Radio buttons are only used for questions with a single right answer. Any question which uses radio buttons allows only one to be checked at once.
  • App includes a button for the user to submit their answers and receive a score.
  • Code adheres to all of the best layout practices.
  • App includes at least four of the following Views: TextView, ImageView, Button, Checkbox, EditText, LinearLayout, RelativeLayout, ScrollView, RadioButton, RadioGroup.
  • App gracefully handles displaying all the content on screen when rotated.
  • Each question has a correct answer.
  • App contains at least one if/else statement.
  • Grading button displays a toast which accurately displays the results of the quiz. The grading logic checks each answer correctly.
  • App contains 4 - 10 questions, including at least one check box, one radio button, and one text entry.

Things explored/developed in addition to the above defined Rubric

  • android.os.AsyncTask for downloading the images for each of the questions. Headless Fragment has been used for managing this Custom AsyncTask.
  • android.util.LruCache for caching the Bitmaps downloaded.
  • android.os.CountDownTimer for the Quiz Timer. Headless Fragment has been used for managing the CountDownTimer, designed as a latch that adds functionality such as Pause and Resume.
  • DialogFragment to display the Number Picker Dialog for the user to select/enter the number of questions to attempt.
  • DialogFragment for displaying the Progress of Image Download, with a custom progress bar layout.
  • DialogFragment for displaying the Final score at the end of the quiz or when the quiz timer elapses.
  • Custom Fonts/Typefaces have been used in Dialogs.
  • Vector images have been used in certain places.
  • Mipmap images for the App icons.
  • Intents for moving from one activity to the other.
  • Id resource for the components generated programmatically.
  • Nine patch images used as a background image for the question and option fields.
  • Level List Drawable for decorating the options.
  • State List Drawable of shape drawables with gradient for the Submit/Hint buttons.
  • String array resources for storing the questions, their options and keys.

Design and Implementation of the App

The first screen displayed when the app is launched, is the welcome screen as shown below. This displays the important information regarding the quiz.

The Welcome screen layout

The layout behaviour is controlled by the WelcomeActivity. When the "BEGIN QUIZ" button is clicked, the question number picker dialog is launched where the user selects the number of questions to be attempted. The number of questions can also be manually entered. If the entered value is out-of-range, it simply ignores the value and stays at the selected value.

On Click of Cancel button, a toast message is shown prompting the user to select the number of questions to attempt. This will not dismiss the dialog and has been done intentionally so that the user attempts some number of questions before quiting 😜

On Click of Set button, the user is taken to the quiz layout controlled by the QuizActivity.

The Quiz screen layout

The Current Question Number is shown in the top left corner, with the current score in the top right corner. In the Footer section we have the Quiz timer implemented using the android.os.CountDownTimer managed by the Headless Fragment CountDownLatchFragment to enable additional functionality such as Pause and Resume. The timer value is set accordingly to the number of questions selected by the user, by allocating 45 seconds for each question, that is, timer value = No. Of Questions * 45.

Below the Question component, are the MCQ options/textual EditText option that appear based on the question. Below this, are the buttons SUBMIT and SHOW HINT. The SHOW HINT button always appears disabled for every question, as for every question user has two chances to get the right answer. On the first incorrect attempt, SHOW HINT button and its related components are enabled.

Above the Question component is the Hidden Image that displays the Hint Image for the question. This will be the picture of the Bird, that the user needs to identify and answer accordingly. The Hint Image is shown when the SHOW HINT button is clicked.

When the Hint Image is not yet downloaded, or during the initial launch when the images are being downloaded and cached, the above progress bar dialog will be shown. The timer will be paused(internally canceled) in such cases and will be resumed once done. The Progress dialog shown is as per the layout designed here managed by the DialogFragment ProgressDialogFragment. The images are downloaded for the current and its following question using the android.os.AsyncTask managed by the Headless Fragment ImageDownloaderTaskFragment. At every question, the current image and the next image are kept in android.util.LruCache BitmapImageCache which is used to restore the images during configuration changes.

All the questions, options and keys are loaded from the String array resources. The images for the MCQ-Checkbox based questions are loaded from the /app/src/main/res/drawable resource.

As images are downloaded for each question, it is recommended to use the app in a non-metered connection with good connectivity. If the connectivity is bad, it will notify the user in a toast message, and in such cases for every question user will notice that the app is freezing leading to possible ANRs. This will happen since the ping test is done in the UI Thread, OOPS!!

Textual Based Questions

For Textual based questions, the textual response is acquired using the EditText component as shown below.

When the question is answered correctly, a toast will be shown saying it is correct and the SUBMIT button changes to NEXT. Image is also revealed in this case for the user to enjoy ogling at the bird's beauty 😜

In case the user was pretty fast in answering the question and the image was not yet downloaded, the image will not be shown and the pending download will be cancelled with a toast message saying it could not complete. This is applicable for any kind of question.

MCQ-RadioButton Based Questions

The RadioButton Options appear one below the other in a portrait layout while in the landscape layout, it appears as a table of RadioButtons. There will be a maximum of 4 options in MCQ based questions applicable for both RadioButton and Checkbox based questions. The layouts for CheckBox is designed in the same lines as that of RadioButton.

Level List Drawables of Nine patch images are used as a background for the options of MCQ based questions. When selected, the color of the option turns orange indicating it is the user selected answer, and if the answer turns out to be correct, the color of the options turns green. This is accomplised manually by setting the level of the drawable accordingly through the CompoundButton.OnCheckedChangeListener attached to the options.

On the first incorrect attempt, user will be able use the SHOW HINT button that gets enabled. On click of this, a textbox with a hint message and a button adjacent to it will be shown. The button here which is the assistant button (or the flag button), will scroll up to the hint image when clicked. On the second incorrect attempt, actual answer will be revealed in green along side the user selected answer shown in orange.

MCQ-CheckBox Based Questions

For CheckBox Based Questions, users can select mutiple options based on which the selected answers are evaluated. The design is similar to RadioButtons as discussed above and also has the CompoundButton.OnCheckedChangeListener attached to the options for changing the level of the drawable.

Information in general for all types of questions

  • Whether it is a textual based question or an MCQ of the type RadioButton or CheckBox, once the answer is submitted and the SUBMIT button changes to NEXT, the options/components are disabled to prevent any further changes especially cosmetic changes.
  • For MCQ based questions, there can be a maximum of 4 options with a minimum of 2 options per question.
  • The EditText field for the textual based questions, the RadioButtons and CheckBoxes for MCQs are programmatically generated components. The Ids for such fields are generated and used by employing the Id resource.
  • If the following question happens to be a RadioButton based and the current question was also RadiButton based, then when the next question appears, these RadioButtons will be reused with the text values changed. Same is applicable for CheckBox based question. If the following question has less number of options, extra option components will be deleted accordingly (vice-versa, the components will be added).
  • If the following question happens to be a question with textual response and the current question was also a question with textual response, then the EditText field will be reused post the text content being reset.

When the Quiz Completes

Once the last question is answered, the SUBMIT button changes to FINISH. On click of FINISH, the following score dialog will be shown and the timer will be Paused(internally cancelled).

The layout of the score dialog is managed by the DialogFragment FinalScoreDialogFragment. The Dialog displays the final score with a brief message. This message changes with the percentage range of the score. The Dialog has two buttons -

  • QUIT button will quit from the application by invoking finish on the QuizActivity.
  • RETAKE QUIZ button will restart the app by launching the WelcomeActivity.

When the Quiz Timer times out

If the Quiz timer elapsed before the completion of the quiz, the final score will be displayed with the message as shown above.

Information in general, on the entire app

  • Back is disabled intentionally for all the dialogs. Dismiss on touch is also disabled.
  • Back on activity will destroy/finish the activity/app.
  • If home button is pressed, then the app will continue to run in the background. The Quiz timer will not be paused in this case which is done intentionally. It will continue to run until the user quits the application using back button.
  • The quiz questions and its options are randomized.

Branches in this Repository

  • master
    • Contains the code submitted for review, along with any review suggestions incorporated.
  • release_v1.0
    • Removed Ping Test while evaluating Network Connectivity.
    • Modified to use the support version of Fragment, DialogFragment, FragmentManager and AlertDialog.
    • Made the inner class ImageDownloaderTask of ImageDownloaderTaskFragment as Static to avoid possible memory leaks, with related required changes. Optimized image downloads by reducing the required size of the Image and using parallel execution of AsyncTasks. Fixed bugs related to Downloaded Image not showing after configuration change.
    • Used String resources for Score and Question format, which is displayed in the QuizActivity.
    • Made the inner class MyCountDownTimer of CountDownLatchFragment Static to avoid possible memory leaks, with required related changes.
    • Used optimized URLs for Images for faster loading of Images.
    • Added Null checks for possible Null Pointers.
    • Enabled logging for debuggable build types only, through the use of custom Logger which is a wrapper to the android.util.Log.
    • Modified to use app:srcCompat for loading drawables in ImageView.
    • Fixed the final_score_layout of FinalScoreDialogFragment which was not displaying the final score properly.
    • Recreated App Icons.
    • Other minor changes to prepare the app for local release.

Review from the Reviewer (Udacity)

Review_Quiz_App

License

Copyright 2017 Kaushik N. Sanji

Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License. 
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0
   
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.