Question

我一直在尝试用HTML和JavaScript创建一个测验我的HTML有以下代码。我只是想知道是否有一种不同的技术来创建这样的测验。我的意思是我需要输入大量的html然后编辑每个id元素。它是如何在生产中完成的？

＆＃13;

<p>What is the capital of Poland?</p>
<ul>
  <li><input type="radio" value="wasras" id="warsaw" name="question2" />
    <label for="warsaw">(<span>K</span>A) Warsaw</label></li>
  <li><input type="radio" value="moscow" id="mosco" name="question2" />
    <label for="mosco">(<span>K</span>B) Moscow</label></li>
  <li><input type="radio" value="london" id="londo" name="question2" />
    <label for="londo">(<span>K</span>C) London</label></li>
</ul>

＆＃13;

Answer 1

如果你可以使用javascript（特别是jQuery），你可以在客户端进行。

您可以使用所有Q＆amp; A创建json对象，然后重复它。

请阅读评论，如果不清楚，请告诉我。

var qna = [
  {
    q: 'What is the capital of Poland?',
    a: [
      'wasras',
      'moscow',
      'london'
    ]
  },
  {
    q: 'What is the capital of Poland?',
    a: [
      'wasras',
      'moscow',
      'london'
    ]
  }
];

// iterate each question
$.each(qna, function(qIndex, q) {
  // create wrapper div for each question
  var wDiv = $('<div />'),
      // headline 3 for the question text
      qElm = $('<h3>' + q.q + '</h3>'),
      // list for the answers
      ansUl = $('<ul />');

  // iterate each answer
  $.each(q.a, function(i, a) {
    // append li with label and input for each answer and append it to the ul
    $('<li />').html('<label><input type="radio" value="' + a + '" name="group_' + qIndex + '" />' + a + '</label>').appendTo(ansUl);
  });

  // append the h3 and the ul to the wrapper div
  wDiv.append(qElm).append(ansUl);
  // append the wrapper div to to quiz container
  $('#quiz').append(wDiv);
});

$('form').submit(function(e) {
  e.preventDefault();
  alert($(this).serialize());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="quiz"></div>
  <button>Submit</button>
</form>

对jQuery函数的引用：

如何自动进行测验？

1 个答案: