| 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/_Archive/Lab13/ |
Upload File : |
<?
// JimMartinson/MMDT1021/Labs/Lab13/Lab13.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
$ShowSpanCountBefore = false;
#$ShowSpanCountBefore = true;
?>
<style type="text/css">
b { white-space:nowrap; }
</style>
<?
?>
<a name="Lab"></a>
<fieldset><legend>Description</legend>
Demonstrate your ability to
<br>
<?=$gradeNote?>
</fieldset>
<fieldset><legend><?=$evaluationType?> Instruction</legend>
<ol id="main" class="count">
<li>Create a folder for this <?=strtolower($evaluationType)?> named <b><?=$evaluationName?></b> and keep all documents used for <?=$evaluationType?> <?=$evaluationNumber?> in that folder.</li>
<li>Create an HTML document.
<ol>
<li>Name the file <b><?=$evaluationName?>.html</b>. This file should contain all HTML code needed to complete the assignment.</li>
<li>The page must contain the foundation tags. <a href="#notes" class="smaller">See notes</a></li>
<li>Place the following in the <span class="highELE">head</span> of your page:
<ol>
<li>Add a <span class="highELE">title</span> of <inn><?=$evaluationType?> <?=$evaluationNumber?> <?=$evaluationTitle?> - <?=userName($userId)?></inn>.</li>
<li>Add the meta character set tag.</li>
<li>Add a link stylesheet tag with a <span class="highATT">href</span> of <span class="highVAL"><?=$evaluationName?>.css</span></li>
<li>Add a <span class="highELE">script</span> tag with a <span class="highATT">src</span> of <span class="highVAL"><?=$evaluationName?>.js</span></li>
</ol>
</li>
<li>Create form that has the following elements:
<ol>
<li>No <span class="highATT">action</span> or <span class="highATT">method</span> attributes.</li>
<li>An <span class="highELE">input</span> <span class="highVAL">text</span> field <span class="highATT">name</span>d <span class="highVAL">StarID</span>.</li>
<li>A <span class="highATT">submit</span> button that calls the <b>getJSON()</b> function instead of submitting the form.</li>
</ol>
span></li>
</ol>
</li>
<li>Create a CSS document.
<ol>
<li>Name the file <b><?=$evaluationName?>.css</b>. This file should contain all CSS code needed to complete the assignment.</li>
</ol>
</li>
<li>Create a JavaScript document.
<ol>
<li>Name the file <b><?=$evaluationName?>.js</b>. This file should contain all JavaScript code needed to complete the assignment.</li>
<li>Create a <b>getJSON()</b> function that does the following:
<ol>
<li>Get the value from the <span class="highVAL">StarID</span> field and store it in a variable called <b>jsdata</b>.</li>
<li>Uses an AJAX XMLHttpRequest to sent the value to <b>http://cst.ridgewater.edu/Tools/AJAX_JSON/?StarID=<span class="highVAL">StarIDvalue</span></b> where <span class="highVAL">StarIDvalue</span> is the <span class="highVAL">StarID</span>'s value.</li>
<li>Displays the data returned on the HTML page.</li>
<li>I wrote a function that will display an object in the console.log called <b>clog()</b>. Call the function using <b>clog('jsdata',jsdata,'');</b>
<br>Here is the function code to copy/paste into your <b><?=$evaluationName?>.js</b> file:
<pre class="code">// function clog(name,obj,i)
// Display object contents in the console.
// name = The name to display in the log.
// obj = The object to display info about.
// i = The index of the object to display.
// If i is undefined only the first level indexes are displayed.
// If i is '' then all object levels are displayed.
// If i is an index of the object then that index is displayed.
function clog(name,obj,i) {
var c;
var j;
var cn = name+': {';
var prefix = ' ';
if ( i != undefined ) {
if ( i != '' ) {
for ( j in obj[i] ) { if (!obj[i].hasOwnProperty(j)){continue;}
if ( typeof obj[i][j] != 'number' ) { c = "'"; } else { c = ''; }
cn += prefix+j+':'+c+obj[i][j]+c;
prefix = ', ';
}
} else {
for ( j in obj ) { if (!obj.hasOwnProperty(j)){continue;}
if ( typeof obj[j] != 'number' ) { c = "'"; } else { c = ''; }
cn += prefix+j+':'+c+obj[j]+c;
prefix = ', ';
}
}
cn += ' }';
console.log(cn);
} else {
for ( j in obj ) { if (!obj.hasOwnProperty(j)){continue;}
if ( typeof obj[j] != 'number' ) { c = "'"; } else { c = ''; }
cn += prefix+c+j+c;
prefix = ', ';
}
cn += ' }';
console.info(cn);
}
}</pre>
</li>
</ol>
</li>
</ol>
</li>
<li>Demonstrate the web page.
<ol>
<li>Open a browser (use Chrome of Firefox) and load the <b><?=$evaluationName?>.html</b> page.</li>
<li>Display the console log (Usually</li>
<li>Enter your StarId into the form</li>
<li><b class="info">Take a screenshot</b> and save it in the <b><?=$evaluationName?></b> directory as <b style="white-space:nowrap;"><?=$courseNumber?>-<?=$evaluationName?>-<?=$userFileName?>.png</b>.
<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($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file://'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="example.png" alt="example">
<? BrowserEnd(); ?>
</div>
</li>
</ol>
</li>
<li>Turn in your assignment:
<ol>
<li>Zip up your <b><?=$evaluationName?></b> folder into a file named <b><?=$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"> for grading.</li>
</ol>
</li>
</ol>
<?=$gradeNote?>
<fieldset><legend>NOTES:</legend>
<b>We will be using the following in every html page throughout this class:</b>
<ul>
<li>The HTML 5 DOCTYPE: <span class="highELE"><!DOCTYPE html></span>.</li>
<li>An html tag with <span class="highATT">lang</span> attribute: <span class="highELE"><html <span class="highATT">lang="<span class="highVAL">en</span>"</span>></span>.</li>
<li>A <span class="highELE">title</span> tag.</li>
<li>The meta character set tag <span class="highELE"><meta <span class="highATT">charset="<span class="highVAL">UTF-8</span>"</span>></span>.</li>
</ul>
</fieldset>
<script src="/js/colorCode.js"></script>
<?
$PartialGradingCriteria = '
<table>
<tr>
<td></td>
<td class="right"><b>Points</b></td>
</tr>
<tr>
<td>HTML components correct.</td>
<td class="number">5</td>
</tr>
<tr>
<td>Javascript code correct.</td>
<td class="number">10</td>
</tr>
<tr>
<th class="right">Total:</th>
<th class="bold number">assignmentPoints</th>
</tr>
</table>
';
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>