Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Team Account
Team Account
1,958 Points

How can I set the <li value="..."> equal to the question number?

I've managed to complete the challenge with the following code, but to me the output of the correct/incorrect answers doesn't make sense from the ordered list.

I think you would be better off showing the list with values relate to the question number instead of sequential.

My code is the following: 

var qAndA = [
  ['What is the capital of England?', 'London'],
  ['What is the capital of France?', 'Paris'],
  ['What the first name of the Queen of England?', 'Elizabeth'],
  ['Who won the 2016 Tour de France?', 'Chris Froome']
];
var correctValues = [];
var incorrectValues = [];
var numberCorrect = 0;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function answers( list ) {
    var listHTML = '<ol>';
    for ( var j = 0; j < list.length; j += 1 ) {
      listHTML += '<li>' + qAndA[list[j]][0] + '</li>';
    }
    listHTML += '</ol>';
    return(listHTML);
}

for ( var i = 0; i < qAndA.length; i += 1 ) {
 var question = qAndA[i][0];
 var correctAnswer = qAndA[i][1];
 var userAnswer = prompt(question);
 var rightOrWrong;

   if ( userAnswer.toUpperCase() === correctAnswer.toUpperCase() ) {
     numberCorrect += 1;
     correctValues.push(i);
   } else {
     incorrectValues.push(i);
   }
}

outputTotal = '<h1>You got a total of ' + numberCorrect +' out of ' + qAndA.length + ' answers correct.</h1>';
outputCorrect = '<h2>You got the following answers correct:</h2>' + answers(correctValues);
outputIncorrect = '<h2>You got the following answers incorrect:</h2>' + answers(incorrectValues);

output = outputTotal + outputCorrect + outputIncorrect;

print(output);

But what I'm after is something like this: 

var qAndA = [
  ['What is the capital of England?', 'London'],
  ['What is the capital of France?', 'Paris'],
  ['What the first name of the Queen of England?', 'Elizabeth'],
  ['Who won the 2016 Tour de France?', 'Chris Froome']
];
var correctValues = [];
var incorrectValues = [];
var numberCorrect = 0;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function answers( list ) {
    var listHTML = '<ol>';
    for ( var j = 0; j < list.length; j += 1 ) {
      listHTML += '<li value="...">' + qAndA[list[j]][0] + '</li>';
    }
    listHTML += '</ol>';
    return(listHTML);
}

for ( var i = 0; i < qAndA.length; i += 1 ) {
 var question = qAndA[i][0];
 var correctAnswer = qAndA[i][1];
 var userAnswer = prompt(question);
 var rightOrWrong;

   if ( userAnswer.toUpperCase() === correctAnswer.toUpperCase() ) {
     numberCorrect += 1;
     correctValues.push(i);
   } else {
     incorrectValues.push(i);
   }
}

outputTotal = '<h1>You got a total of ' + numberCorrect +' out of ' + qAndA.length + ' answers correct.</h1>';
outputCorrect = '<h2>You got the following answers correct:</h2>' + answers(correctValues);
outputIncorrect = '<h2>You got the following answers incorrect:</h2>' + answers(incorrectValues);

output = outputTotal + outputCorrect + outputIncorrect;

print(output);
Team Account
Team Account
1,958 Points

This is related to the following video:

https://teamtreehouse.com/library/javascript-loops-arrays-and-objects/tracking-multiple-items-with-arrays/build-a-quiz-challenge-part-2

2 Answers

Team Account
Team Account
1,958 Points

That was a bit more advanced than my skillset currently allows.

You were correct, the code was the same, but I've now updated it.

In the end I managed to do as intended by changing the code to the following:

listHTML += '<li value="' + (list[j]+1) +'">' + qAndA[list[j]][0] + '</li>';
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You can use jquery to quickly assign an attribute

$('li').attr("value", "numberHere");

in a list item, the value has to equal a number and be apart of an ordered list.

Unless I am missing something small, the two pieces of code you have look to be identical. It may help to just show the part that is different, or comment the section so we can actually see what you are trying to do.

I believe at the point you are at in the lessons, you haven't gotten to jquery yet so you could also do it with just JS like so

document.getElementsByTagName('li')[0].setAttribute("value", "numberHere");

With the above, it is specifically grabbing the first time the li tag is found, that is what the [0] is doing. So you could grab a specific li tag by changing the 0 to another number or using a loop with a var i = 0 etc, to grab a series of li tags.

In this particular case, it may be more beneficial to grab a more specific li tag by giving it an ID or class so it could change to 

document.getElementsById("liIdName").setAttribute("value", "numberHere");