I'm new to Javascript and need help making a Personality Quiz like one you would find on Buzzfeed (E.G: )

I want to create a form that takes a users input and calculates, by adding the user input's corresponding character[x]AnswerArray value, which character they are most like.

I have a two dimensional array that stores each question and every answer for each question.

var questionArray = [
                    ["Question 1?", "Answer 1", "Answer 2", "Answer 3"], 
                    ["Question 2?", "Blue", "Green", "Red"], 
                    ["Question 3?", "Blue", "Green", "Red"], 
                    ["Question 4?", "Blue", "Green", "Red"], 
                    ["Question 5?", "Blue", "Green", "Red"], 
                    ["Question 6?", "Blue", "Green", "Red"]
                ];

I display this in a "For-Next" iteration:

for (var i = 0; questionArray.length; i++){
document.write("<span class='question'>" + questionArray[i][0] + "</span><br/><br/>");
for (var x = 1; x < 4; x++){
    document.write("<input type='radio' class='answer' name='answer' value='" + questionArray[i][x] + "'>" + questionArray[i][x] + "<br/><br/>");
}

I also have a two dimensional array for each possibility (in this case, Character) :

var characterOneAnswerArray = [
                    ["0, 1, 4"],
                    ["2, 3, 6"],
                    ["1, 3, 0"],
                    ["2, 4, 5"],
                    ["0, 0, 1"]
              ];

Here is where I get stuck. How do I keep track of (store) the users input (answers) then add them to each characters total, then finally calculate which character has the highest score?

If you don't understand what I mean please tell me

I'm new to Javascript and need help making a Personality Quiz like one you would find on Buzzfeed (E.G: http://www.buzzfeed./justinabarca/which-goonies-character-are-you )

I want to create a form that takes a users input and calculates, by adding the user input's corresponding character[x]AnswerArray value, which character they are most like.

I have a two dimensional array that stores each question and every answer for each question.

var questionArray = [
                    ["Question 1?", "Answer 1", "Answer 2", "Answer 3"], 
                    ["Question 2?", "Blue", "Green", "Red"], 
                    ["Question 3?", "Blue", "Green", "Red"], 
                    ["Question 4?", "Blue", "Green", "Red"], 
                    ["Question 5?", "Blue", "Green", "Red"], 
                    ["Question 6?", "Blue", "Green", "Red"]
                ];

I display this in a "For-Next" iteration:

for (var i = 0; questionArray.length; i++){
document.write("<span class='question'>" + questionArray[i][0] + "</span><br/><br/>");
for (var x = 1; x < 4; x++){
    document.write("<input type='radio' class='answer' name='answer' value='" + questionArray[i][x] + "'>" + questionArray[i][x] + "<br/><br/>");
}

I also have a two dimensional array for each possibility (in this case, Character) :

var characterOneAnswerArray = [
                    ["0, 1, 4"],
                    ["2, 3, 6"],
                    ["1, 3, 0"],
                    ["2, 4, 5"],
                    ["0, 0, 1"]
              ];

Here is where I get stuck. How do I keep track of (store) the users input (answers) then add them to each characters total, then finally calculate which character has the highest score?

If you don't understand what I mean please tell me

• javascript
• html
• arrays
• forms
• multidimensional-array

Share Improve this question Follow edited Mar 7, 2014 at 13:56 Kflap asked Mar 7, 2014 at 13:19 KflapKflap 3511 gold badge22 silver badges77 bronze badges 3

• 1 What kind of programmer are you? A. One who learns. B. One who looks for the answers elsewhere without showing an honest attempt first :p - It's good that you showed your code so far, but you haven't showed any real attempt on the part you're stuck with. – Niet the Dark Absol Commented Mar 7, 2014 at 13:21
• @NiettheDarkAbsol haha I'm the kind of programmer who learnt/is learning, very distortedly. My knowledge is incredibly patchy, taking concepts from several languages without a true, full grasp of any. Believe me or not, I have been working on this for a few weeks now, admittedly not full time, trying several methods and languages (tried in PHP first). I've run out of patience and decided to take the easy way and post a question on here. – Kflap Commented Mar 7, 2014 at 13:26
• Ahh man, I read the title and thought this was a quiz to determine what kind of personality I had as a JavaScript developer. – Sukima Commented Mar 7, 2014 at 17:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

http://jsbin./yufej/1/edit

That's a plex task, but let's do it by steps:

1- Add event listeners for the clicks on the inputs

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
  inputs[i].addEventListener('click', check);
}

2- Check if all questions are answered

function check(){
  userAnswers = [];
  var c = 0;
  for(var i = 0; i < inputs.length; i++){
    if(inputs[i].checked) {
      userAnswers.push(i%3);
      c++;
    }
  }
  if(c==questionArray.length) rate();
}

3- Rate the answers per character

function rate(){
  for(var i = 0; i < userAnswers.length; i++){
    for(var j = 0; j < characterAnswer.length; j++){
      characterAnswer[j][4] = 0;
      for(var x = 0; x < 4; x++){
        if(userAnswers[i] == characterAnswer[j][x])
          characterAnswer[j][4]++;
      }
    }
  }
  answer();
}

4- Answer is...

function answer(){
  var a = 0, t;
  for(var j = 0; j < characterAnswer.length; j++){
    if(characterAnswer[j][4] > a) {
      a = characterAnswer[j][4];
      t = characterAnswer[j][3];
    }
  } 
  alert(t);
}

Please note that document.write is a bad practice and you should replace it with document.createElement and document.body.appendChild.