Android Programming with MIT App Inventor 2
Quiz User Interface Design
|
We start off by opening our Template app and using "Save Project As" to create a new project we will call
Quiz_initials (NOTE- We will be designing and programming on the screen we called "Main", so if your Template didn't yet have one, go ahead and make one before you do this. From now on, if you make basic changes to the app you would want on the Template, open up Template and keep it current by making the changes there too. |
Note: Since it is hard to read the values on the design elements from a video, I have included the rest of the elements as screenshots with descriptions below.
THERE IS NO PART 2 VIDEO!
This slideshow shows the property settings for the design elements on the quiz |
|
- Image_Box - Where the images for each question will be displayed. We are allotting 30% of the screen height to the image.
- Quiz_Image - The photoshop resizing you did last week should have them looking pretty good on phones or tablets without making the app too big. PNG files will work too, but if they don't use transparency, might as well save them as JPG files instead.
- Answers_Box - This is the most complex of the Horizontal Arrangements because it combines labels, buttons inside yet another Horizontal arrangement, and text box to show the chosen answer.
- Select_Label - Just a place to show the word "Select" on the screen, helping users know what to do .
- Button_Box - A "Box in a Box"arrangement that organizes the buttons users will press to select their answer.
- A_Button - A button with the letter "A" for users to press to select the (A) answer. The other three buttons are self-explanatory.
- Choice_Label - Just a place to show the word "Choice" on the screen, showing users the answer they are choosing.
- Answer_Text - A text field WE fill with the answer based on which button the users press. Prevents lower-case mistakes.
- Submit_Box - Arrangement for the buttons for submitting the answer, read a Hint and the hidden Next Question button are located.
- Hint_Button - Reveals the Wikipedia article at the bottom of the screen where the Webviewer component is located so users can read for clues to the answer.
- Submit_Button - Users press it when they are done making their answer choice. It then hides itself and reveals the Next_Button.
- Next_Button - Brings up the next image, question and answers, resets the Webviewer and hides itself to reveal the Submit button again.
- Ending_Box - Entire section of the app that is only revealed once users finish the quiz, giving them a way to go back to the Intro/Menu as well as a clean way of stopping the App. The Submit_Box above gets hidden as this one is revealed.
- Main_Menu_Button - Takes users back to the Intro/Splash screen.
- Quit_Button - Exits the program, so users don't have to force-close or otherwise stop the program when they are done.
- Questions_Box - The only vertical arrangement box, it shows the possible answers text directly underneath the question text.
- Questions_Label - Simple way to display the text for the questions.
- Spacer_Label - Just an empty spot so there is a space .
- Answers_Label - Displays the 4 possible answers the user is to choose from. Formatting of the text is very important to legibility.. follow the example in the spreadsheet carefully to space things out correctly.
- Spacer - This simple horizontal arrangement can have a background color that helps separate your quiz from the Wikipedia article when it is displayed.
- Webviewer1 - This component allows you to display a website at the bottom of the screen. We are using Wikipedia articles for several reasons, but the simple, fast -loading ad-free nature of the website's pages makes them perfect for this quiz.
You must watch the tutorials on how to actually program the Quiz. Just copying my blocks is not sufficient - you won't be learning to code unless you hear the explanations behind the logic. You will be asked to make modifications and improvements to this basic app and you need to be equipped to do that.