Javascript 使用jQuery创建真假问卷

我想找出最好的方法来建立一个调查问卷。见下文

这是我在代码中得到的，它工作得很好，但正如你所看到的，在仅仅两个问题之后，它变得非常长。浓缩这段代码的最好方法是什么，这样我就不会重复太多次了

// find all anchor tag and prevent default behavior
$('.questions').find('a').on('click', function(e){
    e.preventDefault();
});

var ques1 = $('#question1'),
    q1 = $('.question1'),
    q1True = $('.question1-true').hide(),
    q1False = $('.question1-false').hide();

var ques2 = $('#question2'),
    q2 = $('.question2').hide(),
    q2True = $('.question2-true').hide(),
    q2False = $('.question2-false').hide();

(function () {
    // click button false
    $('#question1 .btn-false').on('click', function(){
        q1.hide();
        q1True.fadeIn();
    });
    // click button true
    $('#question1 .btn-true').on('click', function(){
        q1.hide();
        q1False.fadeIn();
    });
    // click previous button
    $('#question1 .prev').on('click', function(){
        q1True.hide();
        q1False.hide();
        q1.show();
    });
    // click next button
    $('#question1 .next').on('click', function(){       
        ques1.hide();
        q2.show();
    }); //end question1

    // begin question 2
    $('#question2 .btn-false').on('click', function(){
        ques2.show();
        q2.hide();
        q2True.show();
    });

    $('#question2 .btn-true').on('click', function(){
        ques2.show();
        q2.hide();
        q2False.show();
    });
})();

---

给你一个想法：

HTML:

通过这种方式，我们可以始终跟踪这些值，并在每个阶段向当前问题对象中注入用户答案

<div id="QA">    
  <h2></h2>
  <span id="buttons"></span>
  <p>Points : <span>0</span></p>
</div>

在上面，您可以创建尽可能多的按钮和答案。jQuery将从所需的对象数组中创建按钮。然后设置一个

有效的

指针，告诉问卷逻辑哪个答案索引是正确的

，使用0、1、2…

jQ创建我们的按钮后，点击按钮可以检索其索引并从对象文本中找到所需的答案，并确定点，查看点击的按钮索引是否与您的

有效值相匹配。

正如您所看到的，您可以通过在每次单击按钮后增加一个计数器变量（我们称之为
qc
）来推进您的问题：

