Hello Im currently writing a program for the Khan Academy project called bookshe

Question

Hello Im currently writing a program for the Khan Academy project called bookshelves. I've completed most of the code but I'm having alot of trouble implementing a global variable. Im supposed to have the number of apps per shelf be a global variable at the top of the program. That is, all shelves, except possibly the last shelf, will have the number of apps that you set in the global variable, but the last shelf may have less if the number of apps you have is not divisible by the number. For instance, if there are 7 apps and the global variable is set to 3, the your program should print two shelves of 3 apps and one shelf of 1 app. Then if you change the global variable to 4, then your program would print one shelf of 4 apps and one shelf of 3 apps.

I will paste my code here.

----------------------------------------------------

var book = {
title: ["My initial", "Funny Face", "My House", "My Animal", "Dancing Animals", "Racing Animals","Dancing Animals Fun", "Racing Animal Fun","Resize Animal", "Music Quiz","Zoo","Dry Animal", "Ball Follow"],
author: ["Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock","Camren Woodstock"],
stars: [5, 4, 3, 2, 1]
};
var a = 1;
var b = 20;
var c = 0;
var d = 0;
while (120 * a < 400) {
// draw shelf
fill(173, 117, 33);
rect(0, 120 * a, width, 10);
a++;
}
// draw one book
for (var j = 0; j < book.title.length; j++)
{
if ((10 + 100 * c) + 80 > 400) {
b += 120;
c = 0;
d++;
}
fill(random(80,200), random(50,240), random(40,200));
rect(6 + 100 * c, b, 90, 100);
fill(0, 0, 0);
textSize(13);
text(book.title[j], 10 + 100 * c, 5 + b, 70, 100);
textSize(10);
text("By " + book.author[j], 10 + 100 * c, 51 + b, 70, 100);
  
for (var i = 0; i < book.stars[d]; i++) {
image(getImage("cute/Star"), (12 + i * 16) + 100 * c, 70 + b, 20, 30);
}
c ++;
}

------------------------------------------------------

The global variable is booksPerShelf and when I change it to 3 it should be 3 books per shelf and when I change the number to 4 it will be 4 books per shelf.

Explanation / Answer

Now, to the broken down explanation of my code above, for those interested in learning or finding something smaller still. Below is a version with line numbers for easier referencing:

We begin on line 1 by simply defining the various variables we'll need. Nothing particularly fancy happens here.

Moving onwards we find a while loop. I opted to use this particular loop structure because it gave the smallest footprint when in actual use. There is something neat and elegant to the straight-to-the-point while (a > b), I think.

Next, on line 4, is where just about all the magic happens. In order to get an idea of what happens we must first familiarise ourselves with ternary operator:

It works as follows:

Which makes it equivalent to

The savings are obvious! Now, with this in mind, we take a proper look at line 4. Let us first consider the first ternary operation:

This one comes with a little addendum: the increment. The two addition signs are quite deliberately placed before the variable we wish to increase, our counter. Remember how it was first assigned the value 0 on line 1? This is fine, since, given the placement of the increment, the variable will be increased before the rest of the line is executed. The first time around a == 1!

This is also important because at the very last run, when a == 100, when the loop is commenced at line 3 a will actually be 99. This allows us to save one symbol in the condition, since we'd otherwise have to test a <= b.

Okay, so our counter is incremented, and we move on. Now we first check to see if our current number is divisible by 3. If so, we store "Fizz" into c, otherwise nothing at all, which will prove important in just a second! Fortunately for us the ternary operator in JavaScript takes 0 to mean false, which is fantastic! That way we don't actually have to waste any symbols comparing a % 3 to anything, because if it is divisible by 3 the condition will be thought of as false and so "Fizz" is returned.

Now onto the second ternary operator, (a % 5 ? "" : "Buzz"), but first take note of the + between the two; we are concatenating the results from the two conditionals.

We see that this second operation is much like the first one, just with a five instead of a three and a Buzz instead of a Fizz. However, given that this one line is the brain behind the whole piece of code, let us imagine what happens given a few different a's:

Since we now have a grasp of c we'll move on to the last line, which also consists of a ternary operator, though this time we use the fact that something empty is considered false, rather than something 0 is considered false.

Given the expression c ? c : a we conclude the following: if c, that is if c is anything, we will return c itself. We take this to mean that if it isn't an empty string, we'll log the string, which we made either "Fizz", "Buzz" or "FizzBuzz" earlier.

Further, if c is empty, we'll resort to logging a, the current number.

Finally we'll note that given how c is overwritten each iteration, we needn't worry about last round's value for it; even if a isn't divisible in the way we desire c still gets a value, it just happens to be nothing.

Related Questions

Navigate

• Browse (All)
• Browse H
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.