CIS 132: Final Project ~ Ted Altenberg

Welcome to Ted Altenberg’s CIS 132 Final Project!

Before we get started, please tell me who you are:  

Thanks , now let's continue.

In hopes of creating something for this final project that will satisfy most of the requirements and also help me with an actual project outside of the class, I have chosen to create a couple web pages and some javascript programming that address the Raven’s Progressive Matrices Test (aka RPM or simply the Ravens Test).

I am a teacher in the GATE Services Office, within the Curriculum & Instruction Department of the Pajaro Valley Unified School District (PVUSD). GATE is Gifted and Talented Education, and is the name given in California for educational services for the gifted and advanced students in public education grades K–12. As one of multiple measurs that we use to determine which students are identified as GATE students, we administer the RPM test to a number of 3rd grade students, and occassionally to 2nd, 4th, 5th and 6th graders as well.

I have automated somewhat the complex scoring method used with the RPM, which entails a table of percentage scores based on how many correct answers and the age of the person completing the test. Various other JavaScript features are included in order to meet the requirements of the Final Project, which are delineated below (and at Ed Parrish’s website, www.edparrish.com/cis132/08f/project.php).

Final Project Report:

Project Title: Automating the Scoring of the Ravens Test

Introduction:

The Ravens Progressive Matrices test is a widely used test for general intelligence. It has been in use for over 50 years, and is used in many countries around the world, since it is a completely non-linguistic test and can be used with people of any culture or language. The test is a series of 60 geometric patterns or matrices, in which the test taker’s task is to identify which of several patterns is the correct one to complete the matrix. There are 60 matrices, which start very easy and get progressively more difficult. (Hence the name, “Progressive Matrices;” “Ravens” refers to the developer, John Ravens.)

The scoring of the Ravens involves comparing a person’s raw score (how many correct out of 60) with nationally normed percentile ranks for people of that age. The test has been validated for people ages 6–16. (There is also a normed scale for using it with adults.) Ages are grouped into 6-month cohorts: 6.5 years, 7.0, 7.5 … up to 16.5 years. As a person’s age increases, she/he has to get more correct answers in order to earn the same percentage score. For example, at age 9, 40 correct = 95%; but at age 13.5, 53 correct answers are required to earn a 95%.

In this javascript project, I have created a form which can be used to automatically calculate a person’s age, based on their date of birth and date of testing, and then looks up their age and Ravens raw score, to return their percentile score. The steps in this process will be described below.

Project URL: http://www.tedaltenberg.com/tech/cis132/final/

Project Pages, Javascript and PHP Applications:

Requirement Completed File in which it is found and brief description
1 At least one function embedded in an HTML page check mark scoring.php contains checkForm()in the <head> section
2 At least one function in an external JavaScript (*.js) file check mark ravens.js contains many functions
3 At least one array check mark ravens.js contains three arrays: ImgOver and ImgOut for the menu rollover, and scoringMatrix, a large 2-dimensional array for the ravens test score function
4 At least one use of each of these control structures:
  1.   while or do-while loop
  2.   for loop
  3.   if or if-else
  1. NO
  2. NO
  3. check mark
  1.  
  2.  
  3. In function checkForm() in scoring.php; in multiple functions in ravens.js
 
5 At least one use of all these event handlers:
  1.   onload
  2.   onclick
  3.   onmouseover
  4.   onmouseout
  5.   onsubmit
  1. check mark
  2. check mark
  3. check mark
  4. check mark
  5. check mark
  1. Both index.php and ravens.php use onload to initiate the animation.
  2. scoring.php uses onclick to return checkForm()
  3. index.php, ravens.php and scoring.php all use onmouseover to create the menu rollover effect
  4. index.php, ravens.php andscoring.php all use onmouseout to create the menu rollover effect
  5. The form in scoring.php uses onsubmit to initiate checkForm()
6 At least one Date object method call check mark Function calcTestAge() uses getTime(), in ravens.js
7 At least one Math object method call check mark Function calcTestAge() uses Math.round, in ravens.js
8 At least one page displaying animation using JavaScript check mark index.php and ravens.php have animated <h1> elements
9 At least one page with a JavaScript rollover menu using images check mark index.php, ravens.php and scoring.php all have a menu with an image-based rollover effect
10 At least one form field validated on the client using JavaScript check mark The form (id="ravensFrom") in scoring.php uses function checkForm() to validate the following fields:
  • Month of Birth: cannot equal "Month" (i.e. must select a month)
  • Day of Birth: cannot equal "Day" (i.e. must select a day)
  • Year of Birth: must be 4 digits, and must match regular expression (see #11 below)
  • Month of Testing: cannot equal "Month" (i.e. must select a month)
  • Day of Testing: cannot equal "Day" (i.e. must select a day)
  • Year of Testing: must be 4 digits, and must match regular expression (see #11 below)
  • Year of Birth vs. Year of Testing: Year of Birth must be < (i.e. before) Year of Testing
  • Ravens Test Score: must be 2 digits, and cannot be > 60.
11 At least one regular expression check mark Function checkForm() (in scoring.php) uses regular expressions (/^199\d{1}|^200\d{1}/ and /^200\d{1}/) to validate that the year of birth and year of testing are valid 4-digit year dates.
12 At least one cookie that gets saved and retrieved check mark index.php uses a cookie to collect a user’s name, then retrieves that cookie value in a simple personalization.
13 A project report as described below check mark This page (index.php) serves as the Project Report, which is also available as altenberg_readMe_finalProject.txt.
14 All your Web site pages must function correctly as described in Project Evaluation Criteria section check mark index.php, ravens.php and scoring.php all function correctly.
Extra
  • Extra javascript
  • PHP applications
  • W3C-compliant valid code
 check mark
check mark
check mark
  • The large 2-dimensional array, ravensForm, is an elegant use of an array to recreate the table of values that relates a tester’s age and raw score to determine their national-normed percentile score.
  • All the pages use php includes for a portion of the <head> section and for the footer. The footer also uses putenv, echo and the getlastmod() environment variable to display the copyright (Y) and last modified (F d, Y) dates
  • All the pages validate as XHTML 1.0 Transitional and CSS2, with one exception: the use of a < symbol (used as the less than operator in function checkForm() in scoring.php) generates an XHTML validation error and a warning. Replacing it with &lt; does not work in the js script.

Back to Top

CIS-132 Final Project Information from Ed Parrish:

Overview

The purpose of the project is to use most of the techniques you have learned from this course. You may choose any project as long as it meets the requirements discussed below.

The project must be a real application in the sense that the site must be hosted somewhere on the Internet. You can either arrange your own hosting or use WebHawks.

You are free to apply homework assignments toward the final project. However, the final project must be work that you have produced and not material simply copied from another source. If you do copy small portions from another source, you must cite the source and have permission to copy the material.

The final project presentation will count as the final exam for the course. You must demonstrate your completed project to the instructor during the scheduled final exam time to pass the course.

Item Description Points
1 At least one function embedded in an HTML page
(either the head section or the body section)		 2
2 At least one function in an external JavaScript (*.js) file 2
3 At least one array 2
4 At least one use of all these control structures:
  1.   while or do-while loop
  2.   for loop
  3.   if or if-else
1
1
1
5 At least one use of all these event handlers:
  1.   onload
  2.   onclick
  3.   onmouseover
  4.   onmouseout
  5.   onsubmit
1
1
1
1
1
6 At least one Date object method call 1
7 At least one Math object method call 1
8 At least one page displaying animation using JavaScript 5
9 At least one page with a JavaScript rollover menu using images 3
10 At least one form field validated on the client using JavaScript 5
11 At least one regular expression 2
12 At least one cookie that gets saved and retrieved 5
13 A project report as described below 4
14 All your Web site pages must function correctly as described in Project Evaluation Criteria section 10
  TOTAL 50

Project Report

The project report consists of the following information:

  • Your name
  • Your project's name
  • A brief introduction describing the purpose of your project (one paragraph is sufficient)
  • The URL entry point for your project on the Internet
  • A description of each page of your project Web site including:
    • Your JavaScript animation page, including a description of the animation
    • Your form validation page, describing valid and invalid values
    • Your cookie setting and retrieval pages, including values that are set and retrieved
  • In addition, you should explain any unusual coding (that we did not cover in class) used to meet the specifications. If you do not, then I may miss how you achieved some specification and you will not get the credit you deserve.
  • Also, if your site is password protected in some way, please provide me a way to login such as a guest username and password.

Project Presentation

You must demonstrate your project on the day of the final. You must attend at the scheduled time or you will receive a zero (0) and fail the course (except by prior arrangement with the instructor). While you must present your project, you do not have to demonstrate it in front of the class. (When everyone else is done, you can present it to the instructor individually.) Feel free to refer to or display your written report during the presentation. Point out as many of the cool features as possible so we can all enjoy them.

Suggested Presentation Flow:

  1. State your name and your project's name.
  2. Briefly describe the purpose of your project
  3. Demonstrate and discuss each project page including:
    • Animation page
    • Form page and validation techniques used
    • Cookie pages and cookie values set and retrieved
  4. Summarize the project.

When the demonstration is over, or your time is up, then quickly summarize the program's purpose. Then pause for about 10 seconds to give us a chance to applaud!

Project Evaluation Criteria

The instructor will evaluate your final project using the following criteria. Each criteria represents a specific achievement of your project and has a scoring guide. The scoring guide explains the possible scores you can receive.

Some scoring guides have a list of indicators. These indicators are a sign of meeting, or a symptom of not meeting, the specific criterion. Note that a single indicator may not always be reliable or appropriate in a given context. However, as a group, they show the condition of meeting the criterion.

Required Features

Points as shown in parentheses for each demonstrated feature in the specifications. (50 points, including the Web Site Functionality and Project Reporting and Presentation points described below)

Web Site Functionality

  • 10:  Demonstrates mastery of a Web site using JavaScript:
    • Has extra features or demonstrates techniques beyond the course
    • Meets all project requirements (see above) with particularly elegant solutions
    • Runs with no error conditions reported by the browser
  • 8:  Has all the functionality expected of a professional Web site using JavaScript:
    • Demonstrates many techniques from the course
    • Meets all project requirements (see above)
    • Runs with no error conditions reported by the browser
    • May have one minor error in the JavaScript on a page
  • 6:  Has most of the functionality expected of a Web site using JavaScript:
    • Demonstrates some techniques from the course
    • Meets all but one of the project requirements (see above)
    • May have 2–3 minor errors
    • Project not available on the Internet
  • 4:  Has some of the functionality expected of a Web site using JavaScript:
    • Demonstrates some techniques from the course
    • Meets at least ½ of the project requirements (see above)
    • Implementation seems excessively complicated
    • May have JavaScript warnings or errors in the browser
  • 2:  Serious functional problems but shows some effort and understanding:
    • Meets at least ½ of the of the functional requirements (see above)
    • Has a major error (detected by the browser) or many minor errors
    • Demonstrates few techniques from the course
  • 0:   Web site does not run or was not presented by the specified time

Project Reporting and Presentation

  • 4:  Project is reported clearly and completely:
    • Has extra features or demonstrates techniques beyond the course
    • Student presents information in a logical and interesting sequence
    • All requirements of the project were presented
    • Written report was presented to instructor before the project was presented
    • All project-reporting requirements were turned in
    • Report is well-written and grammatically correct
  • 3:  Project presentation or report has minor problems:
    • Student presents information in a logical sequence
    • All but one of the project requirements were presented
    • Some minor project-reporting requirements are missing
    • Report contains spelling errors, but is otherwise clearly written
  • 2:  Project presentation or report has significant problems:
    • Audience has difficulty following presentation because student jumps around
    • At least ½ of the project requirements were presented
    • At least ½ of the project-reporting requirements were turned in
    • Report only submitted electronically and without a paper copy
  • 1:  Project presentation or report is unclear or incomplete:
    • Audience cannot understand presentation because there is no logical sequence of information
    • Less than ½ of the project requirements were presented
    • Less than ½ of the project report was completed
  • 0:  No project report submitted or was not presented at the specified time
  •      Maximum Score: 50

What to Turn In

  • Bring a written copy of the project report to class.
  • Before the presentation, submit to Blackboard a .zip file with all your files placed in their correct directories. Include the following:
    1. The written report document as README.txt
    2. All JavaScript, HTML, CSS and image files
    3. Any other file needed to make your project work
  • You must submit all the files needed for your project to work properly. Do not assume that the instructors has any files. Your project must work as submitted.