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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

CRIS ACOSTA
CRIS ACOSTA
2,121 Points

This is not a question but a "just to show you my code" a "Now I know why I came here".

Hey guys,

Sorry to bore you out but I am just excited with my progress so far so I thought I share a little story.

Just like most of the guys here I am a beginner in JS but I pretty much have an idea of JS fundamentals. I have been doing basic algorithm exercise but don't really know how to integrate JS into the DOM. Infact I spent 3 days in solving this exercise by myself. Creating the loop was the easy part but making it work with the DOM, well, let's just say I stared at my editor for 30 mins not knowing where to start and after 3 days(it was very frustrating 3 days, I tell ya!) finally got my own code to work and while it does work but my code itself is something that one might call "cringy". This a the 4th day and I think finally made my first decent code that is integrated into the DOM - thanks to Dave. After looking at my first decent code and seeing work perfectly I gave myself a nod saying,"Yep! This what I came here for!"

So here is the "show you" part(I really just want to show the progress I made from this exercise):

My CRINGEY CODE

var quiz = [['How many US states are there?', 50],
            ['What is the best programming language?', 'JAVASCRIPT'],
            ['Who painted starry starry night?', 'VINCENT VAN GOGH']
            ];
var score = 0;
var correctHTML;
var wrongHTML;
var answer;

function print(message) {
  document.write(message);
}


function promptQuiz(questions) {

  correctHTML =  '<ol>';
  wrongHTML =  '<ol>';

  for (i=0; i<questions.length; i++){

    answer = prompt(questions[i][0]);
    if(answer.toUpperCase() == questions[i][1]){          
      score ++;          
      correctHTML += '<li>' + questions[i][0] + ': you answered: ' + answer + '</li>';
    } 
    else if(answer.toUpperCase() != questions[i][1]) { 
      wrongHTML += '<li>' + questions[i][0] + ', answer should be: ' + questions[i][1] + '</li>';    
    }
   }

  correctHTML += '</ol>';
  wrongHTML += '</ol>';

  document.write('<h4>Score: ' + score + '</h4>');
  document.write('<h3>You answered these questions correctly!');
  print(correctHTML);

  document.write('<h3>Here are the questions you didn\'t get right:</h3>');
  print(wrongHTML);

}

promptQuiz(quiz);

MY IMPROVED AND FIRST DECENT JS CODE integrated into the DOM (influenced by Dave M.):

var quiz = [['How many US states are there?', 50],
            ['What is the best programming language?', 'JAVASCRIPT'],
            ['Who painted starry starry night?', 'VINCENT VAN GOGH']
            ];
var score = 0;
var html;
var answer;
var correct = [];
var wrong = [];

function print(message) {

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

function promptQuiz(questions) {  
  for(i=0; i<questions.length; i++) {
      answer = prompt(questions[i][0]);    
      if(answer.toUpperCase() == questions[i][1]) {
        score++;    
        correct.push(questions[i][0]);        
      }else {
        wrong.push(questions[i][0]);
      }
    }
  }

function listBuilder(arr){
  var listHTML = '<ol>';
    for(i=0; i<arr.length; i++){
      listHTML += '<li>' + arr[i] + '</li>';     
    } listHTML +=  '</ol>';
  return listHTML;
}

function printResults() {
  var resultsHTML =  '<h4>Score: ';
      resultsHTML += score +  '</h4>';
      resultsHTML += '<h4>You answered these questions correctly </h4>';
      resultsHTML += listBuilder(correct);
      resultsHTML += '<h4>You answered these questions incorrectly </h4>';
      resultsHTML += listBuilder(wrong);
  return resultsHTML;
}


promptQuiz(quiz);
print(printResults());

so there you go... On the next exercise! Good luck fellas!

by the way, should I just skip this course and proceed on to your "Javascript and the DOM course"?

Your feedback is highly appreciated.

1 Answer

Alexander Solberg
Alexander Solberg
14,350 Points

It's pretty awesome seeing your own progress, knowing that it's the result of several monstrous portions of frustration :P

You asked if you should skip the course and head on over to "Javascript and the DOM", I strongly advise you not skipping the next part. If you are on the "Full-stack Javascript developer" track, then the next section is ES6.

ES6 is very important to learn if you want to learn how to use modern Javascript techniques and frameworks(React heavily utilizes ES6). Plus, from this point on, Guil and the other teachers contentiously use ES6 syntax throughout the track, so it's a good idea to familiarize yourself with it :)

Even better, your code can be even further optimized after learning ES6. Wait until you learn about "Template Literals", you will love it!

I'm off to my next assignment, happy coding :)