Тест с множественным выбором также с верным / ложным опциями

Question

Мне нужна помощь с кодом для викторины с множественным выбором, но также нужны опции true/false. У меня есть код, который делает тест для вопросов с множественным выбором с 3 вариантами, это нормально. Но когда мне нужен вопрос с двумя вариантами ответа "истина / ложь", последний вариант не будет скрыт, вместо этого отображаются третьи варианты из предыдущего вопроса. Я попробовал почти все, но я не мог понять, как я могу скрыть третий вариант в вопросе at / f. Следующий код - это код, который я использую. Слово "йоло" в опции обозначает опции, которые следует скрыть. Можно ли спрятаться?

$(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();
});

Еще одна проблема. Викторина никогда не заканчивается, когда у викторины были все вопросы, она начинается снова с вопроса 1. Есть ли что-то, что могло бы закончить викторину с последним вопросом?

Тест (вопросы и варианты) на голландском языке. Это также мой первый вопрос, который я публикую, так что он может быть неправильным (правильное место, путь и тому подобное).

---

Я забыл сказать, что версия JQuery - 1.9.1, а версия JQueryMobile - 1.3.1. По некоторым причинам это все еще не будет работать. Я попробовал 3 ответа, насколько я их понял. Может ли кто-то отредактировать весь файл так, как он (или она) считает, что он должен работать.

Answer 1

Вы можете изменить код меток радиосвязи на цикл, тогда он может обрабатывать любое количество опций (2,3,4,100...). Таким образом, вам не нужна опция 'yolo', вы можете просто установить список опций на количество опций, которые вы хотите предоставить.

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

Не уверен, что синтаксис правильный, он полностью не проверен и достаточно близок к тому, что вам нужно:)

С другой стороны, у вас нет ничего, чтобы перестать загружать вопросы. Каждый раз, когда страница загружается (при начальной загрузке и после каждой отправки), она выбирает вопрос и отображает его. Вы можете поставить галочку, если questionIndex % questions.length равен 0, а затем показать сообщение Test Complete вместо отображения вопроса. Или просто удалите оператор мода, чтобы убедиться, что вы только один раз просматриваете список вопросов и вводите условие для его контроля:

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

Начните с форматирования вашего объекта json. Ваши ключи не должны быть строками:

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']
  }


];

Отвечая на ваш второй вопрос, вы можете использовать метод сплайс для удаления используемых объектов из массива:

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

Он удаляет элемент с произвольным индексом в диапазоне [0, размер вашего массива]

Поместите весь код с помощью js и html в jsFidle ( http://jsfiddle.net/), включая приведенное выше решение, если вам нужна дополнительная помощь