Basic Tutorial Two (for/next loop and accumulator)

In this tutorial you will modify the Rental Car program you created in Tutorial One to incorporate REPETITIVE CONTROL STRUCTURE using the for/next statement. As in the earlier program, you will request four data items from the user (make of car, beginning and ending odometer mileage readings and number of gallons used.) And as before, the program will calculate the total miles driven and the miles per gallon and display that data in a short report on the screen.
Unlike the first tutorial, however, this program will process three car rentals rather than just the one rental in the first tutorial. It will use the Basic for/next loop to run through the input, process and output steps for each car until all three of the rentals have been processed.
This tutorial also introduces the use of an accumulator (used to keep a running total of each car's resultant miles per gallon) so that the program can determine the average miles per gallon. A summary report, published after all cars have been processed, will display the number of cars rented and the average mile per gallon for these cars.
Follow the steps outlined below to create and run this VBasic application.
Note: the BASIC Reference Guide can be download from this link. It identifies the VBasic instructions you will use coding in these four programs.

STEP 1 - Setting Up Your Browser and Notepad:

  • Download the BasicTutorialTwo.html file onto your student data disk
  • Right-click the link
  • Choose "Save Target As"
  • Open the document in Notepad to see the Tutorial Two code has been entered for you along with additional comment (rem) statements that indicate the different sections of the program's code.

STEP 2 - Enter Code Statements using Notepad:

  • Change the first comment statement to show that you are the author of the program.
You will need all of the same variables you used in Tutorial One (i.e. the four data items requested from the user and the two data items your program will compute.)

You will also need to declare three new variables:

  • The first variable (carindex) will serve as the index in the for/next loop
  • The second variable (mpgAccumulator) will be used to keep a running total of each car's miles per gallon
  • The third variable (averageMPG) will be the results of the calculation done to determine the average miles per gallon in the Summary Report

After the existing variable declarations, enter the additional three statements:
dim carIndex
dim mpgAccumulator
dim averageMPG
Notice that the code to display the Report Title is placed before the for/next processing loop is started. That is because the title will only appear once at the top of the report. Be sure to change the student name to yours!
  • Enter the following line immediately after the code that displays the report title. This will display a blank line separating the title from the detail lines below it:
document.write("<br>")

The for/next statement will use the carIndex variable to control the number of times the loop is processed. The for part of the for/next statement marks the start of the loop.
  • Enter the for statement after the comment statement that identifies its placement in the program:
for carIndex = 1 to 3

The next three comment statements and their associated code statements are pretty much the same as used in the previous tutorial program.

Since this code has been placed within the for/next loop, each car in turn will:

  1. request user input
  2. perform calculations
  3. display that car's four detail lines

You will, however, have to add the code to accumulate the car's mileage in the Compute values section.

  • Immediately after the statement that calculated the milesPerGallon variable, enter:
mpgAccumulator=mpgAccumulator + milesPerGallon

As currently written, each car will display three lines of data, followed immediately by the next car's three lines of data. We can improve the way the report looks by including a blank line after each car's listing.
  • Enter the code to display a blank line as the last line of code in the Print detail lines section of the program:
document.write("<br>")

Entering the next statement will mark the end of the for/next loop. This statement causes the program to return to the for statement after incrementing the carIndex variable by 1 (i.e. it adds 1 to carIndex then returns to the for statement and tests to see that carIndex is still less or equal to 3.)
  • Enter the next statement after the comment statement that identifies its placement in the program:
next
You're almost done! You only need to enter the code for the Summary Report. After the comment statement that identifies the Summary Report section of the program,
  • Enter the followng lines of code to calculate and report the average mileage of the three car rentals:
averageMPG = mpgAccumulator / 3
document.write("Report Summary: 3 cars were processed with an average mileage value of")
document.write(averageMPG & ".")
  • Go back and carefully check your typing
  • Click the 'Save' icon to save your changes

STEP 3 - Time to Test:

Test your program in your browser
  • When asked to enter data, use the following three cars to test your program:
Chevy with a starting odometer reading of 2300, an ending reading of 2742 and 8.5 gallons used
Ford with a starting odomenter reading of 16507, an ending reading of 17200 and 46.2 gallons used
Dodge with a starting odometer reading of 14000, an ending reading of 14300 and 10 gallons used
Once you have entered the last requested data, and if you have coded your program correctly, your program will produce the written report on the monitor and end.

Be sure to verify the results with the image at the top of this tutorial.

STEP 4 - Documentation:

  • Print a copy of the page displayed on your browser and a copy of the source code from Notepad for your future reference
Return to 110 Examples Page