William William - 6 days ago 5
jQuery Question

Targeting multiple choice questions

So I am trying to make a multiple choice quiz from an array and inputs. I have made it to the point where it appends new questions on click. I now need it to have each specific question record the input clicked on when next is selected, and add to an array that's length is appended along with the words "Correct:". The problem is I don't know how to go about having it decide on click weather it was the right answer checked and then for it to add to the array. Thanks.



/*var correct = [""];
var other = [""];
if ('input[name="q1c"]:checked') {
correct.push ("I");
else {
other.push ("I")
}
}
var right = $(correct).length();
var wrong = $(other).length();
$(".score").append("correct:" + right + "/" + "Incorrect:" + wrong);*/
/*
Task 1 = Show choices in HTML
Task 2 = On click move to next question in array i++
Task 3 = Evaluate if question is correct using if , else. */
$(document).ready(function(){
var quiz = [
{
question:"How boring is this quiz?",
choices:["kinda","very","Too boring","Very fun"],
answer: "kinda"
},

{
question:"What color is Mace Windu's Lightsaber?",
choices:["purple", "blue", "green", "yellow"],
answer: "purple"


},

{
question:"Who purchased ATI in 2006?",
choices:['Asus', 'NZXT', 'AMD', 'HyperX'],
answer: "AMD"




},

{
question:"What is the rest of this Star Wars characters name? Jar Jar...",
choices:["Smith", "Ranks", "Banks", "Johnson"],
answer: "Banks"

},

{
question:"What color is C3PO?",
choices:["Golden", "Blue", "Orange", "Teal"],
answer: "Golden"


},

{
question:"What is missing from the quote? These are not the ____ you're looking for.",
choices:["Shirts", "Movies", "Computers", "Droids"],
answer: "Droids"



},

{
question:"What is the correct version of the characters name that starts with Jabba?",
choices:["jabba The Small", "Jabba Williams", "Jabba The Hutt", "Jabba The Clean"],
answer: "Jabba The Hutt"
},

{
question:"Which answer has the correct spelling of a characters name?",
choices:["Fiin", "Finn", "Fiinn", "Fin"],
answer: "Finn"


},

{
question:"Which of the following is not a character in Star Wars?",
choices:["Luke Skywalker", "Finn", "R2D2", "Morgan Skywalker"],
answer: "Morgan Skywalker"

},

{
question:"Is the word yes an answer for this question?",
choices:["yes", "This is the wrong answer", "This is the wrong answer", "This is the wrong answer"],
answer: "yes"

}
];

var title = document.getElementById('questionname');
var questions = document.getElementById('questions');
var i = 0;
var correct = [];
var amount = correct.length;
var quizQuestion = 0;
quizQuestion++;
var answer = quiz[quizQuestion].answer;
var btn = document.getElementById('new');
$('.score').html("Correct:" + amount);

$('.btn').click(function() {
event.preventDefault();
quizQuestion++;
i++;
if($("input:checked").val() == answer){
correct.push("l");
//$('.score').append("Correct:" + amount);
console.log(correct);
}
});
$('.btn').click(function() {
/*event.preventDefault();
i++;
if($("input:checked").val() == answer){
correct.push("l");
$('.score').html("Correct:" + amount);
console.log("Yo");
}*/
if(i>quiz.length -1) {
i=0;
}
fillQuestion(i);
i++;
console.log("Hi.");
$('.score').html("Correct:" + amount);
});

function fillQuestion(qNum){
var specificQuestion = quiz[i];
title.innerText = specificQuestion.question;

questions.innerHTML = "";
for(key in specificQuestion.choices){
var btnQuestion = "question"+i+"_choice";
var questionText = specificQuestion.choices[key];
questions.appendChild(createQuestion(btnQuestion,questionText)
);
}
}
/*for (var i = 0; i < choices.length; i++) {
$(title).text(quiz[0].question);
$('questions').append('<label><input type="radio" name="usernames" value="' + choices[i] + '" /> ' + choices[i] + '</label>');
}*/
function createQuestion(name, questionText) {
var e = document.createElement('li');
var questionHTML = '<input type="radio" name="' + name + '"';
questionHTML += '/>';
questionHTML += questionText;
e.innerHTML = questionHTML;
return e;
}
});
/*console.log(quiz[0].question)
$(title).text(quiz[0].question);
};
createQuestion();
});
});*/

