Pro je c t 2A.2: Co nfusing Co nfusing Pla nning Do c ume nt Pla - PDF document

11/9/2007 Pro g ra mming Anno unc e me nts FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Why is pro g ra mming fun? • Mo nda y is a sc ho o l ho lida y! • Ye t the pro g ra m c o nstruc t, unlike the po e t's • I f yo u ha ve Mo nda y la b , wo rds, is re a l in the se nse tha t it mo ve s a nd wo rks, pro duc ing visib le o utputs se pa ra te p g p p ∗ Jo in a ny T ∗ Jo in a ny T ue sda y la b ue sda y la b fro m the c o nstruc t itse lf. I t prints re sults, dra ws • Pro je c t 2A pic ture s, pro duc e s so unds, mo ve s a rms. T he ma g ic o f myth a nd le g e nd ha s c o me true in ∗ Due b y T ue sda y nig ht a t 10pm o ur time . One type s the c o rre c t inc a nta tio n ∗ Re q uire s no Ja va Sc ript in the GUI o n a ke yb o a rd, a nd a displa y sc re e n c o me s ∗ T to life , sho wing thing s tha t ne ve r we re no r he GUI is HT ML c o uld b e . ∗ Pla nning do c ume nt is tho ro ug hly Source: Frederick P. Brooks, Jr. The Mythical Man-Month: Essays on disse c te d in le c ture to da y Software Engineering. DOM Anno unc e me nts FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Ne xt we e k’ s q uiz ∗ De e pe r into Ja va Sc ript tha n this we e k ∗ Re vie w do c ume nt Re vie w do c ume nt • linke d in tha t g re e nish b a r b e twe e n this we e k a nd ne xt o n the c o urse c a le nda r • 24 q ue stio ns a nd a nswe rs Pla nning FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Any big pr oject is Any new subject is Pro je c t 2A.2: ∗ Co nfusing ∗ Co nfusing Pla nning Do c ume nt Pla nning Do c ume nt ∗ Ove rwhe lming ∗ Ove rwhe lming ∗ Sc a ry ∗ Sc a ry ∗ Unc o mfo rta b le ∗ Unc o mfo rta b le “L e t o ur advanc e wo rrying be c o me ∗ Wo rriso me ∗ Wo rriso me advanc e thinking and planning.” Notice a pattern here? —Winsto n Churc hill And when you combine a big project with a new subject, the effect is exponential! 1

11/9/2007 Pla nning Pro je c t 2A FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Planning • Write a pla nning do c ume nt ∗ Reduces worry ∗ Pla n yo ur c o ding stra te g y Knowledge is power! ∗ Write in na rra tive fo rm wha t yo ur • As you learn more about the project y p j Write in na rra tive fo rm wha t yo ur ∗ Saves time when you c o ding will do fo r the e ntire pro je c t • Think through the project carefully, • Flesh it out as you go, then make revisions. ∗ Jumpstarts the programming phase and prevents a lot of mistakes and trips down unfruitful paths or blind alleys. De c o mpo sitio n Pla nning FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Bre a k into ste ps • Whe re to sta rt? ∗ L ist inputs ∗ L L ist o utputs ist o utputs ∗ Pla n ho w to tra nsfo rm inputs into o utputs • I f a ste p is to o c o mplic a te d to de sc rib e ∗ Bre a k tha t ste p into ste ps Pla nning Pro je c t 2A FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Whe re to sta rt? • Wha t do we kno w? (Wha t a re the ∗ Sta rt with wha t re q uire me nts? ) ∗ Write e ig ht fill-in-the -b la nk q ue stio ns y yo u kno w: g q ∗ Write a multiple -c ho ic e q ue stio n with o nly o ne • Pro je c t Ove rvie w a nswe r ∗ Write a multiple -c ho ic e q ue stio n with multiple • Pro je c t 2A a nswe rs • Pro je c t 2B ∗ Cre a te a GUI with • E ig ht fill-in-the -b la nk q ue stio ns • A sub mit b utto n 2

