| 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/CST1021/Labs/Lab08/ |
Upload File : |
<?
// JimMartinson/CST1021/Labs/Lab08/Lab08.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
$disabled = '';
$disabled = ' disabled'; // Comment this line to enable lab.
require('common/Browser/Browser.phpinc');
?>
<fieldset><legend>Description</legend>
The purpose of this lab is to demonstrate your ability to use css selectors on a web page.
<?=$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">
<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.
<!-- 1 -->
<li class="css">Create an external style sheet named <b class="copyText"><?=$evaluationName?>.css</b>.
<ol>
<li>At the top of the style sheet, set the character set with: <tag class="copyText">@charset <valq>utf-8</valq>;</tag></li>
<li>Add this comment: <comment class="copyText">/* <?=$evaluationType?> <?=$evaluationNumber?> External Style Sheet - <?=$userFullName?> */</comment></li>
<li>Add the following styles (in the order below):
<br><span class="note normal">Do not add any styles not listed below. One point will be deducted for each.
<br>For any of the properties you use below do not use a value of <b>inherit</b>.
The style <b>must</b> also cause a visible effect on the page.</span>
<ol>
<li>A <b>simple element (type) selector</b> for the element <span class="code highELE">h1</span> element that sets the background color to LightGreen (lightgreen).</li>
<li>A <b>simple id selector</b> named <span class="code copyText">description</span> that sets two properties of your choice.</li>
<li>A <b>simple class selector</b> named <span class="code copyText">property</span> that sets two properties of your choice (other than color).</li>
<li>An <b>element class selector</b> for element <span class="code highELE">div</span>, class <span class="code copyText">property</span> that changes one of the properties in step 2.3.3 and adds another property declaration (other than color).</li>
<li>An <b>attribute selector</b> for the <span class="code copyText">target</span> attribute of the <span class="code highELE">a</span> element that sets a property of your choice.</li>
<li>Set the color property of <b>any</b> <span class="code highELE">em</span> element inside of a <span class="code highELE">p</span> element to red.</li>
<li>A <b>pseudo-element selector</b> for the first letter that sets the font size to <b>1.5em</b> and the font weight to <b>bold</b> for all elements.</li>
<li>Set the color property of the <span class="code highELE">h1</span> and <span class="code highELE">div</span> elements to <span class="code copyText">DarkGreen</span> at the same time by combining the selectors.</li>
</ol>
</li>
</ol>
</li>
<!-- 2 -->
<li class="page">Create a web page named <b class="copyText"><?=$evaluationName?>.html</b>.
<br><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>
<br>This code and these elements need to be present:
<ol>
<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>Under the <span class="code highELE">h1</span> element add the following (in the order below):
<ol>
<li>An <span class="code highELE">article</span> element <b>without</b> an id and content that includes an <span class="code highELE">h3</span> heading and other text that includes at least one <span class="code highELE">em</span> element.</li>
<li>An <span class="code highELE">article</span> element using the <span class="code copyText">description</span> id and content that includes <span class="code highELE">h3</span> heading and other text that includes at least one <span class="code highELE">em</span> element.</li>
</li>
<li>A paragraph using the <span class="code copyText">property</span> class with content that includes at least one <span class="code highELE">span</span> element with an <span class="code highELE">em</span> element inside of the <span class="code highELE">span</span>.</li>
<li>A div using the <span class="code copyText">property</span> class with content that includes at least one <span class="code highELE">em</span> element.</li>
<li>Two links to another page, one with a target attribute and one without.</li>
</ol>
<? showBegin(); ?>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="example.png" alt="example">
<? BrowserEnd(); ?>
<? showEnd(); ?>
</li>
</ol>
<span class="note normal"><ins title="Added 12/3/2022">Do not add any additional elements such as <span class="code highELE">p</span>, <span class="code highELE">strong</span>, etc...</ins></span>
</li>
<!-- 3 -->
<li>Turn in your assignment:
<ol type="a">
<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 = '
<b>Total possible points: assignmentPoints</b>
<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>
Deductions for any elements required by the lab that are not present or incorrect:
<br>
-3 for each missing declaration, element, or like group.
<br>
-2 for each incorrect declaration, element, or like group.
<br>
-1 for any additional html elements that have errors.
<br>
<span class="note">Do not add any additional code or styling other than what is required by the lab.
<br>I will deduct points for additional code or styling that are incorrect or cause problems.</span>
';
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";
?>