Question

我正在基于多种选择创建表单。当学生参加考试时，计数器将从页面顶部开始。计数器与用户选择的问题数相关。

示例：如果用户选择了20个问题且每个问题的间隔时间为1分钟 - 那么计数器将运行最多20分钟，这意味着1200秒。

这是用户端计数器的代码：

<input type="hidden" name="que" id="que" value="<?php echo $_POST['no_que']?>"/>
<input type="hidden" name="toggle" id="toggle"/>
<form method="post" action="result_test.php">
<input type="hidden" id="no_que" name="no_que" value="<?php $_POST['no_que']?>"/>
<table border="1" align="center">
<tr>
<td align="center">
<span id="countdown" class="timer" style="font-size:xx-large"></span>
</td>
</tr>
<tr>
<td align="center">
<div id="countdowndiv" class="timer"></div>
</td>
</tr>
<?php
include('connection.php');
$sql="select class_id from class where class_name='".$_REQUEST['class']."'";
$query=mysql_query($sql) or die("query failed".mysql_error());
while($row=mysql_fetch_array($query))
{
$class_id=$row['class_id'];
$sql1="select subject_id from subject where subject_name='".$_REQUEST['subject']."'";
$query1=mysql_query($sql1) or die("query failed".mysql_error());
while($row1=mysql_fetch_array($query1))
{
$subject_id=$row1['subject_id'];
$sql2="select * from test where class_id='$class_id' and subject_id='$subject_id' and chapter>='".$_REQUEST['chapter1']."' and chapter<='".$_REQUEST['chapter2']."' ORDER BY     RAND() LIMIT 0,100";
$query2=mysql_query($sql2) or die("query failed".mysql_error());
while($row2=mysql_fetch_array($query2))
{
?>
<input type="hidden" name="hf" id="hf" value="<?php echo $_REQUEST['no_que']?>"/>
<tr>
<td>
<label name="<?php echo $row2['id']?>"><?php echo $row2['question']?></label><br>
<input type="radio" name="option<?php echo $row2['id'] ?>" id="option1" value="1"/><?php echo $row2['option_1']?>
<input type="radio" name="option<?php echo $row2['id'] ?>" id="option2" value="2"/><?php echo $row2['option_2']?>
<input type="radio" name="option<?php echo $row2['id'] ?>" id="option3" value="3"/><?php echo $row2['option_3']?>
<input type="radio" name="option<?php echo $row2['id'] ?>" id="option4" value="4"/><?php echo $row2['option_4']?>
</td>
</tr>
<?php
}
}
}
?>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>

这是计时器的JavaScript：

//script for timer start
var no_que=document.getElementById('que').value;
var get_seconds=no_que*60;
var MAX_COUNTER = get_seconds;
var time_interval=get_seconds/12;
var counter = null;
var counter_interval = null;
var temp;
function setCookie(name,value,days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1,c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length,c.length);
        }
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}

function resetCounter() {
    counter = MAX_COUNTER;
}

function stopCounter() {
    window.clearInterval(counter_interval);
    deleteCookie('counter');
}

function updateCounter() {
    var msg = '';
    if (counter > 0) {
        counter -= 1;
        msg = counter;
        setCookie('counter', counter, 1);
    }
    else {
        msg = "Counting finished.";
        stopCounter();
    }
    var el = document.getElementById('countdown');
    if (el) {
        el.innerHTML = msg;
        document.getElementById('toggle').value=msg;
        if(msg==get_seconds)
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/12.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-time_interval) && msg<get_seconds)
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/11.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*2)) && msg<(get_seconds-time_interval))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/10.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*3)) && msg<(get_seconds-(time_interval*2)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/9.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*4)) && msg<(get_seconds-(time_interval*3)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/8.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*5)) && msg<(get_seconds-(time_interval*4)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/7.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*6)) && msg<(get_seconds-(time_interval*5)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/6.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*7)) && msg<(get_seconds-(time_interval*6)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/5.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*8)) && msg<(get_seconds-(time_interval*7)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/4.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*9)) && msg<(get_seconds-(time_interval*8)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/3.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*10)) && msg<(get_seconds-(time_interval*9)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/2.png' width='100px' height='100px'/>";
        }
        if(msg>=(get_seconds-(time_interval*11)) && msg<(get_seconds-(time_interval*10)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/1.png' width='100px' height='100px'/>";
        }
        if(msg<(get_seconds-(time_interval*12)))
        {
        document.getElementById('countdowndiv').innerHTML = "<img src='images/0.png' width='100px' height='100px'/>";
        }
    }
}

function startCounter() {
    stopCounter();
    counter_interval = window.setInterval(updateCounter, 1000);
}

function init(temp) {
    if(!temp)
    {
    counter = getCookie('counter');
    }
    else
    {
    counter=temp;
    }
    if (!counter) {
        resetCounter();
    }
    startCounter();
}

init();

/*toggle function start*/
function toggleoff()
{
window.clearInterval(counter_interval);
deleteCookie('counter');
}
function toggleon(temp)
{
init(temp);
}
/*toggle function end*/
//script for timer end

现在，问题是在管理页面上有2个按钮可以打开和关闭计数器。第一个按钮是开始，第二个按钮是停止。现在，当管理员点击开始按钮时，计数器应该启动，当他们点击停止按钮时，计数器应该停止。

我尝试过很多没有运气的事情，因为我的管理页面位于 admin - 文件夹中。

那么，任何人都可以向我建议如何获得上述用户端PHP文件中声明的"<input type="hidden" name="togggle" id="toggle" />"值的解决方案到管理员页面，因为此隐藏字段包含计数器值。

Answer 1

您可以选择以下两种方法之一。

您从客户端轮询并询问服务器您应该处于什么状态，或者您可以使用类似Web套接字的东西。无论哪种方式，您的管理面板都会将其启动停止状态存储在某处。

<强>轮询通过轮询，您可以每x秒向服务器发出一次请求，以请求您应该处于的当前状态。在您遇到秒的情况下，如果有多人参加测试并且每秒都进行一次轮询，则可能要求很高。你可以采取另一种方法，并使用长轮询，你可以在许多地方阅读。

网络套接字 如果您使用的是现代浏览器，Web套接字将是理想的选择。它们允许您在状态发生变化时立即从服务器将信息推送到客户端，而无需客户端继续询问。

Answer 2

您是否尝试过ajax查询？我认为你可以使用jQuery并检查ajax在管理面板中按下了哪个按钮然后你可以编程在成功函数中做什么。 https://api.jquery.com/jQuery.post/

当在管理员中按任何按钮时，你应该存储它（可能存储在文件中或者可能存储在数据库中）

Answer 3

加载文件的位置无关紧要。您可以像访问页面中的任何其他输入一样访问DOM中的隐藏输入字段。

//if you can do this:
var no_que=document.getElementById('que').value;

// then you also can do do this.
var t = document.getElementById('toggle');
// do whatever with t.value

PHP / Javascript - 管理员端的启动/停止计数器

3 个答案: