function Animal (name, speed, focus) {
this.name = name;
this.speed = speed;
this.focus = focus;
this.position = 0;
this.isFocused = function () {
return Math.Floor(Math.random() * 10) < this.focus;
}
this.advance = function () {
if (this.isFocused) {
this.position += this.speed;
}
}
this.progressReport = function () {
return this.name + " is at" + this.position
}
}
alert ("An unknown racer has entered!");
var userName = prompt("What is your name?");
var userSpeed = prompt("How fast are you? 0-9");
var userFocus = prompt("How focused are you? 0-9");
var user = new Animal(userName, userSpeed, userFocus);
var rabbit = new Animal("Rocky", 8, 3);
var turtle = new Animal("Mrytle", 3, 7);
var meters = 100;
while (turtle.position < meters && rabbit.position < meters && user.position < meters) {
rabbit.advance();
turtle.advance();
user.advance();
alert(rabbit.progressReport() + "|" + turtle.progressReport() + "|" + user.progressReport());
}
Hey Zach, In the week 4 quiz there was this problem:
I have a <div> that has the following styles applied to it
width: 300px;
border: 2px solid #a7a7a;
margin: 20px;
padding: 20px;
How wide (in px) is my div?
I answered 384 which came back as wrong. given the box model I believe this is the correct calculation:
300px (width)
- 40px (left + right padding)
- 4px (left + right border)
- 40px (left + right margin)
= 384px
Why is this wrong?
So, margin doesn't get factored into the total width of an element. Border and padding do. The div has a width of 300px + 2px of border left + 2px of border right + 20px of padding left + 20 px of padding right. Margin exists outside of the box and isn't added into the total width of the element.
Understanding the Box Model is the corner stone of understanding layout and css. It becomes even more important with % based width in responsive design.
http://css-tricks.com/the-css-box-model/
I checked that link and it gives the size of the box in pixels. The question was how wide is the div not the box.
Here are 2 sites I referenced and their answers:
http://www.w3schools.com/css/css_boxmodel.asp
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
http://learn.shayhowe.com/html-css/opening-the-box-model/
According to the box model, the total width of an element can be calculated using the following formula:
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
Both site explicitly say that the element width includes the padding. For now I still maintain the correct answer is 384px.
var rabbitName = document.getElementById("rabbitName").value;
var rabbitSpeed = document.getElementById("rabbitSpeed").value;
var rabbitAge = document.getElementById("rabbitAge").value;
var rabbitFocus = document.getElementById("rabbitFocus").value;
var turtleName = document.getElementById("turtleName").value;
var turtleSpeed = document.getElementById("turtleSpeed").value;
var turtleAge = document.getElementById("turtleAge").value;
var turtleFocus = document.getElementById("turtleFocus").value;
var meters = document.getElementById("raceMeterInput").value;
var rabbit = new Animal(rabbitName, rabbitSpeed, rabbitFocus, rabbitAge);
var turtle = new Animal(turtleName, turtleSpeed, turtleFocus, turtleAge);