| 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 : /nginx/html/JimMartinson/CST1022/Labs/Lab04/ |
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.
$oldSaveFilename = str_replace('4','3',$saveFilename);
?>
<fieldset><legend><?=$evaluationType?> <?=$evaluationNumber?> Description</legend>
The purpose of this lab is to demonstrate your ability to use JavaScript to move elements.
<?=$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="">Setup files for <?=$evaluationType?> <?=$evaluationNumber?>:
<ol>
<li>Copy your <b><?=$oldSaveFilename?>.html</b> and <b>site.css</b> files from your Lab03 folder into your <?=$evaluationName?> folder.</li>
<li>Rename the <i><?=$oldSaveFilename?>.html</i> file to <b class="copyText"><?=$saveFilename?>.html</b>.</li>
<li class="page">Edit the <b><?=$saveFilename?>.html</b> file:
<ol>
<li>Change all references to Lab 3 into Lab 4.</li>
<li class="page">Remove the current buttons from the #divControl div.</li>
<li class="page">Add a new <b class="copyText">Animate</b> button. e.g. <button type="button">Animate</button></li>
<li>Add a <b class="copyText">Speed</b> select element with the options 1, 5, 10, and 25. e.g.
Speed:
<select id="selSpeed">
<option value="1">1</option>
<option value="5" selected>5</option>
<option value="10">10</option>
<option value="25">25</option>
</select>
</li>
<li>Save the <b><?=$saveFilename?>.html</b> file.</li>
</ol>
</li>
</ol>
</li>
<!-- Step 3 -->
<li class="js">Create a new <b class="copyText">site.js</b> file and place your new js code in there.</li>
<!-- Step 4 -->
<li class="">Add or modify any code (css, html, or javascript) so the <button type="button">Animate</button> button will move the image around the #divWorkArea div.
<br>
It should work like this:
<ul>
<li>The sun should start in the upper left corner of the #divWorkArea div.</li>
<li>When the <button type="button">Animate</button> button is clicked, the sun should move around the #divWorkArea div edges until it returns to the upper left corner.
<span class="note">It should slide over to the upper right corner, then down the right side to the bottom, then back over to the left, and finally back up to the upper left corner.</span>
</li>
<li>The speed at which the sun moves should depend on the value of the Speed select.
<span class="note">Use the value of the select as the number of px to move for the animation.</span>
</li>
</ul>
<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',924); ?>
<img src="images/example.png" width="900" height="630" alt="Lab 3 example">
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 5 -->
<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',
'the_sun.png',
$saveFilename.'.html',
);
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";
?>