Skip to content

Instantly share code, notes, and snippets.

@jpetto

jpetto/gist:3903200

Created October 17, 2012 01:19
Show Gist options
  • Save jpetto/3903200 to your computer and use it in GitHub Desktop.
Save jpetto/3903200 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to JS - Quiz #1 Solution
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Intro to JavaScript - Quiz #1</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</h1>
<section id="personalization">
<h2>Personalization (3 points)</h2>
<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>What's one way to convert a string to a number? (1 point)</dt>
<dd>Number(strNum); OR parseInt(strNum, 10);</dd>
<dt>
Will the variable <em>word_entered</em> be true or false? Why? (2 points)
<pre>
var favorite_word = 'false';
var word_entered = (favorite_word == false);
</pre>
</dt>
<dd>
false, because I didn't type the question right. Actually, false because a string with a length greater than zero is truthy.
<br /><br />
If the first line read <em>favorite_word = '';</em>, then <em>word_entered</em> would be true, because an empty string is falsy.
</dd>
<dt>
How would you determine the number of slots in the following array? How many slots are there? (2 points)
<pre>
var batmen = ['Lewis Wilson', 'Robert Lowrey', 'Adam West', 'Michael Keaton', 'Val Kilmer', 'George Clooney', 'Christian Bale'];
batmen[10] = 'Jaden Smith';
</pre>
</dt>
<dd>batmen.length, 11</dd>
<dt>What are the two (one old school, one new school) DOM methods used to access/reference a single element? (2 points)</dt>
<dd>old school: document.getElementById(), new school: document.querySelector()</dd>
<dt>What DOM method would you use to add or change an attribute on an element? (1 point)</dt>
<dd>elem.setAttribute('disabled', 'disabled');</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>
<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 = {
name: 'Jon Petto',
year: '11th Year Senior',
major: 'Complaining'
};
// get a reference to the personalization div
var personalization = document.querySelector('#personalization');
// TODO: create a strong tag
var strong = document.createElement('strong');
// TODO: create a text node for each property in the me object above & append that text node to the strong tag
strong.appendChild(document.createTextNode(me.name));
strong.appendChild(document.createTextNode(', ' + me.year));
strong.appendChild(document.createTextNode(', ' + me.major));
// TODO: append the new strong tag to the personalization div
personalization.appendChild(strong);
// ************************
// PRACTICAL
// ************************
// get reference to button
var switch_image = document.querySelector('#switch-image');
// get reference to title and frame elements
var title = document.querySelector('#image-title');
var frame = document.querySelector('#image-frame');
// add a click handler to the buttons
switch_image.addEventListener('click', function(e) {
title.innerHTML = 'A Standard Meal';
// TODO: set the image src attribute to the following url:
// http://farm9.staticflickr.com/8461/8024374464_f97e449aee_n.jpg
frame.setAttribute('src', 'http://farm9.staticflickr.com/8461/8024374464_f97e449aee_n.jpg');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment