Викторина с несколькими вариантами ответов, также с вариантами «верно/неверно»

Мне нужна помощь с кодом для викторины с несколькими вариантами ответов, но также нужны варианты true/false. У меня есть код, который делает викторину для вопросов с несколькими вариантами ответов с 3 вариантами, это нормально. Но когда мне нужен вопрос «верно/неверно» с двумя вариантами, он не будет скрывать последний вариант, а вместо этого покажет третий вариант из предыдущего вопроса. Я пробовал почти все, но я не мог понять, как я могу скрыть третий вариант в вопросе t/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 ответа, насколько я их понял. Может ли кто-нибудь отредактировать весь файл так, как он (или она) считает, что он должен работать.


person E_onlinePC    schedule 26.01.2015    source источник
comment
Совершенно тангенциально: «истина» и «ложь» также могут рассматриваться как просто еще один «множественный выбор» для такого рода вещей.   -  person Andrew Barber    schedule 26.01.2015


Ответы (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']
  }


];

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

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

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

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

person Mike    schedule 26.01.2015

Вы можете изменить код метки вашего радио на цикл, тогда он сможет обрабатывать любое количество опций (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

};
person cf_en    schedule 26.01.2015
comment
Он показывает следующую ошибку: Uncaught SyntaxError: Неожиданный идентификатор. Я тоже не знаю, какие синтаксисы мне нужно использовать. Можете ли вы объяснить, что вы делаете с кодом. - person E_onlinePC; 27.01.2015
comment
Извините, я не думал о синтаксисе типа javascript. Изменил int на var, должно работать. Я отредактировал ответ для вас. - person cf_en; 27.01.2015
comment
Я попробовал вашу отредактированную версию, но она выдает следующую ошибку: Uncaught Error: невозможно вызвать методы для checkboxradio до инициализации; попытался вызвать метод «обновить». Я не уверен, что это значит, но я получил ту же ошибку, прежде чем задал вопрос, а затем сообщение не всегда появлялось. - person E_onlinePC; 27.01.2015
comment
В связи с этой ошибкой уже возникло несколько вопросов, которые могут помочь вам с использованием checkboxradio('refresh'). Вот только один из многих, которые вернет Google: заголовок ="jquery mobile uncaught не может вызывать методы для checkboxradio до инициализации"> stackoverflow.com/questions/12691780/ - person cf_en; 27.01.2015
comment
Мне просто нужно скопировать ту же строку над ней и просто удалить обновление из верхней? - person E_onlinePC; 27.01.2015
comment
Это то, что он, кажется, говорит, но я боюсь, что недостаточно осведомлен о проблеме, чтобы сказать, что это решение, и оно не вызовет никаких других проблем :) - person cf_en; 27.01.2015
comment
Эта проблема с обновлением решена, и теперь я смог протестировать вашу версию. Теперь проблема в том, что каждый вопрос имеет 3 варианта, а последние два варианта (второй и третий) одинаковы для всех вопросов, он показывает последние два варианта из первого вопроса. И каждый вопрос теперь имеет другую проблему. первый вариант из первого вопроса является первым вариантом из первого, 2-й вопрос имеет в качестве 1-го варианта 2-й вариант, 3-й вопрос имеет в качестве 1-го варианта 2-й вариант и 4-й вопрос имеет в качестве 1-го варианта 2-й вариант из вопроса 3 .В конце концов вопрос остается на той же странице. - person E_onlinePC; 28.01.2015
comment
Я изменил условие цикла на i ‹ random.options.length (убрал часть -1, которая была логически неверной. Неприменимые радиостанции должны быть скрыты, поэтому, если есть только два варианта, скройте третий и т. д. Вы можно сделать это с помощью другого цикла for.., который повторяет циклы от random.options.length до количества переключателей и скрывает каждый, но при загрузке следующей страницы вам может потребоваться снова сделать их видимыми. - person cf_en; 29.01.2015