Tunisian Republic

Ministry of Higher Education and

Scientific Research

University of Sousse

Higher Institute of Computer Science and

Communication Techniques of Hammam
Sousse

Report on the End of Studies Project Presented in order to obtain the National License
Degree in Telecommunications

Realised by
Takoua Ghouaiel

Design and Implementation of a Parental Monitoring

Platform for the ClassQuiz Product

Hosting organization: ENVAST.

Pedagogical Supervisor:Ms. Faouzia Kahloun.

Technical Supervisor:Mr. Achref Dawahi.

Academic Year:2022-2023.
 Signature and Stamp.

I, Ms. Faouzia Kahloun hereby authorize the student Takoua Ghouaiel to submit her
end-of-studies report (PFE report).

I, Mr. Achref Dawahi hereby authorize the student Takoua Ghouaiel to submit her
end-of-studies report (PFE report).
 Dedications

I take great pride in the work that I have accomplished, but I am also deeply grateful for the many
individuals who have helped me along the way. Their unwavering belief in my abilities has been a
source of motivation and inspiration.

I dedicate this work to ...

In loving memory of my father, Cherif

Every step I take in life, your presence is felt deeply. Though you left us too soon, your spirit
remains with us until our last breath. To my dearest father, I have not only reached the age of
thirteen and entered high school, but I have grown into a young woman that she will be obtained
her diploma very soon. How I wish you were here by my side, to witness my accomplishments and
perhaps buy me that chocolate as you always did. Father, may you rest in peace, knowing that
your daughter is safe, driven to learn, motivated to work hard, and mindful of her surroundings.
Dear father, I hope you are proud.

To my dearest mother, Ahlem

Thank you for being not only my mother but also my father. Your love and care have brought
immense joy to my soul, and I am grateful for your support. You have shown me what it means
to be a true role model and have guided me through life’s challenges. Your strength, kindness,
and unconditional love have shaped me into the person I am today. Thank you, dear mother, for
everything.

ii
 To my brother and sisters

I am filled with happiness to be your youngest sister, but even more joyful to witness your pride
in the person I have become today. This achievement is the result of the small steps I have taken
in life, with each of you by my side, guiding and correcting my path. Yosra, thank you for always
being a source of inspiration and an idol to me. Imen, your kindness and unwavering moral support
mean the world to me. And Abdelgafour, thank you for the countless laughs we’ve shared together.
I love each and every one of you, deeply.

To my beloved best friends

I never could have imagined having souls like yours by my side. I never expected to encounter
individuals who would bless my heart and bring constant happiness into my life. You all are like a
guiding light in the darkest of times, a truly support system that always has my back.
Dear Ghada, words cannot express my gratitude for being my therapist, my confidante, and my
soulmate. Your pure heart and unwavering presence in my life mean the world to me.
Dear Douaa, you are more than a sister to me. Thank you for your unconditional love, your
genuine kindness, and for always being there through thick and thin.
Dear Oussema, thank you for the years of friendship we have shared. In times of complaint
and struggle, you have been there to offer solutions and support. Your presence has brought great
comfort to my life.
To all of you, my dear friends, thank you for everything! Your friendship has enriched my life
in ways I cannot describe.
To all my loved ones...

iii
 acknowledgements

I would like to express my utmost gratitude to my academic supervisor Ms. Faouzia Kahloun,
who graciously accepted the role of my supervisor. Her unwavering support, constant encourage-
ment, and attentive ear have been invaluable throughout my journey. Her guidance and expert
advice have steered me in the right direction, ensuring that I stayed on the path to success. I am
truly honored to have had her as my supervisor, and I am deeply appreciative of her dedication and
expertise.

I would like to express my deepest gratitude for my technical supervisor Mr. Achref Dawahi
Thank you for granting me the opportunity to be part of the team and take my very first steps into
the professional world. Your leadership and dedication to your work have been truly inspiring. I
am grateful for the guidance and support you have provided, which have ignited my passion and
given me the confidence to grow in my chosen field.

I also want to express my gratitude to Mr. Louay Atoui, the frontend senior developer who
served as my direct frontend supervisor. He provided invaluable support and guidance throughout
my learning journey in frontend development. I am truly grateful for all the efforts he put in to
help me enhance my skills. Thank you so much for your continuous support and dedication.

I would like to thank all the ClassQuiz Team for the incrediball work ambiance, vibe and
environment . such team do nothing than making you happy to go to the work everyday and you
know you will learn something , you will network and your mental health be safe.

Special thanks to Mr.Mohammed Aziz Doss for being an exceptional coach and mentor.
You have played a pivotal role in teaching me the art of learning, guiding me in finding the right
path, and instilling in me the necessary skills for effective research. Your supervision, direction, and
support have been invaluable, and most importantly, you have consistently boosted my confidence
in my work. I am truly grateful for your mentorship and the profound impact you have had on my
personal and professional development.

iv
 I would also like to thank the respectable members of the jury for giving me their precious time
to comment, discuss and judge my work. I hope that this report will live up to their expectations.

Finally, I cannot finish this final project without expressing my gratitude to all the professors
of ISITCOM, for their dedication and assistance throughout my university studies.

v
" Read, be conscious, and benefit."

"Father said."

vi
 Contents

General Introduction 1

1 General Presentation 3
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Hosting Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.1 General Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.2 Social Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Preliminary study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.1 Study of the existing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.2 Problematic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 Proposed Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 Adopted Methodology «Scrum» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.1 Scrum Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.2 Why Scrum ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 The User Story . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6 The Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Conceptual study 10
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Analysis and Specification of Requirements . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.1 Actor Identification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.2 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.3 Non-functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Application Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3.1 Global Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3.2 Logical Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3.3 Detailed Front-End Architecture . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.4 Global Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.5 Global Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

vii
Contents

2.6 Project Management with Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.6.1 Project Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6.2 Backlog features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6.3 Sprint Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.7 Development tools and environment . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.7.1 Hardware environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.7.2 Technical environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3 Sprint 1: Manage profile 24

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2 Sprint planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.1 Sprint 1 objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.2 Sprint 1 Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.3 Use case diagram of Sprint 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2.4 "Authentication " use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2.5 "Update profile" use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.2.6 "Reset password" use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.3 Implementation of interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3.1 Authentication Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3.2 Update parent Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.3.3 Support Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4 Sprint 2: Manage students 35

4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2 Sprint planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.1 Purpose of sprint 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.2 Sprint Backlog of Sprint 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.3 Use case diagram of sprint 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.4 "Add new child" use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.5 "Update child" use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.6 "Delete child" use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.3 Implementation of interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

viii
Contents

4.3.1 Consult student list Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

4.3.2 Add new student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.3.3 Update student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.3.4 Delete student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

5 Sprint 3: Supervise students 44

5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2 Sprint planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.1 Purpose of sprint 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.2 Sprint Backlog of Sprint 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.3 Use case diagram of sprint 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.2.4 "Consult advancement" use case diagram . . . . . . . . . . . . . . . . . . . . 46
5.3 Implementation of interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3.1 Consult achievement list interface . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3.2 Supervise student interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3.3 Identify child’s behaviours Interface . . . . . . . . . . . . . . . . . . . . . . . 49
5.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

General conclusion 56

Bibliography 57

A Annex 59
A.1 Designing the user experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
A.1.1 Mock-ups interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

ix
 List of Figures

