Примена ЈаваСцрипт тајмера за одбројавање у интернетској апликацији за квиз



Овај детаљни водич за примену ЈаваСцрипт одбројавања за интернетску квиз апликацију помоћи ће вам да извршите одбројавање ЈаваСцрипт који је језик

У овом посту ћемо проширити нашу квиз апликацију и додати ћемо јој функцију тајмера одбројавања ЈаваСцрипт. Још једна ствар коју ћемо овде применити је додавање кода тако да сваки квиз може имати различит број питања. Ако већ нисте прочитали први део, препоручићу вам да га прођете. Биће вам лакше пратити овај пост и разумети га у потпуности.

Први део можете прочитати овде .Такође бисте могли да проширите своје могућности каријере у угловима ако започнете .





ЈаваСцрипт тајмер одбројавања

Временско трајање сваког квиза чува се у КСМЛ датотеци квиза, ми дохваћамо трајање квиза и чувамо га у корисничкој сесији као атрибут. Када корисник пошаље питање, такође предајемо време контролору помоћу прилагођеног слања образаца са ЈаваСцрипт-ом. Дакле, када покажемо следеће питање, приказујемо тачно преостало време.

javascript-countdown-timer-online-quiz-application



Када се заврши временско трајање квиза, кориснику ће се приказати оквир са упозорењем који каже „Време је истекло“, квиз ће се проценити и приказати коначни резултат.

Да видимо шта нам је потребно да бисмо то постигли.



креирајте параметар у табели

Пре питања у квизу додали смо две нове линије у КСМЛ датотеку квиза.

Јава квиз (18.01.2015.) 10 2 Која је тачна синтакса? јавна класа АБЦ проширује КВЕ проширује Студент инт и = 'А' Стринг с = 'Здраво' приватна класа АБЦ 2 Шта од следећег а није кључна реч у Јави? интерфејс класе проширује апстракцију 3 Шта је истина о Јави? Јава је специфична за платформу Јава не подржава вишеструко наслеђивање Јава се не изводи на Линук-у и Мац Јава није језик са више навоја 1 Шта је од наведеног интерфејс? Тема која се може покретати Календар 1 Која је компанија објавила Јава верзију 8? Сун Орацле Адобе Гоогле 1 Јава спада под коју категорију језика? Језици прве генерације Језици друге генерације Језици треће генерације Језици четврте генерације 2 Који је задати пакет који је аутоматски видљив вашем програму? јава.нет јавак.свинг јава.ио јава.ланг 3 Који унос у ВЕБ-ИНФ се користи за мапирање сервлета? сервлет-маппинг сервлет-регистратион сервлет-ентри сервлет-аттацхмент 0 Колика је дужина Јава типа података инт? 32-битна 16-битна 64-битна специфична за време извођења 0 Која је подразумевана вредност логичког типа података Јава? тачно нетачно 1 0 1

Подешавање тајмера приликом покретања новог испита

Када корисник започне нови испит, као атрибут постављамо укупна питања и трајање квиза у сесији корисника.

рекуест.гетСессион (). сетАттрибуте ('тоталНумберОфКуизКуестионс', доцумент.гетЕлементсБиТагНаме ('тоталКуизКуестионс'). итем (0) .гетТектЦонтент ()) рекуест.гетСессион (). .итем (0) .гетТектЦонтент ()) рекуест.гетСессион (). сетАттрибуте ('мин', доцумент.гетЕлементсБиТагНаме ('куизДуратион'). итем (0) .гетТектЦонтент ()) рекуест.гетСессион (). сетАттрибуте ('сец ', 0)

Цоунтдовн Тиме

Морамо декрементирати тајмер након сваке секунде, да бисмо то урадили, креираћемо Јавасцрипт функцију која ће се прво позвати када се учита страница испита, а затим ћемо је позвати рекурзивно након сваке секунде до времена одбројавања.

Јавасцрипт функција за одбројавање времена

