Khóa luận tốt nghiệp: Building a web-based online exam system

normally including a Structured QueryLanguage application programminginterface HTTPS Hypertext Transfer Hypertext Transfer Protocol Secure is a Protocol Secure combination of the Hyperte

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 , date

— by Rector of the University of Information Technology

| - Chairman

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 andcommenting on academic knowledge, presentation skills, programs, research,reports, the teacher also cares about the health and psychological status ofstudents as well as always listen, share, inspire and motivate me to completethis thesis The knowledge and skills that have been imparted by him willdefinitely be a valuable baggage for my future growth

In addition, I would also like to thank the teachers in the Faculty of InformationSystems 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 KhoaCao Quyet Chien

VN 0.2 mn—Ỷ ỮỀ SẼ 6đ 6“ 122.2 ONIN’ f€S - .c- cu 1119 1n HT nh TH Tu TH HT HH nhện 12

2.2.1 Types Of [ŒSÍ Q0 HH TH HH HH nh 12

2.2.2 The difference Of f€SfS - - c9 ng HH He 132.2.3 Exam creation and OrØaTI1Z4fIOT - - 5 3+ 13+ E**skESesereeeeeeeeeeeers 132.3 Anti-cheat SUPCLVISION 0n e 142.4 Technologies and Platforms 5 3113311139113 11 11 1111k rrree 15

2.4.1 Multiple layer archit€CfUTC - - S133 139 119 11191111 11g rrrg 15

2.4.1.1 V€TVICW HH HH HH HH n nk 152.4.1.2 Model SfTUCfUTC Gv HH ng ng ệt 162.4.2 T'YD€SCTID Qui 17

", N0) ,.0 2.2 dA 17

"ổn 17

2.4.2.3 COMMS - 18

2.4.3 nh 18

2.4.3.1 VCTVICW LH HH TH HH HH HH Hiện 18 "6ð nh e - 20

2.4.3.3 CO HH ng ng TH HH TH nh 21 “` vàn nố ố ố 22

2.4.4.1 V€TVICW HH HH HH nh kh 22 2.4.4.2 POS LH HT HT TH HH HH HH HH HH 22 "N9 na 23

"“ m8 ẻ 23

2.4.5.1 VCTVICW HH 1 HH HH HH HH HH in 23 2.4.5.2 PLOSI cocci +++ MO /ẩẤ7C 23

"5 n9 ta 24

2.4.6 (0.090 11 24

2.4.6.1 V€TVICW HH HH HH HH kh 24 P1 co nhăâẼỆỄỪỪỪỪỪŨỪŨỪŨỪ 24

"n9 e 25 Chapter 3 SYSTEM ANALYSIS AND DESIGN nen 27

3.1 ATCHIf€CẨUTC G9 TT HT HH TH HH it 27

3.1.1 Overview arCHIfŒCẨUTC - -c- s s1 TH nh ng Hết 28 3.1.2 Component architecture speCIfICafIOT - 5c +<**+sksseeeeseeeeers 30

3.2 Smart Online Test "mOTI{OTITE - 5 << 121 11 1 11 vn ng nệt 32

3.2.1 co on 32

3.2.1.1 AuthentICAfIOT - co ng ng HH nhện 32Kao 34K2 so áo 373.2.3 Face @f€CfIOH s2 HH TH HH nền 393.3 Use-case diagram ccceesccessecesecsseeeseceseecececsseecsneceeecsacecsaeecsaeeeeeseaeeseaeees 4l

K69 o2 413.3.2 suy vo ch 433.3.3 List Of US€-CAS€S, LH HH TH HT HH Hệ 433.3.4 Use-case SD€CIÍICAfIOTN SG 2211221111211 11 11 9 111 11111 11 ng ng kg 44

SP ni 44

St i0 ố 47E6 no TẾ m een Ws TU 7a ốn 503.3.4.4 Create ØTOUD ch 523.3.4.5 Add MeEMbETS G2 s + 11190 93099 9v nh ng ng nến 553.3.4.6 VIEW STOUDS 0 583.3.4.7 Create QU€SẨIOH - Q1 HH HH HH kh 613.3.4.8 Update QU€SẨIOH G- Án S99 HH TH HH ệt 643.3.4.9 Delete qu€SfIOH c3 91T TH HH HH ng nh nh n 663.3.4.10 VieW QU€SfIOTNS G1 1H HH HH kg 693.3.4.11 Create exam f€eImpÌAf - - + 1+ 1v 9v v.v HH ng 723.3.4.12 Update exam tempÏaf€ - - - << s11 1v ng ng ng 763.3.4.13 Delete exam fempÌAf - - - + 1v v.v HH ng ng 783.3.4.14 View exam fermpÌf€S - - 5 5s knHnHnHnHnH Hhng ggrư 81

3.3.4.15 Schedule exam termpÌ4f€ - - + ve eee 843.3.4.16 Take €XAT HH HT HH nến 883.3.4.17 REVICW €XATH 2G 0 HT TH TH TH HH Hệ 913.4 in 943.5 Data diagram 0 ố - 95

3.5.1 OVELVICW € - 953.5.2 ID€fA1ÌS Ghi 97

3.5.2.1 User CỌÏ€CfIOII Q SH HH nh 97

3.5.2.2 Group CỌ€CfIOH + 1 E01 19H HH kh 983.5.2.3 Option COlÏ€CfIOT - ĩ6 So 1111111210 19111 1191 HH ng ng nệt 983.5.2.4 Question CỌÏ@CfIOTI - c1 22212351111 1111111111111 keerrvre 99

ch S290 1003.5.2.6 Schedule cOlÏ€CtIOTI - G1 E219 9 19119 ng nưy 1013.5.2.7 Exam COlÏŒCfIOH - 5 s6 s1 E621 931 91 9101 31 ng ng ngư 1013.5.2.8 AnswerQuestion (Answer) collec(IOn << «<< ss++<++<<s+ 102

3.5.2.9 UserExam c€ỌÏ€CfIOII - G1 1E ng ng ệt 103

3.6 User interface €SIØI - G0 TH HH kh 105

3.6.1 Diagram of user interface €SIg11 - s6 + sksiksskrseeree 1053.6.2 List of User ITfTÏAC€WS - G- Án ST HH TH HH HH nườ 106E9 107

3.6.3.1 UI o0 ào 1073.6.3.2 UI of LOBIT DA - - 5 G1 HH HH kp 1083.6.3.3 UI of List question page 5c 1S ng kg iệp 1093.6.3.4 UL of Add question page - sàn net 110

3.6.3.5 UI o0» no 1113.6.3.6 UI of Add and Edit tempÏaf€ s55 s + *++seeseeesersrsee 1133.6.3.7 UL of List template page - eseeeeeseceseesceseeseeseeseeeeaeeneens 1173.6.3.8 UI of Dashboard template page eee eeseeseeceseeeeneeeeneeeseeeenereas 1183.6.3.9 UL of List eXam Page ee cecesccssecsteceesteesececesseeseesseeseeseeesseenees 1193.6.3.10 UI of Do eXaIm - G0 11 ng ng ng ng ng 1203.6.3.11 UI of Review exam D4Ø© - HH ng giết 1213.6.3.12 UI of List group page Gv ng nrkt 1223.6.3.13 UI of Add group page - - c HH ng nếp 1223.6.3.14 UI of Edit group D4Ø cà HH ng ray 124Chapter 4 IMPLEMENTATION AND DEPLOYMENÏT - -<<<+ 126

4.1 Deployment diagram 0 6ĩọỌỪ 1264.2 9) ii 127

4.2.1 Add Question DaØ© c1 HH HH ng ket 1274.2.2 Edit queSfIOn DÀ© - ng HH kg 1274.2.3 Delete question confirm DODUD + «+ + +sE+Evsssersersreerrke 1284.3 Exam OrgamiZation 0n 128

4.3.1 Template manaØ€Im€II - - 5 s11 v.v HH ng ng g 128

4.3.1.1 Add template page - nh nh ng ng như 1284.3.1.2 Dashboard template page - c1 HH ng re, 1324.3.2 Exam TnanaØ€TTTI( 5 c5 21 3823183911191 1 9111 91 1 11 1 ng ng kết 132

4.3.2.1 Do exam D4ÀG Án TH HH HH kh 1324.3.2.2 REVIEW CXAM Page - c1 ng kg ke 133

4.3.3 Group managð€IN€TILL ¿+ + E1 E E3 k1 vn ngưng 133

4.3.3.1 Create STOUP Page ce cceececesceesneceseceneeceneeesaeceseeceneeseaeeesaeeetaeeesees 1334.3.3.2 LiSt SOUP 1n - 134

4.4 Exam real-time TIOTI{OTITIE 5 <2 1 941 E31 511 1 9v ngưng 134

Chapter 5 CONCLUSIƠNN - Đà HH HH HH ng HH Hưng 135

5.1 ACHICVEMENL - 135

5.1.1 In terms of r€S€ATCH G- G1 ng ng nh ngư 135

5.3 FUtUTe WOLK ŒHd 135

Figure 3.4 Face detection and recognition using ARCEace «+ << «+2 33

Figure 3.5 Verification process based on face recognition method 33Figure 3.6 Monitoring process based on face đÌafa - s5 s-sss+s+ssexssesesers 34Figure 3.7 Different “key points” are used to determine students’ feelings 35Figure 3.8 Monitoring process based on skeleton data -«- «<< <<x+s<+sx+ 36Figure 3.9 Shaping the skeleton through body’s "key pOITIfS” - -««-s «s2 37Figure 3.10 Processing ÍÏOW -c- ket 38Figure 3.11 Work of face detection - 2c 121191 HH ng ng rt 40Figure 3.12 System’s use-case đ1aØTAm - - c6 E333 E£*EESeEESeereeeeereerereere 41Figure 3.13 Use-case diagram for manage ØTOUDS - - ¿5s x£++£+ees+eseereee 42Figure 3.14 Use-case diagram for manage QUeStiONS «+ +- «<< x++ss++ 42Figure 3.15 Use-case diagram for manage exam templates - - -«- 43

Figure 3.16 Activity diagram for Sign UD 5< 1 E9 11v re 45

Figure 3.17 Sequence diagram for Sign UD - - - - + + + eieerrereere 46Figure 3.18 Activity diagram for Sign 1T - -c <1 1E ESESeeereeeeereerereere 48Figure 3.19 Sequence diagram for Sign 1H - 5 5 + xxx EvEseEEeeeeersereersersee 49Figure 3.20 Activity diagram for LÒOUI -G < S119 11v H g gre 51Figure 3.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 s5 + 5+ 3s >svesseese 56Figure 3.25 Sequence diagram for Add mermbeTs - 5s + *++sexsseseeers 57

Figure 3.26 Activity diagram for VieW ØTOUDS - - sgk 59Figure 3.27 Sequence diagram for VieW ØTOUDS c Series 60Figure 3.28 Activity diagram for Create qQU€SEIOII c5 + + sessesersee 62Figure 3.29 Sequence diagram for Create QUueStiONn cee eseeeeeeseeeeseeeeeseeseeseees 63Figure 3.30 Activity diagram for Update queSfION - c5 52-5 <+++sssssees 65Figure 3.31 Sequence diagram for Update questIOn «+ ++-s<+++++seesssess 66Figure 3.32 Activity diagram for Delete quesfIOn: - 5-5 S5 *++scx+seesssess 68Figure 3.33 Sequence diagram for Delete questiOn - 5 5< £+«£<s<+sssessee 69

Figure 3.34 Activity diagram for View questions ::ccesceessecesreeeereeeeeeseeeenneeeaes 71

Figure 3.35 Sequence diagram for View questions «55+ +«£<<<<sx+se+sxs 72

Figure 3.36 Activity diagram for Create exam template -««+s«+<s+ 74

Figure 3.37 Sequence diagram for Create exam template ‹ «<<-<«++ 75Figure 3.38 Activity diagram for Update exam template - ‹ «++ssss+ 77Figure 3.39 Sequence diagram for Update exam templafe - - «+ +s«++s+ 78

Figure 3.40 Activity diagram for Delete exam template -«++s«++s+ 80

Figure 3.41 Sequence diagram for Delete exam template -««< «++ 81

Figure 3.42 Activity diagram for View exam tempÌaf€S 5 -« << << +ese 83

Figure 3.43 Sequence diagram for View exam templates - -«<<-<«++ 84Figure 3.44 Activity diagram for Schedule exam template - ‹ -««=+ 86Figure 3.45 Sequence diagram for Schedule exam templafe - ‹- «+ «+ 87Figure 3.46 Activity diagram for Take ©XâI - 5 5s cv net 89

Figure 3.47 Sequence diagram for Take €XaIm 5555 S511 Essveeeseesreers 90

Figure 3.48 Activity diagram for Review ©XAâT 2G ng re 92Figure 3.49 Sequence diagram for REVieW €XaT c5 c1 sveeeseereere 93Figure 3.50 Module điaðTam - - 5< S901 Hư 94l0 -0nSIB i12 0n 95Figure 3.52 Diagram of user interface €SIET - -¿- 6 5 + + +3 Ssesersererrxee 105

Figure 3.53 UI of Register page ceeccessccceseeeseceseeceeeceseeeeeceaceceaeeesaeeeseeeeeeesas 107Figure 3.54 UI of Login D4E6 G1111 HH ng TH nghệ 108Figure 3.55 UI of List question page - Gv ng, 109Figure 3.56 UI of Add question DÀG - - - 1 31191191 111 1 181 ren 110Figure 3.57 UI of Edit question DaØG - - c1 191119111 1 1v ng rệt 111Figure 3.58 UI of Add/Edit template page — Information tab -« «+ 113Figure 3.59 UI of Add/Edit template page — Questions tab «<<<<«2 113Figure 3.60 UI of Add/Edit template page — Schedules tab -«<- 114Figure 3.61 UI of Add/Edit template page — New schedule popup - 115Figure 3.62 UI of Add/Edit template page — Settings tab -cccscseceees 116Figure 3.63 UI of List template page - - LH rệt 117Figure 3.64 UI of Dashboard template page - - - 5 55 + ssssersersrrrre 118

Figure 3.65 UI of List exam page ĩc HH 119

Figure 3.66 UI of Do exam p4Ø6 - - - c0 1 1111119119 1 HH ng rệt 120Figure 3.67 UI of Review exam page - c c1 11 HH ng ng nếp 121Figure 3.68 UI of List ðTOUD DÀ€ - G2 32113321119 1118 1118111111 11 ren 122

Figure 3.69 UI of Add group DÀ© - - 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.1 Deployment đ1aðTa10 - s6 + 1318931 91 1 91 9v ng ng 126

Figure 4.2 Add Question page - - - ch ngệp 127Figure 4.3 Edit question page c1 HH TH HH gệp 127Figure 4.4 Delete question confirm pOpDUD 6 56 5 S1 + E + kEsekseessrseee 128Figure 4.5 Information tab «c5 s13 919g nh ngưng 128Figure 4.6 Questions ta ĩc SH TH TH HH HH Hệ 129Figure 4.7 Selected qU€S(IOTS - - G5 1112311991113 11 911191 11H ng ng ng gệp 129Figure 4.8 New schedule DODUD - 5 c1 3 192319 11191119 1 ng ng ng rệt 130Figure 4.9 Schedules faÌ - s nTHT HH 131Figure 4.10 Settings tab - c1 1S TH TH TH HH TH nếp 131

Figure 4.11 Template dashboarrd - . + + + E1 E3 vn ng ng 132

Figure 4.12 Do exam page cescecesscessecssceceeeessecececeacecsaeeesaeceaceceaeeceaeeesneeeaeeesas 132Figure 4.13 Review exam Page cceccceesccsssccesseeseceseeceseeceaeceeecececeaeeeseeceseeeeeeesas 133Figure 4.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 - - -«+s+2 13Table 2.2 Pros and cons Of DÌ 5 << + 13193 91 3 9111 1 nh ng ngư 20Table 3.1 Component architecture for cÏlenf-S1đe - s5 55 + ++sesseersseerss 31Table 3.2 Component architecture for S€TV€T-SIE - c5 S5 SE **vsseerseeeres 32Table 3.3 SySf€T1”S actors - QG c 13 1211211911111 HH ky 43Table 3.4 Sysfern”S IS€-CAS€S - Q01 HH TH HH HH HH tr 44Table 3.5 Use-case specification Of Sign UD - «xxx riet 44Table 3.6 Use-case specification Of Sign 1T - - <6 + + v ve 47Table 3.7 Use-case specification Of LÒOUI - c1 vn ng ng re 50Table 3.8 Use-case specification of Create ØTOUD - cSSc S*xsseerseeeree 53Table 3.9 Use-case specification of Add meimbe€rS - - 5+ 5< +++£+s£+s+sss 55Table 3.10 Use-case specification Of VieW QTOUPS :cccseseseeseeseseeeeeceeseseeseeseens 58Table 3.11 Use-case specification of Create QuestiOn - 5 +«<<s<+x+se+sx+ 61

Table 3.12 Use-case specification of Update quesfIOI - - 55555 <<<<< +2 64Table 3.13 Use-case specification of Delete questIon - «+ +-««++<++seexss 67

Table 3.14 Use-case specification of View QUESTIONS 55+ +-< + << s+sss++ 70Table 3.15 Use-case specification of Create €Xa1m - - 255 * 2+ ++vsseerseeerss 73Table 3.16 Use-case specification of Update eXam - 6c + cscssessssessee 76Table 3.17 Use-case specification of Delete CXam 5 5s +k+sversseeese 79Table 3.18 Use-case specification of View CXaMs cà nen sierske 82Table 3.19 Use-case specification of Schedule exam 5 5+ c+xecsseeess 85Table 3.20 Use-case specification of Take €Xam - - cv sereeeeree 88Table 3.21 Use-case specification of ReVieW €XAI se set 91Table 3.22 Tables (collections)’s d€SCTIDẨIOTI - 5 S1 3112 EskEsersersersee 96Table 3.23 List of attributes within each Collections - 5-55 cssssses 97Table 3.24 User collection SD€CIÍICAfIOH - G2 3211133111911 91111 rreree 98Table 3.25 Group collection SD€CIÍICAf1OII 5 11211911 vn ngư 98Table 3.26 Option collection SD€CIÍICAfIOII - 5c 21112 E£EESreekeeeereeeeree 99

Table 3.27 Question collection SD€CIÍICAfIOH 5 5 11+ *vssseeeesersrsee 100Table 3.28 Setting collection sp€CIÍICAafIOTI - - SG vn net 101Table 3.29 Schedule collection speCIfICafIOT - - 5 6S kg ng rưy 101Table 3.30 Exam collection SD€CIÍICAfIOT - 5 5 33+ * +2 E+vEESeeeesererserersee 102Table 3.31 AnswerQuestion collection specification - 5555 <S+£+xsscss 103Table 3.32 UserExam collection specification ciceseesesceeeseeseeseeseeseeeeeeees 104Table 3.33 List of user interfaces eee G0111 2301 91 91 nh TH ng như 107Table 3.34 Register page SD€CIÍICAfIOIN - SG G5 1112111391119 1 9 19 1 rệt 108Table 3.35 Login page SD€CIÍICAfÍOTN - 5 0 1190011230 19119 112311 nh ng nư 109Table 3.36 List question page sSD€CIICAfIOH vn ri 110Table 3.37 Add question page SD€CIÍICAfION 2G 11 niệt 111Table 3.38 Edit question page SD€CIfICAFIONI 5 5S S* + site 112

Table 3.39 Add/Edit template page speCIÍICafIONn .c- 55c s se ssereseree 117

Table 3.40 List template page SD€CIÍICAfIOH SG S111 Set 118Table 3.41 Dashboard template page speCIfiCatIOn 7-5555 s+sssssessses 119Table 3.42 List exam page SD€CIẨICAfIOTI - - SG 221121131133 19111 vn ru 119

Table 3.43 Do exam page SD€CIÍICAfIOII - G111 niệt 121

Table 3.44 Review exam page SD€CIÍICAfIOT - 5 5 5 S1 * + EE+seEeeeeesersrsee 121

Table 3.45 List group page SD€CIÍICAfIOIN 2c c1 191119 1 9 it 122

Table 3.46 Add group page SD€CIÍICAfIOII G5 S111 Set 123Table 3.47 Edit group page SD€CIÍICAfIOH G5 2c 123119111 net 125

Abbreviation Full form Meaning

Q&A Question and answer Question and answer

Al Artificial Intelligence AI technology or artificial intelligence

ARCFace Additive Angular Margin | Additive Angular Margin Loss for

Loss Deep Face is a loss function used in

face recognition tasks

CNN Convolutional Neural A Convolutional Neural Network is a

Network Deep Learning algorithm

2DHPE 2D Human Pose Human pose estimation aims at

Estimation localizing human anatomical keypoints

or body parts in the input data

RGB Red-Green-Blue Red-Green-Blue

RGB-D An RGBD camera is a type of depth

camera that provides both depth andcolor data as the output in real-time

CPM Convolutional Pose Pose Machines provide a sequential

Machines prediction framework for learning rich

implicit spatial models

CRUD Create-Read-Update- CRUD is the 4 most important features

Delete to work with Database of a Website.

ODM Object Document ODM is like an ORM for non-relational

Mapping databases or distributed databases

SOLID Single responsibility - SOLID is an acronym for the first five

Open-closed - Liskov object-oriented design (OOD)

substitution - Interfacesegregation - dependency

principles

inversion

DI Dependency Injection Dependency injection is basically

providing the objects that an objectneeds (its dependencies) instead ofhaving it construct them itself

VSCode Visual Studio Code An Integrated Development

Environment

JSX JavaScript XML It is simply a syntax extension of

JavaScript

HTML HyperText Markup Hypertext Markup Language and is a

Language language used by web browsers to

interpret and represent text

DOM Documents Object Model | It is the data representation of the

objects that comprise the structure andcontent of a document on the web

SEO Search Engine Search engine optimization is the

Optimization practice of creating and optimizing

relevant, authoritative content in a waythat helps visitors (and search engine

crawlers) find answers to their keyquestions

UI User Interface User Interface

RDBMS Relational Database A database management system that

Management System incorporates the relational-data model,

normally including a Structured Query

Language application programminginterface

HTTPS Hypertext Transfer Hypertext Transfer Protocol Secure is a

Protocol Secure combination of the Hypertext Transfer

Protocol with the Secure Socket Layer /

Transport Layer protocol

JSON JavaScript Object It is an open data interchange format

Notation that is both human and

machine-readable

BL Business logic Layer An intermediate between the

Presentation Layer and the Data AccessLayer

DAL Data Access Layer It is a layer of a computer program

which provides simplified access to

data stored in persistent storage

GUI Graphical User Interface | It is a type of user interface through

which users interact with electronicdevices via visual indicator

representations

SSD Single Shot Multibox It is a single-stage object detection

Detector method that discretizes the output space

of bounding boxes into a set of defaultboxes over different aspect ratios andscales per feature map location

There are many online learning systems available today that allow users to gainknowledge about a specific field or take a quick test Thanks to that, users canpractice, review their knowledge and self-assess their abilities by taking tests in acertain topic Tests made by users will be returned results almost immediately, itshows them the quality of the test through the number of correct answers, thenumber of wrong answers Then, they can refer to the answers from the system togain experience for the next test or prepare for the actual exam However, the test isgenerated passively, the user has to choose one of the available tests to execute It isnot really effective for users who want to practice on demand In addition to thecandidates’ practice, the organization of the online exam is also a matter of concern,especially since the outbreak of the epidemic (Covide-19) Therefore, the goal ofthis thesis is to build a system that helps users create exam questions quickly andrationally, and organize fair and transparent online exams In order to create testswith multi-level, diverse and flexible questions, the organization of the examensures correctness, authenticity and seriousness The system poses three problems

to be solved: building question banks, creating - configuring - scheduling exams,and applying monitoring algorithms to detect exam cheating

After searching, surveying, evaluating we found modern web applicationdevelopment technologies, advanced monitoring algorithms For building questionbanks, creating and administering exams, we choose React for the frontend because

it is a powerful framework that enables developers to quickly and convenientlycreate web applications; Typescript comes with React to make the code moretransparent, easy to scale; Ant Design is an add-on library to providecomprehensive components and beautiful behavior for applications NestJS is usedfor the backend because NestJS is a NodeJS framework for developing scalable and

efficient server-side applications, is a combination of OOP (Object Oriented

Programming), FP (Functional Programming), FRP (Functional Reactive

Programming) MongoDB is used as the database, it is a document-oriented

database used to store large volumes of data and Heroku is used to publish theapplication As for the exam cheating problem, face-api.js was chosen because it is

a popular library for face recognition in the browser, implemented on the core oftensorFlow.js, it supports many proper functions and is friendly to above webbuilding technologies

Chapter 1 INTRODUCTION

1.1 Objective and motivation

Digitization is a process that is being widely deployed in all areas of life From

state management to specific professions Digitalization of education is also aprominent instance of that trend In education digitization, we have thefollowing orientations

e Digitization in educational management: focusing on the management

process, statistical data around students, teachers, parent communication.Provide tools to visualize, predict, automate and digitize administrative data

e Digitization in professional teaching: focusing on solving the digitization

of teaching, learning and reference materials Systems to support learning,

support exams, support self-study processes while ensuring quality,

standardization and high efficiency

Today, along with the outbreak of the epidemic, online teaching has becomepopular, along with the need to organize exams, practice and assess onlinequality However, in the current conditions, the organization of exams or onlinetests in schools encounters many shortcomings in the stages of the process of

organizing the exam, creating exam questions as well as organizing a quality

exam Moreover, online learning also makes reviewing knowledge as well as

finding a review environment into a painful problem Although there are many

software and systems on the market that support online exams such as Moodle,Microsoft Team, LMS, but these systems have the following weaknesses:

e There are still many limitations in supporting question types with specific

content such as media, latex notation,

e The configuration of the exam is still simple, there are very few options

for users to set based on the context and exam format

e Does not support the method of assessing and classifying questions by

difficulty or by skills

e More serious is that there is no way to monitor the honesty of students

during the examTherefore, the need for a complete system of exam bank management, onlineexam organization process combined with automatic exam monitoring throughfacial recognition algorithms becomes urgent to ensure the quality of studyingand taking exams even without going to school, and create a reliable data sourcetowards building a data warehouse for storing knowledge systems

1.2 Current works

Currently, some web applications that support the user to practice knowledge orattend online exams such as EduEx [1], Quiktest [2], Quizizz [3], Aztest [4],Quizguru [5], Exalab [6], Quizguru is an innovative platform for conductingonline tests and quizzes Students in high schools, colleges, and universities canbenefit greatly from the question-and-answer system that is included in thisresource This online exam system has panels for the instructor, the operator,and the student, and the student will receive their result in a timely manner Inaddition, QwikTest is an open-source online examination software andassessment tool that lets educational institutions and organizations develop andadminister web-based and mobile-based examinations QwikTest can beaccessed through a web browser or through a mobile device QwikTest hasaddressed a wide variety of use cases, one of which is the development ofadaptive learning environments through the utilization of practice sets It issuitable for use in any and all corporate settings, as well as by private teachersand educational institutions Quizizz is an illustration of a type of system thatcan do tests quickly, in contrast to the two methods that were just discussed It is

an application that can be used to test one's knowledge in a variety of topic areas

in addition to one's social knowledge using answers in the form of multiple

choice questions Students can access multiple-choice questions that belong to avariety of categories and levels on Quizizz, allowing them to try the questionsand determine where they currently stand academically Alternatively, teachersand parents can access questionnaires that have been contributed by other usersand use these questions to teach and tutor their children Overall, Quizizz is auseful educational tool that can be utilized in the classroom as well as at home.However, most of them do not support online-exam and anti-cheat.

e Subjects within the scope of the thesis are directed to

- Exam organizers or educational organizations who want to create

internal exams

- Candidates who take the exam1.3.2 Study scope

In this thesis topic, this project has 3 objectives:

e The first objective: Build question banks with two types such as

system question banks and individual question banks

e Second objective: Organize the scheduled online exam based on the

configurations of an exam already created in the system

e Third objective: Monitor the entire process when candidates take the

exam, to ensure the purity of the exam result

There are two main scopes:

e Environment scope: Website, Application

e Function scope

- User can view, create questions, edit and delete questions; create

exams based on their own question bank or system question bank

- User can take the assigned exam, see the exam result

Chapter 2 THEORETICAL BASIS

2.1 Question bank

In all stages of education, exams are a fairly common assessment and evaluationtool, and there are numerous varieties of examination questions They are furthercategorized into seven types of examination questions: multiple choice, essay,matching, and ordering [7]

a)

Multiple Choice

Single Answer YS _

Multiple Choice

Multiple Answers ee

2.1.1 Multiple choice

Multiple Choice Questions are made up of a single question (the stem) and anumber of replies (the options), comprising both the right answer and severalerroneous ones (distractors) Students typically mark the proper response onthe machine-readable response sheet by filling in the corresponding circle, or

by circling the corresponding number or letter

2.1.2 Essay

Written responses to essay questions are sophisticated prompts that can range

in length from a few paragraphs to many pages Similar to short answerquestions, they provide students the chance to express their comprehensionand show ingenuity, but also make it challenging for them to fake their way

to a correct response Although they can be created rather quickly andreadily, marking these questions can take a lot of effort, and finding aconsensus among the graders can be challenging

Short answer questions are more structured, but essay questions are less so.Students can show that they can creatively combine the course informationthanks to this openness Essays are hence a preferred method for assessing

higher levels of cognition, such as analysis, synthesis, and evaluation

However, the amount of work necessary to react successfully increasesbecause the majority of the structure must be provided by the pupils Manytimes, writing a five-paragraph essay takes students longer than writing fiveone-paragraph responses to short answer questions Due to the increasingworkload, there are fewer essay questions that can be included on a single

exam, which can limit the entire breadth of the exam to a small number of

themes or subject areas Give pupils the choice of responding to one of two

or more questions to prevent panic or blanking out on their part

11

2.1.3 Matching

When answering matching questions, students must match each of a group ofstems (such as definitions) with a possible answer from the exam's choices.These questions are frequently employed in courses where acquiringcomprehensive knowledge is a key objective since they are frequently used

to evaluate recognition and recall

2.1.4 Ordering

The ordering question type displays several short sentences in a randomorder which are to be dragged into the correct sequential order [8]

The system will focus on creating questions with content supported by a variety

of formats rather than multiple question types So we will prioritize multiple

choice question type instead of supporting all 4 types above

2.2 Online test

The above question bank was formed to serve the organization of the onlineexam To understand the concept, purpose of the exam, the way that an exam iscreated First, we should have an overview of the different types of test

2.2.1 Types of test

There are three types of test [9]:

e Quiz: A quiz is the shortest, most common, and most casual form of

evaluation It frequently suggests a brief or informal test Scores may

or may not be included to calculate the student's total course grade

e Exam: An exam is a more formal test with sections that implies a

deeper and more final assessment An exam's format and length aretypically lengthier and more comprehensive than a quiz Scores will

factor into the student’s overall course grade.

12

e Practice set: Practice sets help keep students engaged and prepare

them for tests with immediate feedback Students can also earnrewards through practice sets Practicing helps students focus on weak

areas.

2.2.2 The difference of tests

Let's explore the differences between a quiz, exam, and practice set

Features Quiz Exam Practice Set

Purpose Informal Formal Practice

Format Objective OPiective “ Objective

Subjective

Length Short Long Short/Long

Score Yes Yes No

Limited Time Yes Yes No

Section Based No Yes No

Earn Rewards No No Yes

Table 2.1 Differences between quiz, exam, and practice set

While there is no formal standard, these terms often refer to a hierarchy ofevaluations — with a quiz as the most casual, an exam as the most serious

2.2.3 Exam creation and organization

To create a really good exam, the creator needs to know more or less aboutapplied statistics in education, about scientific research methods to read andunderstand studies on multiple-choice as well as essay; At the same time,you can do your own research to be able to process the data, consider thereliability and validity of the test questions created by yourself, in order tobetter analyze and correct the questions in the exam

13

To prepare a test, the first thing to determine is what the purpose of theassessment is? Evaluation in the learning process or assessment at the end ofthe term, at the end of the course? Which subject to evaluate? What content?For which audience? Understanding that will help us define the requirements

of the audit content and take the right measure The subject of the assessmentcan govern the selection of the appropriate assessment content for it Fromthere will determine the type of assessment (Q&A or written?) Afterdeciding on the test type, it is necessary to select the assessment tool (orquestion types) Once a question type has been selected, one must determine

the length of time allowed and the number of questions in the selected

format Next is to prepare questions and answers, and determine the score

levels

Once the exam creation is complete, it is necessary to select a platform totake the test (on paper or on a computer) and conduct a simulation of theexam process If deemed appropriate, the test will be conducted, tested,marked, graded the results of the test and finished the process If the test isincorrect or inappropriate, the test should be adjusted or changed according

to the situation [10]

2.3 Anti-cheat supervision

\andidates log into the system with their Candidates press Requires camera and Identity verification

account and go to the exam page the start button microphone to be enabled

“Finnish Exam Identity verification ga [TESS Uns SL PERTE TY He Start Exam

submit button exam process

Figure 2.2 Anti-cheat process overview

The fight against exam cheating is done through two types, one is the examlogic, the other is the measures to check and monitor the exam process Exam

14

logic is related to the organization of the exam, for example questions are notdisplayed once but sequentially with fixed duration, time limit to answer eachquestion, etc We have referenced research articles on facial analysis as well asskeletal analysis, they are useful for monitoring the exam process of candidates.And in this thesis we will monitor through the application of face detection

library [11] [12]

2.4 Technologies and Platforms

2.4.1 Multiple layer architecture

2.4.1.1 Overview

Layers are abstract horizontal pieces that make up an application Theselayers represent the software's various levels and forms of abstraction.The layers aid in the division of the application into more manageable

pieces and the provision of multiple implementations Each layer should

have its own collection of models that cannot be accessed from anotherlayer Furthermore, each layer should be able to reach only the layerunderneath her or at the same level [25]

15

2.4.1.2 Model structure

Controllers (Routes)

Figure 2.3 System’s model structure

Controllers: The sole purpose of a controller is to receiveapplication requests and deal with routes

Service Layer: Only business logic should be included in this

section of the block For example, all of the CRUD processes and

methods that govern how data is created, saved, and updated

Data Access Layer: This layer manages and offers logic foraccessing data stored in some form of persistent storage [26]

16

2.4.2 Typescript

2.4.2.1 Overview

TypeScript

) Official logo

(b) Logo from community S

Figure 2.4 Logo of TypeScript

TypeScript is an open source project developed by Microsoft, it can beconsidered as an enhanced version of Javascript by adding the optionalstatic type and object-oriented classes that are not available in Javascript

[27]

e TypeScript can be used to develop applications that run on

client-side (Angular2) and server-client-side (NodeJS)

e TypeScript supports object-oriented programming, provides better

descriptions of objects, and allows testing that the source code is

working correctly

e Can program JavaScript at the same time as TypeScript

TypeScript is converted to JavaScript code through the TypeScript

or Babel compiler

2.4.2.2 Pros

The pros of Typescript are:

e Strict typing: Everything stays the way we define it A variable

must always be an integer? Itll always be a number, then

17

Structural typing: It is essential if you want to completely definethe structure you employ Because JavaScript allows for a widerange of weird operations, relying on a predefined structure is amuch safer option.

Type annotations: A convenient approach to specify which typeshould be used

Type inference: TypeScript performs implicit typing so that yourdevelopers don't have to provide types where the compiler can findthem on its own

2.4.2.3 Cons

There is no such thing as a perfect thing in the world, whether it is real ordigital TypeScript is not exempt from this rule, and it has a fewdrawbacks

Excessively convoluted typing system: Can be difficult to use attimes This isn't really a TypeScript disadvantage, but rather aconsequence of it being fully compatible with JavaScript

Compilation is required: It requires compilation, whereasJavaScript does not But, let's face it, most JavaScript applicationsnowadays require a build phase

False sense of security: TypeScript has the potential to give you afalse sense of security The language can check types for us andalert us if there is an error in our code However, leaning tooheavily on this carries a substantial danger

2.4.3 Nestjs

2.4.3.1 Overview

Nest.js is an open-source [28] framework, and it is one of the

fastest-growing Node.js frameworks for building efficient, scalable, and

18

enterprise-grade backend applications using Node.js It is known forproducing highly testable, maintainable, and scalable applications usingmodern JavaScript and TypeScript [29] The highlight of the Nestframework is the power of dependency injection which facilitates codereuse by injecting one module into another [30].

Figure 2.5 Definition of dependency injection [31]

Referring to dependency injection (DD, we must first remember the

principle of Dependency Inversion in SOLID principles

Dependency Inversion

e High-level modules are independent of low-level modules

e Classes communicate with each other through interfaces

So what is DI?

In a nutshell, DI is a design pattern for code that follows the principles ofDependency Inversion That is, the modules do not communicate directly

19

with each other, but through the interface, the low-level module willimplement the interface, the high-level module will call the low-levelmodule through the interface [31].

Pros and cons of Dependency injection [31]:

It is easy to see the relationship

between the modules (Because

the dependencies are injected into

Objects are fully initialized from

the start, which can _ reduce

Some of the benefits of using Nest.js include [29]:

e Powerful but user-friendly: The framework is easy to work with

for developers, making even the most complicated and powerfulfeatures accessible The framework also takes care of otherimportant aspects of development, such as security

e Angular-style syntax (backend): Angular is a very popular

frontend framework with a concentration on architecture andstructuring Nest.js functions as Angular for the backend by

20

utilizing Angular style and syntax to assist you in structuring yourcorporate project.

TypeScript: Nest.js supports TypeScript out of the box, which

improves efficiency and allows for the rapid development of

maintainable apps by displaying compilation faults and warnings.TypeScript is well-integrated with VSCode for a user-friendlydevelopment environment

Thorough documentation: Nest.js features some of the bestdocumentation for any framework, which is very easy tounderstand It saves debugging time to rapidly scan the manualand find the solution to your problem

Fast development and good architecture: Nest.js saves you timewhile building out your application

2.4.3.3 Cons

"Every advantage has a disadvantage," as the saying goes, and Nest.js is

no exception So, let’s explore the cons of Nest.js [29]:

Difficult for beginners: Nest.js might be difficult to learn and

master for novice developers who do not come from an Angularbackground Furthermore, because not every JavaScript developeruses TypeScript, the framework can be tough for these developers

as well But, like any other technology, it takes time andexperience

Exhausting debugging: While TypeScript has many advantagesand benefits, it also has significant debugging challenges,particularly for novice developers in the TypeScript community

21

2.4.4 React

2.4.4.1 Overview

React (also known as React.js or ReactJS) is a free and open-source

front-end JavaScript library for building user interfaces based on UI

components [32]

2.4.4.2 Pros

There are pros of ReactJS [33]:

Easy to learn and use: ReactJS comes with a good supply ofdocumentation, tutorials, and training resources

Creating dynamic web applications becomes easier: ReactJSprovides less coding and gives more functionality It employs theJSX (JavaScript Extension), which is a syntax that allows HTMLquotes and HTML tag syntax to render certain subcomponents Italso facilitates the creation of machine-readable codes

Reusable components: A ReactJS web application is composed ofseveral components, each with its own logic and controls These

components are in charge of producing a short, reusable piece of

HTML code that can be used wherever it is required The reusablecode makes it easy to design and manage your apps TheseComponents can be stacked with other components to createsophisticated applications from simple building blocks Topopulate data in the HTML DOM, ReactJS use a virtual DOM-based technique The virtual DOM is fast because it simplymodifies individual DOM items rather than reloading the entireDOM every time

Performance enhancement: ReactJS improves performance due tovirtual DOM

22

e Known to be SEO friendly: ReactJS helps developers to be easily

navigated on various search engines This is due to the fact thatReact.js applications can execute on the server, and the virtual

DOM will render and return to the browser as a standard web

page.

e Scope for Testing the Codes: ReactJS applications are extremely

easy to test It provides a platform for developers to test and debugtheir programs using native tools

2.4.4.3 Cons

The high pace of development: The high pace of development has anadvantage and disadvantage both In the event of a disadvantage, because

the environment is always changing, some developers may not feel

comfortable relearning new ways of doing things on a frequent basis.With all of the constant upgrades, it may be difficult for them to absorball of these changes They must keep their abilities up to date anddiscover new methods to do things [33]

2.4.5 Ant Design

2.4.5.1 Overview

Ant Design is an open-source React UI library and design system that

includes a slew of simple components The framework is made up of UIcomponents that may be used in any project Ant Design is being utilized

to build user interfaces for major Chinese corporations such as Alibaba,Tencent, and Baidu Ant Design offered a set of out-of-the-box

components that are suitable for use on a large scale [34]

2.4.5.2 Pros

There are some pros of Ant Design [35]:

e Polished and user-friendly interface

23

e Easy to integrate and customize forms.

e Support iOS, Android and web applications design

e Beautifully animated components and quick release rhythm

e Typescript and Es6 support

e Very affordable

e Support both English and Chinese

2.4.5.3 Cons

There are some cons of Ant Design [35]:

e Lack of in-depth documentation compared to other frameworks

e Less number of available themes

e Poor accessibility support

e Large file size

2.4.6 MongoDB

2.4.6.1 Overview

MongoDB is a NoSQL document database It is a document-based

open-source application for high-volume data storage It makes use of a

document-oriented data model as well as an unstructured query language

It allows developers to quickly use and master the tool due to itsscalability and versatility

2.4.6.2 Pros

There are some pros of MongoDB [36]:

e Performance Levels: MongoDB stores most of the data in the

RAM It enables faster query execution performance

e High speed and higher availability: MongoDB is a

document-based database solution It has attributes like replication and

24