FLASHCARD LEARNING SYSTEM (QUIZONE)

Software Design Specification

– DaNang, June 2023 –

RECORD OF CHANGES

Date A* In charge Change Description

M, D

*A - Added M - Modified D - Deleted

Page | 2
Table of Contents
I. Overview..................................................................................................................................................4
1. Code Packages.....................................................................................................................................4
2. Database Design..................................................................................................................................4
a. Database Schema.............................................................................................................................4
b. Table Description.............................................................................................................................4
II. Code Designs...........................................................................................................................................5
1. <Feature/Function Name1>.................................................................................................................5
a. Class Diagram...................................................................................................................................5
b. Class Specifications..........................................................................................................................5
c. Sequence Diagram(s).......................................................................................................................5
d. Database queries.............................................................................................................................6
2. <Feature/Function Name2>.................................................................................................................6

Page | 3
I. Overview
1. Code Packages

Package descriptions
No Package Description
01 GUI The main interface that manages all user interactions with the
system, providing access to pages like the homepage, login,
flashcard management,
02 Login Page Provides the interface for users to enter their credentials (email
and password) and log in. Includes third-party login options like
Google/Facebook.
03 Home Page The landing page that gives users access to various sections of the

Page | 4
 system such as flashcards, quizzes, and class management.
04 Question Pack Manages the creation and display of question packs. Teachers can
create and students can view and study these question packs.
05 Manage Flashcard Quiz Allows teachers to manage flashcard sets and create quizzes. It
handles operations like adding, editing, and organizing flashcards.
06 Classes Provides a system for teachers to manage their classes, assign
flashcards, and monitor student progress.
07 Nav-Header The navigation header offering shortcuts to different sections,
including search and user profile information.
08 Sidebar Provides quick navigation for users to move between various
sections such as flashcards, quizzes, and account settings.
09 Detail Question Pack Displays detailed information about a particular question pack,
including terms, definitions, and related flashcards.
10 Detail Form Flashcard Allows the creation and editing of flashcards, including entering
terms, definitions, and managing flashcard content.
11 MongoDB The database package that stores all structured data for the
system, including user accounts, flashcards, question packs, and
more.
12 Cloudinary A service for managing and storing images, such as user profile
pictures or any media associated with flashcards or question
packs.
13 APIs Backend API responsible for handling various tasks including user
authentication (Auth), user data management, question pack,
flashcards, comments, and classes. This includes operations such
as creating, updating, deleting, and retrieving data for these
features.

Page | 5
2. Database Design
a. Database Schema

Page | 6
b. Table Description
No Table Description
01 User This table contains user information including unique identifiers, usernames,
passwords, and roles.
02 QuizHistory This table records the quiz history for users, including scores and associated exams.

03 QuestionPack This table stores question packs created by teachers, including titles, descriptions,
and subjects.
04 Flashcard This table contains flashcard information, including questions, possible answers, and
correct answers.
05 Exam This table includes details about exams, such as titles, associated question packs, and
duration.
06 Comment This table holds comments made by users on flashcards, including content and
associated flashcards.
07 Class This table stores class information, including class names, associated teachers, and
enrolled students.

II. Code Designs

1. View Homepage

a. Class Diagram

b. Class Specifications

AccountDAO Class

No Method Description
01 getAllQuestionPack= async This method for user login by Username
(req, res)

Page | 7
c. Sequence Diagram(s)

d. Database Queries

const getAllQuestionPack = async (req, res) => {

try {

// Retrieve all question packs from the database

const questionPacks = await QuestionPack.find().populate('teacher', 'name

email').populate('questions', 'content');

// Send the question packs as the response

return res.status(200).json({

errorCode: 0,

message: 'Question packs retrieved successfully',

data: questionPacks

});

} catch (err) {

console.error('Error fetching question packs:', err);

return res.status(500).json({

errorCode: 6,

message: 'An error occurred while fetching the question packs'

});

Page | 8
};

2. Login
a. Class Diagram

b. Class Specifications
No Method Description
01 authenticateUser = This method authenticates a user by checking the provided
async (username, username and password against the database
password)
02 getUserByUsername This method retrieves user information from the database based on
= async (username) the provided username

Page | 9
c. Sequenced Diagram

d. Database queries
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({

username: { type: String, required: function() { return !this.socialLogin; }, unique: true },
password: { type: String, required: function() { return !this.socialLogin; } },
role: { type: String, enum: ['teacher', 'student', 'admin'], required: true, default: 'student' },
email: { type: String, required: true, unique: true },
phoneNumber: { type: String ,required: function() { return !this.socialLogin; }}, // Use `sparse` index to
allow `null`
gender: { type: String, enum: ['male', 'female', 'other'], required: function() { return !this.socialLogin; } },
type: {
type: String,

Page | 10
 default: 'Local'
},
socialLogin: {
type: Boolean,
default: false
},
image:{
type:String
},
balance: {
type: Number,
default: 0
},
verified:{
type:Boolean,
default:false
}
}, { timestamps: true });

3. Log out
a. Class Diagram

b. Class Specifications
AccountDAO Class

No Method Description
01 handleLogout() Initiates the logout process, dispatches logout action, and redirects
user |

Page | 11
 02 logout() Handles the main logout logic, including API calls if necessary
03 removeTokens() Removes authentication tokens from storage

c. Sequence Diagram(s)

d. Database Queries

const Logout = () => {

const dispatch = useDispatch();

const navigate = useNavigate()

const handleLogout = () => {

dispatch(doLogout());

localStorage.removeItem('accessToken');

localStorage.removeItem('refreshToken');

Page | 12
 // Remove tokens from cookies (if they were set there)

Cookies.remove('accessToken');

Cookies.remove('refreshToken');

navigate('/')

};

useEffect(()=>{

handleLogout()

},[])

return (

<>

</>

);

};

export default Logout;

4. Register Account
a. Class Diagram

Page | 13
b. Class Specifications
AccountDAO Class

No Method Description
01 addUser = async This method to get all user information from front end to for
(req, res) database
02 User modal : This method to add user into database
userSchema = new
mongoose.Schema

c. Sequence Diagram(s)

d. Database Queries

const userSchema = new mongoose.Schema({

username: { type: String, required: function() { return !this.socialLogin; }, unique: true },

password: { type: String, required: function() { return !this.socialLogin; } },

role: { type: String, enum: ['teacher', 'student', 'admin'], required: true, default: 'student' },

email: { type: String, required: true, unique: true },

phoneNumber: { type: String ,required: function() { return !this.socialLogin; }}, // Use `sparse` index to
allow `null`

gender: { type: String, enum: ['male', 'female', 'other'], required: function() { return !this.socialLogin; } },

type: {

type: String,

Page | 14
 default: 'Local'

},

socialLogin: {

type: Boolean,

default: false

},

image:{

type:String

},

balance: {

type: Number,

default: 0

},

}, { timestamps: true });

5.Change Password
a. Class Diagram

Page | 15
b. Class Specifications

FlashcardDAO Class
No Method Description
01 getFlashcardSet(id) Fetches a flashcard set by ID
02 updateFlashcardSet( Updates the flashcard set with new data
data)

c.Sequence Diagram

Page | 16
6.Reset Password
a. Class Diagram

b. Class Specifications

MovieDAO Class

No Method Description
01 sendMail(mailOptio This is method to send new password to user by email
ns, (err, response)

02 const mailOptions = This is method to create object email

{from , to , subject,
text}

Page | 17
c. Sequence Diagram(s)

d. Database Queries

update password:
async function changeUserPassword(userId, newPassword)

{ try { const user = await User.findById(userId); // Tìm người dùng theo ID

if (!user) throw new Error('Người dùng không tồn tại');

await user.updatePassword(newPassword); // Cập nhật mật khẩu

console.log(‘password update successfully’); }

catch (error)

{ console.error('error when update password:', error.message); }

Page | 18
7. Create flashcard set
a. Class Diagram

c. Sequence Diagram(s)

Page | 19
d. Database Queries

Question pack

const questionPackSchema = new mongoose.Schema({

title: {
type: String,
required: true
},
description: {
type: String
},
teacher: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true
},
semester: {
type: String,
required: true
},
questions: [{
type: mongoose.Schema.Types.ObjectId,
ref: 'Flashcard'
}],
subject: {
type: String,
required: true
},
imagePreview:{
type:String
},

createdAt: {
type: Date,
default: Date.now
}
});

Flashcard

const flashcardSchema = new mongoose.Schema({

questionText: {
type: String,
required: false
},
questionImage: {
type: String,
required: false

Page | 20
 },
answers: {
type: [String],
required: true,
validate: {
validator: function(val) {
return val.length > 1 && val.length <= 4; // Ensure between 2 and 4 answers
},
message: 'There must be between 2 and 4 answers'
}
},
correctAnswers: {
type: [Number],
required: true,
validate: {
validator: function(indices) {
return indices.every(index => index >= 0 && index < this.answers.length);
},
message: 'All correct answer indices must be within the bounds of the answers array'
}
},
questionPack: {
type: mongoose.Schema.Types.ObjectId,
ref: 'QuestionPack',
required: true
},
comments: [{
type: mongoose.Schema.Types.ObjectId,
ref: 'Comment'
}], // Added comments field
}, { timestamps: true });

Page | 21
8. Comment flashcard
a. Class Diagram

b. Class Specifications

No Method Description
01 addComment = This method allows add new comments
async (req, res)

02 const This method allows to create new objects to add into database
commentSchema =
new
mongoose.Schema(
)

Page | 22
c. Sequence Diagram(s)

d. Database Queries

const commentSchema = new mongoose.Schema({

user: {

type: mongoose.Schema.Types.ObjectId,

ref: 'User',

required: true

},

content: {

type: String,

required: true

},

image: {

type: String

},

flashcard: {

type: mongoose.Schema.Types.ObjectId,

ref: 'Flashcard',

required: true

Page | 23
 },

replies: [{

user: {

type: mongoose.Schema.Types.ObjectId,

ref: 'User',

required: true

},

content: {

type: String,

required: true

},

createdAt: {

type: Date,

default: Date.now

}],

createdAt: {

type: Date,

default: Date.now

});

Page | 24
9.Edit flashcard set
a. Class Diagram

Page | 25
 b. Class Specifications

FlashcardDAO Class
No Method Description
01 getFlashcardSet(id) Fetches a flashcard set by ID
02 updateFlashcardSet( Updates the flashcard set with new data
data)

d, Database Querie

classDiagram

class User {

-id: int

-name: string

-email: string

+login()

+logout()

Page | 26
 }

class FlashcardSet {

-id: int

-name: string

-category: string

+addFlashcard()

+removeFlashcard()

User --> FlashcardSet : owns

FlashcardSet --> Flashcard : contains

10.Delete flashcard set

a. Class Diagram

Page | 27
b. Class Specifications

FlashcardDAO Class
No Method Description
01 deleteFlashcardSet(i Deletes a flashcard set by its ID
d)

d, Database Querie
classDiagram

class FlashcardSet {

- flashcards: List<Flashcard>

+ addFlashcard()

+ removeFlashcard()

class Flashcard {

- question: String

- answer: String

Page | 28
 FlashcardSet --> Flashcard : contains

11.Manage class
a. Class Diagram

b. Class Specifications

FlashcardDAO Class
No Method Description
01 getClassData() Fetches all class data from the database
02 updateClassData(ch Applies changes to the class data
anges)
03 addClass(data) Adds a new class to the database
04 deleteClass(id) Deletes a class by its ID

d,Database Querie
classDiagram

class Manage {

-classList: List<Class>

+joinClass(classId: int): void

+createClass(className: String): void

Page | 29
 }

class Class {

-classId: int

-className: String

13.View recently learning

a. Class Diagram

b. Class Specifications

FlashcardDAO Class
No Method Description
01 getFlashcardSet(id) Fetches a flashcard set by ID
02 updateFlashcardSet( Updates the flashcard set with new data
data)

c.Sequence Diagram

Page | 30
14.View flashcard Set
a. Class Diagram

Page | 31
b. Class Specifications
c. Sequence Diagram

Page | 32
15.Study Flashcard
a. Class Diagram

b. Class Specifications
c. Sequence Diagram

Page | 33
16.Take flashcard quiz
a. Class Diagram

Page | 34
b. Class Specifications
c. Sequence Diagram

Page | 35
17.Search Flashcard Set
a. Class Diagram

b. Class Specifications
c. Sequence Diagram

Page | 36
13.Provide Feedback Flashcard Set ?????????
a. Class Diagram

Page | 37
b. Class Specifications
c. Sequence Diagram

Page | 38
16 . Update user information:
a. Class Diagram:

b.Class Specifications:
c. Sequence Diagram:

d. Database Queries:

Page | 39
18 . Customize Interface:
a.Class Diagram:

b.Class Specifications:
c. Sequence Diagram:

d. Database Queries:

Page | 40
21. Change User Roles and Permissions:
a.Class Diagram:

b.Class Specifications:
c. Sequence Diagram:

Page | 41
d. Database Queries:

Page | 42