Question

我有一系列问题（Q [i]）和每个选项四个（op []）。我已经从mysql填充了数据。

我希望生成一个动态表单，下面是它的代码，它不起作用，让我知道如何去做。

我希望做一个类似的测验 http://www.w3schools.com/quiztest/quiztest.asp?qtest=PHP

以下是我尝试的代码：

for(i=1;i<=10;i++)
    {
        <form name="Quiz Test">
        document.write(Q[i]+"</br>");
        <input type="radio" name="choice" value=op1[i]> document.write(op1[i])<br>
        <input type="radio" name="choice" value=op2[i]> document.write(op2[i])<br>
        <input type="radio" name="choice" value=op3[i]> document.write(op3[i])<br>
        <input type="radio" name="choice" value=op4[i]> document.write(op4[i])<br>
        //<input type="submit" onclick="get_radio_value()">
        </form>
    }

提前致谢！

Answer 1

使用PHP JSON填充数组

<html>
<head>
<style>
.questionDiv { display:none }
</style>
<script type="text/javascript">
// the array below is of course fillable on the server. 
// Just dump the array to JSON
// var quiz = <?PHP echo $someJSON ?>    
var quiz = [
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]}
]; // note no comma after the last
function next(idx) {
  document.getElementById('Q'+idx).style.display='none';
  document.getElementById('Q'+(idx+1)).style.display='block';
}
window.onload=function() {
  var html = "";
  for(var i=0,n=quiz.length;i<n;i++) {
    html += '<div class="questionDiv" id="Q'+i+'"><span class="question">'+(i+1)+'. '+quiz[i].Q+'</span><br />'
    var answer = quiz[i].A;
    for (var j = 0, m=answer.length;j<m;j++) {
      var ident = 'A'+i+'_'+j;
      html += '<input type="radio" name="'+ident+'" id="'+ident+'" value="'+j+'" /><label for="'+ident+'">'+(j+1)+'. '+answer[j]+'</label><br />';
    }
    if (i<quiz.length-1) html += '<input type="button" onclick="next('+i+')" value="Next"/>';
    else html += '<input type="submit" />';
    html += '</div>'
  }
  document.getElementById('quizDiv').innerHTML=html;
  document.getElementById('Q0').style.display='block';
}
</script>
</head>
<body>
<form action="answer.php">
<div id="quizDiv">
</div>
</body>
</form>
<html>

使用预先填充的javascript数组生成和处理动态表单

1 个答案: