jquery horizontal timebar для отправки страницы после переменного количества секунд

Question

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

Эта процедура работает без проблем с помощью javascript (см. Ниже). ОДНАКО: он не работает во всех браузерах, например. Firefox не узнает его, и в результате пользователи Firefox все время в мире завершают или исследуют свои ответы :-) До сих пор я просто сказал: «Извините, наша система была оптимизирована для Интернета 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> 

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

Спасибо заранее,

С наилучшими пожеланиями,

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

Answer 1

Очень красивый и заметный представление вы дали.

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

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

Поблагодарили.

Answer 2

В JQuery есть опция .submit().

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

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

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

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

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

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

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