如何将带有单选选项的JavaScript数组传递给另一个PHP文件?

时间:2019-04-12 21:32:13

标签: javascript php jquery json

我建立了一个在线考试门户,其中的问题来自使用php和mysqli的数据库。我通过onclick事件使用ajax在页面上加载这些问题。在onclick函数中,我创建了一个数组,该数组存储用户检查的单选选项并加载下一个问题。

在带有onclick事件的最后一个问题按钮中,该事件已保存,下一步被隐藏,然后出现一个提交按钮,该按钮应采用该问题的单选选项,将其推入数组并转到check.php文件。我已完成除了提交部分外,我无法在数组中插入单选选项并将其发送到php文件中的所有内容。我使用了json.stringify,但它不起作用。我应该尝试其他方法吗?请帮忙。

这是整个HTML代码:-

    <h3 class="header">ONLINE EXAM SOFTWARE</h3>

        <div style="float:right;">
            <p>welcome <?php echo $_SESSION['userUId']; ?> <br>Time Left</p>
            <span id="Countdown"></span><br>
            <div class="div5">
            <p>You are viewing <strong>English Language</strong> section</p><br>

            <p>Question Palette:</p>
            <div class="container">
            <div>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(1)" style="margin-right:16px">1</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(2)" style="margin-right:16px">2</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(3)" style="margin-right:16px">3</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(4)" style="margin-right:16px">4</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(5)" style="margin-right:16px">5</button>
                <button type="button" class="btn btn-info custom" onclick="updateQuestion(6)" style="margin-right:16px">6</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(7)" style="margin-right:16px">7</button>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(8)" style="margin-right:16px">8</button>
                <button type="button" class="btn btn-info custom"   onclick="updateQuestion(9)" style="margin-right:16px">9</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(10)" style="margin-right:16px">10</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(11)" style="margin-right:16px">11</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(12)" style="margin-right:16px">12</button>
            </div><br>
            <div>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(13)" style="margin-right:16px">13</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(14)" style="margin-right:16px">14</button>
                <button type="button" class="btn btn-info custom"  onclick="updateQuestion(15)" style="margin-right:16px">15</button>
            </div><br>
            </div><br><br>
            Legend:<br>
            <div>
                <button type="button" class="btn btn-success btn-md"></button>Answered
                <button type="button" class="btn btn-danger btn-md" style="margin-left:16px"></button>Not Answered  
            </div><br>
            <div><button type="button" class="btn btn-warning btn-md"></button>Marked
                <button type="button" class="btn btn-info btn-md" style="margin-left:16px"></button>Not visited
                </div><br>
                <div>
                <button type="button" class="btn btn-info btn-sm">Profile</button>
                <button type="button" class="btn btn-info btn-sm">Question Paper</button>
            </div><br>
            <div>   
                <button type="button" class="btn btn-info btn-sm">Instruction</button>
                <button type="Submit" class="btn btn-info btn-sm">Submit</button>
            </div>
            </div>
        </div>
        <div class="div1">  
        <h4>Group</h4>
            <button type="button" class="btn btn-primary active">GROUP 1</button>
        </div>


        <div class="div2">
        <h5><strong>SECTIONS</strong></h5>  
            <button type="button" class="btn btn-primary active">English Language</button>
            <button type="button" class="btn btn-primary disabled">Numerical Ability</button>
            <button type="button" class="btn btn-primary disabled">Reasoning Ability</button>
        </div><br>
        <div class="div3">
            <p><b>Question type</b>:single<b>|</b><b>Marks</b>:<span id="one">1:00</span>|<b>Neg Marks</b>:<span id="another">0.25</span></p>
            <p style="position:absolute;top:10px;right:30px">Elapsed Time: <span id="countdown">1</span>
            seconds</p>
        </div><br>
        <div class="div4">
            <strong>Questions</strong><br>
            <div style="position:absolute;top:10px;right:10px">
            <div class="dropdown">view in:
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Language
            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">English</a></li>
            <li><a href="#">Hindi</a></li>
            <li><a href="#">Latin</a></li>
        </ul>
        </div>
        </div>
        <div class="div7">
            <div id="questBox">
        <?php 
            $sql = "SELECT * FROM questionpaper where qno= 1";
            $query = mysqli_query($conn, $sql);

            if($rows = mysqli_fetch_array($query)){ ?>
                    <span id="qno"><?php echo $rows['QNo'];?></span>
                    <p><?php
                    echo $rows['Question'];
                    $_SESSION['QNO'] = $rows['QNo'];
                    $l= $_SESSION['QNO']
                    ?></p>
                    <form>
                        <input type="radio" name="op" value="<?php echo $rows['opA']; ?>">A.<?php echo $rows['opA']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opB']; ?>">B.<?php echo $rows['opB']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opC']; ?>">C.<?php echo $rows['opC']; ?><br>
                        <input type="radio" name="op" value="<?php echo $rows['opD']; ?>">D.<?php echo $rows['opD']; ?><br>
                    </form>
            <?php }  ?> 
        </div>
        </div>

<button type="button" class="btn btn-info btn-md" id="mark" onclick="loadNextQues(1)">Mark for Review & Next</button>
            <button type="button" class="btn btn-info btn-md">Clear Response</button>
            <button type="submit" class="btn btn-info btn-md" id="save" style="position:absolute;right:20px;bottom:35px" onclick="loadNextQues(0)">Save and Next</button>
            <form action="check.php">
            <button type='submit' class="btn btn-info btn-md" id="water" style="visibility:hidden;position:absolute;right:20px;bottom:35px" onclick="Checkanswers()">submit</button>

这是整个脚本代码:-

quesno=1;

function updateQuestion(q){
    quesno=q;
    console.log(quesno);
    url="http://localhost/assignments/load-questions.php?qno="+quesno;
    $.get(url,function(data,status){
        response=JSON.parse(data);
        console.log(response);
        var quest="<p>"+response.qno+" "+response.question+"</p>";
        quest+="<form>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opA +"'>A."+response.opA+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opB +"'>B."+response.opB+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opC +"'>C."+response.opC+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opD +"'>D."+response.opD+"<br>";
        quest+="</form>";
        document.getElementById("questBox").innerHTML=quest;
    });
    if(quesno == 15){
        document.getElementById("mark").style.visibility = 'hidden';
        document.getElementById("save").style.visibility = 'hidden';
        document.getElementById("water").style.visibility = 'visible';

    }
    else{
        document.getElementById("mark").style.visibility = 'visible';
        document.getElementById("save").style.visibility = 'visible';
        document.getElementById("water").style.visibility = 'hidden';
    }

}

var arr = new Array();
    function loadNextQues(flag){
        quesno++;

    var Selected = document.querySelectorAll('[name="op"]:checked');
    if (Selected != null) {
    Selected.forEach(function(radio) {
    arr.push(radio.value);
    });

    }
    console.log(arr);

    if(flag==1){
        //add css to the button for review
    }
    else{
        //add css for the button as answered
    }
        url="http://localhost/assignments/load-questions.php?qno="+quesno;
    $.get(url,function(data,status){
        response=JSON.parse(data);
        console.log(response);
        var quest="<p>"+response.qno+" "+response.question+"</p>";
        quest+="<form>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opA +"'>A."+response.opA+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opB +"'>B."+response.opB+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opC +"'>C."+response.opC+"<br>";
        quest+="<input type=\"radio\" name=\"op\" value='"+response.opD +"'>D."+response.opD+"<br>";
        quest+="</form>";
        document.getElementById("questBox").innerHTML=quest;
    });

    if(quesno == 15){
        document.getElementById("mark").style.visibility = 'hidden';
        document.getElementById("save").style.visibility = 'hidden';
document.getElementById("water").style.visibility = 'visible';
    }

}

function Checkanswers(){
    var Selected = document.querySelectorAll('[name="op"]:checked');
    if (Selected != null) {
    Selected.forEach(function(radio) {
    arr.push(radio.value);
    });

    }
    $.post('check.php', {
    data: arr
    }, function(response) {
    console.log(response);
    });

}

这是PHP代码:-

<?php
if(isset($_POST)){
    if(isset($_POST['data'])){
    $answers = $_POST['data'];
    echo $answers;
}}
?>

0 个答案:

没有答案