jquery горизонтальный таймбар для отправки страницы через переменное количество секунд - PullRequest
Новая
       9

jquery горизонтальный таймбар для отправки страницы через переменное количество секунд

2 голосов
/ 03 февраля 2011

Я предлагаю онлайн языковой тест, содержащий 50 вопросов.Каждый вопрос имеет свою максимальную продолжительность, выраженную в секундах.Количество секунд для каждого вопроса является переменной в базе данных.Допустим, для вопроса 1 переменная «секунд» равна 60 и содержит 5 флажков, и ему нужно проверить 3 из них.Это означает, что у участника есть 60 секунд, чтобы отметить 3 правильных флажка.Если участник проверяет правильные поля «вовремя», он нажимает «Отправить».Если пользователь не отвечает в течение 60 секунд, страница автоматически отправляется (даже если он не отметил все поля).В левом верхнем углу тестового окна кандидат может видеть перемещение горизонтальной временной шкалы.Количество секунд не отображается, но кандидат может ясно видеть, когда его время подходит к концу ...

Эта процедура работает без проблем в течение 4 лет, используя JavaScript (см. Ниже),ОДНАКО: он работает не во всех браузерах, например, Firefox не распознает его, и в результате пользователи Firefox имеют все время в мире для завершения или исследования своих ответов :-) До сих пор я простосказал: «Извините, наша система была оптимизирована только для Internet Explorer», и все.В конце концов, 95% всех браузеров были IE в любом случае.Но теперь я просмотрел пользовательскую статистику, и (в моем случае) только 67% всех участников все еще используют IE.Вот почему я в настоящее время ищу способ изменить свой сценарий от javascript «на странице» до JQUERY.Я обнаружил JQUERY только пару недель назад (я не программист), и я использовал JQUERY для ряда вещей, и это работает как шарм.И, кроме того, и что более важно, JQUERY, похоже, работает во ВСЕХ браузерах!

Однако я, похоже, не могу найти правильный код JQUERY, который бы справился с задачей.К вашему сведению, я прилагаю код, который сейчас использую ниже: 

<!--
#bar, #barbackground
{
position:absolute;
left:0;
top:0;
background-color:#FFFFFF;
}

#barbackground{
background-color:#c0c0c0;
}
-->
</style>
<CFOUTPUT>

<CFIF #selectvragen.Vragen_seconds# EQ 0><CFSET seconden=60><CFELSE><CFSET seconden=#selectvragen.Vragen_seconds#+2></CFIF>
<script language="JavaScript1.2">
//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=#seconden#
function postaction(){
    document.forms.formulier.submit()
//Example action could be to navigate to a URL, like following:
//window.location="submit.cfm?scoreperpage=#scoreperpage#&subcatID=#selectvragen.Vragen_subcatID#&level=#selectvragen.Vragen_level#&maxpunten=#maxpunten#&maxtebehalenpunten=#selectvragen.Vragen_maxpunten#&vnr=#vnr#&Tabel=too_late&optie=1&score=#score#&teller=#teller#&nieuwelijst=#nieuwelijst#&starttijdQuestion=#CreateODBCDateTime(now())#"

}

///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}
window.onload=initializebar
</script>

</CFOUTPUT>
            <script language="JavaScript1.2">
            if (document.all){
            document.write('<div id="baranchor" style="position:relative;width:200px;height:10px;visibility:hidden;">')
            document.write('<div id="barbackground" style="width:200px;height:10px;z-index:9"></div>')
            document.write('<div id="bar" style="width:200px;height:10px;z-index:10"></div>')
            document.write('</div>')
            }
            </script>

Я не знаю, как поступить, и не уверен, ясен ли этот вопрос ... Я мог бытакже присылайте скриншот теста, чтобы получить лучший обзор, если это необходимо?

Заранее спасибо,

С уважением,

Томас (Бельгия)

Ответы [ 2 ]

0 голосов
/ 29 августа 2011

В JQuery есть опция .submit (), например 

$("#formId").submit();

Я просто искал что-то похожее на то, что вы запрашиваете, и применил это, когда таймер достиг нуля.Он работает или у меня, но я еще не пробовал его во многих браузерах.

У меня возникли небольшие проблемы с его отправкой после того, как мой таймер достиг нуля.Как ни странно, замена ввода ввода 

<input type="submit" ... />

на div и затем использование команды JQuery, чтобы сказать «если пользователь щелкает div, отправить форму» (см. Ниже), похоже, работало нормально. 

$("#divIdToSubmit").click(function(){
  $("#formId").submit();
});

Я все еще в JQuery, так что я уверен, что есть лучший способ исправить мой код, который был сломан.

0 голосов
/ 15 февраля 2011

Очень хорошее и заметное представление, которое вы дали.

Однако я также новичок в jQuery / javaScript, я не могу полностью понять ваш код.Но я могу выяснить одну вещь - использовать jQuery Timer Plugin.

Я уверен, что это не решит вашу проблему полностью.И это, я также жду некоторой надлежащей определенной помощи от других опытных также.

Благодарю Вас.

...