jpetto · October 23, 2012 15:53
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Intro to JavaScript - Quiz #1 - Alternate</title>

  <link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
  <style type="text/css">
    html, body {
      background: #6dbadc;
    }

    #wrapper {
      width: 70%;
      margin: 20px auto;
      padding: 20px 30px;
      background: #fff;
      border-radius: 8px;
      border: 2px solid #3b6577;
    }

    p {
      line-height: 20px;
    }

    section {
      margin-bottom: 30px;
    }

    dt {
      font-weight: 800;
      margin-bottom: 5px;
    }

    dd {
      margin-bottom: 15px;
    }

    pre {
      color: #008040;
      font-weight: 100;
    }

    aside {
      background: #fefcda;
      padding: 10px 20px;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    button {
      -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
      -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
      box-shadow:inset 0px 1px 0px 0px #fbafe3;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
      background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
      background-color:#ff5bb0;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius:6px;
      border:1px solid #ee1eb5;
      display:inline-block;
      color:#ffffff;
      font-family:Impact;
      font-size:20px;
      font-weight:normal;
      padding:6px 14px;
      text-decoration:none;
      text-shadow:1px 1px 0px #c70067;
      margin-right: 10px;
    }

    button:hover {
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
      background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
      background-color:#ef027d;
    }

    button:active {
      position:relative;
      top:1px;
    }

    #image-container {
      margin: 20px 0;
    }

    figcaption {
      margin-bottom: 10px;
    }
  </style>
 </head>
 <body>

  <div id="wrapper">
    <h1>Intro to JavaScript - Quiz #1 - Alternate</h1>

    <section id="personalization">
      <h2>Personalization (3 points)</h2>

      <ul id="my-details"></ul>

      <aside>
        <p>See instructions in script tag.</p>
      </aside>
    </section>

    <section id="technical">
      <h2>Technical (8 points)</h2>

      <aside>
        <p>Type your answers in place of each <em>(your answer)</em> below.</p>
      </aside>

      <dl>
        <dt>
          Given the code below, what will be printed to the console? Why? (2 points)
          <pre>
 var user_num = '4';
 console.log("The total is " + Number(user_num) + 10);
          </pre>
        </dt>
        <dd>(your answer)</dd>

        <dt>
          What will be printed to the console? Why? (2 points)
          <pre>
 var user_age = '0';

 if (user_age == false) {
  console.log('Please enter your age.');
 } else {
  console.log('You are not old yet.');
 }</pre>
        </dt>
        <dd>(your answer)</dd>

        <dt>
          What is the value of best_one? (1 points)
          <pre>
 var batmen = ['Lewis Wilson', 'Robert Lowrey', 'Adam West', 'Michael Keaton', 'Val Kilmer', 'George Clooney', 'Christian Bale'];
 batmen[10] = 'Jaden Smith';
 var best_one = batmen.pop();</pre>
        </dt>
        <dd>(your answer)</dd>

        <dt>
          Given the following code, how could you retrieve/read the name property of person? How could you add an age property &amp; value? (2 points)
          <pre>
 var person = { name: 'Hans Moleman', city: 'Springfield' };
          </pre>
        </dt>
        <dd>(your answer)</dd>

        <dt>What DOM method would you use to remove an attribute on an element? (1 point)</dt>
        <dd>(your answer)</dd>
      </dl>
    </section>

    <section id="practical">
      <h2>Practical (13 points)</h2>

      <aside>
        <p>
          There are 3 bugs and 1 to-do in the code below. Fix the bugs and finish up the image switcher!
        </p>
      </aside>

      <section id="slideshow">
        <nav>
          <input type="text" id="new-title" placeholder="image title" />
          <input type="text" id="new-image" placeholder="image URL" size="40" />

          <button type="button" id="switch-image">Switch Image</button>
        </nav>

        <figure id="image-container">
          <figcaption id="image-title">Navy Pier</figcaption>
          <img id="image-frame" width="320" height="320" src="http://farm9.staticflickr.com/8165/7457725848_f65277797b_n.jpg" />
        </figure>
      </section>
    </section>
  </div>

 <script type="text/javascript">
 // ************************
 // PERSONALIZATION
 // ************************

  // TODO: replace the following values with your information
  var me = ['Your name', 'sophmore/junior/senior', 'Your major'];

  // get a reference to the my-details ul
  var my_details = document.querySelector('#my-details');

  
  var my_li, my_text;

  // TODO: fix/finish the for loop below to add an li to #my-details for each element in the me array above
  for (var i = 0; i < /* ? */; i++) {
    my_li = document.createElement('li');

    my_text = document.createTextNode(); // put me array element in these parentheses

    my_li.appendChild(my_text);

    my_details.appendChild(my_li);
  }

 // ************************
 // PRACTICAL - 3 bugs, 1 TODO
 // ************************

  // get reference to button
  var switch_image = document.querySelector('#switch-image');

  // get reference to displayed title and frame elements
  var display_title = document.querySelector('#image-title');
  var display_frame = document.querySelector('#image-frame');

  // get reference to new title and source text boxes
  var new_title = document.querySelector('new-title');
  var new_image = document.querySelector('#new-image')
  
  // add a click handler to the button
  switch_image.addEventListener(click, function(e) {
    display_title.innerHTML = "new_title.value";

    // TODO replace the src attribute of display_frame with the image source provided by the user
  });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Intro to JavaScript - Quiz #1 - Alternate</title>

	<link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
	<style type="text/css">
	html, body {
	background: #6dbadc;
	}

	#wrapper {
	width: 70%;
	margin: 20px auto;
	padding: 20px 30px;
	background: #fff;
	border-radius: 8px;
	border: 2px solid #3b6577;
	}

	p {
	line-height: 20px;
	}

	section {
	margin-bottom: 30px;
	}

	dt {
	font-weight: 800;
	margin-bottom: 5px;
	}

	dd {
	margin-bottom: 15px;
	}

	pre {
	color: #008040;
	font-weight: 100;
	}

	aside {
	background: #fefcda;
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	}

	button {
	-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	box-shadow:inset 0px 1px 0px 0px #fbafe3;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
	background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
	background-color:#ff5bb0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ee1eb5;
	display:inline-block;
	color:#ffffff;
	font-family:Impact;
	font-size:20px;
	font-weight:normal;
	padding:6px 14px;
	text-decoration:none;
	text-shadow:1px 1px 0px #c70067;
	margin-right: 10px;
	}

	button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
	background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
	background-color:#ef027d;
	}

	button:active {
	position:relative;
	top:1px;
	}

	#image-container {
	margin: 20px 0;
	}

	figcaption {
	margin-bottom: 10px;
	}
	</style>
	</head>
	<body>

	<div id="wrapper">
	<h1>Intro to JavaScript - Quiz #1 - Alternate</h1>

	<section id="personalization">
	<h2>Personalization (3 points)</h2>

	<ul id="my-details"></ul>

	<aside>
	<p>See instructions in script tag.</p>
	</aside>
	</section>

	<section id="technical">
	<h2>Technical (8 points)</h2>

	<aside>
	<p>Type your answers in place of each <em>(your answer)</em> below.</p>
	</aside>

	<dl>
	<dt>
	Given the code below, what will be printed to the console? Why? (2 points)
	<pre>
	var user_num = '4';
	console.log("The total is " + Number(user_num) + 10);
	</pre>
	</dt>
	<dd>(your answer)</dd>

	<dt>
	What will be printed to the console? Why? (2 points)
	<pre>
	var user_age = '0';

	if (user_age == false) {
	console.log('Please enter your age.');
	} else {
	console.log('You are not old yet.');
	}</pre>
	</dt>
	<dd>(your answer)</dd>

	<dt>
	What is the value of best_one? (1 points)
	<pre>
	var batmen = ['Lewis Wilson', 'Robert Lowrey', 'Adam West', 'Michael Keaton', 'Val Kilmer', 'George Clooney', 'Christian Bale'];
	batmen[10] = 'Jaden Smith';
	var best_one = batmen.pop();</pre>
	</dt>
	<dd>(your answer)</dd>

	<dt>
	Given the following code, how could you retrieve/read the name property of person? How could you add an age property & value? (2 points)
	<pre>
	var person = { name: 'Hans Moleman', city: 'Springfield' };
	</pre>
	</dt>
	<dd>(your answer)</dd>

	<dt>What DOM method would you use to remove an attribute on an element? (1 point)</dt>
	<dd>(your answer)</dd>
	</dl>
	</section>

	<section id="practical">
	<h2>Practical (13 points)</h2>

	<aside>
	<p>
	There are 3 bugs and 1 to-do in the code below. Fix the bugs and finish up the image switcher!
	</p>
	</aside>

	<section id="slideshow">
	<nav>
	<input type="text" id="new-title" placeholder="image title" />
	<input type="text" id="new-image" placeholder="image URL" size="40" />

	<button type="button" id="switch-image">Switch Image</button>
	</nav>

	<figure id="image-container">
	<figcaption id="image-title">Navy Pier</figcaption>
	<img id="image-frame" width="320" height="320" src="http://farm9.staticflickr.com/8165/7457725848_f65277797b_n.jpg" />
	</figure>
	</section>
	</section>
	</div>

	<script type="text/javascript">
	// ************************
	// PERSONALIZATION
	// ************************

	// TODO: replace the following values with your information
	var me = ['Your name', 'sophmore/junior/senior', 'Your major'];

	// get a reference to the my-details ul
	var my_details = document.querySelector('#my-details');


	var my_li, my_text;

	// TODO: fix/finish the for loop below to add an li to #my-details for each element in the me array above
	for (var i = 0; i < /* ? */; i++) {
	my_li = document.createElement('li');

	my_text = document.createTextNode(); // put me array element in these parentheses

	my_li.appendChild(my_text);

	my_details.appendChild(my_li);
	}

	// ************************
	// PRACTICAL - 3 bugs, 1 TODO
	// ************************

	// get reference to button
	var switch_image = document.querySelector('#switch-image');

	// get reference to displayed title and frame elements
	var display_title = document.querySelector('#image-title');
	var display_frame = document.querySelector('#image-frame');

	// get reference to new title and source text boxes
	var new_title = document.querySelector('new-title');
	var new_image = document.querySelector('#new-image')

	// add a click handler to the button
	switch_image.addEventListener(click, function(e) {
	display_title.innerHTML = "new_title.value";

	// TODO replace the src attribute of display_frame with the image source provided by the user
	});
	</script>

	</body>
	</html>