INFSCI2930-INDEPENDENTSTUDY

AnothermodificationofReadingSysteminOpenCorpus

PersonalizedLearningProject

YichaoChen

yic85@pitt.edu

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