Day 1: Introduction
For the 35 years of classroom teaching, one of my favorite classes was Computer Business Application. The premise of the class was that companies have specially designed software for their own particular needs.
Students in the class spent one week working for a different company and learned how to use the software particular to that company.There were companies like a computer dating company, a hotel, and auto insurance company, a dentist office, an income property management company.
One of the most popular one was an application for the police department. I got a hold of an arrest report from a neighbor who was a deputy sherrif. The software that I created gave the students a way to make a data base of criminals based on their physical descriptions.
The students then had a series of crimes to solve and find a list of possible suspects.
This application was first written by me in the early eighties in DOS, then later in Windows using Visual Basic.
This version is written for the web using Javascript, HTML 5 and cascading style sheets.
What is needed?
You will need a copy of Notepad++ and a browser. I used Chrome for this particular project.
The only difference when using other browsers is the way the javascript debugger looks.
In this assignment, you will be adding code to the existing program.
Let's see how the program works currently.
Crook Finder
The header contains a way to navigate between the tutorial, the crook finder program, profiles created and the unsolved cases page.
The first column contains a series of radio buttons, designed for the user to select charcteristics of the suspect that they are looking for.
The first column, called nav, also contains three buttons. One to save the database file, one to initiate searches and the third button to clear the screen.
At the bottom of the first column is some code that allows the user to look at each record in the data base, one at a time.
The center column, called article, shows the data base of arrest reports.
Each line represents an individual and their age, gender, crime, race, height, weight, eye color, facial hair, tatoos, build
The third column, called aside, contains the results of the searches.
Print out the worksheet that goes with this assignment.
Crook Finder Worksheet
Day 2: Crook Finder Program:
Let's examine each characteristic
Click on the male radio button, and then click on the search button.
A list of all males and their record numbers will appear in the third column of the application.
At the end of the list is the total of the males and the percentage of the total that they represent.
You can clear the results, by clicking on the clear button or just go to the next search.
Click on each of the characteristics: to see the information in the data base.
Record your answers on the worksheet.
Use the find a record in the file function to see individual records. Currrently there are 80 records in the data base 0-79.
This function shows you individual suspects' characteristics.
Day 3: Profiles:
Click on Profiles in the header.
Profiles are a collection of search criteria currently incorporated in the program.
As you can see, there are currently nine profiles listed here. The first three are already incorporated into the program, the others you will create later in the lesson.
Click on each of the characterstics in profiles 1, 2 and 3 and record your answers on your worksheet.
As you can imagine the combination of characteristics is huge so many profiles could be created.
Later in the lesson, you will learn how to create profiles.
Day 4: Getting the program and the style files
Before starting our task of finind the criminals, we need to get you a copy of the software and the style files.
Click on the copy button to put the application on the clipboard.
Create a new file using Notepad++ and paste this information into the editor.
Save your program using an HTML extension.
Style File 1
Create a new file using Notepad++ and paste this information into the editor.
Save file your calling it Style1.css.
Style File 2
Create a new file using Notepad++ and paste this information into the editor.
Save file your calling it Style2.css.
Style File 34
Create a new file using Notepad++ and paste this information into the editor.
Save file your calling it Style34.css.
Style File 5
Create a new file using Notepad++ and paste this information into the editor.
Save file your calling it Style5.css.
Style 6
Create a new file using Notepad++ and paste this information into the editor.
Save file your calling it Style6.css.
Day 5: Creating new profiles
Now we are going to create some new profiles for our application.
Remember we currently have three profiles. Remember profiles are a combination of characteristics.
The way each profile or any characteristic is accessed is through the decideFunction().
Based on the radio buttons clicked on by the user, profile functions can be called.
After the profile function is called, the program compares user input with each record in the file.
If it finds an exact match, the name or names of suspects will be displayed in the third column.
For our profile 4, here are the buttons that would be selected and their array index number.
Button Characteristic Index No. Gender female 1 Crime auto theft 6 Age Millennial 1 Race Caucasian 0 Height 68 inches 3 Weight 135 4 Eye Color brown 1 Facial Hair none 3 Tatoos no 1 Build medium 1
Here is the code that needs to be added to our crookFinder program, decideFunction().
if (gender[1].checked == true && crime[6].checked == true
&& race[0].checked == true && age[1].checked == true
&& height[3].checked == true && weight[4].checked == true
&& eyeColor[1].checked == true && facialHair[3].checked == true
&& build[1].selected == true)
{
profile4();
}
Key this block of code right after profile 3 in the decideFunction()
The way it works, is that the value of each radio button pushed is recorded and then the function calls the individual profile function.
The code referred to is at the beginning of the script tag. These are global variables.
gender = document.getElementsByName("gender");
var crime = document.getElementsByName("crime");
var age = document.getElementsByName("age");
var race = document.getElementsByName("race");
var height = document.getElementsByName("height");
var weight = document.getElementsByName("weight");
var eyes = document.getElementsByName("eyes");
var facialHair = document.getElementsByName("facialHair");
var tatoos = document.getElementsByName("tatoos");
var build = document.getElementsByName("build");
Here is the information for the fourth profile.
Sex: female
Crime: auto theft
Age : Millenial
Race: Caucasian
Height: 68 inches
Weight: 135 lbs.
Eye Color: brown
Facial Hair : none
Tatoos: no
Build: medium
Open your crookFinder.html program in Notepad++ and paste this information into the editor.
Save your file.
add this line at 2653
Day 6: Expanding Searches
Since the algorithum looks only for exact matches, you might get no suspects.
It has been well-known, that witness identification is less than perfect.
Suppose, our witness wasn't quit sure about eye color. Maybe the eye color green instead of brown.
Here is the line of code, we are gong to modify. I commented out the original line and added the new one just after it.
if (gender[1].checked == true && crime[6].checked == true && race[0].checked == true && eyes[1].checked == true || eyes[2].checked == true && facialHair[3].checked == true && tatoos[1].checked == true && build[1].checked == true && age[1].checked == true && height[3].checked == true && weight[4].checked == true)
The || means OR. The program should execute the call for profile4 with either brown or green eyes selected.
Now we need to modify the line affected in profile4 code.
if (arrests[index].sex == "female" && arrests[index].race =="Caucasian" && arrests[index].age >=23 && arrests[index].age <=38 && arrests[index].arrestedFor =="auto theft" && arrests[index].height == 68 && arrests[index].weight == 135 && arrests[index].eyeColor == "brown" || arrests[index].eyeColor == "green" && arrests[index].facialHair =="none" && arrests[index].tatoos == "no" && arrests[index].build =="medium")
If you run the program now you will get three suspects. The first two are very close in terms of characteristics, the third one only matches on seven traits out of ten.
Day 7: Selecting fewer characteristics
Another way to widen the search is to choose fewer categories.
Using the same two lines in the previous exercise, modify the lines as to select only gender, crime and race and see the matches you get after this change.
if (gender[1].checked == true && crime[6].checked == true && race[0].checked == true)
if (arrests[index].sex == "female" && arrests[index].race =="Caucasian" && arrests[index].arrestedFor =="auto theft")
Your results should show you all females, auto theft and Caucasian.
Day 8 : Unsolved crime bank robbery.
Click on the tab for unsolved crimes and review the bank robbery in Goleta. Makes some notes about the suspect's description.
Now let's look at the radio buttons to see the value if these were selected.
Index number Characteristice 0 male 0 Caucasian 0 Generation 3 Robbery
The checked property of each characteristic, indicates which buttons in each category were selected.
The following lines added to the decideFunction() will call profile 5
// profile 5 bank robbery in Goleta
if (gender[0].checked == true && crime[3].checked == true & race[0].checked == true)
{
profile5();
return;
}
Open your crookFinder.html program in Notepad++ and paste this information into the editor after the code for profile 4
<p id="profile5">
Add this line below profile 4 p id.
Save your file.
Run the program and determine who might fit this description is our data base file.
Record your answer on the worksheet
Day 9 : Unsolved crime auto theft.
Click on the tab for unsolved crimes and review the auto theft in Goleta. Make some notes about the suspect's description.
Now let's look at the radio buttons to see the value if these were selected.
Index number Characteristice 1 female 3 Asian 2 generation 6 auto theft 2 height 1 weight
The checked property of each characteristic, indicates which buttons in each category were selected.
The following lines added to the decideFunction() call it profile 6.
// profile 6
if (gender[1].checked == true && crime[6].checked == true && race[3].checked == true && age[2].checked == true && height[2].checked == true && weight[1].checked == true)
{
profile6();
return;
}
Add this code to your program in the decideFunction() just after profile 5 code.
Paste the code after the code for profile5.
Add this code after the one for profile 5. <p id="profile6">
Now after saving your program, run it.
Select the idenfifying radio buttons.
Press the search button.
Record the name of suspect or suspects found on your worksheet.
Day 10: unsolved crime, murder.
Check the unsolved crimes page to get the information for profile7.
By now you should be able to add the code for the decideFunction, the profile and the p id section.
Record the names of your suspect/suspects names on your worksheet.
Day 11: unsolved arson of a bar.
Check the unsolved crimes page to get the information for profile8.
By now you should be able to add the code for the decideFunction, profile and the p id section.
Record the names of your suspect/suspects names on your worksheet.
Day 12: Adding suspects to the file
Obviously a file full of suspects cannot remain static. Your job is to keep the file updated on a daily basis.
Each time a person is arrested, a record in the file needs to be created.
The information containing the file is located in the beginning of the crookFindernew.html program.
Load the program into Notepad++ and set up the following records.
Trait Value lastName Valdez firstName Ernesto arrestedFor larceny age 57 race Hispanic height 74 weight 265 eyeColor brown facialHair moustache tatoos no build large
Trait Value lastName Riviera firstName Jaime arrestedFor murder age 37 race Hispanic height 70 weight 235 eyeColor brown facialHair moustache tatoos no build large
Trait Value lastName Adams firstName Rick arrestedFor auto theft age 67 race Caucasian height 63 weight 265 eyeColor brown facialHair fullBeard tatoos yes build large
Each record must comform to the following characteritics:
They must start with a left-facing curly bracket {
All non-numeric values are enclosed in quotation marks.
A comma is used to separate traits
A colon precedes the actual value of the trait.
A right-facing curly brace ends the record, followed by a comma.
There is no ending comma after the last record in the file.
The entry below is the correct format for each record.
{"lastName":"Tanner","firstName":"Patrick","arrestedFor":"auto theft","sex":"male","age":39,"race":"American Indian", "height":75,"weight":302,"eyeColor":"brown","facialHair":"none","tatoos":"yes", "build":"large"},
Add the three records to your program. Save the program using the existing name.
You can save these changes to the local storage if you wish.
Displaying all records
We now need to add some code to the function displayArrests().
document.getElementById("demo").innerHTML = displays each record in the file in the article section (middle column). The information appears in the <p id = "demo"> tag.
arrests[0].lastName + ", " + arrests[0].firstName + ", " + arrests[0].arrestedFor + " sex " + arrests[0].sex + ", age " + arrests[0].age + ", " +" race " + arrests[0].race + ", " + " height " + arrests[0].height + ", weight " + arrests[0].weight + ", eye color " + arrests[0].eyeColor + " , facial hair " + arrests[0].facialHair + " , tatoos " + arrests[0].tatoos + " , build " + arrests[0].build + "<br>" + "<br>" +
On the lines you add, the record numbers are 80, 81 and 82. Substitute these for the 0 record number, which is the first record in the array.
Do not forget, on the last record, there is no + "<br>" + "<br>" + end of the record.
Max limit on function displayArrests().
There are now 82 records in the file. There is a min and max limit on the number control that let's the user select the record number to view.
Display a record <input type=number value=0 max=79 min=0 name="record" id="record" onChange="displayFile()";>
Change max number to 82
Test out your application and display records 80, 81 and 82.
Test out your application by clicking the correct radio buttons for each and doing a search. Did these suspects get displayed a sthe best match for profile 8, 9 and 10?
Help
If your code is not working quite right, click on the link in the footer below to see a finished copy.
