Wednesday, November 28, 2012

QuizMe App

I've completed another app, and this one I really like. It's called QuizMe, and the tutorial made it about baseball, but I switched it up and made it about something else. The topic I used was the movie "The Land Before Time", which is a very old animated movie I watched as a little girl about dinosaurs.

This app wasn't that hard to make, but it took a while. The first couple of things I had to do involved creating the interface for the app, which was pretty straight forward. I created the following components:
  • Image - this is the picture that shows up in the app
  • Label - this displays the current question; renamed QuestionLabel
  • HorrizontalArrangement - this organizes the AnswerPromptLabel and Text, which are coming next
  • Label - this is the text that will prompt for an answer; renamed AnswerPromptLabel
  • Text Box - this is where the user will enter text for their answer; renamed AnswerText
  • Label - this is where "correct" or "incorrect" will be displayed; renamed RightWrongLabel
  • HorizontalArrangement - this organizes the AnswerButton and NextButton, which are coming next
  • Button - this is what the user uses to submit their answer; renamed AnswerButton
  • Button - this is what the user uses to move on to the next question; renamed NextButton

The next couple of things I did included uploading the image I was going to use and setting "Image"'s picture property to that imagine. I changed QuestionLabel's text property to "Question:" ; AnswerPromptLabel's text property to "Enter answer:" ; AnswerText's text property to "Please enter an answer:" ; AnswerButton's text property to "Submit" ; NextButton's text property to "Next" ; RightWrongLabel's text property to "correct/incorrect". I moved AnswerPromptLabel and AnswerText into HorizontalArrangement1 and moved AnswerButton and NextButton to HorizontalArrangement2.


^ This is what it looked like, only my picture was one of the Land Before Time characters.

I won't go into too much detail about what I did in the Block's Editor because that would take all day, but I'll show you:


My questions were:
  • In what year was the first The Land Before Time released?
  • What kind of dinosaur was Chomper?
  • Whose mom died?
  • What were the dinosaurs called that Little Foot and his friends were afraid of?
  • When was the last The Land Before Time  released?
This is what I did next:

 My answers were:
  • 1988
  • T-Rex
  • Little Foot
  • Sharptooths
  • 2007
For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component. To get it to do that, this is what I had to put together:

 Next I had to program the behavior of NextButton. I already defined the current QuestionIndex to remember the question the user is on. When NextButton is clicked, the app needs to increment this variable, e.g., change it from 1 to 2 or from 2 to 3, etc., and then use the resulting value to select the new "current" question. This is what I had to do:



What the app needs to do is ask a question-- check a condition-- when the NextButton is clicked, and execute different blocks dependending on the answer. One way to ask the question is to ask, "is the variable currentQuestionIndex already 3?" If the answer is yes, you should set currentQuestionIndex back to 0 so the user is taken back to the first question. Here's what I did:


The current app shows the same image, no matter what question it is on. I changed this so that a picture pertaining to each question will pop up on the screen when that question is reached. This is how:


After I put the pictures in, I had to modify the NextButton.Click event-handler so that it modifies the picture depending on what question the user is on:


Next, I added blocks that report whether or not the user answered the question correctly. The RightWrongLabel had to be modified to report whether or not the answer is correct:


To blank out the RightWrongLabel and the AnswerText, I did the following:


This is what the Block's Editor looked like when I finished:


This is what the app looks like:



That took a lot of explaining but it was fun (:

1 comment:

  1. Wow, this is an excellent post! Detailed, informative, creative. Let's talk tomorrow about where to go next. I'd like to use the text book to provide some structure to this study, since this is new territory for me and it will help to have an organized way to explore it.

    ReplyDelete