INFSCI2930-INDEPENDENTSTUDY
AnothermodificationofReadingSysteminOpenCorpus
PersonalizedLearningProject
YichaoChen
1.Overview
InspiredbyProfessorPeterBrusilovskyandDr.JordanBarriaPineda,mytopicof
independentstudyin2017Springistrytodevelopanewwayfordata
visualizationinourcurrentReadingSystem.
(OpenCorpusPersonalizedLearningProject’sReadingCircle:
http://adapt2.sis.pitt.edu/wiki/Open_Corpus_Personalized_Learning)
Inthisminoralternationversion,wemainlyfocusonthepresentationtier’s
modification,trytomaketheinformationdisplayingbetterforpeercomparison.
2.UsedTechniques:
PHP,MySQL,HTML,CSS,JavaScript,jQuery,Bootstrapandd3.js.
3.Whatwedid:
In current system, all the reading information basically gathered in a “Color
changingCircle”(likethepiechart)onthelefttopofthepage:
2.1Currentreadingsystem’s“circle”infopart
Userscaneasilytracktheirreadingprogressbyseeingthecolorchanginginthe
hierarchicalcircle–Thegreenerthemoreaccomplishmenttheyhave.Besides,
userscanfindouttheirquestionsuccessrateineachlecturepartinthemiddleof
thecirclebyhoveringtherespondingsection.
Afterourmodification,thenewversionwillbelooklikethis:
2.2Newreadingsystem
Therearethreemainchanges:
2.3Comparisonhierarchicalrectangles
(1) Theprogressinformationisnolongerpresentedinacircle,instead,we
displayitintwoverticalhierarchicalrectangles(seegraph2.3):Theleft
one(whichcanbefoldbyclickingthesidebutton)showstheclassaverage
readingprogresswhiletherightoneshowstheuser’sprogress.Thesetwo
rectanglesaregeneratedbyd3.jsafterweconnectedtothedatabaseand
retrievethedata.
Theyareactuallyintwosvgsbutinreversegeneratingorder.Weputthem
oppositebecauseinthisway,theoverallprogresscomparisonwouldbe
morestraightforwardthaniftheyareinthesamedirection.
2.4Correctnessnodesandthetrendlinegraph
(2) Nexttotheprogressbars,thereexistingsomenodesbothuserandclass
averagesides(seegraph2.4):
Thenodesindicate:Inthosesections,thesystemwillgiveusersome
questionsaspractice.Thedistancebetweenonenodeanditsneighbor
squaremeansthecorrectnesstheuserhaveinthisquestionsection--The
morefarawaypositionthenodeis,thehighercorrectnesstheuserhavein
thissection.
Ontheclassaveragepart(leftside),thenodesindicatetheaverage
correctnessofstudentsintherestoftheclass.
Inourcurrentdevelopment,thenodes’positionsaregeneratedrandomly
byJavaScript.Howeverwhenweactuallyputthesysteminuse,wewilluse
user’squestionansweringdatatogeneratethenodes.
Thelinegraphgoesthroughthosenodesmeansthecorrectnesstrendof
thisuser(Theleftoneisforclassaverage).Bydoingthis,theusercan
easilyfindouthisorheroverallquestion-answeringstatus–“DoIperform
betterthanbefore?”and“WhichpartsofthematerialIlearnbetterand
whichpartsIstillneedtopaymoreattentionto?”
Theclassaveragesidecanhelpwiththeinstructorbuildingaclearvision
knowingtheoverallreadingandunderstandingtrend–Whichsections’
knowledgeneedmoreexplanationsduringclass.
Thelinegraphisalsogeneratedbyd3.jsbasedonthepositionofthenodes.
2.5Foldableleftsidepanel
(3) Theusermaynotalwayswanttoseethecomparison.Iftheuserwantsto
haveaclearinterfacejustshowinghisowninformation,hecanjustclick
thesidebuttontohidethecomparisonpart(see2.5).Hecanalso,ifhe
wants,hidethewholeleftpanelbyclickingthebuttononemoretime.
4.FutureImprovements:
Afterourmodifications,thenewreadingsystemhasanotherdisplayingway.
However,ourworkisjustaprototypewhichonlyatitsstartpoint.Weneedthese
improvementsinthefuture:
(1) Thetextindexwillbeaddedtotheleftcontrolpanel,whichwillhelpusers
tolocatetheircontent.Wewillmakeitfoldable,sothatiftheuserdoesn’t
wanttoseeit,hecansimplyhidethetextindex.
(2) Thecurrentbookcontentsaredisplayedinpdfformat,fromwhichtheuser
cannotselecttext insidethecontentbyusinghismouse.Wearetryingto
convertthepdfcontenttohtmlelementsbeforethepagebeingcompleted
loaded,so thatuserwill finallyhavea“text”content toread.WhenI first
usingthissystem, itwasveryhardtodothesearchingwhenIhavesome
problems during reading, because it was impossible to directly copy the
textyouwanttoasearchingengineorwebsite.Byconvertingthecontent
torealtext,usercanselectandcopythetexttheywant,andpasteittotheir
notes or searching engine for further study, which will be helpful in
learning.
5.Postscript:
Althoughthesystemisstillinprototypestageandmyworkmightnothelpalot
infutureimprovements,Ihavetosay,thisisaveryvaluableindependentstudy
experience.IdidbetterinjQueryandwebsitedevelopingandlearntalotinPHP.
My special thanks to Professor Peter Brusilovsky for providing this learning
opportunity,andDr.JordanBarriaPinedaforteachingandhelpingmeoutwhenI
haddifficultyinlearning.
6.Codes:
https://github.com/YichaoChen/Reading-System
Top Related