| 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/Lab03/ |
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('3','1',$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>, <b>site.css</b>, and <b>site.js</b> files from your Lab01 folder into your <?=$evaluationName?> folder.</li>
<li>Rename the <i><?=$oldSaveFilename?>.html</i> file to <b class="copyText"><?=$saveFilename?>.html</b>.</li>
<li class="css">Edit the <b>site.css</b> file:
<ol>
<li>Change all occurances of divArea to <b class="copyText">divWorkArea</b></li>
<li>Set the background color of the divWorkArea to black.</li>
<li>Save the <b>site.css</b> file.</li>
</ol>
</li>
<li class="js">Edit the <b>site.js</b> file:
<ol>
<li>Change all occurances of the variable e_divControl to <b class="copyText">eControl</b></li>
<li>Change all occurances of divArea to <b class="copyText">divWorkArea</b></li>
<li>Save the <b>site.js</b> file.</li>
</ol>
</li>
<li class="page">Edit the <b><?=$saveFilename?>.html</b> file:
<ol>
<li>Change all references to Lab 1 into Lab 3.</li>
<li>Change all occurances of divArea to <b class="copyText">divWorkArea</b></li>
<li class="page">Add some buttons to your #divControl div:
<ol>
<li>Add an up botton with the <span class="copyText">▲</span> symbol.</li>
<li>Add a left botton with the <span class="copyText">⯇</span> symbol.</li>
<li>Add a center botton with the <span class="copyText">■</span> symbol.</li>
<li>Add a right botton with the <span class="copyText">⯈</span> symbol.</li>
<li>Add a down botton with the <span class="copyText">▼</span> symbol.</li>
<li>Center the buttons and display them like:
<div id="divControl" style="border: 1px solid blue; display: block; height: 100px; position: relative; width: 150px;">
<div id="divButtons" style="display: table-cell; position: absolute; text-align: center;">
<button>▲</button>
<br>
<button>⯇</button>
<button>■</button>
<button>⯈</button>
<br>
<button>▼</button>
</div>
</div>
<script>
let eButtons = document.getElementById('divButtons');
let buttonsWidth = eButtons.offsetWidth;
eButtons.style.left = ( (150 - buttonsWidth) / 2 ) + 'px';
let buttonsHeight = eButtons.offsetHeight;
eButtons.style.top = ( (100 - buttonsHeight) / 2 ) + 'px';
</script>
</li>
</ol>
</li>
<li class="page">Add the sun image to your <?=$saveFilename?></b>.html file:
<ol>
<li>Download and save the <a href="images/the_sun.png" alt="The sun">the_sun.png</a> image into your <?=$evaluationName?> folder.</li>
<li>Open the <b><?=$saveFilename?>.html</b> file in an editor.</li>
<li>Add the image inside of your #divWorkArea div. <span class="note">Don't forget to set an alt, height, and width for the image.</span></li>
<li>Style the image so it displays in the middle of the #divWorkArea div both horizontally and vertically. <span class="note">I used js to do this step.</span></li>
</ol>
</li>
<li>Save the <b><?=$saveFilename?>.html</b> file.</li>
</ol>
</li>
</ol>
</li>
<!-- Step 3 -->
<li class="">Add or modify any code (css, html, or javascript) so the buttons can move the image in the #divWorkArea div.
<br>
It should work like this:
<ul>
<li>The <button>▲</button> button should move the image up 50 px.</li>
<li>The <button>⯈</button> button should move the image to the right 50 px.</li>
<li>The <button>▼</button> button should move the image down 50 px.</li>
<li>The <button>⯇</button> button should move the image to the left 50 px.</li>
<li>The <button>■</button> button should put the image back to the middle of the #divWorkArea div both horizontally and vertically.</li>
<li>If the image is moved outside of the #divWorkArea div, you can do one of two things (your choice):
<ul>
<li>Stop the image from moving outside at all.</li>
<li>Ensure the part of the image that is outside is not visible.</li>
</ul>
</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="638" alt="Lab 3 example">
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 4 -->
<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";
?>