Midterm Grading

From CSE190M-Admin

[edit] Question 1 (HTML/CSS Interpretation)

30 points total

• 9 img/text section
  • 1 image (exists, in roughly right place, etc.)
  • 1 vertical alignment of text next to image
  • 3 textbox appearance: border, Geneva text inside, left-aligned text, size, appears on same line as img/text
    • (2 attempt, 1 correct)
  • 2 "mine is cuter!" border/underline
  • 2 dotted border on top and bottom

• 12 floating paragraphs
  • 2 does float on right
  • 2 L/R positioning of the two (not vertically stacked; L/R order doesn't matter)
  • 4 vertical positioning in overall page (not at very top, h2 clear, etc.)
    • -2 if they just don't clear on h2
  • 2 inline styling (e.g. center text alignment)
  • 2 border

• 3 bottom h2
  • 2 dotted border on bottom h2
  • 1 other (alignment, size, etc.)

• 6 General
  • 2 borders on block elements (h1, h2, div, p) extend to edges of page
  • 2 doesn't mistakenly apply style rules where they shouldn't be applied
  • 2 otherwise good web programmer (not atomic)

[edit] Question 2 (HTML/CSS Programming)

<b style="background-color: yellow"><div id="main"></b>
  <h1>
    <span class="highlight">Wikipedia - Geneva</span>
  </h1>

  <p>
    Geneva is the second-most populous city in Switzerland...
  </p>

  <img src="switzerland.png" alt="Switzerland" />

  <p>
    Geneva is widely regarded as a global city, mainly...
  </p>

  <p>
    Geneva is also the name of Geneva Francine Stepp, ...

    <ul>
      <li>a desktop wallpaper</li>
      <li>the subject of a recent midterm exam</li>
    </ul>
  </p>
<b style="background-color: yellow"></div></b>

<b style="background-color: yellow"><div id="info"></b>
  <h1>Geneva, the name</h1>

  <p>
    (f)

    English

    Possibly a shortened form of Genevive, or possibly from
    the name of the city in Switzerland.
  </p>

  <p>
    Similar names:
  </p>

  <ul>
    <li>Jenna</li>
    <li>Jennifer (Jenny)</li>
    <li>Genevieve</li>
    <li>Genevive</li>
  </ul>
<b style="background-color: yellow"></div></b>

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  font-family: "Verdana", sans-serif;
  font-size: 14pt;
}

.highlight {
  background-color: yellow;
  border: 5px solid orange;
}

#main {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

#main img {
  float: left;
  margin-right: 1em;
}

#info {
  border: 5px solid red;
  font-size: 9pt;
  padding: 1em;
  position: absolute;
  right: 1em;
  top: 1em;
  width: 20%;
}

#info li {
  font-style: italic;
}

30 points total

• 3 HTML
  • 2 adds divs/spans
  • 1 doesn't try to add any other tags/attributes (id, class)

• 27 CSS
  • 4 body
    • 1 body font (Verdana, 14pt)
    • 2 background-image (bg.jpg) : -1 for syntax
    • 1 background-repeat (accept any falsey value)
  • 2 header style (yellow bg, orange border)
    • -1 if it uses h1 as selector rather than an inner span
  • 4 main div
    • 2 width: 50%
    • 2 centering (margins 25% or auto, NOT text-align)
  • 3 img
    • 2 float: left
    • 1 margin-right: 1em (padding-right is also okay)
  • 12 right-side div
    • 2 position: absolute (NOT float) (-1 for fixed)
    • 2 right/top 1em (if float, these can be margins; also can be top/right of 0em and margin-top/right of 1em)
    • 2 border: 5px solid red
    • 2 padding (NOT margin): 1em
    • 1 font size: 9pt (lenient on h1 style; must style the p,ul/li)
    • 1 width: 20%
    • 2 ul/li font-style: italic;
  • 2 general
    • 1 class vs. id confusion
    • 1 otherwise good CSS/XHTML syntax (validates, etc.)

[edit] Question 3 (JavaScript Programming)

window.onload = function() {
  var imgs = $$("#pics > img.geneva");
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = imgClick;
  }
};

function imgClick() {
  this.remove();
  // or $("pics").removeChild(this);
  $("favorites").appendChild(this);
  
  var li = document.createElement("li");
  li.textContent = "Moved " + this.src + " to favorites.";
  $("actions").appendChild(li);
}

40 points total

• 18 window.onload handler:
  • 3 attached correctly
  • 12 selecting images ($$, $ / getElementsByTagName|select)
    • 4 only img elements (not firstChild/childNodes/nextSibling)
    • 4 only in #pics (just $$("img.geneva") loses these points)
    • 4 only with .geneva class
      • 2 points for a reasonable attempt at any of the above 3
  • 3 loops over array of images and attaches onclick handlers to them correctly
• 20 onclick handler:
  • 4 correctly understands which image was clicked (e.g. this, or passed by anon. handler)
  • 4 removes image from #pics
  • 4 adds image to #favorites
    • +2 points for a reasonable attempt at either of the above
    • -2 if not appended at end
  • 8 li "Moved to favorites"
    • 3 creates
    • 3 sets textContent to "Moved to favorites"
      • -2 if image's .src not inserted correctly
      • -1 for innerText; -2 for innerHTML
    • 2 adds to #actions on page (-1 if not appended at end)
• 2 other/syntax