Final Exam Grading 10su

From CSE190M-Admin

Contents 1 Part 1A: Thursday in Lab 1.1 Question 1 (HTML/CSS Tracing) 1.2 Question 2 (HTML/CSS Coding) 1.3 Question 3 (JS/DOM) 2 Part 1B: Thursday in Lab 3 Part 2: Friday in Lecture

[edit] Part 1A: Thursday in Lab

• Media:final-10su-part1a-thu.odt | Media:final-10su-part1a-thu.pdf

[edit] Question 1 (HTML/CSS Tracing)

15 points total

• 2 block vs. inline: hello/goodbye words stack vertically, and happy/sad words stack horizontally

• 2 background colors: hello/goodbye div, Sunday div (and not elsewhere)
• 1 italic em text: Happy, Sad, SUNDAY (and not elsewhere)
• 1 underline: SUNDAY is underlined (and not elsewhere)

• 2 borders: dashed on happy/sad div; dotted on all the bottom floating divs (and not elsewhere)
• 1 padding on all divs (with background/border inside it)
• 1 margins: all bottom divs have 1em margin on all sides (outside the border)

• 6 floating (bottom section divs)
  • 2 all divs float to the proper sides
    • the Sunday div doesn't need to be lower than the others; that's just an artifact of the default margin on the <p> tag in it.
  • 2 correct L/R order (Sunday is left of Mon/Tue/Wed)
  • 2 each div's width is 5em (approximate); words stack vertically because of narrow width

• -1 point each for any other minor misc. stuff they do wrong that isn't listed above

.

[edit] Question 2 (HTML/CSS Coding)

HTML:

<div id="main">
    <img src="brunologo.png" alt="logo" />

    <div id="articles">
        <ul id="links">
            <li><a href="home.html">HOME</a></li>
            <li><a href="vids/">VIDEOS</a></li>
            <li><a href="shirt.html">FUNNY SHIRTS</a></li>
            <li><a href="trailer.html">BRUNO MOVIE TRAILER</a></li> 
            <li><a href="photos/">PHOTOS</a></li>
            <li><a href="http/:/dvdshop.com/">DVD SHOP</a></li>
        </ul>

        <div class="story">
            <img src="brunouniversal.jpg" alt="Bruno at Universal" />
            <h2>Universal Responds to Lawsuit</h2>
            <p>Movie studio Universal Pictures on Friday responded to a ...</p>
        </div>

        <div class="story">
            <img src="paulaabdul.jpg" alt="Paula Abdul" />
            <h2>Paula Abdul Talks About Being in Bruno</h2>
            <p>Paula Abdul accepted an invite last year to receive an ...</p>
        </div>

        <div class="story">
            <img src="eminem.jpg" alt="Eminem" />
            <h2>Eminem Admits He Was Involved</h2>
            <p>Three days after storming out of the MTV awards, Eminem ...</p>
        </div>
    </div>
</div>

CSS:

body {                                    #links li {
    background-color: #0088EE;		      display: inline;
    font-family: sans-serif;		      font-weight: bold;
}					      padding-left: 1em;
					      padding-right: 1em;
#main {					  }
    width: 85%;
    margin-left: auto;			  .story {
    margin-right: auto;			      clear: right;
}					      overflow: hidden;
					      margin: 1em;
#articles {				  }
    background-color: white;
    border: 3px solid #005588;		  .story img {
}					      float: right;
					  }
#links {
    list-style-type: none;
    text-align: center;
}

15 points total

• 2 colors
  • body - background-color #0088EE
  • #articles - background-color white

• 2 fonts
  • body - font-family sans-serif
  • #links - font-weight bold (strong tags in HTML are OK)

• 3 #links
  • 2 display inline
  • 1 padding 1em on both L/R sides

• 5 divs/spans
  • 1 #articles div to hold the set of all stories (background-color white, border #005588)
  • 2 #main div to hold the stories-div plus header image (width 85%, auto margins; NOT text-align center)
  • 2 .story div for each individual story (overflow hidden; margin 1em)

• 3 images, floating (1 attempt, 2 correct)
  • images float to right (NOT abs/fixed position)
  • story div clears the float

• special deductions
  • -2 if they try to add any other tags/attributes (id, class, etc.)
  • -2 class/id confusion in their CSS syntax (# vs .)

.

[edit] Question 3 (JS/DOM)

window.onload = function() {
    $("compute").observe("click", computeClick);
    $("clear").observe("click", clearClick);
};

function computeClick() {
    var earned = 0;
    var earnedInputs = $$(".earned");
    for (var i = 0; i < earnedInputs.length; i++) {
        earned += parseInt(earnedInputs[i].value);
    }
    
    var max = 0;
    var maxInputs = $$(".max");
    for (var i = 0; i < maxInputs.length; i++) {
        max += parseInt(maxInputs[i].value);
    }
    
    var percent = Math.round(100 * earned / max);
    if ($("curve").checked) {
        percent = Math.min(100, percent + 5);
    }
    
    var newDiv = $(document.createElement("div"));
    newDiv.innerHTML = percent;
    if (percent >= 60) {
        newDiv.className = "pass";
    } else {
        newDiv.className = "fail";
    }
    $("resultsarea").appendChild(newDiv);
}

function clearClick() {
    var inputs = $$("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = "";
    }
}

15 points total

• 2 window onload (1 attempt, 1 perfect) - attaches onclick handlers

• 4 computing the percentage
  • 2 $$ and cumulative sums properly
  • 2 parseInt and Math.round

• 3 curve (1 attempt; 2 perfect)
  • must detect properly (box .checked); must cap at 100 points

• 4 div for each percentage
  • 2 creates and puts proper text into it (percentage); puts onto page in proper place (appendChild)
  • 2 CSS class (pass/fail)

• 2 clear works perfectly

.

[edit] Part 1B: Thursday in Lab

(coming soon)

.

[edit] Part 2: Friday in Lecture

(coming soon)

.