вар тим вар мин = '$ {сессионСцопе.мин}' вар сец = '$ {сессионСцопе.сец}' вар ф = нев Дате () функција цустомСубмит (сомеВалуе) {доцумент.куестионФорм.минуте.валуе = мин доцумент.куестионФорм. сецонд.валуе = сец доцумент.куестионФорм.субмит ()} функција екамТимер () {иф (парсеИнт (сец)> 0) {доцумент.гетЕлементБиИд ('сховтиме'). иннерХТМЛ = 'Преостало време:' + мин + 'Минуте,' + сец + 'Секунде' сец = парсеИнт (сец) - 1 тим = сетТимеоут ('екамТимер ()', 1000)} елсе {иф (парсеИнт (мин) == 0 && парсеИнт (сец) == 0) {доцумент.гетЕлементБиИд ('сховтиме'). иннерХТМЛ = 'Преостало време:' + мин + 'Минуте,' + сек + 'Секунде' упозорење ('Време је истекло') доцумент.куестионФорм.минуте.валуе = 0 доцумент.куестионФорм.сецонд.валуе = 0 документ .куестионФорм.субмит ()} иф (парсеИнт (сец) == 0) {доцумент.гетЕлементБиИд ('сховтиме'). иннерХТМЛ = 'Преостало време:' + мин + 'Минуте,' + сец + 'Секунде' мин = парсеИнт (мин ) - 1 сек = 59 тим = сетТимеоут ('екамТимер ()', 1000)}}}

Како позвати Јавасцрипт функцију

Сада, да бисмо позвали ту Јавасцрипт функцију, користићемо атрибут онлоад телесне ознаке.

Предаја времена за квиз контролору испита

До сада смо образац за квиз предавали директно Контролору испита, али сада морамо послати параметре тајмера: минуту и ​​секунду, тако да када Контролник испита прикаже следеће питање, требало би да прикаже и тачно преостало време. Да бисмо то постигли, ручно смо послали образац помоћу Јавасцрипта и параметре мин и сец послали Испитном контролору.

Слање обрасца помоћу Јавасцрипта

Имајте на уму да ће се када корисник кликне на дугме нект, превиоус или финисх цустомСубмит () активирати Јавасцрипт функција.

$ {избор} 

0} '>

Руковање временом

Када се заврши трајање квиза, другим речима када и минут и секунда постану нула. Приказујемо оквир са упозорењем „Време је истекло“, а минуту и ​​секунду постављамо на нулу и предајемо образац.

иф (парсеИнт (мин) == 0 && парсеИнт (сец) == 0) {доцумент.гетЕлементБиИд ('сховтиме'). иннерХТМЛ = 'Преостало време:' + мин + 'Минуте,' + сец + 'Секунде' упозорење ('Тиме Горе ') доцумент.куестионФорм.минуте.валуе = 0 доцумент.куестионФорм.сецонд.валуе = 0 доцумент.куестионФорм.субмит ()}

Морамо да променимо код тако да ће испит бити завршен када истекне временско ограничење за испит.

елсе иф ('Финисх Екам'.екуалс (ацтион) || (минуте == 0 && сецонд == 0)) {финисх = труе инт резултат = екам.цалцулатеРесулт (испит) рекуест.сетАттрибуте (' резултат ', резултат) захтев .гетСессион (). сетАттрибуте ('цуррентЕкам', нулл) рекуест.гетРекуестДиспатцхер ('/ ВЕБ-ИНФ / јспс / ресулт.јсп'). прослеђивање (захтев, одговор)}

Дакле, испит се може завршити или кликом на дугме за завршетак директно или када временско ограничење испита истекне (и минут и секунда постају нула).

То је све за овај пост. У следећем посту ћемо даље проширити нашу апликацију за квиз и додати нову функцију тако да ће корисник моћи да прегледа своје одговоре и да сазна на која питања је погрешно схватио и који су тачни одговори.

Као и увек можете да преузмете код, промените га како желите. То је најбољи начин за разумевање кода. Ако имате било какво питање или захтев, молимо вас да коментаришете у наставку.

Кликните на дугме за преузимање да бисте преузели код.

Имате питање за нас? Молимо вас да то споменете у одељку за коментаре и јавићемо вам се.

Повезани постови: