0

I have a question that relates to the question I asked here

I am trying to nest a loop and not quite sure if it is the way to go. What I want to do is have a number of stars displayed relevant to the score. So, if they get 3 questions they get 3 stars. The bit I am having trouble with is displaying empty stars if they haven't reached the required score.

E.G: 10 required to get to the next level. They score 6. I can display 6 gold stars, but I am having trouble displaying 4 empty stars. I hope I explained this right.

This is the code I have so far

var se = '';
var sep = '';
for (var i = 1; i <= score; i++)
{
    se = se + '<img src="./images/star.png"/>'; 
}

I also have this loop for trying to display the empty stars

for (var j = 1; j <= i; j++)
{
    sep = sep + '<img src="./images/emptystar.png"/>';
}

I am not sure if this needs to go inside the for loop already there or outwith it. Also, for some reason it doesn't display the correct number of empty stars. It's displaying 1 empty for 0 correct answers and 3 or 4 for anything else

I think I have the right calculation in place in the second loop. Any pointers where I am going wrong would be much appreciated. As I said, the first loop works as it should.

Thanks everyone

Improve this question
4
  • As long as it works, you don't have to go into nested loops. Actually, I don't think there's a practical way of using them for this case. Commented Feb 8, 2013 at 15:17
  • The second loop doesn't quite work as it should. It isn't displaying the right number of empty stars :( I thought leaving it outwith and having the statements in the second for loop as they are would work. It doesn't want to though Commented Feb 8, 2013 at 15:19
  • Scratch that -- for the second loop, you're gonna have to start with i and have it loop til 10. Commented Feb 8, 2013 at 15:19
  • is there a maximum number of stars? why not just start with all empty stars, and then add full stars and delete empty stars when they get points? Commented Feb 8, 2013 at 15:20

3 Answers 3

Reset to default
3

Try this:

var stars = '';
for (var i = 1; i <= 10; i++) {                        // Loop 10 times
    var empty = (i > score)?'empty':'';                // If i > score, set this variable to the string 'empty';
    stars += '<img src="./images/'+ empty +'star.png"/>'; // Add the image (star.png or emptystar.png depending on the score).
}

The advantage of this is that you only need 1 loop, meaning you're not duplicating any code.

For score == 6, this returns:

<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>

So, how does that line var empty = (i > score)?'empty':''; work, you're asking?
Simple, it's a ternary operator. Shorthand for:

var empty;
if(i > score){
    empty = 'empty';
}else{
    empty = '';
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you so much @Cerbrus. This worked a charm. I notice now that I had neglected to include the max number of questions in the loop
Ehm, @Chris, could you tell me why you unaccepted my answer, please? The one you accepted now does exactly the same, but uses more variables, for loops, and has duplicate code.
Hey, I thought that I was able to accept each answer that worked. My bad. I wasn't aware that you could only accept one that worked. No malice intended
Ah, that makes sense, yea :P No hard feelings!
2

try this:

var stars = '';
var maxstars = 10;

for (var i = 0; i < score; i++)
{
    stars = stars + '<img src="./images/star.png"/>'; 
}

for (var j = score; j < maxstars; j++)
{
    stars = stars + '<img src="./images/emptystar.png"/>';
}
Improve this answer

4 Comments

Good solution, but it would be better with explanation.
Hi @Tucker, I tried this but it displays the empty stars 10 times no matter how many I get right or wrong. I just can't see where I am going wrong
@Chris: You must be integrating the code in the wrong way, because it works perfectly fine: jsfiddle.net/tffyY. "I just can't see where I am going wrong"... we neither, because we don't know how you use the code.
It was my bad. I noticed I had put j = 0 instead of j = score. It now works a treat too. Thank you so much
0

Just use one loop:

var score = 5;
var sep = "";
for (var i = 0; i <= 10; i++)
{
    sep += (i < score) ? '<img src="./images/star.png"/>' : '<img src="./images/emptystar.png"/>';
}

I didn't test but that should get you started.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.