WizzardLizzards

KnowledgePlazza
SoftwareDesignDocument

AbigailBradfield
KevinJavierFuentesSantiago
JacksonSmith
BryceStiles
Date:(12/8/2016)

TABLEOFC
O
NTENTS
1.

INTRODUCTION

1.1

Purpose

1.2

Scope

1.3

AcronymsandDefinitions

2.

SYSTEMOVERVIEW

3.

SYSTEMARCHITECTURE

4.

3.1

ArchitecturalDesign

3.2

DecompositionDescription

3.3

DesignRationale

DATADESIGN

4.1

DataDescription

4.2

DataDictionary

5.

COMPONENTDESIGN

6.

HUMANINTERFACEDESIGN

6.1

OverviewofUserInterface

6.2

ScreenImages

6.3

ScreenObjectsandActions

1. INTRODUCTION
1.1 PurposeandGoals
ThissoftwaredesigndocumentdescribesthearchitectureanddesignofKnowledgePlazza,
the2016CodeTNprojectoftheWizzardLizzards.

1.2 Scope
Although more appealing to students in AP classes, we intend to aim our webapplication
towards any student wanting to take theAPexamandisinneedofhelpwithstudying.Asof
now, we are making a version of the webapp made specifically for those thatwanttostudy

for the AP US History exam. Our intention however, is to have a webapp thatcanbeused
tohelpstudyformanyAPexams.

1.3 AcronymsandDefinitions
Plazza:theinterfaceforourapponceusershaveloggedin
Archive:wheretheuserstorestheitemstheygetforansweringquestionscorrectly
NeDB:AsimpledatabasethatstoresJavascriptobjectsinsimpletextfiles.NeDBisidealfor
testinganddevelopmentbecausedatacanbeviewedandediteddirectly.

2. SYSTEMO
V
ERVIEW
The webapplication 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 withandjoina
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. SYSTEMA
R
CHITECTURE
3.1 ArchitecturalDesign
The splash page is the initial page shown to users. The login page displays the login and
signup screens for our webapp. The plazza is the main shell for users to interact with the
app. The archive displays unlockedarchiveitemsandthedistanceneededtoscaleinorderto
acquire the next unlocked item. The question componentdisplaysthequestionlistsandtheir
questions. The groups displays the groups you are a part of and a history ofindividualsyou
havecompetedwith.

3.2 DecompositionDescription

3.3 DesignRationale
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
thePlazzapageoftheapp,thesplashandloginmodulesdonotneedtobeloaded.

4. DATAD
E
SIGN
4.1 DataDescription
DataisstoredinaNeDBdatabasefortestinganddevelopment.NeDBstoresdataassimple
textfiles.Ourbackendarchitecturehastheabilitytoscaletoadifferentdatabaseforbetter
performance.

4.2 DataDictionary
UnlockedArchiveItem:AssociatesaName/Imagewithauserandanunlockeddate

Associateduser
Unlockedat(Data)

ArchiveItemData

Name

Image
OtherData(text)

Groups:Associatesauserwithalistofotherusersandgroupsthem

OwningUser(s)
Members
Name

Questions:C
ontainsallofourquestions

QuestionText
Category
Answers(Array)
Correctanswer(Index)

QuestionStats:Containsstatsforquestions

TotalAttempts
Chosenanswer(frequency)

UserStats:C
ontainsinformationaboutthequestionsansweredbyusers

Associateduser
Questionansweredtype
Questioncorrect(yes/no)

Users:I ncludesusernameandhashedpassword

5. COMPONENTD
E
SIGN
Splashpage
This is the initial page shown to users. If theyre new to thewebapp,theyreencouragedto
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
includesinformationaboutourappandourteam.

Login
Displaystheloginandsignupscreensforourwebapp.
Methods:
Login
Signup
Plazza

This is the main shell for users to interact with the app. It contains a dynamic greeting, a
logoutbutton,andsettings(ifany)
Logout

Archive
This displays unlocked archive items and the distance neededtoscaleinordertoacquirethe
nextunlockeditem.

Question
Displaysquestioncategoriesandquestions

Groups
Displays a history ofindividualpeopletheuserhascompetedwithandgroupstheyareapart
of.

6. HUMANI N
TERFACED
E
SIGN
6.1 OverviewofUserInterface
The user is expected to be able to create an account with a username and password thatcan
be used for user authentication. The user will beabletonavigatevariouspagesofwhichisa
page that the user can answer questions on. Whenever theusercorrectlyanswersaquestion,
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
ofquestionstheuserisconsistentlygettingrightandwrong.

6.2 ScreenImages
SplashPage:

SignInPage:

QuestionsPage:

ArchivePage:

FriendsPage:

6.3 ScreenObjectsandActions
Signupbutton:takesusertoasignuppage
Signup submit button: Adds the given username and password to thedatabase.Ifthey
are for some reason invalid it returns an error message and does not add them to the
database.
Signinbutton:takestheusertoasigninpage.

Submit Button: authenticates the given username and password and redirects
authenticated users to the plazza. Iftheuserisnotauthenticatedtheyareredirectedtothe
signinpage.
QuestionButton:Redirectstheusertothequestionspage.
Question Options: The user selects the type of questions they want to answer and is
redirectedtothequestionsinthatcategory.
Question Answers: The user selects the answer they believe is correct. Whether
thequestionwasansweredcorrectlyorincorrectlyisrecorded.
Archive: redirects the user to the Archive page where the various items they have unlocked by
correctlyansweringquestionsarestored.
Groups: redirectstheusertothegroupspagewheregroupsandindividualspreviouslyinteracted
witharestored