Wizzard Lizzards

Knowledge Plazza
Software Design Document

Abigail Bradfield
Kevin Javier Fuentes Santiago
Jackson Smith
Bryce Stiles
Date: (12/8/2016)

TABLE OF CONTENTS

1.

INTRODUCTION

1.1

Purpose

1.2

Scope

1.3

Acronyms and Definitions

2.

SYSTEM OVERVIEW

3.

SYSTEM ARCHITECTURE

4.

3.1

Architectural Design

3.2

Decomposition Description

3.3

Design Rationale

DATA DESIGN

4.1

Data Description

4.2

Data Dictionary

5.

COMPONENT DESIGN

6.

HUMAN INTERFACE DESIGN

6.1

Overview of User Interface

6.2

Screen Images

6.3

Screen Objects and Actions

1. INTRODUCTION
1.1 Purpose and Goals
This software design document describes the architecture and design of Knowledge Plazza,
the 2016 CodeTN project of the Wizzard Lizzards.

1.2 Scope
Although more appealing to students in AP classes, we intend to aim our web-application
towards any student wanting to take the AP exam and is in need of help with studying. As of
now, we are making a version of the web-app made specifically for those that want to study
for the AP US History exam. Our intention; however, is to have a web-app that can be used
to help study for many AP exams.

1.3 Acronyms and Definitions

Plazza: the interface for our app once users have logged in
Archive: where the user stores the items they get for answering questions correctly

NeDB: A simple database that stores Javascript objects in simple text files. NeDB is ideal for
testing and development because data can be viewed and edited directly.

2. SYSTEM OVERVIEW
The web-application will be able to provide questions to help students study for their AP US
History exam. The students will be able to form groups with friends to compete with and join a
class group to see how their knowledge compares to that of their classmates. Students will also
be able to collect items as they start to get more and more questions correct, and depending on
how many items any given student has will be able to determine how prepared they are for the
exam.

3. SYSTEM ARCHITECTURE
3.1 Architectural Design
The splash page is the initial page shown to users. The login page displays the login and
sign-up screens for our web-app. The plazza is the main shell for users to interact with the
app. The archive displays unlocked archive items and the distance needed to scale in order to
acquire the next unlocked item. The question component displays the question lists and their
questions. The groups displays the groups you are a part of and a history of individuals you
have competed with.

3.2 Decomposition Description

3.3 Design Rationale

We defined our modules based on feature areas that the user interacts with as a group
allowing modules to be lazy loaded. For example, if the user is logged in and navigating to
the Plazza page of the app, the splash and login modules do not need to be loaded.

4. DATA DESIGN
4.1 Data Description
Data is stored in a NeDB database for testing and development. NeDB stores data as simple
text files. Our backend architecture has the ability to scale to a different database for better
performance.

4.2 Data Dictionary

UnlockedArchiveItem: Associates a Name/Image with a user and an unlocked date
-

Associated user
Unlocked at (Data)

ArchiveItemData
-

Name
Image

Other Data (text)

Groups: Associates a user with a list of other users and groups them
-

Owning User(s)
Members
Name

Questions: Contains all of our questions

-

Question Text
Category
Answers (Array)
Correct answer (Index)

Question Stats: Contains stats for questions

-

Total Attempts
Chosen answer (frequency)

User Stats: Contains information about the questions answered by users

-

Associated user
Question answered type
Question correct (yes/no)

Users: Includes username and hashed password

5. COMPONENT DESIGN
Splash page
This is the initial page shown to users. If theyre new to the web-app, theyre encouraged to
try answering a question and then offered the option to sign up and save their stats. If they
have already created an account, they can log in and continue increasing their stats. It also
includes information about our app and our team.
Login
Displays the login and sign-up screens for our web-app.
Methods:
- Login
- Sign-up
Plazza
This is the main shell for users to interact with the app. It contains a dynamic greeting, a
logout button, and settings (if any)
- Logout

Archive
This displays unlocked archive items and the distance needed to scale in order to acquire the
next unlocked item.
Question
Displays question categories and questions
Groups
Displays a history of individual people the user has competed with and groups they are a part
of.

6. HUMAN INTERFACE DESIGN

6.1 Overview of User Interface
The user is expected to be able to create an account with a username and password that can
be used for user authentication. The user will be able to navigate various pages of which is a
page that the user can answer questions on. Whenever the user correctly answers a question,
they gain points that assist in unlocking items in the archive as an indicator of success. The
user should also have access to a statistics page that displays statistics concerning the types
of questions the user is consistently getting right and wrong.

6.2 Screen Images

Splash Page:

Sign In Page:

Questions Page:

Archive Page:

Friends Page:

6.3 Screen Objects and Actions

Sign-up button: takes user to a sign-up page
Sign-up submit button: Adds the given username and password to the database. If they
are for some reason invalid it returns an error message and does not add them to the
database.
Signin button: takes the user to a sign in page.

Submit Button: authenticates the given username and password and redirects
authenticated users to the plazza. If the user is not authenticated they are redirected to the
signin page.
Question Button: Redirects the user to the questions page.
Question Options: The user selects the type of questions they want to answer and is
redirected to the questions in that category.
Question Answers: The user selects the answer they believe is correct. Whether
the question was answered correctly or incorrectly is recorded.
Archive: redirects the user to the Archive page where the various items they have unlocked by
correctly answering questions are stored.
Groups: redirects the user to the groups page where groups and individuals previously interacted
with are stored