Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Nicholas Wallen
Nicholas Wallen
12,278 Points

Can someone explain this JavaScript code for me?

So I understand almost the entire code, except for the check answers section. I don't understand the logic behind the answers[i-1]. Can someone explain that to me?

function submitAnswers() { var total = 3; var score = 0;

//Get user input var q1 = document.forms['quizForm']['q1'].value; var q2 = document.forms['quizForm']['q2'].value; var q3 = document.forms['quizForm']['q3'].value;

// Validation
for(var i = 1; i <= total; i++) { if(eval('q' + i) === null || eval('q' + i) == '' ) { alert('You missed question ' + i); return false; } }

// Set correct answers var answers = ["b","d","b"];

for(var i = 1; i <= total; i++) { // Check answers if (eval('q' + i) == answers[i - 1]) { score++; } }

1 Answer

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,696 Points

You have variables q1, q2, q3 that are storing the result of someone's input to questions in a form. Then later on, you're in a for loop, with the variable i being used to store the current index in the loop starting at 1 going to 3. Inside the loop, this code eval('q' + i) will evaluate 'q' + i each time in the loop which will be q1, q2, q3. So when you evaluate that code, you'll get a reference to the user's answer in one of those variables, and then you're comparing it to the answer key - in the array answers - to see if they match. But since arrays are 0-based in JavaScript you have to subtract 1 from i for them to match. q1 is going to line up with answers[0].

A few recommendations:

  • Using eval is not recommended for security purposes. In order to avoid using eval, one way of doing it would be to store the user's answers in an array as well (see below, the array userInput)
  • I also recommend starting your for loops with i at 0. If you need to do any adjustments when because of the off-by-one issue, do the math before you display the number to the user rather than in the logic of your code.
  • If you're looping through an array, use the length of that array as the condition for your for loop to stop, rather than some hard-coded number (total). If you add more questions to your program in the future, then it would still work with the new number automatically.
function submitAnswers() {
    var score = 0;

    // Get user input
    var q1 = document.forms['quizForm']['q1'].value;
    var q2 = document.forms['quizForm']['q2'].value;
    var q3 = document.forms['quizForm']['q3'].value;

    var userInput = [q1, q2, q3];
    var answers = ["b","d","b"];

    // Validation
    for (var i = 0; i < userInput.length; i++) {
        if (userInput[i] === null || userInput[i] === '') {
          alert('You missed question ' + (i + 1));
          return false;
        }
    }

    // Set correct answers
    for (var i = 0; i < userInput.length; i++) {
      // Check answers
      if (userInput[i] === answers[i]) {
        score++;
      }
    }
}