1.1 Logo ENVAST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.2 Scrum Board . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1 Platform Global Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2 Platform Logical Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3 Redux Toolkit Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4 Diagram of global use cases. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.5 Diagram of Global Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.6 VSCode Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.7 Gitlab Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.8 Visual Paradigm Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.9 laravel Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.10 React JS Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.11 Material UI Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.12 Adobe XD Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.13 PostgreSQL Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.1 Manage profile Use case diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2 Authentification sequence diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.3 Update profile sequence diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4 Reset password sequence diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.5 Authentification interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.6 Password reset confirmation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.7 Reset password. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.8 update-profile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.9 support interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.1 Manage children Use case diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2 Add child sequence diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.3 Update child’s information sequence diagram. . . . . . . . . . . . . . . . . . . . . . . 39
4.4 Delete child sequence diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

x
List of Figures

4.5 Student list Interface for different devices . . . . . . . . . . . . . . . . . . . . . . . . 41

4.6 Add new student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.7 Update student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.8 Delete student Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

5.1 children supervision Use case diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

5.2 Supervise child use case diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.3 Achievement interface for different devices . . . . . . . . . . . . . . . . . . . . . . . . 47
5.4 Child identity section interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5 Child latest unlocked rewards section interface . . . . . . . . . . . . . . . . . . . . . . 48
5.6 Child performance section interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.7 Child daily progress section interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.8 Child performance section interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.9 Choosing test interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.10 Intelligence test interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.11 Intelligence test result interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.12 Academic difficulties test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.13 Academic difficulties test result interface . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.14 Personalitty test interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.15 Personality test result interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

A.1 Login form design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

A.2 Children list design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
A.3 Achievement list design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

xi
 List of Tables

1.1 Comparison between different methodologies. . . . . . . . . . . . . . . . . . . . . . . 7

2.1 Project Actors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.2 Product Backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.3 Sprint planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.1 Sprint 1 backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2 Authentification use case description . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.3 Update profile use case description . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.4 Reset password use case description . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.1 Sprint 2 backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2 Add student use case description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.3 Update child’s information use case description . . . . . . . . . . . . . . . . . . . . . 38
4.4 Delete child’s information use case description . . . . . . . . . . . . . . . . . . . . . 40

5.1 Sprint 2 backlog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

xii
 General Introduction

The educational system has always been slow to change. On one hand, the actuality of slow-paced
change is a good thing, since it helps avoid the drawbacks of adopting education trends before
they’re fully tested. On the reverse side, it leads to a system that feels static and cannot respond
rapidly to the ever-changing technological world. The only way to increase that response rate is to
drastically change the systemic approach to curriculum, which is no small task.

The future of the educational field would then directly depend on modernizing the applied
pedagogical approach to a curriculum in a way that keeps the students engaged and makes sure
they’re learning how to be critical, confident, and creative. On the other hand, it is equally important
to recognize the vital role of parental guidance in a child’s education. Children thrive when they are
raised in a supportive family environment, where parents actively track their progress and provide
necessary guidance. Parents who actively participate in their child’s education can help reinforce
positive learning behaviors, monitor their child’s academic progress, and provide valuable emotional
support. This involvement can also foster a sense of responsibility and accountability in children,
as they recognize the importance of their education and strive to meet their goals. Ultimately, a
collaborative effort between educators and parents can create a more conducive learning environment
and help children reach their full potential.
In this context, the objective of this work is to improve an existing mobile application (ClassQuiz)
which is an educational game (or serious game) that offers a set of interactive exercises to help en-
hance the student’s knowledge, add some features to this solution and turn it into a more accessible,
more performant, and most importantly more scalable version that stays modern for the next gen-
erations to come.
This project is carried out by adopting the "Scrum" process framework, and therefore, the struc-
ture of this report is influenced by this framework and will be divided into 5 chapters. structured
as follows: The first chapter is devoted to the presentation of the host organization, the analysis of
some of the existing solutions, studying the problem that led to the implementation of this project,
and specifying the work methodology adopted.
The second chapter presents a conceptual study and provides illustrations to better explain the
proposed solution. It will cover the specification of functional and non-functional requirements,

1
General Introduction

followed by the implementation of various global diagrams. Additionally, we will showcase the
application architecture: global, logical, and detailed front-end architecture.
Then, each sprint contains its analysis and implementation, sprint 1 is dedicated to parent
management, sprint 2 to student management and the last one to student supervision.
Finally,We will close this report with a conclusion, which will summarize the work done and
give a couple of perspectives.

2
 General Presentation
1
1.1 Introduction

The first chapter provides an overview of the project’s general framework. It consists of three parts.
The first part aims to present the hosting organization, ENVAST. The second part addresses the
problem, including a study of the existing situation, and presents the proposed solution. The third
part discusses the chosen methodology to guide the project.

1.2 Hosting Organization

1.2.1 General Presentation

ENVAST is an IT development company based in Sousse, Tunisia, comprised of 30 employees who

specialize in developing web and mobile applications using augmented and virtual reality. The
company provides consultancy services to clients to create customized digital solutions and assist
them in their digital transformation.

1.2.2 Social Structure

ENVAST stands out from many other companies thanks to its structure that encourages teamwork
and minimizes hierarchical levels in order to promote better cohesion between employees and improve
their work environment. ENVAST is divided into four cells, each responsible for a service and
composed of highly skilled employees. These cells are as follows:

3
Chapter 1. General Presentation

• Development department: This department has around twenty qualified individuals in various
development technologies who are responsible for carrying out high-quality projects to satisfy
national and international clients.

• Marketing department: Consists of employees who are responsible for online marketing.

• Design department: Comprised of a group of employees who are responsible for creating
innovative models and graphic designs.

• Pedagogical Department: The team responsible for innovating and creating exercises for stu-
dents in accordance with the curriculum of Tunisian primary education.

• Commercial/Finance department: Composed of personnel in charge of commercial manage-

ment of the company and financial aspects.

Figure 1.1: Logo ENVAST

1.3 Preliminary study

1.3.1 Study of the existing

ClassQuiz is an educational application designed for primary school students, fully aligned with the
official ministry programs. The app ensures that students acquire the necessary skills and knowledge
required by the curriculum.By providing interactive exercises, it creates an engaging and dynamic
learning environment that can help students retain information more effectively. Additionally, the
application’s emphasis on play and gamification can increase motivation and interest in learning,
leading to improved academic performance.
Furthermore, the application can be used as a supplementary tool to classroom learning, allow-
ing students to review what they have learned at school. It also provides immediate feedback on

4
Chapter 1. General Presentation

exercises, enabling students to identify their strengths and weaknesses and adjust their learning ac-
cordingly. The app’s accessibility from anywhere makes it a convenient tool for students to continue
their learning outside of the classroom, providing flexibility and additional learning opportunities .
In addition, it’s worth noting that there are other educational platforms in Tunisia, such as
Ferid Around The World, that offers children an engaging and enjoyable learning experience.
However, the lack of parental involvement in the application is a significant issue that needs to be
addressed. Parents may not have a clear understanding of how much time their child is spending on
the app or what specific concepts they are learning, as they have no monitoring or tracking features
available .
On the other hand,Taki Kids does offer a good parent space, but it may not provide a compre-
hensive evaluation of a child’s overall intellectual level and other interests and hobbies. This could
limit parents’ ability to support and encourage their child’s growth in various areas. Therefore,
it is essential to encourage parental involvement and engagement beyond academic performance,
by promoting extracurricular activities and exploring other interests to help children develop a
well-rounded set of skills and passions.

