יישום טיימר ספירה לאחור של JavaScript ביישום חידון מקוון



מדריך שלב אחר שלב זה ליישום טיימר ספירה לאחור של JavaScript ליישום חידון מקוון יעזור לך לבצע טיימר ספירה לאחור JavaScript בהיותה השפה

בפוסט זה נרחיב את יישום החידון שלנו ונוסיף בו פונקציונליות של טיימר לספירה לאחור. דבר נוסף שניישם כאן הוא הוספת קוד כך שלכל חידון יהיו מספר שונה של שאלות. אם עדיין לא קראת את החלק הראשון, אמליץ לך לעבור עליו. יהיה לך קל יותר לעקוב אחרי הפוסט הזה ולהבין אותו לחלוטין.

תוכלו לקרוא את החלק הראשון כאן .אתה יכול גם להרחיב את הזדמנויות הקריירה שלך בזווית על ידי התחלה .





טיימר JavaScript לספירה לאחור

משך הזמן של כל חידון נשמר בקובץ XML החידון, אנו מאחזרים את משך החידון ושומרים אותו בהפעלה של המשתמש כתכונה. כאשר המשתמש מגיש שאלה אנו גם מגישים את הזמן לבקר באמצעות הגשת טופס מותאם אישית עם JavaScript. לכן, כאשר אנו מראים את השאלה הבאה אנו מציגים את הזמן הנותר הנכון.

javascript-countdown-timer-online-quiz-application



כאשר משך הזמן של החידון הסתיים, תוצג למשתמש תיבת התראה שאומרת 'זמן קצוב' והחידון יוערך והתוצאה הסופית תוצג.

תנאים מוקדמים לקורס בינה מלאכותית

בואו נראה מה אנחנו צריכים כדי להשיג זאת.



הוספנו שתי שורות חדשות בקובץ XML החידון, לפני שאלות החידון.

חידון ג'אווה (2015/01/18) 10 2 מה התחביר הנכון? מחלקה ציבורית ABC מרחיב QWE מרחיב סטודנט int i = 'A' מחרוזת s = 'שלום' מחלקה פרטית ABC 2 מי מהבאים הבאים אינו מילת מפתח בג'אווה? ממשק מחלקה מרחיב את ההפשטה 3 מה נכון לגבי Java? ג'אווה היא ספציפית לפלטפורמה ג'אווה אינה תומכת בירושה מרובה ג'אווה אינה פועלת על לינוקס ו- Mac ג'אווה אינה שפה מרובת הליכי משנה 1 מה מהבאים הוא ממשק? Thread Runnable תאריך לוח שנה 1 איזו חברה הוציאה את Java גרסה 8? Sun Oracle Adobe Google 1 Java נכנס לאיזו קטגוריית שפות? שפות דור ראשון שפות דור שני שפות דור שלישי שפות דור רביעי 2 איזו חבילת ברירת המחדל הנראית אוטומטית לתוכנית שלך? java.net javax.swing java.io java.lang 3 באיזה ערך ב- WEB-INF משתמשים כדי למפות סרוולט? מיפוי סרוולט סרוולט רישום סרוולט-כניסה סרוולט-קובץ מצורף 0 מה אורכו של Java-datatype int? 32 סיביות 16 סיביות 64 סיביות זמן ריצה ספציפי 0 מהו ערך ברירת המחדל של Java מסוג סוג בוליאני? נכון שקר 1 0 1

הגדרת טיימר בעת התחלת בחינה חדשה

כאשר המשתמש מתחיל בחינה חדשה, אנו קובעים את סך השאלות ומשך החידון בהפעלה של המשתמש כתכונה.

request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). פריט (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTagName ' .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)

זמן ספירה לאחור

עלינו להקטין את הטיימר לאחר כל שנייה, כדי לעשות זאת אנו הולכים ליצור פונקציית Javascript שתיקרא לראשונה כאשר דף הבחינה נטען ואז נקרא לפונקציה זו רקורסיבית לאחר כל שנייה לזמן ספירה לאחור.

פונקציית Javascript לזמן ספירה לאחור

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () function customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'זמן שנותר:' + דקה + 'דקות' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} אחר {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'זמן שנותר:' + דקות + 'דקות,' + שניות + 'שניות' התראה ('זמן קצוב') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 מסמך .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'זמן שנותר:' + min + 'דקות,' + sec + 'שניות' min = parseInt (min ) - שנייה אחת = 59 tim = setTimeout ('examTimer ()', 1000)}}}

כיצד להתקשר לפונקציית Javascript

עכשיו, כדי לקרוא לפונקציית Javascript נשתמש בתכונה onload של תג הגוף.

הגשת זמן החידון לבקר הבחינה

עד כה הגשנו את טופס שאלות החידון ישירות לבקר הבחינה, אך כעת עלינו לשלוח את פרמטרי הטיימר: דקה ושנייה גם כך שכאשר בקר הבחינה מציג את השאלה הבאה הוא אמור להציג גם את הזמן הנותר הנכון. כדי להשיג זאת הגשנו את הטופס באופן ידני באמצעות Javascript ושלחנו את הפרמטרים min ו- sec לבקר הבחינה.

הגשת טופס באמצעות Javascript

שים לב שכאשר המשתמש לוחץ על כפתור הבא, הקודם או הסיום, ייקרא פונקציית Javascript customSubmit ().

$ {choice} 

0} '>

טיפול ב- Time Up

כאשר משך החידון הסתיים, במילים אחרות כאשר הדקה והשנייה הופכות לאפס. אנו מציגים תיבת התראה שאומרת 'זמן קצוב' ומגדירים את ערך הדקה והשנייה לאפס ומגישים את הטופס.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'זמן שנותר:' + min + 'דקות,' + sec + 'שניות' התראה ('זמן למעלה ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

עלינו לשנות את הקוד כך שהבחינה תסתיים כשתסתיים מגבלת הזמן לבחינה.

אחרת אם ('סיום הבחינה' שווה (פעולה) || (דקה == 0 && שנייה == 0)) {סיום = תוצאה אמיתית int = בחינה בקשה.חישוב תוצאות (בחינה). setAttribute ('תוצאה', תוצאה) .getSession (). setAttribute ('currentExam', null) בקשה. getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). קדימה (בקשה, תגובה)}

לכן, ניתן לסיים את הבחינה על ידי לחיצה ישירה על כפתור הסיום או כאשר מגבלת הזמן של הבחינה הסתיימה (הדקה והשנייה הופכות לאפס).

זהו זה לפוסט הזה. בפוסט הבא נאריך עוד יותר את אפליקציית החידון שלנו ונוסיף תכונה חדשה כך שהמשתמש יוכל לעיין בתשובותיו ולדעת אילו שאלות טעה בו ומה היו התשובות הנכונות.

כמו תמיד תוכלו להוריד את הקוד, לשנות אותו כרצונכם. זו הדרך הטובה ביותר להבין את הקוד. אם יש לך שאלה או בקשה אנא הגיב למטה.

לחץ על כפתור ההורדה להורדת הקוד.

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות ונחזור אליך.

פוסטים קשורים:

מה ההבדל בין hashap לבין hashable