Dynamic form generation and processing with pre-filled java script arrays

Question

I have an array of questions(Q[i]) and four options each(op[]). I have populated the data into it from mysql.

I wish to generate a dynamic form, below is the code for it, it is not working, let me know how to go about.

I wish to make a quiz something like http://www.w3schools.com/quiztest/quiztest.asp?qtest=PHP

Here is the code which I tried:

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

Thanks in advance

Answer 1

Use PHP JSON to fill the array

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

Dynamic form generation and processing with pre-filled java script arrays

Question

1 answers

solution1
0 ACCPTED 2011-03-01 14:32:23

Dynamic form generation and processing with pre-filled java script arrays

Question

1 answers

solution1 0 ACCPTED 2011-03-01 14:32:23

solution1
0 ACCPTED 2011-03-01 14:32:23