html, body {
margin:0px;
padding:0px;
background-color:#FFFAF0;
}
.container{
width:960px;
margin:0px;
padding:0px;
position:absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.title{
font-family:lato;
font-size:20px;
position:relative;
left:350px;
}
.question{
width: 300px;
height: 300px;
position:absolute;
top:50%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display:inline-block;
background-color:#008080;
padding:20px;
margin:30px;
border-radius:5%;
}
ul{
list-style:none;
}
.btn{
width:75px;
height:50px;
top:100px;
position:relative;
background-color:blue;
}
.hint{
font-size:10px;
position:relative;
left:200px;
top:100px;
margin:0;
}
.score{
margin:0px;
padding:5px;
outline:solid;
outline-color:black;
display:inline-block;
position:relative;
top:40px;

}

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="quiz.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<link rel="stylesheet" type="text/css" href="question1.css">
</head>
<body>
<div class="container">
<h2 class="title" id="questionname"></h2>
<div class="question" id="questionsarea">
<ul id="questions"></ul>
<ul class="answer">

</ul>
<div class="score"></div>
</div>
</div>
<button id="new" class="btn" value="Next"></button>
<p class="hint"> This quiz is kinda boring.</p>
</div>
</body>
</html>




Answer

This will do it for you. Hope it helps!

Updated Solution

var questions = [
{
question:"How boring is this quiz?",
choices:["kinda","very","Too boring","Very fun"],
correctAnswer: 0
},

{
question:"What color is Mace Windu's Lightsaber?", 
choices:["purple", "blue", "green", "yellow"],
correctAnswer: 0


},

{
question:"Who purchased ATI in 2006?",
choices:['Asus', 'NZXT', 'AMD', 'HyperX'],
correctAnswer: 2
},

{
question:"What is the rest of this Star Wars characters name? Jar Jar...",
choices:["Smith", "Ranks", "Banks", "Johnson"],
correctAnswer: 2

},

{
question:"What color is C3PO?",
choices:["Golden", "Blue", "Orange", "Teal"],
correctAnswer: 0

},

{
question:"What is missing from the quote? These are not the ____ you're looking for.",
choices:["Shirts", "Movies", "Computers", "Droids"],
correctAnswer: 3
},

{
question:"What is the correct version of the characters name that starts with Jabba?",
choices:["jabba The Small", "Jabba Williams", "Jabba The Hutt", "Jabba The Clean"],
correctAnswer: 2
},

{
question:"Which answer has the correct spelling of a characters name?",
choices:["Fiin", "Finn", "Fiinn", "Fin"],
correctAnswer: 1


},

{
question:"Which of the following is not a character in Star Wars?",
choices:["Luke Skywalker", "Finn", "R2D2", "Morgan Skywalker"],
correctAnswer: 3

},

{
question:"Is the word yes an answer for this question?",
choices:["yes", "This is the wrong answer", "This is the wrong answer", "This is the wrong answer"],
correctAnswer: 0

}

 ];

$(document).ready(function(){
  // var numCorrect = 0;
  var myNumber = 0;
  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object
  
  // Display initial question
  displayNext();
  
  // Click handler for the 'next' button
  $('#next').on('click', function () {
    
    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {        
      return false;
    }
    choose();
    
    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      alert('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
    }
    return false;
  });
  
  // Click handler for the 'prev' button
  $('#prev').on('click', function (e) {
    e.preventDefault();
    
    if(quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });
  
  // Click handler for the 'Start Over' button
  $('#start').on('click', function () {
    if(quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
    return false;
  });
  
  // Creates and returns the div that contains the questions and 
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });
    
    var header = $('<h3>Question ' + (index + 1) + ':</h3>');
    qElement.append(header);
    
    var question = $('<p>').append(questions[index].question);
    qElement.append(question);
    
    var radioButtons = createRadios(index);
    qElement.append(radioButtons);
    
    return qElement;
  }
  
  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }
  
  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }
  
  // Displays next requested element
  function displayNext() {

    quiz.fadeOut(function() {
      $('#question').remove();

    $("#info").html("Number of correct ones: " + correctOnes());      
      if(questionCounter < questions.length){

        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value='+selections[questionCounter]+']').prop('checked', true);
        }
        
        // Controls display of 'prev' button
        if(questionCounter === 1){
          $('#prev').show();
        } else if(questionCounter === 0){
          
          $('#prev').hide();
          $('#next').show();
        }
      }else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }
  
  function displayScore() {
    var numCorrect = 0;
    var score = $('<p>',{id: 'question'});
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
    
    score.append('You got ' + numCorrect + ' questions out of ' +
                 questions.length + ' right!');
    return score;
  }

  function correctOnes() {
    var numCorrect = 0;
    var score = $('<p>',{id: 'question'});
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
    
    score.append('You got ' + numCorrect + ' questions out of ' +
                 questions.length + ' right!');
    return numCorrect;
  }
  
});
a{
  text-decoration: none;
}

h1 {
  text-align: center;
  font-size: 45px;
  font-family: cursive;
  color: teal;
 text-shadow: 2px 1px black;

  
}
ul {
 margin-right: auto;
 margin-left: auto;
}

li {
 list-style: none;
}

.radiochoices{
  font-family: comic sans ms;
  color: white;
  font-size: 20px;
} 

#container {
    margin:auto;
    width: 50%;
    padding: 0px 0px 30px 0px;
    background-color:#008080;
    border:4px solid #B0E0E6;
    border-radius: 13px;
    color:#000000;
    font-weight: bold;
    box-shadow: 5px 5px 10px #888;
}

.center {
  margin: 205px 40px 0px 245px
}
.reset {
  display:none;
}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id='container'>
        <div id='quiz'></div>
        <button class="btn btn-info btn-large" id='next'><a href='#'>Next</a></button>
        <button class="btn btn-warning btn-large reset" id='prev'><a href='#'>Prev</a></button>
        <button class="btn btn-info btn-large" id='start'> <a href='#'>Start Over</a></button>
        <div id = "info"></div>
      </div>

Comments