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

Alisa Trunczik
Alisa Trunczik
3,659 Points
Posted by Alisa Trunczik
Alisa Trunczik
3,659 Points

My solution (without .push method)

Hello, everyone!

I've tried to add a third item to existing 2-dimens. array we had. Here is my solution:

var quizData = [
  ["Which planet is nearest the sun?", "MERCURY"],
  ["What is the singular of Scampi ?", "SCAMPO"],
  ["What is bottled a lot in the French town Vichy?", "WATER"]
];
var question;
var answersCorrect = 0;
var userAnswer;
var answer;
var html;

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

for (var i = 0; i < quizData.length; i += 1) {
  question = quizData[i][0];
  answer = quizData[i][1];
  userAnswer = prompt(question);
  quizData[i][2] = userAnswer.toUpperCase() === answer; 
} 

print("<h1> You got these question(s) CORRECT:</h1>");
for (var j = 0; j < quizData.length; j += 1) {
  if (quizData[j][2]) {
    answersCorrect += 1;
    print("<h4>" + quizData[j][0] + "</h4>");
    print("<h2>The correct answer is: "+ quizData[j][1] + "</h2>");  
  }
}

print("<h1> You got these question(s) WRONG:</h1>");
for (var j = 0; j < quizData.length; j += 1) {
  if (!quizData[j][2]) {
    print("<h4>" + quizData[j][0] + "</h4>");
    print("<h2>The correct answer was: "+ quizData[j][1] + "</h2>");  
  }
}  

print("<h1> You got " + answersCorrect + " question(s) correct!</h1>");

I also started to refactor this code by adding a function to print results to make it shorter.

Is my solution good? What's better to use?

Thanks!

1 Answer

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Great job Alisa it's a great mind-set to have to make your version of code and trying to enhance it.

Right now your code has little place for refactoring, based on what you've learned. Once you start to learn more you will find different approach to solve this problem.

Here is something to consider.

  1. Removing html variable which is unused.

  2. Adding comments to your own code.

Here is something you can challenge yourself.

  1. Summarizing your code into human language.

  2. Finding different approach that will do same or similar thing.

  3. Try to write shorter code with minimal loop. (This is easily done as you learn more)

  4. Keep improving this code by implementing what you will learn in the future.

I will add my version of your code when I get some time.

Keep up the good work!

Alisa Trunczik
Alisa Trunczik
3,659 Points
Alisa Trunczik
Alisa Trunczik
3,659 Points

Wow, Gunhoo Yoon, thank you so much for useful tipps and approaches, I will try them all and learn more:)

Sometimes I think it's just so hard for me to be creative with refactoring, but I guess it comes with practice.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Here's my version and new vocabulary for you which you will need to create your own HTML element or existing HTML element.

You only need these two vocabulary to understand it.

document.createElement('tagName') Creates HTML element.

node.appendChild(element) append child element to node. Node refers to html element.

This code seems needlessly long because of all the interaction with HTML elements(about 25% + space for comment). But what it tries to do is build a structured content rather than rendering content on every iteration. No one does this sort of madness but this is basic way of JavaScript interacting with HTML element.

//Helper function that creates element with optional text and classes
function setTag(type, text, classes) {
  var tag = document.createElement(type);

  //Optional text and classes
  if (text)
    tag.textContent = text;
  if (classes)
    tag.className = classes;

  return tag;
}

//Assumes 'quizzes' already have interacted with user.
function buildFeedback(quizzes) {
  //Wrapper elements used to wrap different part of feedback.
  var feedback = setTag("div", null, "feedback"),
      wrapCorrect = setTag("div", null, "correct"),
      wrapWrong = setTag("div", null, "wrong");

  //Give heading to correct and wrong section.
  wrapCorrect.appendChild(setTag("h1", "You got these question(s) correct:"));
  wrapWrong.appendChild(setTag("h1", "You got these question(s) wrong:"));

  //Distribute individual feedback for each quiz.
  for (var i = 0; i < quizzes.length; i += 1) {
    var quiz = quizzes[i][0],
          answer = quizzes[i][1],
          correct = quizzes[i][2],
          quizFeed = setTag("h2", quiz),
          answerFeed;

    var correctAnswer = 0;

    //If user answer matched with ours.
    if (correct) {
      correct += 1;
      answerFeed = setTag("h3", "The correct answer is: " + answer);
      wrapCorrect.appendChild(quizFeed);
      wrapCorrect.appendChild(answerFeed);
    } else {
      answerFeed = setTag("h3", "The correct answer was: " + answer);
      wrapWrong.appendChild(quizFeed);
      wrapWrong.appendChild(answerFeed)
    }
  }

  //Append all the components to feedback wrapper.
  feedback.appendChild(wrapCorrect);
  feedback.appendChild(wrapWrong);
  feedback.appendChild(setTag("h2", "You got " + correctAnswer + " question(s) correct!", "result"));
  return feedback;
}

//Global variables
var quizzes = [
  ["Which planet is nearest the sun?", "MERCURY", null],
  ["What is the singular of Scampi ?", "SCAMPO", null],
  ["What is bottled a lot in the French town Vichy?", "WATER", null]
];
var quiz, answer, result;

//Dump questions and gather user response.
for (var i = 0; i < quizzes.length; i += 1) {
  quiz = quizzes[i][0];
  answer = quizzes[i][1];
  result = prompt(quiz);
  quizzes[i][2] = result.toUpperCase() === answer;
}

//Append our feedback as child of body element.
document.body.appendChild(buildFeedback(quizzes));