1.3.2 Problematic

One study has shown that family influences account for 80 percent of the variation in public school
performance, highlighting the significant impact that parental guidance has on a child’s education.
While schools and teachers certainly play a role in a child’s learning, parents are ultimately the
primary determinants of their child’s success in education[1].
However, while ClassQuiz is an effective educational application that can help children develop
important academic skills, it currently lacks a direct avenue for family contribution. Parents are
limited to interacting with the application through phone or email, which can be time-consuming
and may not provide a complete picture of their child’s performance and follow-up.
This can be particularly problematic as parents may not be aware of their child’s strengths or
weaknesses in non-academic areas, such as self-confidence or communication skills. Without the
ability to easily track and monitor their child’s progress, parents may miss important opportunities
to provide support and guidance where needed. Therefore, it is important for the ClassQuiz team
to consider ways to enhance parent engagement with the application to better support the holistic
development of the child.

5
Chapter 1. General Presentation

1.3.3 Proposed Solution

Adding a parent space to the ClassQuiz platform is a relevant solution to improve the quality of the
project, enhance its scalability, and increase its business potential. It is essential to prioritize the
satisfaction of both parents and children by ensuring a comfortable and effective learning experience.
Therefore, the platform provides a tracking dashboard that includes all necessary information about
each enrolled child, such as the elapsed time in the application (with statistics per day, week, and
month), the level of progress in each subject, the list of completed exercises, and the virtual rewards
received as a means of encouragement.
Moreover, each parent has the opportunity to take a test to identify their child’s type of intelli-
gence. Additionally, the platform enables users to contact the ClassQuiz team directly via messages.
By providing these features, ClassQuiz aims to enhance parental involvement and facilitate com-
munication between parents and the platform’s team. This, in turn, can improve the effectiveness
of the learning experience and foster a sense of trust and satisfaction among parents.

1.4 Adopted Methodology «Scrum»

1.4.1 Scrum Definition

Scrum: is an agile development methodology oriented towards computer projects whose resources
are regularly updated. The Scrum methodology gets its name from the rugby world, with the word
"scrum" meaning "scrummage". The basic principle is to always be ready to reorient the project
as it progresses.

1.4.2 Why Scrum ?

Scrum is based on:

• A project breakdown into short-time units called sprints, in order to avoid the tunnel effect
caused by planning that is so extended in time that we don’t see the end of it.

• Regular meetings to discuss task progress.

• The Scrum team is composed of:

– A multidisciplinary technical team (developers, architects, designers, testers).

– The Product Owner ensures the product vision and provides a good translation of the
client’s expectations to the project team by defining functional specifications and prior-
ities.

6
Chapter 1. General Presentation

– The Scrum Master is the conductor, and coordinator of the agile team, of which he/she
is integral.

This table presents a comparison between different methodologies in order to select the best choice
for our application:
Scrum Kanaban Extreme Programming
Kanaban board,
Planification At the beginning of each sprint Planning game
continuous delivery
Effort Estimation At the beginning of each sprint Optional Iteration Planning Meeting
Change of scope Must wait until the next sprint As needed As needed
Scrum master
Roles Product owner Team Team+Client
Developer
Prioritization
Boards Backlog Kanaban board
by the customer
Improved quality
Team working on multiple of critical software,
When choosing? Team dedicated cent percent to the project
projects simultaneously Immediate consideration
of changes
Quick implementation
Productivity without changing existing processes,
Higher code quality
Top 3 Benefits Scalability Visual management of
Responsiveness
Team engagement Cumulative Flow Diagram (CFD),
Queue management for flow

Table 1.1: Comparison between different methodologies.

After this comparison of methodologies, we have chosen to apply the Scrum methodology in our
project because it offers a simple, transparent, and pragmatic organization of projects compared to
the others presented in the table.

1.5 The User Story

In Scrum, the user story is a technique used to describe a feature or functionality from the perspective
of an end user. It is a simple, concise statement that captures the essence of what the user wants
to achieve. User stories are typically written in a specific format: "As a [user role], I want [feature
or functionality] so that [reason or benefit]".
User stories are important in Scrum because they help to define the scope of the work that needs
to be done and allow the team to focus on delivering value to the customer. They are used to create
the backlog, which is an organized list, from the most important task to the least important, of all
the work to be done on the project. User stories are also used during sprint planning to identify
the work that the team will commit to delivering during the upcoming sprint [2].
Each user story corresponds to a feature and a service. It includes:

• An identifier

7
Chapter 1. General Presentation

• A name

• A priority order

• An estimate of the necessary work

• A demonstration, a test

• Additional notes.

1.6 The Backlog

The Backlog is a dynamic document that evolves throughout the project, with items being added,
removed, or re-prioritized as needed. The backlog is managed by the product owner, who is re-
sponsible for ensuring that it is properly prioritized and that the items on the list are well-defined
and understood by the development team. A backlog is a key tool in Scrum, as it provides a clear
roadmap for the project and helps to ensure that the team is focused on delivering the most valuable
features to the customer.
The backlog can be represented on a storyboard and this is an example:

Figure 1.2: Scrum Board

8
Chapter 1. General Presentation

1.7 Conclusion

In this chapter, we presented an overview of our internship’s hosting company and discussed the
problem of our subject.We analyzed some similar applications and examined the current version of
ClassQuiz to determine the lacking features in the market and find a way to capitalize on them
and finally suggested our solution. In the next chapter,we begin with the analysis phase of the
application which contains the functional and non-functional requirements as well as the global use
case and class diagram.

9
 Conceptual study
2
2.1 Introduction

This chapter covers the project launch phase. Firstly, we outline the expectations to be met through
a specification of functional and non-functional requirements in order to arrive at a sophisticated
and satisfactory solution. Secondly, we describe the product backlog and its sprints. Third, we
briefly present the most recommended overall architecture for our type of project. Then, we explain
how we managed the tasks using the Scrum methodology, and we identify various hardware and
software tools that were recommended by the DevTeam and are best suited for the project.

2.2 Analysis and Specification of Requirements

In this section, all functional and non-functional requirements are described. In fact, this refers to
the process of identifying, analyzing, and documenting the needs.
The analysis and specification of requirements typically include both functional requirements,
which describe the desired behavior of the system, and non-functional requirements, which specify
the quality attributes or characteristics.

2.2.1 Actor Identification

Based on the given context, it appears that the "ClassQuiz" product has multiple user roles, such as
a super admin who has full control, editors who can modify exercise content, and a main application

10
Chapter 2. Conceptual study

that includes games and motions. However, the focus of improvement is on the parent actor who
will retrieve information from the main application.

2.2.1.1 Parent

The platform offers parents the ability to sign in, access their children’s information and progress,
play a quiz to identify their child’s behaviors, and receive support from the ClassQuiz team.

2.2.2 Functional Requirements

The functional requirements are the set of features and functionalities that are necessary to meet
the system’s requirements in terms of functionality. They form a kind of contract regarding the
behavior of the target system. We have gathered these requirements in the following points:

2.2.2.1 For the parent

1. Authentication and Account Management:

• Sign in/Sign out

