CSC 230: The Week beginning Mar. 2

Provide a brief definition of the following terms (in the interface programming context):

• Array
• Array element
• Array index
• Sort an array
• Search an array
• Instanstiate an array versus Initialize an array

• Make an array of grades (A, A-, B+, B, ...) and a parallel array of the corresponding weights (4, 3.667, 3.333, 3, ...).
• Use the page's onload event to call a function that loops through the elements of the array and populates a drop-down select. The user should see the grades, but that values passed through the code should be the grade array's indices: 0 for A, 1 for A-, 2 for B+, 3 for B, ...
• The user enter the grade using the drop-down select. Then use the drop-down select's onchange event or add a button and use its onclick event. The function called should display the grade and its corresponding weight (they have the same index which is the value obtained from the drop-down select).

• Collect some image files. (I chose painters and obtained my images from http://www.wikipaintings.org/.)
• Declare an array (of strings) that contains your files names. Something like:

     let Painting = ["camille-corot_jpg!Portrait.jpg","edouard-manet_jpg!Portrait.jpg","hiroshige_jpg!Portrait.jpg","otto-dix_jpg!Portrait.jpg", "shen-zhou_jpg!Portrait.jpg", "benjamin-west.jpg","diego-velazquez_jpg!Portrait.jpg", "william-turner_jpg!Portrait.jpg"];

• Declare a second array of related information -- a parallel array. For instance

     let Artists = ["Camille Corot", "Edouard Manet", "Utagawa Hiroshige", "Otto Dix", "Shen Zhou", "Benjamin West", "Diego Velazquez", "William Turner"];

• Declare a global variable which will serve as an index for two arrays.
• When the user clicks the New button, have the computer generate a pseudo-random number between 0 (inclusive) and the number of elements in your array (exclusive).
• Then display the image with that index.
• Do not display the related information. In fact you should clear out any previous information.
• When the user clicks the reveal button, then display the related information.

 let State = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

 let Capital = ["Montgomery", "Juneau", "Phoenix", "Little Rock", "Sacramento", "Denver", "Hartford", "Dover", "Tallahassee", "Atlanta", "Honolulu", "Boise", "Springfield", "Indianapolis", "Des Moines", "Topeka", "Frankfort", "Baton Rouge", "Augusta", "Annapolis", "Boston", "Lansing", "St. Paul", "Jackson", "Jefferson City", "Helena", "Lincoln", "Carson City", "Concord", "Trenton", "Santa Fe", "Albany", "Raleigh", "Bismarck", "Columbus", "Oklahoma City", "Salem", "Harrisburg", "Providence", "Columbia", "Pierre", "Nashville", "Austin", "Salt Lake City", "Montpelier", "Richmond", "Olympia", "Charleston", "Madison", "Cheyenne"];

        span {
            display: inline-block;
            width: 10em;
            border: 2px solid black;
            margin: 0.25em;
            padding: 0.1em;
        }