var$qa=$（“#qa”），
$QUOTE=$（$h2'，$qa），
$buttons=$（“#buttons”、$qa），
$points=$（$p>span，$qa），
questionnaireLength=questionly.length，//有多少个Q？
qc=0，//当前问题计数器
点数=0；//当前点
函数QandA（）{
var quest=调查问卷[qc]，
问题，
validix=quest.valid，
btns=quest.buttons，
答案=quest.answers；
$问题.文本（问题）；
如果（qc>=问题长度）{
返回警报（“游戏结束”）；
}
//生成包含文本的按钮：
$buttons.empty（）；
对于（var i=0；最好的方法是尝试并构建它。我们希望问题中包含代码。当你得到代码时，解释什么不起作用，人们可能会帮助你。哦，天哪，这是一些杀手级的东西！！…我认为这可能是一种过激行为。所有问题都基于真假，没有存储任何内容。简单地说，如果你单击“真”或false，它会显示正确的答案以及上一个和下一个按钮。当您单击“下一个”或“上一个”时，它只会显示下一个问题或上一个问题，并隐藏答案，整个过程会重复一遍。@user3128136 Ok，更简单。使用
prev
和
next
b的目的是什么uttons？@user3128136你如何跟踪分数？你如何跟踪任何事情？只留下评论而不尝试实施我的建议…你有实际问题吗？目前，从你在Q中提供的代码来看，你的问卷可用性是四舍五入到
0
上一个和下一个按钮的目的是显示Question以及true和false按钮。就像上面我包括的两个屏幕截图。没有分数，这不是游戏，只是一个简单的问题和答案的显示和隐藏。
var questionnaire = [
  {
    "question" : "The Earth is round.",
    "response" : "The Earth is round!",  
    "correct"  : 1    // 0=False, 1=True
  },
  {
    "question" : "The 'cravat' is originally from France.",
    "response" : "The 'cravat' is from Croatia!",
    "correct"  : 0
  },
  {
    "question" : "Is Java == JavaScript?",
    "response" : "It's a different language.",
    "correct"  : 0
  } // Add comma and more objects.
];

var $qDIV     = $('#qDIV'),
    $rDIV     = $('#response'),
    $qH2      = $("h2",     $qDIV),
    $answer   = $("button", $qDIV),
    $response = $("p",      $rDIV),
    tot       = questionnaire.length,
    c         = 0; // Current Q array counter 

function QandA( idx ){  
   $qDIV.fadeTo(600,1); 
   $rDIV.hide();  
   var currQ = questionnaire[c];   // The Object literal from Array
   var isCorrect = currQ.correct;  // 0 or 1?
   var answerIsCorrect = idx==isCorrect; // (compare values) Returns boolean 
   var resp = answerIsCorrect ? "Great!" : "Wrong!";
   currQ.answer = idx;             // Put user answer into object (0 or 1)
   $qH2.text( (c+1) +'. '+ currQ.question );
   $response.text( resp +' '+ currQ.response );
}
QandA();

$answer.click(function(){   
    var idx = $answer.index(this); // 0 or 1  (get button index)
    QandA( idx );
    $rDIV.fadeTo(600,1);
    $qDIV.hide();
    console.log( JSON.stringify(questionnaire, null, 2) ); // TEST ONLY
});

$('#prev, #next').click(function(){
    c = this.id=='next' ? ++c : c ; // advance or repeat Question
    QandA();
    $('#next').toggle(c<tot-1);
    $('#score').toggle(c>=tot-1);
});

$('#score').click(function(){
  $('pre').text( JSON.stringify(questionnaire, null, 2) ); // TEST
  c = 0; // reset questionnary to first question
  QandA(); // Restart
});

<div id="QA">    
  <h2></h2>
  <span id="buttons"></span>
  <p>Points : <span>0</span></p>
</div>

var questionnaire = [

  {
    "question" : "The earth is...",
    "valid"    : 1, // indicates the correct array number, use 0, 1...
    "buttons"  : ["A cube", "Round"],
    "answers"  : [ "Ohh, c'mon...", "You got it! It's round!"]  
  },
  {
    "question" : "The Cravat is originally from:",
    "valid"    : 0,
    "buttons"  : ["Croatia", "France", "Germany"],
    "answers"  : [ "Great", "Wrong, it's from Croatia!", "Wrong... Sorry"]  
  },
  {
    "question" : "Is Java == JavaScript?",
    "valid"    : 0, 
    "buttons"  : ["False", "True"],
    "answers"  : ["Exatcly!", "Ohh, c'mon..."]
  } // add comma and more Object literals...

];

var $qa       = $('#QA'),
    $question = $("h2", $qa),
    $buttons  = $("#buttons", $qa),
    $points   = $("p>span",$qa),
    questionnaireLength = questionnaire.length, // How many Q?
    qc        = 0,                              // Current Question counter
    points    = 0;                              // Current points

function QandA(){

  var quest = questionnaire[qc],
      question = quest.question,
      validIdx = quest.valid,
      btns     = quest.buttons,
      answer   = quest.answers;

  $question.text( question );

  if(qc >= questionnaireLength){
    return alert("game over");
  }

  // generate buttons with text:
  $buttons.empty();
  for(var i=0; i<btns.length; i++){
    $buttons.append("<button>"+ btns[i] +"</button>");
  }

  // Retrieve generated buttons
  var $btn = $("button", $buttons);

  // Assign click
  $btn.one('click', function(){  
    var idx = $btn.index(this); // get button index
    alert("(valid idx is: "+ validIdx +" Clicked button idx: "+ idx +")");
    alert("Game says: "+ answer[idx] );
    points += (idx === parseInt(validIdx, 10) ? 5 : -5);
    $points.text( points );
    // Next question
    qc++; QandA();  // increment question counter and set new game
  });

}
QandA(); // Start game