• Update profile

• Reset password

2. Children Management:

• View registered children

• Add a new child

• Update child’s information

• Delete child

3. Child Dashboard:

• Performance Overview

• Last unlocked rewards

• Progress per subject and chapter

• Evaluation of exercises

• Overview of mistakes by exercise

11
Chapter 2. Conceptual study

• Achievements Tracking

– Total exercises completed

– Total mistakes made

– Stars,Coins and sweets earned

4. Behaviours Quiz:

• Determine your child’s behaviours

5. Support:

• Send a message to the ClassQuiz team for assistance

2.2.3 Non-functional Requirements

In perfect harmony with the functional requirements mentioned previously, our platform must meet
certain criteria to ensure a higher quality of the developed solution. Among these criteria, we can
mention:

• Ergonomics: The interfaces used by the software should be clear, concise, and easy to
manipulate.

• Reliability: To ensure that platform users are conscious of their child’s performance in terms
of both hard and soft skills, it is essential that they have access to reliable and up-to-date
information. By having access to this information, parents can make decisions about their
child’s development and give them the support needed.

• Performance: The platform should be able to consistently provide updated information to

meet the needs of users.

• Security: In addition to protecting information against unauthorized access and ensuring the
authenticity of notifications, the platform must indeed prioritize the confidentiality of users’
personal data.

12
Chapter 2. Conceptual study

2.3 Application Architecture

2.3.1 Global Architecture

The figure below describes our architecture, well the main purpose of the platform is to monitor
students so that the parent after his access to the platform can track his child in different ways as
it is mentioned below: performance and achievement tracking, intelligence assessment quizzes, and
access to the startup team for support after this visit we can say that the student is well monitored.

Figure 2.1: Platform Global Architecture.

2.3.2 Logical Architecture

A platform built with React JS and Laravel would typically follow a client-server architecture
where the React JS application runs on the client-side (i.e., in the user’s browser) and the Laravel
application runs on the server-side as it is shown in the figure below:

13
Chapter 2. Conceptual study

Figure 2.2: Platform Logical Architecture.

Here’s a breakdown of the logical architecture of such a platform:

• Client-side: React js is a client-side library that provides user interface and handles user
interactions. By running on the user’s device, the client-side can provide a faster and more
responsive user experience and can reduce the load on the server-side by handling some of the
processing locally.

– Router: The router plays a critical role in the functionality of any web application
by enabling users to seamlessly move between various pages or views. When building
a React JS application, the React Router library is a valuable resource, providing a
comprehensive and adaptable set of tools for managing routing and navigation.

– Components: React components serve as a fundamental building block for creating

cutting-edge web applications. By deconstructing the user interface into smaller, reusable
components, developers can efficiently construct intricate UIs with reduced code, expedit-
ing the process of building responsive, interactive, and easy-to-manage web applications.

– Service: React services can play an important role in managing the communication
between the React JS application and the server-side Laravel application. Services can
be used to handle data fetching and other asynchronous tasks, such as processing data
from API responses or sending data to the server.

14
Chapter 2. Conceptual study

• Server-Side: The Laravel application would handle the server-side logic, including authenti-
cation, authorization, business logic, and database interactions. The platform would adopt the
Model-View-Controller (MVC) architecture pattern, which assigns distinct roles to the model,
view, and controller components. Specifically, the model component manages the data, the
view component manages the user interface, and the controller component manages the busi-
ness logic and user input. The Laravel application would communicate with the database
using an ORM, such as Eloquent.

• Database: The platform would store data in a database, which is PostgreSQL. The ORM
would handle the mapping between the database tables and the model classes in the Laravel
application.

• APIs:The platform may expose APIs (Application Programming Interfaces) that allow ex-
ternal applications to interact with the platform. These APIs could be used to integrate the
platform with third-party services or to allow other applications to consume data from the
platform.

2.3.3 Detailed Front-End Architecture

A modern front-end development approach must always consider responsiveness as a crucial factor.
Responsiveness is a crucial aspect of front-end development. As more and more people access
websites and applications from mobile devices, it’s essential to create designs that can adapt to
different screen sizes and resolutions [3].

• State Management: The state management layer handles the platform’s state management.
It provides a central place to manage the state of the platform, such as user authentication
status, data loading status, and error messages. It uses as technologies :

– React Context: React Context is a built-in feature of React that allows you to pass data
down the component tree without the need for props drilling. Context provides a way to
share data across components without having to pass it down explicitly through every
level of the component tree. This is especially useful when you have many components
that need access to the same data, as it can simplify your code and make it easier to
manage [4].

– Redux toolkit: Redux Toolkit, on the other hand, is a package that provides a set of
utilities and tools for building scalable and maintainable Redux applications. It includes

15
Chapter 2. Conceptual study

pre-configured packages that simplify the process of setting up a Redux store, including
middleware, reducers, and actions. The toolkit also includes a feature called "createS-
lice", which is a function that generates Redux actions and reducers based on a simple
definition object. This can significantly reduce the amount of boilerplate code required
to set up a Redux store [5].

Figure 2.3: Redux Toolkit Logo.

• Data Access Layer: The data access layer communicates with the back-end API to fetch
and update data. It includes libraries such as Axios or Fetch to make HTTP requests to
the back-end API. The data access layer should be designed to handle network failures and
provide a smooth user experience.

• Component Styling:The component styling layer uses Material UI to style the com-
ponents. MUI provides a collection of pre-built and customizable components that follow
Material Design guidelines. The styling layer should be designed to provide a consistent and
cohesive visual design across the platform.

