-2

I am making a quiz website ,on click it get questions and options from database in a row.I want to display question in one div and options in other 3 divs. i have two pages for it one is careerguidance.php and one is getquestion.php.

Careerguidance.php

    <head>
    <script>

    var str=0; 
    function showquestion() {

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("div1").innerHTML = xmlhttp.responseText;
            //  document.getElementById("dop1").innerHTML = xmlhttp.responseText;
            //  document.getElementById("dop2").innerHTML = xmlhttp.responseText;
            //  document.getElementById("dop3").innerHTML = xmlhttp.responseText;

            }
        }

        str++;
        xmlhttp.open("GET","getquestion.php?idd="+str,true);
        xmlhttp.send();

}




</script> 

</head>

<body>
       <button  onClick="showquestion()">Next</button>

       <div class='quiz' id='div1'><h2>$question</h2></div>

      <div class='quizoption' id='dop1' onClick=''><h4></h4></div>
      <div class='quizoption' id='dop2' onClick=''><h4></h4></div>
      <div class='quizoption' id='dop3' onClick=''><h4></h4></div>

</body>

getquestion.php

 <?php
$idd = intval($_GET['idd']);

require_once('db_con.php');
//$sq="select id from questions";
//$q_id = (isset($_GET['id']) ? intval($_GET['id']) : 1);
//static $r=1;
//static $q_id=0;
//$q_id++;
$sql="SELECT * FROM questions where id= '".$idd."'";
//$sql="SELECT * FROM questions WHERE id =$r";
$result = mysql_query($sql);









/*

echo "<table>
<tr>
<th>Question</th>
<th>Option1</th>
<th>Option2</th>
<th>Option3</th>
<th>Next</th>
</tr>";
*/
while($row = mysql_fetch_array($result)) {







   // echo "<tr>";
    echo "<h2>";
    echo $row['question'];
    echo "</h2>" ;
   // echo "<br>" . $row['option1'] ;
   // echo "<td>" . $row['option2'] . "</td>";
   // echo "<td  colspan='2'>" . $row['option3'] . "</td>";

   // echo "</tr>";

    }
//echo "</table>";








mysql_close($conn);
?>
</body>
</html>    
Mr_question
  • 71
  • 2
  • 10

1 Answers1

0

You need to parse your response in parts and then assign values to specific divs. E.g. if your xmlhttp.responseText` looks like this:

{
    "question": "Who is it?",
    "answers": ["Merry", "Billy", "Joe"]
}

you will something like this:

function buildQuestionaree(data) {
    // 
    // if data is a string
    // data = JSON.parse(data);
    // 
    var question = data.question;
    var answers = data.answers;

    document.getElementById("div1").innerHTML = question;
    document.getElementById("dop1").innerHTML = answers[0];
    document.getElementById("dop2").innerHTML = answers[1];
    document.getElementById("dop3").innerHTML = answers[2];
}
zmii
  • 4,123
  • 3
  • 40
  • 64