Unit 2A Questions

HTML

<title>CSCI E-3 Unit 2 Project:  Part A</title>

<body class="hw">
    <div class="container">
      <h1>CSCI E-3 Unit 2 Project: Part A</h1>
      <p class="whatlearn">This is worth half of the total point value for the
        Unit 2 Project. There will be a Unit 2 Project: Part B as well, released in
        two weeks. Both Part A and Part B are due on the same date, the
        night before Unit 3 begins. We will cover the material required to do
        this assignment over the coming weeks, well in advance of when it is
        due. </p>
      <h3 class="whatlearn">What you're learning:</h3>
      <p>How to handle the most basic information in a computer program: numbers
        and strings, arrays, and conditionals.<br>
      </p>
      <ol>
        <li>Math: Basic mathematical calculations underlie nearly everything
          that you'll do with a computer program: counting photos to layout on
          a page, calculating prices in a shopping cart, positioning a ball on a
          game screen, or figuring the length of the bar on a graph. <br>
        </li>
        <li>String Handling: manipulating text</li>
        <li>Arrays</li>
        <li>Conditionals, looping, and functions are some of the most basic
          structures in computer programming. These also underlie just about
          everything you'll do in a program.&nbsp; </li>
      </ol>
      <h3>What you need to do:</h3>
      <ol>
        <ol>
          <li>Follow the example to create your own mathematical converter (5 points)</li>
          <li>Place an X in an automatically-chosen random location within a box
            (5 points)</li>
          <li>Use indexOf() and substr() or slice() to divide your name into two
            strings&mdash;firstname and lastname (10 points)</li>
          <li>Provide a feature in this page that counts the words input into
            the input box below (15 points)</li>
          <li>Write a function that will calculate the sum of the first 12 even
 ...

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
	padding: 10px;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

/* CSCI E-3 Introduction to Web Programming Using Javascript
 * Spring 2014
 *
 * Homework Unit #2
 *
 *
 */


 /********************************************************************
  *
  * Setup for Image processing by way of arrays
  *
  * THIS FILE SETS UP THE FUNCTIONS YOU'LL BE WRITING IN THE
  * hw2ArrayImageProcessing.js FILE.  YOU DON'T NEED TO DO ANYTHING
  * IN THIS FILE AND SHOULD NOT MAKE ANY CHANGES HERE.
  *
  * YOU AREN'T EXPECTED TO UNDERSTAND THIS CODE,
  * THOUGH BY WEEK 14 WE WILL HAVE COVERED A LOT OF THIS. 
  *
  ********************************************************************/

 /*
 * We'll grab the canvas elements and the graphics contexts here
 *
 */
var canvases = [];
var contexts = [];
var newImageData = [];

/* there are separate canvases for each of the images you'll create:
 *    - a blue version,
 *    - a reversed version,
 *    - a transparent version,
 *    - a version that composites (adds) two images
 *
 *    We're using an array - canvases[] to store these
 *    */
canvases['orig'] = document.getElementById('originalCanvas');
canvases['blue'] = document.getElementById('blueCanvas');
canvases['reverse'] = document.getElementById('reverseCanvas');
canvases['trans'] = document.getElementById('transparentCanvas');
canvases['composite'] = document.getElementById('compositeCanvas');
canvases['composite_newimage'] = document.getElementById('compositeNewImageCanvas');


/*
 * Now get the image context for each canvas, and create a new ImageData object with the correct width and height
 */
for (var key in canvases){
// for each of the five canvases
               if(canvases.hasOwnProperty(key)) { // should not be necessary, but just in case

                              //set the canvas size
                              canvases[key].width = 150;
                              canvases[key].height = 100;

                              //make an image context for the canvas
                              contexts[key] =...