• Testing and Debugging: The testing and debugging layer includes tools such as Jest,
Enzyme, and React Developer Tools. It provides an environment to test the platform’s com-
ponents, debug issues, and ensure that the platform meets the desired quality standards.For
our platform we choose to work with the React Developer Tools( React Developer Tools is
an extension for the Chrome DevTools allows you to analyze the hierarchy of React compo-
nents directly. It comes with two additional tabs called " Components" and "Profiler" which
can help you to better understand and optimize your React code[6].

Overall, the front-end architecture should be designed to provide a modular and scalable structure
that can handle changes and updates as the platform evolves. It should also be designed to provide
optimal performance and security while maintaining an excellent user experience.

16
Chapter 2. Conceptual study

2.4 Global Use Case Diagram

This diagram is used to present a general view of the functional behavior of a system. The fol-
lowing figure describes the general use case diagram of our application, all presenting the different
interactions between the actors and the use cases.

Figure 2.4: Diagram of global use cases.

2.5 Global Class Diagram

The class diagram is one of the most used types of UML diagrams. The latter describes the static
structure of system objects. The next figure represents the global class diagram of our application
presenting the different classes, attributes, operations, and the relationships between its objects.

17
Chapter 2. Conceptual study

Figure 2.5: Diagram of Global Class Diagram .

18
Chapter 2. Conceptual study

2.6 Project Management with Scrum

2.6.1 Project Actors

The table below mentions the actors involved in our project and their role:

Role Mission Actor

Conception
Takoua Ghouaiel
Development
Scrum Team
Test & Validation
Achref Dawahi
Deployment
Product Owner Definition of needs and features to develop Meryam Boughzala
Scrum Master Approval of the project Achref Dawahi
Table 2.1: Project Actors

2.6.2 Backlog features

The backlog represents the functional and technical characteristics of our application. The following
product backlog table consists of:

• ID: The identifier of each user story.

• Theme: The name corresponding to each user story.

• Priority: Present a number from 1 to 4 in ascending order.

• Number of days:Number of days needed to complete each user story.

ID Theme User Story Priority Number of days

1 Authentification as a parent, I have to authenticate myself to access the platform. 1 7
2 Reset password as a parent, I can reset my password. 2 7
3 consult the list of children as a parent I, can see the list of my children. 3 2
4 Add a child as a parent, I can add a new child. 4 7
5 Consult advancement as a parent, I can follow my child’s performance. 6 15
6 Check achievement as a parent, I can view my child’s achievement. 7 7
7 Ask for support as a parent, I can Communicate with the ClassQuiz team. 8 7
8 Make a test as a parent, I can do a quick test to know about my child’s behaviours. 9 7
9 Update parent’s account as a parent, I can change my personal information. 11 7
10 Update child’s information as a parent, I can change my child’s information. 12 7
11 Delete child as a parent, I can delete my child from the student list. 13 5

Table 2.2: Product Backlog

2.6.3 Sprint Planning

Sprint planning helps technical and product teams prioritize work and decide who can take on which
project.However, without tools to track Scrum activities, it is difficult to plan the correct workflow.
The table below describes the estimation of each sprint:

19
Chapter 2. Conceptual study

Sprint name Estimation

Manage profile 4 weeks
Manage students 3 weeks
Supervise students 4 weeks
Table 2.3: Sprint planning

2.7 Development tools and environment

In this section, we will present the hardware and technical environment related to the implementa-
tion of our application.

2.7.1 Hardware environment

During the implementation of this project, we used a Lenovo computer running on Windows 11 Pro
operating system with the following specifications:

• Processor: Intel Core i5

• RAM: 12GB

• Operating System: 64-bit

• Hard Drive: 256 GB SSD

2.7.2 Technical environment

• Visual Studio Code: is a free and open-source code editor that is available on multiple
platforms including Windows, Linux, and mac-OS. Developed by Microsoft, it competes with
other modern editors such as Atom, Brackets, and Sublime Text. It features practical func-
tionalities such as syntax highlighting for languages like JavaScript, JSON, and XML, native
Git support, and an integrated debugger for some languages (such as Node.js)[7].

Figure 2.6: VSCode Logo.

• Gitlab:It is a tool for version control of source code. It has spread rapidly in the open-source
community, due to its speed, flexibility, and reliability. We will use it to keep a history of
changes to the source code [8].

20
Chapter 2. Conceptual study

Figure 2.7: Gitlab Logo.

• Visual Paradigm:Visual Paradigm Online ("VP Online") is a web-based diagramming tool

that supports a wide range of commercial and technical diagrams such as class diagrams,
sequence diagrams, use case diagrams, as well as interface mockups[9].

Figure 2.8: Visual Paradigm Logo.

• Laravel: Laravel is a free, open-source PHP web application framework created by Taylor
Otwell.It provides a wide range of features and tools for web application development, includ-
ing built-in authentication and authorization, routing, caching, database migration, and more.
It also uses the Model-View-Controller (MVC) architectural pattern, which helps developers
keep their code organized and maintainable[10].

Figure 2.9: laravel Logo.

• React JS: React JS is a free JavaScript library developed by Facebook since 2013. The main
goal of this library is to simplify the creation of single-page web applications, by generating
state-dependent components and an HTML page (or part of it) on each state change[11].

21
Chapter 2. Conceptual study

Figure 2.10: React JS Logo.

• Material UI: MUI is a popular and versatile UI framework for building modern and respon-
sive user interfaces using React. It provides a set of pre-built and customizable components,
as well as tools and utilities that simplify the development process, making it a valuable tool
for front-end developers [12].

Figure 2.11: Material UI Logo.

• Adobe XD:Adobe XD is a powerful design tool for creating and testing interactive digital
experiences, allowing designers to streamline their design process and produce high-quality
results. It was helpful for us to create the website design. [13].

Figure 2.12: Adobe XD Logo.

• PostgreSQL: PostgreSQL is a powerful, open-source object-relational database system with

over 35 years of active development that has earned it a strong reputation for reliability,
feature robustness, and performance[14].

22
Chapter 2. Conceptual study

Figure 2.13: PostgreSQL Logo.

2.8 Conclusion

In this chapter we have talked about the specification of requirements which includes the actor’s
identification and sets functional and non-functional requirements as well as the Application archi-
tecture ,also we highlight how we did the planning with scrum .Finally we mention the development
tools and environment.

23
 Sprint 1: Manage profile
3
3.1 Introduction

Manage profile is the process of managing the parent’s profile either by "Authentification", which
correspond to the process of validating the identity of a user. Or "Update profile" which involves
the update of the parent’s personal information.Even we can mention "Ask support" when it comes
to the communication between the parent and the ClassQuiz team. In this sprint, we will discuss
the process of the authentication of the parent, how he can change his personal information, and
the possibility of asking help easily with the support team.

3.2 Sprint planning

3.2.1 Sprint 1 objective

As a "DevTeam", my objective during this sprint is to design and realize the authentication part
of the platform as well as the configuration of the personal information.In addition to that adding
a feature that allows the communication between the parent and the ClassQuiz team.

3.2.2 Sprint 1 Backlog

On this occasion, priorities are no longer measured but complexities are, according to the velocity,
skills, and speed of the devTeam. A sprint is an iteration of short duration that breaks down an
often complex development process to make it simpler, more accessible to readapt and improve

24
Chapter 3. Sprint 1: Manage profile

according to the results of intermediate evaluations.

The table below describes the Sprint 1 backlog, it is composed of the following:

• ID: The identifier of each user story.

• Task: Description of each task to be performed.

• Estimation: Estimated number of days to complete a task.

ID Task Estimation
1 As a parent I can access to my account. 7
2 As a parent I can reset my account’s password. 7
3 As a parent I can update my account’s information. 7
4 As a parent I can ask the ClassQuiz team for support. 7

Table 3.1: Sprint 1 backlog

3.2.3 Use case diagram of Sprint 1

Managing profile revolves around allocating access to parents, either through authentication or, in
case of forgetting the password, using a security system for password reset. Additionally, it provides
parents with the flexibility to update their personal information and communicate with the support
team. The figure 3.1 represents the use case diagram of sprint 1.

Figure 3.1: Manage profile Use case diagram

25
Chapter 3. Sprint 1: Manage profile

3.2.4 "Authentication " use case

3.2.4.1 Description of the "Authentication" use case

The table below describes the authentification use case:

Use case Authentification
Actor Parent
Precondition Existing account
Postcondition Access authorization
-The parent enters his phone number and his password
-The parent clicks on the "login" button
Normal scenario
-The system verifies the password
-The system loads the current account data
-The parent enters invalid information
-The system shows an error message
Alternative scenario -The parent clicks on the "Reset password" button
-The system sends a notification to the parent phone number including a "PIN code" as a new password
-The parent enters access to his account with the new password

Table 3.2: Authentification use case description

3.2.4.2 "Authentication " sequence diagram

The "authenticate" operation allows the user (the parent) to connect to the platform. The system
checks that the entered data are not empty, then it sends them to the database to verify the existence
of the entered parameters. If the account exists, the parent will then access his account successfully.
Otherwise, an error message will be displayed and the parent will be able to reset his password
through a notification sent by the system including the new password. Once he enters the new
password in the new field, the new information will be stored in the database.

26
Chapter 3. Sprint 1: Manage profile

Figure 3.2: Authentification sequence diagram.

27
Chapter 3. Sprint 1: Manage profile

3.2.5 "Update profile" use case

3.2.5.1 Description of the "Update profile" use case

The table below describes the update profile use case :

Use case Update profile

Actor Parent
Precondition Authentification
Postcondition Updated profile
-The parent clicks on the "Update Profile" button
-The parent changes the fields desired
Normal scenario
-The system verifies the validity of the email and the phone number
-The system stores the new information in the database
-The parent enters invalid information
Alternative scenario
-The system shows an error message

Table 3.3: Update profile use case description

3.2.5.2 "Update parent’s information" sequence diagram

The "Update Profile" operation allows the parent to change their personal information (phone
number, email address, address, etc...).Once the parent has entered the new data correctly and
clicked the "Submit" button, the new information will be successfully stored in the database and
a success message is displayed. Otherwise, in the situation of an invalid entry, the Update Profile
operation will be aborted, or if the parent wishes to cancel the operation, they can click the "Go
Back" button.

28
Chapter 3. Sprint 1: Manage profile

Figure 3.3: Update profile sequence diagram.

3.2.6 "Reset password" use case

3.2.6.1 Description of the "Reset password" use case

The table below describes the Reset password use case :

Use case Reset password

Actor Parent
Precondition Unauthenticated
Postcondition Password updated
-The parent enters his invalid credentials.
-The system verifies the existence of the phone number
Normal scenario -The system generates a new password code and sends it by SMS.
-The parent enters the new PIN code in the new password box
-The parent can access to his account
-The parent enters an invalid PIN code or the parent account doesn’t even exist
Alternative scenario
-The system shows an error message

Table 3.4: Reset password use case description

29
Chapter 3. Sprint 1: Manage profile

3.2.6.2 "Reset password" sequence diagram

Figure 3.4: Reset password sequence diagram.

3.3 Implementation of interfaces

3.3.1 Authentication Interface

This interface allows the user to log in, the user must fill in the two fields "Phone number" and
"password". When the account settings are incorrect, an error message is displayed.

• The first interface

30
Chapter 3. Sprint 1: Manage profile

Figure 3.5: Authentification interface.

• Case of an input error: When the parent clicks on the error message to reset their password,
a pop-up window appears for the parent to confirm that they wish to change their password.

Figure 3.6: Password reset confirmation.

Once they click the confirmation button, a phone notification is sent to the user with a PIN
code.

Another pop-up window appears for the user to enter the received PIN code. Once they do,
the PIN becomes their new password and the password reset operation is successful.

31
Chapter 3. Sprint 1: Manage profile

Figure 3.7: Reset password.

3.3.2 Update parent Interface

This interface allows the user to change his personal information. The user must fill in the fields
desired. When he wants to cancel the operation he can click on the "Go back" button.

32
Chapter 3. Sprint 1: Manage profile

Figure 3.8: update-profile.

3.3.3 Support Interface

This interface gives the user the possibility to contact the support team through an email in order to
ask for help, concerns or to send feedback. Once he submits his message a success message appear.
Also the user can visit the ClassQuiz social media for more details.

33
Chapter 3. Sprint 1: Manage profile

Figure 3.9: support interface.

3.4 Conclusion

In this chapter, we have presented the sprint 1 of our application which consists in authenticating
and updating the parent’s information. For this, we presented the use case diagrams, sequence
diagrams, and interfaces corresponding to the operations related to this sprint.In addition to that
we talked about the support interface and how the parent can get in touch with the support team.

34
 Sprint 2: Manage students
4
4.1 Introduction

This chapter is a presentation of the second Sprint of the project which aims to design and develop
the student management part. Overall, this sprint includes adding new students, displaying the
student list and the ability to delete or update each child.

4.2 Sprint planning

4.2.1 Purpose of sprint 2

As a "DevTeam", my goal during this sprint is to design and implement the Add a Student part as
well as how to update each child information and how to delete it from the children list.

4.2.2 Sprint Backlog of Sprint 2

The table below describes the Sprint 1 backlog, it is composed of the following:

• ID: The identifier of each user story.

• Task: Description of each task to be performed.

• Estimation: Estimated number of days to complete a task.

35
Chapter 4. Sprint 2: Manage students

ID Task Estimation
1 As a parent I can add a new child. 7
2 As a parent I can consult the list of students and delete children from the list. 7
3 As a parent I can update my child’s information 7

Table 4.1: Sprint 2 backlog

4.2.3 Use case diagram of sprint 2

Managing children revolves around enabling parents to access their children’s list, add new child,
and update or delete any child of the list.
The figure 4.1 represents the use case diagram of sprint 2.

Figure 4.1: Manage children Use case diagram .

4.2.4 "Add new child" use case

4.2.4.1 Description of the "Add new student" use case

The table below describes the add student use case:

36
Chapter 4. Sprint 2: Manage students

Use case Add new student

Actor Parent
Precondition Access to the student list
Postcondition Showing the new student in the student list
-The parent clicks on the "Add child" card
-The parent fills out the form
Normal scenario
-The system verifies if the required data is filled
-The system stores the new student information in the database
-The parent kept some required fields empty
Alternative scenario
-The system shows an error message

Table 4.2: Add student use case description

4.2.4.2 "Add student" sequence diagram

The "Add student" operation allows the parent to add a new student to the list.The parent should
enter some required data (level, name),then clicked the "Submit" button, the new child information
will be successfully stored in the database and a success message is displayed. Otherwise, in the
situation of an empty inputs, the operation will be aborted, or if the parent wishes to cancel the
operation, they can click the "Go Back" button.

37
Chapter 4. Sprint 2: Manage students

Figure 4.2: Add child sequence diagram.

4.2.5 "Update child" use case

4.2.5.1 Description of the "Update child" use case

The table below describes the update student use case:

Use case Update child’s data

Actor Parent
Precondition Authentication and Access to the student dashboard
Postcondition Child’s information updated
-The parent clicks on the "Setting" button
-The parent changes the fields desired
Normal scenario
-The system verifies if the user changes the level
-The system stores the new information in the database
-The parent changes the level
Alternative scenario
-The system redirects the user to confirm the level update

Table 4.3: Update child’s information use case description

38
Chapter 4. Sprint 2: Manage students

4.2.5.2 "Update child’s information" sequence diagram

The "Update child’s information" operation allows the parent to change their child’s personal in-
formation (level, school,etc..).Once the parent has entered the new data and clicked the "Submit"
button, the new information will be successfully stored in the database and a success message is
displayed. Otherwise, in the situation where the user changes the level, a confirmation should
be implemented. This is necessary because it involves sensitive information that will alter all the
content of the application, including exercises and more.

Figure 4.3: Update child’s information sequence diagram.

4.2.6 "Delete child" use case

4.2.6.1 Description of the "Delete child" use case

The table below describes the Delete student use case :

39
Chapter 4. Sprint 2: Manage students

Use case Delete child

Actor Parent
Precondition selection of the student by the parent
Postcondition Student deleted successfully
-The parent uses the right click on the Child’s card
-The parent chooses to delete the child
-The system asks for confirmation by indicating the password field
Normal scenario
-The parent makes confirmation by entering a correct password and choosing the "Confirmation" button
-The system delete the student information from the database
-The system shows a successful message
-The parent enters an invalid password
Alternative scenario
-The system shows an error message

Table 4.4: Delete child’s information use case description

4.2.6.2 "Delete child" sequence diagram

The "Delete child" operation allows the parent to permanently remove a student from the student
list. However, since it is a sensitive operation, certain conditions need to be met. When the parent
right-clicks on the desired child’s card and selects the delete option, a "confirmation popup" appears.
To ensure security, the user is required to re-enter their password. If the password is valid, the child
is successfully deleted; otherwise, the operation is aborted. Additionally, the system verifies whether
the student ID belongs to the specific parent, as this operation requires a higher level of security.

Figure 4.4: Delete child sequence diagram.

40
Chapter 4. Sprint 2: Manage students

4.3 Implementation of interfaces

4.3.1 Consult student list Interface

This interface allows the user to consult the students registered in the platform.

Figure 4.5: Student list Interface for different devices

4.3.2 Add new student Interface

This interface allows the parent to add a new student to his student list, the parent must fill in the
required fields which is the "student name" and the "level". When the required fields are empty,
an error message is displayed otherwise a successful one appear.

Figure 4.6: Add new student Interface

41
Chapter 4. Sprint 2: Manage students

4.3.3 Update student Interface

This interface allows the parent to update his child information,well then a successful message is
displayed.In case of a level change, the entire application content must be updated. To ensure this,
there will be a confirmation process followed by a password verification (we are currently working
on implementing this feature).

Figure 4.7: Update student Interface

4.3.4 Delete student Interface

This interface allows the parent to permanently remove a student from the student list.

42
Chapter 4. Sprint 2: Manage students

Figure 4.8: Delete student Interface

4.4 Conclusion

In this chapter, we present the second sprint of our application, which includes children management
by presenting the necessary use cases, and the corresponding interfaces for each user experience.

43
 Sprint 3: Supervise students
5
5.1 Introduction

This chapter is a presentation of the third Sprint of the project which aims to design and develop
the student dashboard part. Overall, this sprint includes visiting the student dashboard, which
contains each child’s achievements and progress.

5.2 Sprint planning

5.2.1 Purpose of sprint 3

As a "DevTeam", my goal during this sprint is to design and implement the "Tracking process"
for each student. The follow-up of the student includes essentially the visualization of all his
achievements and the visualization of his progress in a specific way with tables and graphs (according
to the semesters, subjects, and chapters) or according to a precise date. Also, we have to mention
his progress according to the exercises, questions realized and the correct or wrong answers with
the specification of the exact mistakes.

5.2.2 Sprint Backlog of Sprint 3

The table below describes the Sprint 3 backlog.

44
Chapter 5. Sprint 3: Supervise students

ID Task Estimation
2 As a parent I can visit my child’s acheivement 7
3 As a parent I can Track my child’s performance 14
1 As a parent I can realize a quiz to know my child’s behaviours. 7

Table 5.1: Sprint 2 backlog

5.2.3 Use case diagram of sprint 3

Child supervision revolves around enabling parents to track their children’s performance and, on the
other hand, conducting tests to identify their behaviour and assess their strengths and weaknesses.
The figure 5.1 represents the use case diagram of sprint 3.

Figure 5.1: children supervision Use case diagram .

45
Chapter 5. Sprint 3: Supervise students

5.2.4 "Consult advancement" use case diagram

This detailed use case diagram illustrates how parents can monitor their child’s progress through our
platform to ensure they are benefiting from the ClassQuiz application. The accessible information
for parents to review includes:
List of unlocked rewards: Represents the latest achievement challenges unlocked by the child
in various areas such as success, excellence, concentration, perseverance, and diligence.
Child performance filtered by subject and chapter (semester): Allows parents to view a
comprehensive chart of the child’s total answers and various statistics, such as the number of
exercises completed and the number of mistakes made.
Daily progress for a specific date range filtered by subject and chapter (semester): Provides
parents with charts displaying the child’s answers and exercise/mistake statistics within a specific
date range, further filtered by subject and chapter.
Exercise list details filtered by subject and chapter (semester): Gives parents access to de-
tailed information about specific exercises, filtered by subject and chapter, allowing them to review
exercise-specific details.

Figure 5.2: Supervise child use case diagram

46
Chapter 5. Sprint 3: Supervise students

5.3 Implementation of interfaces

5.3.1 Consult achievement list interface

This interface allows the user to consult the total achievements earned since he started using
ClassQuiz application.

Figure 5.3: Achievement interface for different devices

5.3.2 Supervise student interface

This interface enables parents to monitor their child’s performance by providing detailed information
on various factors, as mentioned below.

• Identity cards: These cards represent the child’s identity, including their ID, level, and
subscription type. They also showcase the child’s own Avatar and Quizo(in the ClassQuiz
application, each child can choose a Quizo as their companion, feed him and making him
happy by completing exercises). Additionally, the cards display the child’s percentage of
excellence and advancement.

To calculate these parameters, we apply the following formulas:

Excellence: (stars /( totalExercices * 3))*100
Advancement: (totalExercices/ totalLevelExercices)*100

47
Chapter 5. Sprint 3: Supervise students

Figure 5.4: Child identity section interface

–• List of unlocked rewards:

Figure 5.5: Child latest unlocked rewards section interface

• Child performance:

Figure 5.6: Child performance section interface

• Child daily progress:

48
Chapter 5. Sprint 3: Supervise students

Note: Before selecting a specific date, the charts are initialized to provide an overview of the
data for the current calendar year.

Figure 5.7: Child daily progress section interface

• Exercise list details:

Figure 5.8: Child performance section interface

5.3.3 Identify child’s behaviours Interface

This interface provides the user with the option to choose from three available tests: an academic
difficulties test, a personality test, or an intelligence test.
This test is supervised by the pedagogical team of ClassQuiz due to their expertise. They assist
in identifying the questions and assigning meaning to each response, ensuring the accuracy and
quality of the test.

49
Chapter 5. Sprint 3: Supervise students

Figure 5.9: Choosing test interface

• Intelligence test

The intelligence test consists of six questions that assess a child’s intelligence. The
answers should be based on each child’s behaviour, allowing the parent to reflect on their
child’s attitudes and identify areas for improvement in terms of their cognitive abilities
or hard skills.

Figure 5.10: Intelligence test interface

– Intelligence test result interface:

The result summarizes the parent’s answers in a clear chart, providing them with the
exact percentage for each area. This helps the parent become aware of the priority areas
for improvement and where to start. It also indicates the specific skills they should focus
on to facilitate their child’s development, below we will mention how the result could be
displayed:

50
Chapter 5. Sprint 3: Supervise students

∗ Inter-personal: Refers to the interactions and relationships between individuals.

∗ Intra-personal: Refers to the inner world and self-reflection of an individual.

∗ Linguistic and verbal: Refer to the skills and proficiency in language and communi-
cation.

∗ Logico-mathematical: It involves skills related to reasoning, logical thinking, numer-

ical operations, and mathematical concepts

∗ Kinesthetics: The bodily intelligence and ability to control movement and physical
actions.

∗ Naturist: A person who embraces a lifestyle that involves being in harmony with
nature.

∗ Musical: It reflects the unique way in which a person engages with and expresses
themselves through music.

∗ Visuo-spatial: This skill allows individuals to navigate and understand the physical
world, interpret maps and diagrams, estimate distances, and mentally rotate objects
in their mind.

Figure 5.11: Intelligence test result interface

• Academic difficulties test

The academic difficulties test consists of six questions that assess a child’s academic
performance and challenges. The answers should be based on each child’s academic

51
Chapter 5. Sprint 3: Supervise students

behaviours, allowing the parent to reflect on their child’s strengths and weaknesses and
identify areas for improvement in terms of their academic abilities.

Figure 5.12: Academic difficulties test

– Academic difficulties test result interface:

The result summarizes the parent’s answers in a clear chart. By presenting the results in
this manner, parents can gain a comprehensive understanding of their child’s academic
struggles and make informed decisions about targeted areas of improvement, below we
will mention how the result could be displayed:

∗ Dysgraphia: A learning disability that affects handwriting and fine motor skills in
writing..

∗ Dyslexia: A learning disorder that affects reading and language processing.

∗ Linguistic and verbal: Refer to the skills and proficiency in language and communi-
cation.

∗ Dyscalculia: A learning difficulty that affects numerical and mathematical skills.

∗ Concentration: The focused and sustained attention on a task or activity.

52
Chapter 5. Sprint 3: Supervise students

Figure 5.13: Academic difficulties test result interface

• Personalitty test

The personal test consists of twelve questions that assess an individual’s unique attributes
or abilities. The answers should be based on personal behavior, enabling self-reflection
and identification of areas for improvement in terms of cognitive abilities or personal
development.

Figure 5.14: Personalitty test interface

53
Chapter 5. Sprint 3: Supervise students

– Personalitty test result interface:

The result summarizes the parent’s answers in a clear chart.By presenting the results in
this manner, individuals can have a clear overview of their soft skills and identify specific
areas they can work on to enhance their personal growth and professional development,
below we will mention how the result could be displayed:

∗ Socializer:A child who actively engages in social interactions and enjoys being around
others.

∗ Philanthropist: A child who demonstrates a strong inclination towards helping others

and making a positive impact in the world.

∗ Free spirit: A child who exhibits a natural inclination towards independence, cre-
ativity, and non-conformity.

∗ Disruptor: A child who challenges norms, questions authority, and brings about
change through innovative and unconventional thinking.

∗ Achiever: A child who consistently strives for excellence, sets high goals, and demon-
strates a strong drive to succeed.

∗ Player: A child who enthusiastically engages in various games, sports, or activities,

displaying a playful and competitive nature.

Figure 5.15: Personality test result interface

Notice:These statistics are generated based on the responses to relevant questions.Actually we

54
Chapter 5. Sprint 3: Supervise students

cannot definitively confirm if a child is experiencing a specific disability or challenge. However, the
statistics provide a general overview based on parent responses, aiming to raise awareness about
the child’s situation and guide parents in providing appropriate care and support for their children.

5.4 Conclusion

In this chapter, we present the third sprint of our application, which includes basically the child
progress as well as a study of the child’s behaviours according to quiz tests, the required use cases,
and the corresponding interfaces for each user experience.

55
 General conclusion

This document is a presentation of the work carried out during our final internship at the de-
velopment company "ENVAST". By choosing this topic, the objective was to contribute to the
improvement of education in our country, Tunisia, as primary education is a major challenge to-
day. Considering that ClassQuiz is a one hundred per cent Tunisian educational application that
is adaptable to the Tunisian primary education curriculum, the focus on improving this product is
significant.

Our work fits into this context. The aim of this project is to fill the missing part in this product,
which is parental monitoring. Therefore, our project is to design and develop a web platform titled
"Design and Implementation of a Parental Monitoring Platform for the ClassQuiz Product."
The development of our application allowed us to confront ourselves with a professional experi-
ence in the field of web development that we can only describe as enriching.
In the perspective of our work, our goal is to enhance parental accessibility and flexibility
within the ClassQuiz application. We aim to provide parents with awareness and control over every
aspect of the application. One of the new features we plan to introduce is a social aspect through
competitions among all users, where they can compete for the highest scores. This will be facilitated
by a dedicated leaderboard, showcasing all the competitors and their level.
Additionally, we intend to implement a subscription feature, enabling parents to make online
payments directly through the parental platform.
It is important to note that this project is a work in progress and not a final product. However,
throughout this internship, we have significantly strengthened our experience in meeting require-
ments and managing the project effectively.This internship was an opportunity to acquire skills of
observation, adaptation, and integration in a professional context. This allowed us to sculpt our
communication skills as well as our ability to work in a team.

56
 Bibliography

[1] Mishra Sakshi. The importance of parent involvement in children’s education. https://data.
unicef.org/data-for-action/parental-involvement-childrens-learning/, 2020. Ac-
cessed on 1 March 2023.

[2] user story. https://www.mountaingoatsoftware.com/agile/user-stories. (Accessed on

05/03/2023).

