Fourth Quarter

What shall I do fourth quarter? I want to continue with the blog I made because it's a lot of fun. Plus, when I get distracted, the blog is kind of my way out of that. Some of the things I want to learn are:

• How to use percentages/ pixels so that my webpage displays properly on any computer screen

• How to properly use divs/ sections to have multiple (as in, more than two) columns on a page

I'll keep the blog I have now, and continue working on my Breaking Benjamin fan page. On that site, I am going to embed videos and lyrics, and have multiple different pages linked off of the home page.

This week's progress

Sooooo this week I've been working on my family reunion website. It's coming along pretty well. I only have the home page and the directory started; the others are still not made yet.

In the directory page, I have a table that I will eventually have everyone's contact information set up in. Next week, I'm going to work on adding lines in the table to separate the columns so that it looks a little neater. It doesn't sound like it will be hard, but I will be learning all new things.

Here's a link to what I've done so far:

Home Page

Directory

I'll blog again on Tuesday, if not earlier, to go into detail a little more. I forgot to blog until the last minute today, so this is just a quick run-through.

Third Quarter/Second Semester

1. What are your educational goals?

This quarter, I hope to learn more about perfecting HTML and CSS techniques. I'm not sure what's included in the course description, but I would like to learn more about JavaScript as well. I'd like to be able to incorporate things like comment boxes and login forms in my sites.

2. What are you going to produce?

I have several websites that I am working on. One is for my aunt's tenant; he runs his own small business and needs a website to promote it. I'm doing this through WordPress, but will be editing the HTML files. I am going to make a website for my dad as well, and although WordPress is cool, I'd rather create the HTML and CSS files from scratch because then I know how everything works and how to fix things when they don't work properly.

:) :) :) :) :)

TextGroup App Part II

I updated the Text Group app so that the user adds phone numbers to the group by choosing from the phone's contact list, and removes them by choosing from the items already in the group.
The tutorial covers the following App Inventor components and concepts:

• The foreach block for repeating operations on a list.
• The PhoneNumberPicker component for accessing the phone's contacts.
• The ListPicker component for allowing the user to choose a number for removal.
• The Texting component for sending texts.
• The TinyDB database component for storing the phone list in a database. 

  The user interface for Text Group, Part II has a textbox, button, and status label for sending the group text, just as in Part I. I then added a PhoneNumberPicker and ListPicker components for adding and removing phone numbers from the list, along with a Texting component and a TinyDB component, both of which will appear in the "non-visual" component area.

The following components were added:
- Label named GroupHeadingLabel; this is the header for the list of phone numbers that will appear
- Label named MembersLabel; this is where the list of phone numbers will appear
- Horizontal Arrangement named HorizontalArrangement1; this is used to organize the add and remove buttons (pickers) horizontally
- PhoneNumberPicker named PhoneNumberPicker1; this allows the user to choose phone numbers from their contact list
- ListPicker named RemoveListPicker; this allows the user to remove a number from the phone numbers in the group
- TinyDB named TinyDB1; this is for storing and retrieving group's phone numbers from database 

I set the properties of the components in the following way:

• Set the Hint of MessageText to "enter a message"
• Set the Text of TextGroupButton to "Text Group"
• Set the Text of StatusLabel to "status".
• Set the Text of GroupHeadingLabel to "-- Group -- ".
• Set the Text of MembersLabel to "members will appear here".
• Set the Text of PhoneNumberPicker1 to "Add Member".
• Set the Text of RemoverListPicker to "Remove Member"

In the first part of the TextGroup App, I made this:

For this app, I still want the list but you don't want any pre-defined numbers in it, becuse the numbers will be added by the user of the app. So I removed the text blocks with the numbers and leave the make a list block empty. I needed the following behaviors:

1. When the user clicks the "Add Member" button (the button associated with the PhoneNumberPicker), the picker will appear for the user to choose a number. When the choice is made, the app will add the chosen number to the PhoneNumbers list and update the database.
2. When the user clicks the "Remove Member" button (the button associated with the RemovListPicker), the picker will appear for the user to choose one of the numbers already in PhoneNumbers. When the choice is made, the app will remove the number from the list and update the database.
3. When the app begins, the numbers stored in the database are retrieved and loaded into PhoneNumbers.

 The list of phone numbers in the contact list will appear when the user clicks the PhoneNumberPicker 's associated button: that behavior is built-in to the component. When the user makes a choice from the contact list, PhoneNumberPicker 's AfterPicking event is triggered. I just had to to program this to add the chosen item to the list and update the database. All of the blocks needed look like this:

At this point the app shows the user the phone numbers that have been added. I created a procedure that displays the list with each phone number on a separate line. I had to call the procedure in the PhonePicker1.AfterPicking event, below the add items to list block, so that the updated list is displayed. The call to the procedure replaced the blocks that set the MembersLabel.Text directly to the list.

To allow the user to remove a phone number from the list, I had to get the PhoneNumbers list into the RemoveListPicker that appears when the user clicks "Remove Member". Unlike the PhonePicker component, which gets its data from the phone's contact list, ListPicker requires you to explicilty load the items that will appear. I did this by setting the Elements property of the ListPicker component. I did this within the RemoveListPicker.BeforePicking event, which is triggered right when the user clicks the button but before the list is shown.

Next, I coded the RemoveListPicker.AfterPicking event so that the user's choice is removed from the PhoneNumbers list.

When changes are made to the PhoneNumbers list, they are also stored in a databse. I had to add a behavior so that the data stored in the database is loaded when the app launches. 

I programed the Screen1.Initialize event-handler so that the saved list of phone numbers is retrieved from the database and placed in the PhoneNumbers list and the display is updated to show the list:

Ta-da! This app took a looooong time, partly because I was skipping small things (I wasn't reading properly). I think it's working now though!

TextGroup App

I just finished another app that sends a text to a group of people. It didn't take long -- no where near as long as the last one. (:

Here are the components I needed for this app:

• TextBox - this is where the user will enter the message; renamed MessageText; set the hint to "Enter a message"
• Button - this is what the user will click after entering the message; renamed TextGroupButton; set text to "Text Group"
• Label - this will report when the message has been sent; renamed StatusLabel; set text to "status"
• Texting - this is the component that sends the text

To send the text, I needed to set two properties of the Texting component: the phone number and the message. Once these properties are set, I call the SendMessage function to actually send the text. This is what it will look like in Block's Editor (except the 1112222 will be replaced with an actual phone number):

Next, I'll modify the blocks to text more than one number at a time (note: in this version, the numbers are predetermined. So to choose different numbers, I would have to modify the blocks. There's a way to make the app so that the user can pick different numbers every time, but I don't know how to do that yet):

I'll reconfigure the blocks already in TextGroupButton.Click, and it'll look like this:

Now, when the TextGroupButton is clicked, the Texting1.Message property is set to the message entered by the user in MessageText. Then the foreach block begins executing. The two lines of blocks nested within the foreach will be executed three times, because there are three items in the list PhoneNumbers . The first time they are executed, the value var will hold the value "1112222", and the message will be sent to that number. As soon as the message is sent, the app will "loop up" and repeat the foreach blocks. The second time through, the value var will hold "3334444", and the message will be sent to it. On the third iteration, var will hold "5556666", and the third text will be sent out.

Next I modified the blocks so that the status label reports the last message sent. The updated TextGroupButton.Click looks like this:

This is what the final looks like:

This is what the app looks like:

I want to figure out how to make the app using the database, so that the user can pick different numbers every time they decide to use the app.

This app wasn't as complicated as the other one, but I still liked doing it..... I like knowing how things work!

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 (:

What's New?

So these past couple of weeks, I've been working on a website called App Inventor, which is a site that helps people create their own applications for Android. It's really cool, and not very difficult. The first app I made was called Hello Purr, and itmakes a picture of cat "meow" when it is touched. It was the easiest app I created. The last one I created was a version of Whack-A-Mole. It took two full days to make, and although it's done and functional, I'm not completely satisfied with it. Pretty soon, I'm going to start making my own apps that we can use in class.

Now that I know how to do this, I can make apps that I think are fun too. My favorite app that I've made so far is the Magic 8 Ball, which everyone's heard of: you ask a "yes" or "no" question, shake the device, and it gives you an answer. I LOVE things like that, even though they're not real.....

I'll let you know what's coming next!