多项选择测验也有真/假选项

Question

我需要一些关于多项选择测验代码的帮助，但它也需要真/假选项。我有一个代码可以对具有 3 个选项的多项选择题进行测验，这很好。但是当我想要一个有 2 个选项的真/假问题时，它不会隐藏最后一个选项，而是显示上一个问题的第三个选项。我几乎尝试了所有方法，但我不知道如何在 t/f 问题中隐藏第三个选项。以下代码是我使用的代码。选项中的“yolo”一词代表应该隐藏的选项。可以隐藏吗？

$(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

从格式化你的 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/) 中，包括上述解决方案

Answer 2

您可以将单选标签代码更改为循环，然后它可以处理任意数量的选项（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，然后显示测试完成消息而不是显示问题。或者只是删除 mod 运算符，以确保您只浏览一次问题列表并输入一个条件来控制它：

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

};