Multiple choice quiz also with true/false options

Question

I need some help with a code for a multiple choice quiz, but it also needs true/false options. I have a code that makes a quiz for a multiple choice questions with 3 options, that's fine. But when i want a true/false question with 2 options, it won't hide the last option, instead is shows the third options from the previous question. I tried almost everything but i couldn't figure out how i can hide the third option in a t/f question. The following code is the code i use. The word "yolo" in a option stands for the options that should be hided. Is it possible to hide?

$(function() {

var currentQuestion = null;
var questionIndex = 0;

// Your list of questions. Each question has an answer (either a,b or c)
// and then a set of "options" in the question
var questions = [

  { 
      'answer': 'a',
      'question': 'Wat is de correcte syntaxis in een HTML om te verwijzen naar een extern JS bestand:',
      options: ['<script src="xxx.js">', '<script name="xxx.js">', '<script href="xxx.js">']
  },
  { 
      'answer': 'c',
      'question': 'Welk teken is het teken voor JQuery in JQuery:',
      options: ['Het ? teken', 'Het % teken', 'Het $ teken']
  },
  {
      'answer': 'b',
      'question': 'Wat is JQuery van JavaScript?',
      options: ['Een uitbreiding (meer mogeliijkheden)', 'Een simpele versie (minder codes voor meer)', 'Hetzelfde (alleen de titel is anders)']
  },
  {
      'answer': 'b',
      'question': 'JQuery kan je direct gebruiken in een HTML bestand?',
      options: ['Juist','Onjuist', 'yolo']
  },

];

// Detect when the submit button is clicked and check if the question
// was answered correctly
$('input[type="submit"]').click(function() {
    var val = $('#questions').find('input:checked').val();
    if(currentQuestion) {
        if(currentQuestion.answer == val) {
            alert("Goed zo!");
            showQuestion();
        } else {
            alert("Jammer, probeer het nog eens.");
        }
    }
    return false;
});

// Set the value of an option in the question
function setRadioLabel(radioId, text) {
     $('label[for="' + radioId + '"]').find('span.ui-btn-text').text(text);
};

// Show a random question
function showQuestion() {
    // Grab next question, and increment so we get a new one next time
    var random = questions[questionIndex++ % questions.length];

    $('#question').text(random.question);

    $('input[type="radio"]').attr('checked', false).checkboxradio('refresh');

    setRadioLabel('radio1', random.options[0]);
    setRadioLabel('radio2', random.options[1]);
    setRadioLabel('radio3', random.options[2]);
    currentQuestion = random;
};

// Start the question stuff off
showQuestion();
});

Another issue. The quiz never ends, when the quiz had all the questions, it starts again with question 1. Is there something that could end the quiz with the last question?

The quiz (questions and options) is in Dutch. It is also my first question i post, so it may not be correct (right place and way and that sort of things).

---

I forgot to say that the JQuery version is 1.9.1 en the JQueryMobile version is 1.3.1. For some reason it still wont work. I tried the 3 answers as far as i understood them. Could someone edit the whole file in the way he (or she) thinks it should work.

Answer 1

You can change your radio labels code to a loop, then it can handle any number of options (2,3,4,100...). In this way, you don't need the 'yolo' option, you can just set the options list to the number of options you want to provide.

for(var i = 0; i < random.options.length; i++)
{
  setRadioLabel('radio' + i.toString(), random.options[i]);
}

Not sure if the syntax is exactly right, it's completely untested and it's fairly close to what you need :)

For the other point, you haven't got anything in there to stop loading questions. Every time the page loads (on initial load and after each submit) it picks a question and displays it. You could maybe put a check in for if questionIndex % questions.length is 0 then show a Test Complete message instead of displaying the question. Or just remove the mod operator to ensure you only go through the list of questions once and put a condition in to control it:

function showQuestion() {
  // Grab next question, and increment so we get a new one next time
  if (questionIndex < questions.length) {
    var random = questions[questionIndex++];

    $('#question').text(random.question);

    $('input[type="radio"]').attr('checked', false).checkboxradio('refresh');

    for(var i = 0; i < random.options.length; i++)
    {
      setRadioLabel('radio' + i.toString(), random.options[i]);
    }
    currentQuestion = random;
    return;
  }
  // TODO: Code to show a Test Complete message and score here

};

Answer 2

Start with formatting your json Object. Your keys shouldnt be strings:

var questions = [

  { 
      answer: 'a',
      question: 'Wat is de correcte syntaxis in een HTML om te verwijzen naar een extern JS bestand:',
      options: ['<script src="xxx.js">', '<script name="xxx.js">', '<script href="xxx.js">']
  },
  { 
      answer: 'c',
      question: 'Welk teken is het teken voor JQuery in JQuery:',
      options: ['Het ? teken', 'Het % teken', 'Het $ teken']
  },
  {
      answer: 'b',
      question: 'Wat is JQuery van JavaScript?',
      options: ['Een uitbreiding (meer mogeliijkheden)', 'Een simpele versie (minder codes voor meer)', 'Hetzelfde (alleen de titel is anders)']
  },
  {
      answer: 'b',
      question: 'JQuery kan je direct gebruiken in een HTML bestand?',
      options: ['Juist','Onjuist', 'yolo']
  }


];

Answering your second question, you can use splice method to remove used objects from array:

questions.splice((Math.floor(Math.random()*(questions.length))),1);
console.log(questions);

It removes item at random index in range [0, size of your array]

Put your whole code with js and html in jsFidle (http://jsfiddle.net/) including above solution if you need more help