| 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/Lab06/ |
Upload File : |
<?
// JimMartinson/CST1022/Labs/Lab03/Lab03.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
#if ( $_SESSION['userId'] != 1 ) { require('Gradebook/EvaluationSubmission_NOTAVAILABLE.phpinc'); exit; }
$disabled = '';
$disabled = ' disabled'; // Comment this line to enable lab.
?>
<fieldset><legend><?=$evaluationType?> <?=$evaluationNumber?> Description</legend>
The purpose of this lab is to demonstrate your ability to use JavaScript to manage cookies and local storage.
<?=$gradeNote?>
<? if ( $disabled ) { ?><div class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</div><? } ?>
</fieldset>
<fieldset><legend><?=$evaluationType?> <?=$evaluationNumber?> 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="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>Add an <span class="highELE">h2</span> element with the content <b class="copyText">Cookies</b></li>
<li>Add a <span class="highELE">p</span> (paragraph) element with the <span class="highATT">id</span> set to <span class="highVAL copyText">theCookies</span> with no content.</li>
<li>Add a <span class="highEL copyText"><script></span> element that calls the <b class="code copyText">_Initialize()</b> function</li>
</ol>
</li>
<!-- Step 3 -->
<li class="css">Create a css file.
<ol>
<li>Name the file <b class="copyText">site.css</b>.</li>
<li>Begin it with the <b class="code copyText">@charset "utf-8";</b> line.</li>
<li>Add a comment line: <b class="code copyText">/* Main css file for <?=$userFullName?> <?=$evaluationType?> <?=$evaluationNumber?>. */</b></li>
<li>Style the <span class="highELE">h1</span> element for a <b class="highCSP copyText">background-color</b> of <b class="highCSV copyText">silver</b> and <b class="highCSP copyText">text-align</b> of <b class="highCSV copyText">center</b></li>
<li>Save the site.css file.</li>
</ol>
</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>
<li>Place the following functions into your <b>site.js</b> file:
<pre class="code copyText">function _Initialize() {
}
/**
* Format a Javascript Date in the format h:mm:ss[am|pm] day, mon, dd, yyyy.
*
* @param {date} date - A Javascript Date object.
*
* @returns the formatted Date.
*/
function TimeDateFormat(date) {
let dateParts = date.toString().split(' ');
let hour, minute, second, ampm;
[hour, minute, second] = dateParts[4].split(':');
hour = parseInt(hour);
if (hour >= 12 ) {
ampm = 'pm';
if (hour > 12 ) {
hour -= 12;
}
} else {
ampm = 'am';
if (hour == 0 ) {
hour = 12;
}
}
let returnDateTimeString = `${hour}:${minute}:${second}${ampm} on ${dateParts[0]}, ${dateParts[1]} ${dateParts[2]} ${dateParts[3]}`;
return returnDateTimeString;
}
</pre>
</li>
<li>Save the site.js file.</li>
</ol>
</li>
<!-- Step 5 -->
<li class="">Add or modify any code (css, html, or javascript) so the page will do the following:
<ol>
<li>Create a cookie named <b class="copyText">user</b> that expires in 1 minute with a value of your full name.</li>
<li>Create a cookie named <b class="copyText">thirty</b> that expires in 30 seconds with a value of <b class="code copyText">`expires: ${TimeDateFormat(date)}`</b>.</li>
<li>Create a cookie named <b class="copyText">daylong</b> that expires in 1 day with a value of <b class="code copyText">`expires: ${TimeDateFormat(date)}`</b>.</li>
<li>
Create a function that reads the cookies and adds content to the <span class="highVAL">theCookies</span> paragraph:
<ol>
<li>A line that shows that the cookies have been read in the format <b>`Read cookies at ${TimeDateFormat(date)}:`</b> in the text color <span class="highCSV">green</span>.</li>
<li>All cookies read in the format <b>name=value</b>, each on a new line.</li>
</ol>
</li>
<li>Call the above function, and continue calling it every 30 seconds.</li>
</ol>
</li>
<!-- Step 6 -->
<li>Load your <?=$saveFilename?>.html page and wait until there is only one cookie left.
<br><b class="info">Take a screenshot of the page</b> and save the image as <b class="copyText"><?=$saveFilename?>.png</b> in your <b><?=$evaluationName?></b> directory.
<br>Make sure that the address bar is visible in your browser before saving the image.
<br>
<div id="show_page" class="inline"><a href="#" onClick="divHide('show_page'); divShow('hide_page'); return false;">See an example:</a></div>
<div id="hide_page" class="hidden"><a href="#" onClick="divHide('hide_page'); divShowInline('show_page'); return false;">Hide the example.</a>
<? include('common/Browser/Browser.phpinc'); BrowserBegin($pageTitle,'file:///'.$courseNumber.'/'.$evaluationName.'/'.$saveFilename.'.html',600); ?>
<div style="margin: 5px;">
<h1 style="background-color: silver; text-align: center;"><?=$evaluationType?> <?=$evaluationNumber?> - <?=$userFullName?></h1>
<?
$dateTime = new DateTime();
$dateTime->add(new DateInterval('PT30S'));
$thirty1 = $dateTime->format('g:i:sa');
$thirty2 = $dateTime->format('D, M j Y');
$thirty = $thirty1.' on '.$thirty2;
?>
<?
$dateTime = new DateTime();
$dateTime->add(new DateInterval('PT86400S'));
$daylong1 = $dateTime->format('g:i:sa');
$daylong2 = $dateTime->format('D, M j Y');
$daylong = $daylong1.' on '.$daylong2;
?>
<h2>Cookies</h2>
<p>
<? $dateTime1 = $dateTime->format('g:i:sa'); $dateTime2 = $dateTime->format('D, M j Y'); $dateText = $dateTime1.' on '.$dateTime2; ?>
<span style="color: green;">Read cookies at <?=$dateText?>:</span><br>
user=<?=$userFullName?><br>
thirty=expires: <?=$thirty?><br>
daylong=expires: <?=$daylong?><br>
<? $dateTime->add(new DateInterval('PT30S')); $dateTime1 = $dateTime->format('g:i:sa'); $dateTime2 = $dateTime->format('D, M j Y'); $dateText = $dateTime1.' on '.$dateTime2; ?>
<span style="color: green;">Read cookies at <?=$dateText?>:</span><br>
user=<?=$userFullName?><br>
daylong=expires: <?=$daylong?><br>
<? $dateTime->add(new DateInterval('PT30S')); $dateTime1 = $dateTime->format('g:i:sa'); $dateTime2 = $dateTime->format('D, M j Y'); $dateText = $dateTime1.' on '.$dateTime2; ?>
<span style="color: green;">Read cookies at <?=$dateText?>:</span><br>
daylong=expires: <?=$daylong?><br>
</p>
</div>
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 7 -->
<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.'.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 ) { ?><div class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</div><? } ?>
</fieldset>
<? require('../LabNotes.phpinc'); ?>
<script src="/js/colorCode.js"></script>
<?
$PartialGradingCriteria = '
-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.
<table>
<tr>
<th>Criteria</th>
<th class="right">Points</th>
</tr>
<tr>
<td>Correct HTML elements, including: <span class="highELE">!DOCTYPE</span>, <span class="highELE">html</span>, <span class="highELE">head</span> (with required elements), <span class="highELE">body</span>, and <span class="highELE">div</span>s. This includes having the code well formatted.</td>
<td class="number">3</td>
</tr>
<tr>
<td>Correct site.css file.</td>
<td class="number">1</td>
</tr>
<tr>
<td>Correct site.js file.</td>
<td class="number">1</td>
</tr>
<tr>
<th class="right">Total:</th>
<th class="number">assignmentPoints</th>
</tr>
</table>
';
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
#require('../../ReferencesResources.phpinc');
#require($Instructor['Path'].'/ContactInformation.phpinc');
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>