CET 756: Introduction to Instructional Programming

Fall 2008 - Dr. Haomin Wang

(Back to Themes)

Course Reflection:

Although very challenging, this class taught me more about programming languages and how to use them to create supplemental materials for classroom learning.  As shown below, I created several programs that would be beneficial in a classroom setting.

Course Overview:

Course Goals/Objectives:

• Describe and explain basic computer working mechanism including data type and structure, and common algorithms.
• Be able to explain and apply the concepts and principles of object-oriented programming.
• Develop problem-solving skills in terms of task analysis, procedural thinking, trouble-shooting, and project management.
• Apply the computer programming strategies and techniques covered in the course to instructional Web development.

Specific Course Work:

Assignment 3: Creating the If Else, If Else Statement.

For this assignment.  We are going to create a popup that asks the user to input their date of birth.  When given the date of birth, the computer will return the animal that is associated to that year of birth in the Chinese Zodiac.  Try it out for yourself!  ***Note that if you have a popup blocker, you may not be able to view the popup correctly which will give you the return of an invalid number.  You may have to use a different provider than IE7 (Internet Explorer 7) as it tends to block all popups even when you choose to temporarily allow a popup.  Here are the steps to allow a popup.  You can also try a different download such as Mozilla Firefox or Google Chrome, which are free to download from http://www.mozilla.com and http://www.google.com/chrome/

• Click here for the example: remember to view the source!

Assignment 4, Part I: Using the FOR Loop

The factorial method is often used in probability testing. The factorial of a positive integer n is represented as n! and is equal to the product of the positive integers from 1 to n. For example, 6! = 6 x 5 x 4 x 3 x 2 x 1.   Our task is to write a JavaScript that does the following:

• lets the user enter any positive integer;
• uses a loop to get the factorial of the number;
• displays the result

Click here for my example: remember to view the source!

Assignment 4, Part II: A While Loop for Practicing Arithmetic Calculations

1. Starts by generating two random integers (between 1 and 99 inclusive) and asks the user to enter the sum of the two integers, or enter -1 (minus one) to quit;
2. For each run of the while loop, the program reads the user input, and determines if the user's answer is correct.
3. If the answer is correct, it increments the count variable by 1 for the number of correct answers, and gives the feedback "Correct! "
4. If the answer is incorrect, it simply gives the feedback "Sorry. Not correct. "
5. For each run of the while loop, the loopCounter is incremented by 1
6. When the user enters -1, the while loop stops and the program tells the user how many correct answers she/he has got out of a total number of tries.

There are two JavaScript functions used in this program:

• Math.random()
• Math.round()

The first function returns a random number between zero and one. In the example, we multiply the random number by 100 to fit our needs. The second function rounds a number to its nearest integer.

The Task:

Right now, the program has a bug that prevents it from determining correct answers and giving the right feedback. It'll say "Correct!" even when the user input is incorrect. Consequently, it cannot get the correct number of correct answers when the user quits. Your task is to find and fix this bug.

This bug is somewhat subtle and may not be easily identified through a debugger like FrontPage Preview or Netscape. Please view the source code of the page carefully and see if you can find it. When you find the bug, write down (in HTML web page format) what the problem is, and how it can be fixed.

In this particular code, there was a statement:  if (inputValue = temp).  This caused the program to run incorrectly because this sets the value of "inputValue to be = to the temp instead of == which returns a true statement if inputValue and temp are equal.  The correct code here should be:  if (inputValue == temp).

Click here for my example: remember to view the source!

Assignment 4, Part II - BONUS: A While Loop for Practicing Arithmetic Calculations

Bonus Points:

You'll earn bonus points if you can modify the program so that the arithmetic practice is on the product of two integers (instead of the sum of two integers), and the keyboard input to quit the program is "stop".

In order for this to work correctly, I took the above source code and did the following:

1. I switched the "plus" to "times" in the window.prompt sections and then tested the code in preview to see if the times was showing correctly even though it was not yet multiplying.
2. I then switched "num1 + num2" to "num 1 * num 2" and again tested the code in the preview window to see if it would now multiply the numbers correctly. 
3. Next, I switched (inputValue! = -1) to (inputText != "stop") this != allows the value to return the stop window.prompt if they are not equal.  Because I no longer want this to be an integer, I had to remove the Value in the inputValue and change it to Text.  Another problem I ran in to with this was that you actually have to put stop in quotes or it still won't work!
4. I then switched -1 in the window.prompt sections to stop.

Click here for my example: remember to view the source!

Assignment 5: Loops and Arrays

 Write a JavaScript program that does the following :

• Stores the 50 states' names and capitals in two arrays. You can copy the constructed arrays from the lesson notes of the week.
• Uses the window.prompt() method to display a state name, asks the user to enter the matching capital name, and tells the user that entering "exit" will stop the program.
• Checks the user input and use the window.prompt() method to tell the user if the answer is correct or not. At the same time, the window.prompt() method displays the next state name, and asks the user to enter the next matching capital name. Please note that giving the user feedback and prompting the user to try the next are done with the same window.prompt().
• Uses a loop to go through all 50 states until all 50 states have been displayed or the user enters "exit".
• You should add inline comments as documentation to describe what each key statement does to help the reader understand the code.
• Please the rubric linked to the assignment as a reference of criteria for evaluating your work.

Bonus points: (5)

• Uses a variable to count the number of correct answers and displays the total number of correct answers when the program ends

Click here for my example: remember to view the source!

Assignment 6: Web Forms and Interactivity

 Write a program that meets the following requirements:

1. The JavaScript program is embedded in an HTML document.
2. The HTML document should have a <head></head> section, with a pair of <title> </title> tags, and a meaningful title.
3. The HTML document has a web form in it with two text boxes and one button. One text box is for taking user input of number of seconds. The other text box is for displaying the distance in meters.
4. You need to define a function that can read the user input, calculate the distance, and display the result. The function should be placed in the <head> section of the HTML document.
5. When the user clicks the "calculate" button, the program will call the function and get the result.
6. Please add between-line and/or in-line comments as documentation to help the reader understand what each key element of the code is supposed to do.

Click here for my example: remember to view the source!

Assignment 7: Creating an Online Quiz

Write a program that meets the following requirements:

1. For this assignment, we were to take what we learned from assignment 6 and apply it to creating our very own on-line quiz.

Click here for my example: remember to view the source!

Assignment 8: DOM Applications

Write a program that meets the following requirements:

1. The program will present an HTML form that has three textboxes with appropriate labels, and a command button. The first textbox is for the program to display nouns. The second and third textboxes are for the user to enter matching adjectives and verbs.
2. The program will store a set of 20 or more nouns with matching adjectives and verbs. For instance, "norm", "normal", and "normalize". Try to select words that have different types of derivations. Let me know if you have any questions about variations in derivations. 
3. When the HTML document loads, the program will present the first noun in the first textbox, and ask the user to enter the matching adjective and verb in the second and third textboxes.
4. When the user submits her/his answers by entering input into the 2nd and/or 3rd textboxes, and clicking the command button, the program will check the user input and tell the user whether she/he has entered either the correct adjective or the verb or both or neither. You can use an additional textbox to display the feedback.
5. The program then displays the next noun and ask the user to enter the matching adjective and verb.
6. In displaying the next noun, the program will clear any previous entries of the 2nd and 3rd boxes. You can assign "" (two double quotes for empty text string) to the 2nd and 3rd text book, like this document.form1.textBox2.value = "".
7. The program will count the numbers of correct answers, adjectives and verbs counted separately, the user has entered, and display the results when the program ends. For instance, "You have entered 16 correct adjectives and 12 correct nouns."
8. The program will end when all the nouns are completed or if the user enters "exit".
9. Add comments in your code where needed to help the reader understand your code.

Click here for my example: remember to view the source!
 

Assignment 9: Using CSS with Webpage Creation

Click here for my example.

Assignment 10: DHTML

There are two parts for this week's assignment. You must complete both.

1. Part 1: Create a slideshow in JavaScript, using at least 5 images of your own.
2. Part 2: Create another HTML page with a set of images that are automatically rotated by using JavaScript. You can use the same set of images you use for your slideshow.
3. To make your images load fast and switch smoothly, it's highly recommended that you use a photo editor to resize your images to the same or similar dimensions. If you can don't have any picture editing software to use, you can send me the picture files and I'll be happy to help. Just tell me which size you want. 
4. Upload your programs to your own web space and submit the URL(s) to the Dropbox.

Click here for my JavaScript example.

Click here for my automatically rotating example.

Assignment 11: W3C DOM's

Create a drag and drop program that models after the example below.

1. Come up with a subject matter for classifying.
2. There should be at least five groups (categories) for the classifications. 
3. A green box will appear if it's a correct match, and a red box appears if it's incorrect match.
4. The user can change an answer by re-dragging an item from one group (category) container to another, and the program will update the correct/incorrect status if necessary.

Click here for my automatically rotating example.