| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/CST1022/Labs/Lab08/ |
Upload File : |
<?
// JimMartinson/CST1021/Labs/Lab11/Lab11.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
#if ( $_SESSION['userId'] != 1 ) { require('Gradebook/EvaluationSubmission_NOTAVAILABLE.phpinc'); exit; }
require('common/Browser/Browser.phpinc');
$disabled = '';
$disabled = ' disabled';
?>
<fieldset><legend>Description</legend>
The purpose of this lab is to demonstrate your ability to use JavaScript to validate form values.
<?=$gradeNote?>
<? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<fieldset><legend><?=$evaluationType?> Instruction</legend>
<ol id="main" class="count">
<!-- Step 1 -->
<li>Create a folder for this <?=strtolower($evaluationType)?> named <b class="copyText"><?=$evaluationName?></b> and keep all documents used for <?=$evaluationType?> <?=$evaluationNumber?> in that folder.</li>
<!-- Step 2 -->
<li class="css">Create an external style sheet named <b class="copyText">site.css</b>.
<ol>
<li>At the top of the style sheet, set the character set with: <tag>@charset <val>"utf-8"</val>;</tag></li>
<li>Add this comment: <span class="highCOM copyText">/* <?=$evaluationType?> <?=$evaluationNumber?> External Style Sheet - <?=$userFullName?> */</span></li>
<li>This file will contain all CSS code needed to complete this assignment.</li>
</ol>
</li>
<!-- Step 3 -->
<li class="page">
Create a an html document:
<ol>
<li>Name the file <b class="copyText"><?=$saveFilename?>.html</b>.</li>
<li>The page must contain the foundation tags. <a href="#notes" class="smaller">See notes</a></li>
<li>Title the page <span-content class="copyText"><?=$pageTitle?></span-content>.</li>
<li>Create a form with the following:
<ol>
<li>An <span class="highATT">action</span> of <span class="highVAL copyText">https://cst.ridgewater.edu/Tools/FormEcho/?Lab=<?=$courseNumber?>%20Lab%208</span>.</li>
<li>A <span class="highATT">method</span> of <span class="highVAL copyText">post</span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL" copyText>hidden</span> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">student</b></span> and a <span class="highATT">value</span> of <span class="highVAL"><b class="copyText"><?=$_SESSION['userFullName']?></b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">First name</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtFirstname</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Last name</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtLastname</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Address line 1</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtAddress1</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Address line 2</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtAddress2</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">City</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtCity</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">State</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtState</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">ZIP Code</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtZIP</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Email address</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtEmail</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Phone number</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtPhone</b></span>.</li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Date of birth</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtDOB</b></span>.</li>
<li>A set of four checkboxes for <b class="copyText">What are you hobbies?</b> with <span class="highATT">name</span>s, <span class="highATT">value</span>s and <span class="highEL">label</span>s of:
<ol>
<li><span class="copyText">chkGard</span>, <span class="copyText">Gardening</span>, <span class="copyText">Gardening</span></li>
<li><span class="copyText">chkProg</span>, <span class="copyText">Programming</span>, <span class="copyText">Programming</span></li>
<li><span class="copyText">chkRead</span>, <span class="copyText">Reading</span>, <span class="copyText">Reading</span></li>
<li><span class="copyText">chkSpor</span>, <span class="copyText">Sports</span>, <span class="copyText">Sports</span></li>
<li>An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">text</span> for <b class="copyText">Other</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">txtOtherHobby</b></span>.</li>
</ol>
<span class="note">You should be able to click on the label to check the checkbox.</span>
</li>
<li>A set of radio buttons for <b class="copyText">May we call you for a short customer satisfaction survey?</b> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">radSurvey</b></span> with <span class="highATT">value</span>s and <span class="highEL">label</span>s of:
<ol>
<li><span class="copyText">Yes</span>, <span class="copyText">Yes</span></li>
<li><span class="copyText">No</span>, <span class="copyText">No</span></li>
</ol>
<span class="note">You should be able to click on the label to check the radio button.</span>
</li>
<li>
An <span class="highELE">input</span> of <span class="highATT">type</span> <span class="highVAL copyText">submit</span> <span class="highATT">name</span>d <span class="highVAL"><b class="copyText">btnSubmit</b></span> with a <span class="highATT">value</span> of <span class="copyText">Submit</span>.
</li>
</ol>
</li>
</ol>
<span class="note normal">All css declarations must be in the external style sheet. No internal or inline styles may be used in the html.</span>
</li>
<!-- Step 4 -->
<li class="js">
Create a JavaScript file.
<ol>
<li>Name the file <b class="copyText">site.js</b>.</li>
<li>Begin it with the <b class="code copyText">"use strict";</b> line.</li>
<li>Add a comment line: <b class="code copyText">// Main js file for <?=$userFullName?> <?=$evaluationType?> <?=$evaluationNumber?>.</b></li>
</ol>
</li>
<!-- Step 5 -->
<li>
Add or modify any code (css, html, or javascript) so the form values are validated by the following rules:
<ol>
<li>First name - Verify first character is a capital letter and that there are 1 to 24 characters (may include spaces and special characters.</li>
<li>Last name - Verify first character is a capital letter and that there are 1 to 64 characters (may include spaces and special characters.</li>
<li>Address Line 1 - Verify that there are 1 to 80 characters which may include spaces and special characters.</li>
<li>Address Line 2 - Verify that there are 0 to 24 characters which may include spaces and special characters.</li>
<li>City - Verify first character is a capital letter and that there are 1 to 20 characters (may include spaces and special characters.</li>
<li>State - Verify that it is capitalized two letter state abbreviations as defined by the US Post Office. Here are the state codes:
<br>
<span class="copyText" style="font-size: .8em;" title="state abbreviations">['AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FM', 'FL', 'GA', 'GU', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'MP', 'OH', 'OK', 'OR', 'PW', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VI', 'VA', 'WA', 'WV', 'WI', 'WY']</span>
</li>
<li>ZIP Code - Verify that it is either a 5 digit ZIP code or a 5+4 ZIP code. Both types of ZIP codes should pass.</li>
<li>Phone number - Verify that it is a legal US phone number. Allow muliple entering formats so that the user could enter <span class="nowrap">(320) 555-1212</span>, <span class="nowrap">320-555-1212</span>, <span class="nowrap">320.555.1212</span>, or even <span class="nowrap">3205551212</span>.</li>
<li>Email address - Verify that it is a legal email address. You only need to ensure that it conforms to the format of a valid email address. You do not need to ensure that the domain exists or that the username is valid for that domain.</li>
<li>Date of birth - Verify that the year born is from 1900-01-01 to <?=date("Y")?>-01-01 inclusive. Allow multiple formats so that the user could enter mm/dd/yyyy or yyyy-mm-dd.</li>
<li>What are you hobbies? - That at least one hobby has been selected or an entry has been made in the <span class="highVAL">txtOtherHobby</span> field.</li>
<li>May we call you for a short customer satisfaction survey? - Ensure that either Yes or No was selected.</li>
<li>The form does not submit unless all form entries are valid.</li>
<li>The user is notified in a clear manner when a required field has not been filled or there is an error in the format of the entry.</li>
</ol>
<span class="note normal">You may style your page any way you want. It does not need to look like the examples.</span>
<br>
<div id="show_page_empty" class="inline"><a href="#" onClick="divHide('show_page_empty'); divShow('hide_page_empty'); return false;">See an example empty form:</a></div>
<div id="hide_page_empty" class="hidden"><a href="#" onClick="divHide('hide_page_empty'); divShowInline('show_page_empty'); return false;">Hide the example empty form.</a>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/example_empty.png" alt="example empty form">
<? BrowserEnd(); ?>
</div>
<br>
<div id="show_page_error" class="inline"><a href="#" onClick="divHide('show_page_error'); divShow('hide_page_error'); return false;">See an example form with errors:</a></div>
<div id="hide_page_error" class="hidden"><a href="#" onClick="divHide('hide_page_error'); divShowInline('show_page_error'); return false;">Hide the example form with errors.</a>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/example_error.png" alt="example formwith errors">
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 6 -->
<li>Demonstrate the web page.
<ol>
<li>Open a browser and load the <b class="copyText"><?=$evaluationName?>.html</b> page.</li>
<li>Fill in or check form elements.</li>
<li><b class="info">Take a screenshot</b> and save it in the <b><?=$evaluationName?></b> directory as <b class="copyText" style="white-space:nowrap;"><?=$saveFilename?>_form.png</b>.
<br>
<div id="show_page_filled" class="inline"><a href="#" onClick="divHide('show_page_filled'); divShow('hide_page_filled'); return false;">See an example filled out form:</a></div>
<div id="hide_page_filled" class="hidden"><a href="#" onClick="divHide('hide_page_filled'); divShowInline('show_page_filled'); return false;">Hide the example filled out form.</a>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/example_filled.png" alt="example filled form">
<? BrowserEnd(); ?>
</div>
</li>
<li>Submit the form.</li>
<li><b class="info">Take a screenshot</b> and save it in the <b><?=$evaluationName?></b> directory as <b class="copyText" style="white-space:nowrap;"><?=$saveFilename?>_submit.png</b>.
<? /**/ ?>
<br>
<div id="show_page_result" class="inline"><a href="#" onClick="divHide('show_page_result'); divShow('hide_page_result'); return false;">See an example submitted form result:</a></div>
<div id="hide_page_result" class="hidden"><a href="#" onClick="divHide('hide_page_result'); divShowInline('show_page_result'); return false;">Hide the example submitted form result.</a>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/example_result.png" alt="example result">
<? BrowserEnd(); ?>
</div>
<? /**/ ?>
</li>
</ol>
</li>
<li>Turn in your assignment:
<ol type="a">
<li>Ensure the following files are in your <b><?=$evaluationName?></b> folder:<?
$fileList = array(
'site.css',
'site.js',
$saveFilename.'.html',
$saveFilename.'_form.png',
$saveFilename.'_submit.png',
);
natcasesort($fileList);
foreach ($fileList as $fileName) {
?>
<br><?=$fileName?>
<?
}
?>
</li>
<li>Zip up your <b><?=$evaluationName?></b> folder into a file named <b class="copyText"><?=$uploadFilename?></b>.</li>
<li>Browse and select your <b><?=$uploadFilename?></b> file: <input type="file" name="fileUpload" id="inpFileUpload"<?=$disabled?>><div id="divFileploadError"></div></li>
<li>Then <input type="submit" name="f_subtask" id="inpSubmit" value="Submit"<?=$disabled?>> for grading.</li>
</ol>
</li>
</ol><? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<script src="/js/colorCode.js"></script>
<?
$PartialGradingCriteria = '
Deductions for any elements required by the lab that are not present or incorrect:
<br>
-assignmentPoints if the <a href="https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input">CSS Validation Service</a> or <a href="https://validator.w3.org/#validate_by_input">Markup Validation Service</a> report errors.
No further grading will be done.<br>
-3 for each form element that is not validated correctly.
<br>
-3 for each missing element or like group.
<br>
-2 for each incorrect element or like group.
<br>
-1 for any additional html elements or css rules that have errors.
';
require('../LabNotes.phpinc');
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
#require('../../ReferencesResources.phpinc');
#require($Instructor['Path'].'/ContactInformation.phpinc');
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>