VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: BUILDING A WEBSITE FOR ONLINE TESTING Student’s name: DO CAO NGUYEN Hanoi - Year 2024 VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: BUILDING A WEBSITE FOR ONLINE TESTING SUPERVISOR: Dr Pham Dinh Tan STUDENT: Do Cao Nguyen STUDENT ID: 19071620 MAJOR: Informatics and Computer Engineering Hanoi - Year 2024 Acknowledgments I would like to express my sincerest thanks to Dr. Pham Dinh Tan for his enthusiastic help and dedicated guidance throughout the implementation of this design project. His support and in-depth expertise were instrumental in helping me achieve good results and improve myself a lot. Pham Dinh Tan, right from the beginning of assisting students, designed a clear path for us to keep us from straying off track and be focused on what we do in the project.
The passion plus commitment from him not only was able to support me to finish this project but also allowed me to grow my skills in an all-around way. His leadership on time management for this project was critical: it helped me address the intricacies related to this project and yet served as a push towards my development- both academically and personally. The positive and constructive feedback from Dr. Pham Dinh Tan has helped me understand the content better and learn how to operate a project.
His detailed comments on the different aspects of my work-including his fair evaluation based on an attentive eye-allowed me to see things differently, enhancing my ability to detect issues and self-judge accordingly so that the project could reach high standards of quality and excellence. In addition to Dr. Pham Dinh Tan, I would like to send my sincere thanks to the entire school community, including my friends and family. Their shared knowledge, opinions, and encouragement have been invaluable throughout this journey.
The spirit of collaboration and support from colleagues and relatives has given me the motivation and confidence necessary to persevere and succeed. The comprehensive support from Dr. Pham Dinh Tan and the surrounding community is a significant source of inspiration. This collective encouragement played a key role in the successful completion of this project.
I believe that the 1 knowledge and skills I gained through this experience will serve as a solid foundation for my future endeavors. Furthermore, Social Networks have helped me partly with ideas and helped me speed up the progress of the project. The insights and advice from various individuals not only contributed to the success of the project but also enriched my overall learning experience. The interaction and exchange of ideas broadened my horizons and deepened my understanding of the subject.
Once again, I would like to sincerely thank Dr. Pham Dinh Tan, the entire school, friends, family, and everyone who has supported me throughout this journey. Your collective efforts and encouragement have been indispensable, and I am deeply grateful for your contributions. This journey has been a transformative experience and I look forward to applying the knowledge and skills I have gained to future challenges and opportunities.
Best regards, Do Cao Nguyen 2 Pledge Full name of student: Do Cao Nguyen Contact Phone: 0915765804 Email: caonguyen.com Class: ICE2019A I – Do Cao Nguyen – commit The project is my research under the guidance of Dr. Pham Dinh Tan. The results stated are honest, my work, not copied by any other work. All references including images, tables, figures, and citations - are clearly and fully sourced in the bibliography.
I take full responsibility for even one copy that violates the school's statutes. Hanoi, June 2024 Author Do Cao Nguyen 3 Abbreviations and Acronyms API Application Programming Interface CSS Cascading Style Sheets DOM Document Object Model DIP Dependency Inversion Principle DI Dependency Injection HTML HyperText Markup Language JWT JSON Web Tokens JS JavaScript UI User Interface UX User Experience 4 Table of Contents Acknowledgments. 3 Abbreviations and Acronyms. 9 Objectives and scope of the topic.
16 Chapter II: System Analysis and Design. Current status survey. Overview use case diagram. Decay use case diagram.
Non-functional requirements. 35 Chapter III: Application development and deployment. Software architecture selection. 42 Project Organization and Responsibilities.
42 Dependency Inversion Principle (DIP). 44 Benefits of This Architecture. Package Detail Design. Build an app.
Libraries and tools to use. 51 Results of Website Functions:. 52 Conclusion and Development Direction. 71 6 LIST OF FIGURES Figure 1.
Benefits of Online Exam System. Online Exam System. Overview use case diagram. Decay diagram Use case Account managementError! Bookmark not defined.
Decay diagram Usecase Question management. Decay diagram Use case Test management. Decay diagram Use case Test result management. Decay diagram Use case Account management .Net Core Clean Architecture.
N-tier architecture and Clean Architecture. Overview package diagram. Detailed package diagram. Detailed backend diagram.
Frontend folder structure. Database design diagram. Exam website screen. Test list screen.
Select exam candidates. Add test for candidates. Add test successfully. Add exam question.
Account added successfully. Login guest list .64 8 ABSTRACT The importance and significance of the research topic In the era of Industry 4.0, the use of online examination systems has become an indispensable part of the education and assessment process. This is not just a trend but a necessity, driven by a range of benefits it offers. Below are some clear reasons why an online examination system is needed.
Firstly, in a world where everything is shifting online, implementing an online examination system is unavoidable. Both in education and in many other fields, the convenience of accessing information and data from anywhere in the world with just a click has become a part of daily life. Online exams not only provide convenience but also reflect the global trend of globalization and digitization in education. Secondly, online examination systems save a lot of time for learners and examiners.
Since students no longer need to travel to a physical examination center, they can take the exam at any location with an internet connection. This not only helps them use their study and rest time more efficiently, but also reduces the burden of travel time and expenses. Third, consider emergency situations and health restrictions, disease outbreaks, or other emergency situations when designing online reviews. When assessments do not involve face-to-face interactions, students can continue to learn and assess their skills without the risk of illness or interruption of learning.
Finally, the online exam system also helps minimize errors in the assessment process, saving more time for teachers. This helps online exam results achieve high accuracy and operate automatically, reducing the possibility of human error. In conclusion, the implementation of online examination systems is not just a trend but a necessary step in enhancing the quality and efficiency of the education and assessment process in the era of Industry 4. Benefits of Online Exam System (Source: https://www.in/blog/online-examination-minimizing-disruption- to-learning.html) 10 Objectives and scope of the topic To develop a system that fulfills the mentioned functions, I opt to construct two websites catering to two user groups: For administrators, the website offers comprehensive functionalities.
They can efficiently manage user accounts, oversee the question database, create and manage exams, assign exams to candidates, conduct exam assessments, and much more. The administrative interface provides intuitive tools for seamless navigation and operation, ensuring smooth management of all examination-related tasks. Additionally, features like analytics and reporting tools empower administrators to track performance metrics, identify trends, and make informed decisions to enhance the examination process continually. For candidates, the website provides a user-friendly interface focused on exam participation and performance tracking.
Once logged in, candidates can access a dashboard that displays a list of tests assigned to them. Candidates can view test details such as duration and instructions, which helps you prepare well before starting the test. During the exam, candidates can browse through the questions, give answers and submit their answers within the allotted time. Once they complete the test, they can review their results, and receive detailed feedback.
In addition, in the future this platform will be developed to facilitate seamless communication between candidates and administrators and can disseminate important announcements, explanations and announcements about exams or other issues. Both sites are guaranteed for accessibility, responsiveness, and security. They are designed to adapt to different devices and screen sizes, allowing users to conveniently access the platform from a desktop, laptop, tablet or smartphone. Additionally, 11 strong security measures, including encryption protocols and authentication mechanisms, protect user data and maintain the integrity of the verification process.
In essence, the dual-site approach addresses the different needs of administrators and test takers, while also providing customized solutions to simplify test administration and improve the experience. testing for all participants. Solution-oriented Solution-oriented The solution is that I will build a website system for the above 2 agents, along with a server providing API to be able to perform the functions and features mentioned in section 1. The system will be divided into 2 main parts: Frontend and Backend.
Frontend is about building user interfaces for administrators and candidates, using HTML, CSS and ReactJS technology. The backend will build a business-specific API service, using .Net Core technology The database uses MySQL technology. 12 Project Layout Chapter I: Introduction. Chapter II: System Analysis and Design.
Chapter III: Application development and deployment. Front-end Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) are the technologies used in my website. HTML provides the structure of web pages, CSS controls presentation and layout while JavaScript adds interactivity and dynamic behavior to web pages. HTML plays an important role in web development as it defines the components and structure of a website.
Include tag elements that include different symbols such as titles, anchor paragraphs, and images. HTML provides the framework for organizing and displaying web page content. CSS complements HTML by controlling the visual aspects of a web page. It allows developers to define website page appearance such as colors, fonts, spacing and layout, thereby enhancing the presentation and aesthetics of the website.
CSS allows for consistent styling across multiple pages and supports responsive design for optimal viewing on a variety of devices. JavaScript, or JS for short, is a programming language that enables interactive features on websites. JavaScript allows developers to create features such as form validation, animations, maps or interactions, and responsive menus. This encourages developer creativity and increases the interactivity of websites to improve the experience and increase user engagement.
On the other hand, ReactJS is a JavaScript library for building user interfaces, especially single-page applications. Developed by Facebook, ReactJS follows a component-based architecture that allows developers to create reusable UI components. ReactJS uses a virtual DOM (Document Object Model) for efficient rendering, which provides faster performance and greater scalability than traditional JavaScript frameworks. One of the main advantages of ReactJS is its component-based architecture, which promotes code reusability and modularity.
Developers can create independent 14 components that encapsulate functionality and styling, making it easier to maintain and update the codebase. Additionally, ReactJS offers a declarative approach to building user interfaces, simplifying the process of managing application state and updating the DOM. However, ReactJS also has some limitations. Its steep learning curve can be challenging for beginners, especially those new to JavaScript or web development.
Furthermore, the ecosystem surrounding ReactJS is vast and constantly evolving, which can lead to issues with compatibility and dependency management. Additionally, while ReactJS excels at building user interfaces, it may not be the best choice for applications requiring server-side rendering or complex data manipulation. In conclusion, HTML, CSS, JavaScript, and ReactJS are integral technologies in web development, each serving specific purposes in creating dynamic and engaging web experiences. While ReactJS offers numerous advantages such as component-based architecture and efficient rendering, developers should carefully consider its complexities and limitations when choosing it for a project.
ReactJS (Source: https://www.com/pulse/reactjs-ecosystem-exploring-key-libraries- frameworks-2023-murthy) 15 1.