NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY ADVANCED PROGRAM IN INFORMATION SYSTEMS DANG QUOC KHOA, CAO QUYET CHIEN BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS HO CHI MINH CITY, 2023 NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY ADVANCED PROGRAM IN INFORMATION SYSTEMS DANG QUOC KHOA - 18520911 CAO QUYET CHIEN - 18520526 BUILDING A WEB-BASED ONLINE EXAM SYSTEM BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS THESIS ADVISOR PhD. NGUYEN THANH BINH HO CHI MINH CITY, 2023 ASSESSMENT COMMITTEE The Assessment Committee is established under the Decision. by Rector of the University of Information Technology. ACKNOWLEDGMENTS First of all, I would like to express my sincerest thanks to Dr.
Nguyen Thanh Binh, who have enthusiastically guided and supported me throughout the process of studying and researching to complete the thesis. Besides teaching and commenting on academic knowledge, presentation skills, programs, research, reports,. the teacher also cares about the health and psychological status of students as well as always listen, share, inspire and motivate me to complete this thesis. The knowledge and skills that have been imparted by him will definitely be a valuable baggage for my future growth.
In addition, I would also like to thank the teachers in the Faculty of Information Systems and all the teachers in the University of Information Technology - Vietnam National University, Ho Chi Minh City, for teaching me knowledge and skills for last four years. Again, I would like to express my gratitude to Dr. Nguyen Thanh Binh and the teachers who have always accompanied and supported me during my university studies. Dang Quoc Khoa Cao Quyet Chien TABLE OF CONTENTS csLUeo Chapter 1.
Objective and mOfIVAfIOTI.-- G113 2211191 111 1111911 9 11 9v ng ng ng 6 1.- 0 ng HH HH HH ch 7 1. Scope Of S{UV1TE.G- G HTH HH HH ke 8 IESSRSi 009. Study SCOPE oo. THEORETICAL BA SĨIS.- Sàn HH HH HH ưệt 10 2.
- - - 1 c1 1112111119311 11181 1111011 11110111119 kg kg kg ke 10 2. 911 91 1 TH ng ng ng nề 11 2.2 mn—Ỷ ỮỀ SẼ 6đ 6“ .c- cu 1119 1n HT nh TH Tu TH HT HH nhện 12 2. Types Of [ŒSÍ. Q0 HH TH HH HH nh 12 2.
The difference Of f€SfS. - - -- c9 ng HH He 13 2. Exam creation and OrØaTI1Z4fIOT. Anti-cheat SUPCLVISION 0n.
Technologies and Platforms. Multiple layer archit€CfUTC. HH HH HH HH n nk 15 2. HH ng ng ệt 16 2.
LH HH TH HH HH HH Hiện 18 "6ð. HH ng ng TH HH TH nh 21 “`. HH HH HH nh kh 22 2. LH HT HT TH HH HH HH HH HH 22 "N9 na.
HH 1 HH HH HH HH HH in 23 2. cocci +++ MO /ẩẤ7C. HH HH HH HH kh 24 P1 co nhăâẼỆỄỪỪỪỪỪŨỪŨỪŨỪ. SYSTEM ANALYSIS AND DESIGN.
G9 TT HT HH TH HH it 27 3.- -c- s s1 TH nh ng Hết 28 3. Component architecture speCIfICafIOT. Smart Online Test "mOTI{OTITE. 5 << 121 11 1 11 vn ng nệt 32 3.- co ng ng HH nhện 32 Kao .-- s2 HH TH HH nền 39 3.
Use-case diagram. List Of US€-CAS€S,. LH HH TH HT HH Hệ 43 3. Use-case SD€CIÍICAfIOTN.
SG 2211221111211 11 11 9 111 11111 11 ng ng kg 44 SP ni. een Ws TU 7a .-- G2 s + 11190 93099 9v nh ng ng nến 55 3. Create QU€SẨIOH. - Q1 HH HH HH kh 61 3.
Update QU€SẨIOH. G- Án S99 HH TH HH ệt 64 3. Delete qu€SfIOH. c3 91T TH HH HH ng nh nh n 66 3.
VieW QU€SfIOTNS. G1 1H HH HH kg 69 3. Create exam f€eImpÌAf. Update exam tempÏaf€.
ng ng ng 76 3. Delete exam fempÌAf.v HH ng ng 78 3. View exam fermpÌf€S .- --- 5 5s knHnHnHnHnH Hhng ggrư 81 3. Schedule exam termpÌ4f€.
HH HT HH nến 88 3. 2G 0 HT TH TH TH HH Hệ 91 3. User COÏÏ€CfIOII.-- Q SH HH nh 97 3. Group COÏ€CfIOH.
Option COlÏ€CfIOT.- ó6 So 1111111210 19111 1191 HH ng ng nệt 98 3. Question COÏÏ@CfIOTI. Schedule cOlÏ€CtIOTI.- 5 s6 s1 E621 931 91 9101 31 ng ng ngư 101 3. AnswerQuestion (Answer) collec(IOn.
UserExam c€OÏÏ€CfIOII.- G1 1E ng ng ệt 103 3. User interface €SIØI.- G0 TH HH kh 105 3. Diagram of user interface €SIg11. List of User ITfTÏAC€WS.G- Án ST HH TH HH HH nườ 106 E9.
UI of LOBIT DA. - - 5 G1 HH HH kp 108 3. UI of List question page. -- 5c 1S ng kg iệp 109 3.
UL of Add question page. UI of Add and Edit tempÏaf€. UL of List template page. UI of Dashboard template page.
UL of List eXam Page. UI of Do eXaIm.- G0 11 ng ng ng ng ng 120 3. UI of Review exam D4Ø©. -- - HH ng giết 121 3.
UI of List group page .-- Gv ng nrkt 122 3. UI of Add group page .- - -- c HH ng nếp 122 3. UI of Edit group D4Ø. cà HH ng ray 124 Chapter 4.
IMPLEMENTATION AND DEPLOYMENÏT. Deployment diagram 0 6óọỌỪ. Add Question DaØ©. -- c1 HH HH ng ket 127 4.
Edit queSfIOn DAØ©.- -- -- ng HH kg 127 4. Delete question confirm DODUD. Template manaØ€Im€II.v HH ng ng g 128 4. Add template page .--- nh nh ng ng như 128 4.
Dashboard template page .-- --- c1 HH ng re, 132 4. Exam TnanaØ€TTTI(. -- 5 c5 21 3823183911191 1 9111 91 1 11 1 ng ng kết 132 4.-- Án TH HH HH kh 132 4. REVIEW CXAM Page.
c1 ng kg ke 133 4. Group managð€IN€TILL.-- -- ¿+ + E1 E E3 k1 vn ngưng 133 4. Create STOUP Page. Exam real-time TIOTI{OTITIE.-- 5 <2 1 941 E31 511 1 9v ngưng 134 Chapter 5.- Đà HH HH HH ng HH Hưng 135 5.
In terms of r€S€ATCH. G- G1 ng ng nh ngư 135 5. In terms Tàuon e. FUtUTe WOLK ŒHd.
135 LIST OF PICTURES Figure 2.1 Different types Of QU€SEIOI. --- 5 5 + SH HH TH HH gi rưệt 10 Figure 2.2 Anti-cheat process OV€TVICW.3 System’s model sfFUICfUTC.5 Definition of dependency injection [3 Ï].-- -«- -- «+ +sx++e++essexses 19 Figure 3.1 Recognizable colors for MOUIES .2 System frontend — lÑ€aC.-- --- 5 + + 1kg ng HH tư 27 Figure 3.3 System backend — ÏNesStÏS.-- -- ch HH HH kh 28 Figure 3.4 Face detection and recognition using ARCEace .5 Verification process based on face recognition method.6 Monitoring process based on face đÌafa.- s5 s-sss+s+ssexssesesers 34 Figure 3.7 Different “key points” are used to determine students’ feelings .8 Monitoring process based on skeleton data.9 Shaping the skeleton through body’s "key pOITIfS”.11 Work of face detection. 2c 121191 HH ng ng rt 40 Figure 3.12 System’s use-case đ1aØTAm.13 Use-case diagram for manage ØTOUDS.- --- ¿5s x£++£+ees+eseereee 42 Figure 3.14 Use-case diagram for manage QUeStiONS .15 Use-case diagram for manage exam templates .16 Activity diagram for Sign UD.17 Sequence diagram for Sign UD.18 Activity diagram for Sign 1T.19 Sequence diagram for Sign 1H. 5 5 + xxx EvEseEEeeeeersereersersee 49 Figure 3.20 Activity diagram for LOØOUI.21 Sequence diagram for LOBOUI.-- -- c S1 1+3 + vs ksrieerrrereere 52 Figure 3.22 Activity diagram for Create ðTOUD.-- - cv svseeiesrere 53 Figure 3.23 Sequence diagram for Create ØðTOUDD.- - 5-5 cv seeeeeseeereere 54 Figure 3.24 Activity diagram for Add mem€TS.25 Sequence diagram for Add mermbeTs.26 Activity diagram for VieW ØTOUDS.27 Sequence diagram for VieW ØTOUDS.28 Activity diagram for Create qQU€SEIOII.29 Sequence diagram for Create QUueStiONn.
cee eseeeeeeseeeeseeeeeseeseeseees 63 Figure 3.30 Activity diagram for Update queSfION.31 Sequence diagram for Update questIOn.32 Activity diagram for Delete quesfIOn:.- 5-5 S5 *++scx+seesssess 68 Figure 3.33 Sequence diagram for Delete questiOn.34 Activity diagram for View questions .35 Sequence diagram for View questions. -- «55+ +«£<<<<sx+se+sxs 72 Figure 3.36 Activity diagram for Create exam template .37 Sequence diagram for Create exam template .38 Activity diagram for Update exam template .39 Sequence diagram for Update exam templafe.40 Activity diagram for Delete exam template .41 Sequence diagram for Delete exam template .42 Activity diagram for View exam tempÌaf€S.43 Sequence diagram for View exam templates .44 Activity diagram for Schedule exam template .45 Sequence diagram for Schedule exam templafe.46 Activity diagram for Take ©XâI.- 5 5s cv net 89 Figure 3.47 Sequence diagram for Take €XaIm.48 Activity diagram for Review ©XAâT. 2G ng re 92 Figure 3.49 Sequence diagram for REVieW €XaT.50 Module điaðTam.52 Diagram of user interface €SIET.53 UI of Register page.54 UI of Login D4E6. -- G1111 HH ng TH nghệ 108 Figure 3.55 UI of List question page .56 UI of Add question DAØG.57 UI of Edit question DaØG.- --- c1 191119111 1 1v ng rệt 111 Figure 3.58 UI of Add/Edit template page — Information tab.59 UI of Add/Edit template page — Questions tab.60 UI of Add/Edit template page — Schedules tab .61 UI of Add/Edit template page — New schedule popup.62 UI of Add/Edit template page — Settings tab.63 UI of List template page .- - -- LH rệt 117 Figure 3.64 UI of Dashboard template page .65 UI of List exam page .66 UI of Do exam p4Ø6.- - --- c0 1 1111119119 1 HH ng rệt 120 Figure 3.67 UI of Review exam page.-- c c1 11 HH ng ng nếp 121 Figure 3.68 UI of List ðTOUD DAØ€.69 UI of Add group DAØ©.- - c1 1 SH HH ng gệt 122 Figure 3.70 UI of Edit group page.
- ---- c1 11H ng ng ng ngriệp 124 Figure 4.-- s6 + 1318931 91 1 91 9v ng ng 126 Figure 4.2 Add Question page. - - --- ch ngệp 127 Figure 4.3 Edit question page .-- -- c1 HH TH HH gệp 127 Figure 4.4 Delete question confirm pOpDUD.-- «c5 s13 919g nh ngưng 128 Figure 4. óc SH TH TH HH HH Hệ 129 Figure 4.7 Selected qU€S(IOTS.- - G5 1112311991113 11 911191 11H ng ng ng gệp 129 Figure 4.8 New schedule DODUD.- -- 5 c1 3 192319 11191119 1 ng ng ng rệt 130 Figure 4. - s nTHT HH 131 Figure 4.
- -- c1 1S TH TH TH HH TH nếp 131 Figure 4.-- -- + + + E1 E3 vn ng ng 132 Figure 4.12 Do exam page .13 Review exam Page .14 Create group page. Ăn 21H TH TH ng HH rệt 133 Figure 4.16 Exam real-time mOTIOFTITE.- --- 5 + +2 E3 E*E+skE+eEEeerseesekesekre 134 LIST OF TABLES Table 2.1 Differences between quiz, exam, and practice Set .2 Pros and cons Of DÌ. -- 5 << + 13193 91 3 9111 1 nh ng ngư 20 Table 3.1 Component architecture for cÏlenf-S1đe.2 Component architecture for S€TV€T-SIE.- c5 S5 SE **vsseerseeeres 32 Table 3.- QG c 13 1211211911111 HH ky 43 Table 3.4 Sysfern”S IS€-CAS€S.- Q01 HH TH HH HH HH tr 44 Table 3.5 Use-case specification Of Sign UD.- -- «xxx riet 44 Table 3.6 Use-case specification Of Sign 1T.7 Use-case specification Of LOØOUI. -- - c1 vn ng ng re.8 Use-case specification of Create ØTOUD.- --cSSc S*xsseerseeeree 53 Table 3.9 Use-case specification of Add meimbe€rS.10 Use-case specification Of VieW QTOUPS.11 Use-case specification of Create QuestiOn.
--- 5 +«<<s<+x+se+sx+ 61 Table 3.12 Use-case specification of Update quesfIOI.13 Use-case specification of Delete questIon.14 Use-case specification of View QUESTIONS .15 Use-case specification of Create €Xa1m.16 Use-case specification of Update eXam.17 Use-case specification of Delete CXam .18 Use-case specification of View CXaMs. cà nen sierske 82 Table 3.19 Use-case specification of Schedule exam.20 Use-case specification of Take €Xam.- - cv sereeeeree 88 Table 3.21 Use-case specification of ReVieW €XAI. se set 91 Table 3.23 List of attributes within each Collections .24 User collection SD€CIÍICAfIOH.25 Group collection SD€CIÍICAf1OII.26 Option collection SD€CIÍICAfIOII.27 Question collection SD€CIÍICAfIOH.28 Setting collection sp€CIÍICAafIOTI.