[3] The importance of responsive websites. https://resumeworded.com/interview-questions/

front-end-web-developer.

[4] React Context. https://blogs.perficient.com/2021/12/03/

understanding-react-context-and-property-prop-drilling/. (Accessed on 11/03/2023).

[5] Redux - a predictable state container for javascript apps. | redux. https://redux.js.org/redux-
toolkit/overview.

[6] https://blog.logrocket.com/debug-react-apps-react-devtools/. (Accessed on

16/05/2023).

[7] Documentation for visual studio code. https://visualstudio.microsoft.com/. (Accessed

on 12/03/2023).

[8] Iterate faster, innovate together | gitlab. https://about.gitlab.com/. (Accessed on

12/03/2023).

[9] Visual paradigm. https://online.visual-paradigm.com/diagrams/solutions/

free-class-diagram-tool/. (Accessed on 11/03/2023).

[10] What is laravel? - definition from whatis.com. https://cubettech.com/resources/blog/

exploring-the-architecture-pattern-of-mvc/. (Accessed on 11/03/2023).

[11] React – a javascript library for building user interfaces. https://www.collatree.com/

why-do-we-choose-react-js/. (Accessed on 11/03/2023).

[12] https://mui.com/. (Accessed on 26/03/2023).

[13] https://www.toptal.com/designers/adobe/adobe-xd-review. (Accessed on 31/03/2023).

57
Bibliography

[14] The world’s most advanced open source relational database. https://www.postgresql.org/.
(Accessed on 11/03/2023).

58
 A Annex

A.1 Designing the user experience

In order to successfully develop a web application, it is important to prioritize both the user expe-
rience and the functionality of the product.

A.1.1 Mock-ups interfaces

A wireframe or functional mockup is a diagram that describes the user interface areas and compo-
nents of an application or website. It is a sketch representing the future application structure. It
presents the visual part of the project. We will provide responsive layouts of some draft interfaces
that will then be integrated .

A.1.1.1 Authentication interface

to access the application, each parent must fill out the authentication form containing their phone
number and password.

59
Appendix A. Annex

Figure A.1: Login form design

A.1.1.2 Children List interface

Each parent have the ability to access his children list and add a new child.

Figure A.2: Children list design

60
Appendix A. Annex

A.1.1.3 Achievement interface

Each parent has the ability to check his child daily achievement.

Figure A.3: Achievement list design

61