Question

我正在试图找出建立调查问卷的最佳方法。见下文。

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

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

Answer 1

只是为了给你一个想法：

LIVE DEMO

HTML：

<div id="QA">

  <div id="qDIV">    
    <h2></h2>
    <button>False</button>
    <button>True</button>
  </div>

  <div id="response">
     <p></p>
     <button id="prev">Back</button>
     <button id="next">Next</button>
     <button id="score">Score</button>
  </div>

</div>

<pre></pre>

现在让我们创建一个对象文字数组来存储数据：

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

上一个答案：

<强> LIVE DEMO

有这个简单的HTML：

<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...

];

在上面，您可以创建所需数量的按钮和答案。 jQuery将从所需的对象Array中创建按钮。比设置valid指针告诉问卷逻辑哪个答案索引是正确的using 0, 1, 2...。
在jQ创建我们的按钮后，在按钮上单击，您可以检索它的索引并从对象文字中定位所需的答案，并确定点数，看看点击的按钮索引是否与您的valid值匹配。
如您所见，您可以通过在每次点击按钮后递增计数器变量来推进您的问题（我们将调用qc）：

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

使用jQuery创建真假调查问卷

1 个答案:

上一个答案：