11/9/2007 Pro je c t 2A Pro je c t 2A FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Org a nize a nd a dd to wha t we kno w • Org a nize a nd a dd to wha t we kno w ∗ Write q ue stio ns a nd a nswe rs ∗ Write q ue stio ns a nd a nswe rs • E ig ht fill-in-the -b la nk q ue stio ns a nd a nswe rs • E ig ht fill-in-the -b la nk q ue stio ns a nd a nswe rs • One multiple -c ho ic e q ue stio n with o nly o ne c o rre c t • One multiple -c ho ic e q ue stio n with o nly o ne c o rre c t a nswe r a nswe r • One multiple -c ho ic e q ue stio n with multiple c o rre c t • One multiple -c ho ic e q ue stio n with multiple c o rre c t a nswe rs a nswe rs ∗ Using HT ∗ Using HT ML ML • Write a GUI with e ig ht te xtb o xe s fo r the fill-in-the -b la nk • Write a GUI with e ig ht te xtb o xe s fo r the fill-in-the -b la nk q ue stio ns q ue stio ns • Add a sub mit b utto n • Add a sub mit b utto n Pro je c t 2B Pro je c t 2B FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Wha t do we kno w? • Org a nize wha t we kno w ∗ Add a n ima g e with a ro llo ve r e ffe c t ∗ Using HT ML ∗ Add the multiple -c ho ic e q ue stio ns • Write the Go o d Wo rk! a nd Study Mo re ! y ∗ Displa y the q uiz sc o re pa g e s ∗ De pe nding o n the sc o re : – Add c lo se b utto ns to the se two pa g e s • Displa y the Go o d Wo rk! Or Study Mo re ! pa g e with – Pa g e s c a n b e ide ntic a l e xc e pt fo r te xt c lo se b utto n • Add the two multiple -c ho ic e q ue stio ns to • Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e the q uiz Pro je c t 2B PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Org a nize wha t we kno w Re c a ll the PE RT c ha rt fro m e a rlie r ∗ Using Ja va Sc ript • Visua l dia g ra ms sho w the de pe nde nc ie s c le a rly • Add a n ima g e with a ro llo ve r e ffe c t • Cha ng e it a s yo u se e the pro je c t mo re c le a rly • Gra de the q uiz Build Code Declare Code Rollover • Displa y the q uiz sc o re Compare Score Display Build GUI Functions • I f the sc o re is o ve r 6, Variable Score – Displa y the Go o d Wo rk! pa g e with c lo se b utto n – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e Write 2 Code • E lse Primp & Comment Display Coolify – Displa y the Study Mo re ! Pa g e with c lo se b utto n pages Comment – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e 3

11/9/2007 PE RT PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Write • Must ha ve two c o mme nt pa g e s re a dy • Add ste p fo r writing Q & A questions a nd the c o de tha t displa ys the sc o re in ∗ Re q uire d b e fo re b uilding GUI & o rde r to displa y the c o mme nt answers Build Build Code Code Declare Code Declare Code Rollover Rollover Compare Compare Score Display Score Display Build GUI Build GUI Functions Functions Variable Score Variable Score Write 2 Code Write 2 Code Primp & Primp & Comment Display Comment Display Coolify Coolify pages Comment pages Comment PE RT PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Write Write questions questions & & answers answers Build Build Code Code Declare Code Declare Code Rollover Rollover Compare Compare Score Display Score Display Build GUI Build GUI Functions Functions Variable Score Variable Score Write 2 Code Write 2 Code Primp & Primp & Comment Display Comment Display Coolify Coolify pages Comment pages Comment PE RT PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Write questions & answers Build Build Code Declare Code Rollover Rollover Compare Score Display Build GUI Functions Variable Score Write 2 Code Code Primp & Primp & Comment Display Display Coolify Coolify pages Comment Comment 4

11/9/2007 PE RT PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Code Declare Code Compare Score Display Build GUI Functions Variable Score Write 2 Code Code Primp & Comment Display Change Coolify pages Comment bgcolor Pla nning Pro je c t 2A FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Ba c k to the na rra tive … • Write q ue stio ns a nd a nswe rs ∗ E ig ht fill-in-the -b la nk q ue stio ns a nd a nswe rs ∗ One multiple -c ho ic e q ue stio n with o nly o ne c o rre c t a nswe r t ∗ One multiple -c ho ic e q ue stio n with multiple c o rre c t a nswe rs • Using HT ML ∗ Write a GUI with e ig ht te xtb o xe s fo r the fill-in-the -b la nk q ue stio ns ∗ Add a sub mit b utto n GUI GUI FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Wha t do I ne e d to a c c o mplish e a c h • Wha t do I ne e d to a c c o mplish e a c h ste p? ste p? ∗ Ba sic HT ∗ HT Ba sic HT ML ML struc ture struc ture HT ML ML Co ding fo r fo rm Co ding fo r fo rm • Do wnlo a d fro m the link o n the c o urse <fo rm a c tio n="“></ fo rm> c a le nda r ∗ HT ML Co ding fo r te xt b o xe s: ∗ Co ding fo r fo rm a nd fo rm inputs <input type ="te xt" na me =“q ue stio n1"> ∗ HT • L o o k it up a t W3 Sc ho o ls: ML Co ding fo r sub mit b utto n http:/ / www.w3sc ho o ls.c o m/ html/ html_fo rms.a sp <input type ="sub mit" va lue ="Sub mit“> 5