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

▶
pro je c t 2a 2
SMART_READER_LITE
LIVE PREVIEW

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

Sep 23, 2022 464 likes •551 views

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

slide-1
SLIDE 1

11/9/2007 1

FIT100 FIT100 FIT100

Pro g ra mming

  • Why is pro g ra mming fun?
  • Ye t the pro g ra m c o nstruc t, unlike the po e t's

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 fro m the c o nstruc t itse lf. I t prints re sults, dra ws 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

  • ur time . One type s the c o rre c t inc a nta tio n
  • n a ke yb o a rd, a nd a displa y sc re e n c o me s

to life , sho wing thing s tha t ne ve r we re no r c o uld b e . Source: Frederick P. Brooks, Jr. The Mythical Man-Month: Essays on Software Engineering.

FIT100 FIT100 FIT100

Anno unc e me nts

  • Mo nda y is a sc ho o l ho lida y!
  • I

f yo u ha ve Mo nda y la b ,

∗ Jo in a ny T ue sda y la b ∗ Jo in a ny T ue sda y la b

  • Pro je c t 2A

∗ Due b y T ue sda y nig ht a t 10pm ∗ Re q uire s no Ja va Sc ript in the GUI ∗ T he GUI is HT ML ∗ Pla nning do c ume nt is tho ro ug hly disse c te d in le c ture to da y

FIT100 FIT100 FIT100

Anno unc e me nts

  • 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

FIT100 FIT100 FIT100

DOM

FIT100 FIT100 FIT100

Pro je c t 2A.2: Pla nning Do c ume nt Pla nning Do c ume nt

“L e t o ur advanc e wo rrying be c o me advanc e thinking and planning.” —Winsto n Churc hill

FIT100 FIT100 FIT100

Pla nning

Any big pr

  • ject is

∗ Co nfusing ∗ Ove rwhe lming

Any new subject is

∗ Co nfusing ∗ Ove rwhe lming ∗ Sc a ry ∗ Unc o mfo rta b le ∗ Wo rriso me ∗ Sc a ry ∗ Unc o mfo rta b le ∗ Wo rriso me

Notice a pattern here? And when you combine a big project with a new subject, the effect is exponential!

slide-2
SLIDE 2

11/9/2007 2

FIT100 FIT100 FIT100

Pla nning

  • Planning

∗ Reduces worry

  • As you learn more about the project

Knowledge is power! y p j

∗ Saves time when you

  • 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.

FIT100 FIT100 FIT100

Pro je c t 2A

  • Write a pla nning do c ume nt

∗ Pla n yo ur c o ding stra te g y ∗ Write in na rra tive fo rm wha t yo ur Write in na rra tive fo rm wha t yo ur c o ding will do fo r the e ntire pro je c t

FIT100 FIT100 FIT100

De c o mpo sitio n

  • Bre a k into ste ps

∗ L ist inputs ∗ L ist o utputs L ist o utputs ∗ Pla n ho w to tra nsfo rm inputs into

  • 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

FIT100 FIT100 FIT100

Pla nning

  • Whe re to sta rt?

FIT100 FIT100 FIT100

Pla nning

  • Whe re to sta rt?

∗ Sta rt with wha t yo u kno w: y

  • Pro je c t

Ove rvie w

  • Pro je c t 2A
  • Pro je c t 2B

FIT100 FIT100 FIT100

Pro je c t 2A

  • Wha t do we kno w? (Wha t a re the

re q uire me nts? )

∗ Write e ig ht fill-in-the -b la nk q ue stio ns g q ∗ Write a multiple -c ho ic e q ue stio n with o nly o ne a nswe r ∗ Write a multiple -c ho ic e q ue stio n with multiple a nswe rs ∗ 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
slide-3
SLIDE 3

11/9/2007 3

FIT100 FIT100 FIT100

  • Org a nize a nd a dd to wha t we kno w

∗ 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

Pro je c t 2A

  • One multiple -c ho ic e q ue stio n with o nly o ne c o rre c t

a nswe r

  • 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

FIT100 FIT100 FIT100

  • Org a nize a nd a dd to wha t we kno w

∗ 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

Pro je c t 2A

  • One multiple -c ho ic e q ue stio n with o nly o ne c o rre c t

a nswe r

  • 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

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do we kno w?

∗ Add a n ima g e with a ro llo ve r e ffe c t ∗ Add the multiple -c ho ic e q ue stio ns ∗ Displa y the q uiz sc o re ∗ De pe nding o n the sc o re :

  • Displa y the Go o d Wo rk! Or Study Mo re ! 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

FIT100 FIT100 FIT100

Pro je c t 2B

  • Org a nize wha t we kno w

∗ Using HT ML

  • Write the Go o d Wo rk! a nd Study Mo re !

y pa g e s – Add c lo se b utto ns to the se two pa g e s – Pa g e s c a n b e ide ntic a l e xc e pt fo r te xt

  • Add the two multiple -c ho ic e q ue stio ns to

the q uiz

FIT100 FIT100 FIT100

Pro je c t 2B

  • Org a nize wha t we kno w

∗ Using Ja va Sc ript

  • Add a n ima g e with a ro llo ve r e ffe c t
  • Gra de the q uiz
  • Displa y the q uiz sc o re
  • I

f the sc o re is o ve r 6,

– 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

  • E

lse

– Displa y the Study Mo re ! 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

FIT100 FIT100 FIT100

PE RT

Re c a ll the PE RT c ha rt fro m e a rlie r

  • Visua l dia g ra ms sho w the de pe nde nc ie s c le a rly
  • Cha ng e it a s yo u se e the pro je c t mo re c le a rly

Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment

slide-4
SLIDE 4

11/9/2007 4

FIT100 FIT100 FIT100

  • Must ha ve two c o mme nt pa g e s re a dy

a nd the c o de tha t displa ys the sc o re in

  • rde r to displa y the c o mme nt

PE RT

Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment

FIT100 FIT100 FIT100

PE RT

  • Add ste p fo r writing Q & A

∗ Re q uire d b e fo re b uilding GUI

Write questions & answers Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment

FIT100 FIT100 FIT100

PE RT

Write questions & answers Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment

FIT100 FIT100 FIT100

PE RT

Write questions & answers Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment

FIT100 FIT100 FIT100

PE RT

Write questions & answers Build GUI Code Compare Functions Write 2 Comment pages Declare Score Variable Code Display Score Primp & Coolify Build Rollover Code Display Comment Code Display Comment

FIT100 FIT100 FIT100

PE RT

Primp & Coolify Build Rollover

slide-5
SLIDE 5

11/9/2007 5

FIT100 FIT100 FIT100

PE RT

Build GUI Code Compare Functions Declare Score Variable Code Display Score

FIT100 FIT100 FIT100

PE RT

Write 2 Comment pages Primp & Coolify Code Display Comment Code Change bgcolor

FIT100 FIT100 FIT100

Pla nning

  • Ba c k to the na rra tive …

FIT100 FIT100 FIT100

  • 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 t

Pro je c t 2A

c o rre c t a nswe r ∗ 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

FIT100 FIT100 FIT100

GUI

  • Wha t do I

ne e d to a c c o mplish e a c h ste p?

∗ Ba sic HT ML struc ture Ba sic HT ML struc ture

  • Do wnlo a d fro m the link o n the c o urse

c a le nda r

∗ Co ding fo r fo rm a nd fo rm inputs

  • L
  • o k it up a t W3 Sc ho o ls:

http:/ / www.w3sc ho o ls.c o m/ html/ html_fo rms.a sp

FIT100 FIT100 FIT100

GUI

  • Wha t do I

ne e d to a c c o mplish e a c h ste p?

∗ HT ML Co ding fo r fo rm HT ML Co ding fo r fo rm

<fo rm a c tio n="“></ fo rm>

∗ HT ML Co ding fo r te xt b o xe s:

<input type ="te xt" na me =“q ue stio n1">

∗ HT ML Co ding fo r sub mit b utto n

<input type ="sub mit" va lue ="Sub mit“>

slide-6
SLIDE 6

11/9/2007 6

FIT100 FIT100 FIT100

Pro je c t 2B

  • Ba c k to the na rra tive …

FIT100 FIT100 FIT100

Pro je c t 2B

  • Using HT

ML

∗ Write the Go o d Wo rk! a nd Study Mo re ! pa g e s p g

  • Add c lo se b utto ns to the se two

pa g e s

  • Pa g e s c a n b e ide ntic a l e xc e pt fo r

te xt ∗ Add the two multiple -c ho ic e q ue stio ns to the q uiz

FIT100 FIT100 FIT100

Pla nning

  • Org a nize the ste ps a little b e tte r

∗ Write c o mme nt pa g e

  • Add c lo se b utto ns

Add c lo se b utto ns

  • Co py c o mme nt pa g e

– Add a ppro pria te te xt to e a c h – “Study Mo re !” & “Go o d jo b !”

∗ Add multiple -c ho ic e q ue stio ns

  • Multiple c o rre c t a nswe rs
  • Sing le c o rre c t a nswe r

FIT100 FIT100 FIT100

Pla nning

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Ne e d b a sic HT ML fo r c o mme nt pa g e Ne e d b a sic HT ML fo r c o mme nt pa g e ∗ Ne e d c o de fo r c lo se b utto n ∗ Ne e d c o de fo r multiple -c ho ic e q ue stio ns

  • Multiple c o rre c t a nswe rs

– Che c kb o xe s

  • Sing le c o rre c t a nswe r

– Ra dio b utto ns

FIT100 FIT100 FIT100

Pla nning

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Ne e d b a sic HT ML fo r c o mme nt pa g e Ne e d b a sic HT ML fo r c o mme nt pa g e ∗ Ne e d c o de fo r c lo se b utto n ∗ Ne e d c o de fo r multiple -c ho ic e q ue stio ns

  • Multiple c o rre c t a nswe rs

– Che c kb o xe s

  • Sing le c o rre c t a nswe r

– Ra dio b utto ns

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Add a n ima g e with a ro llo ve r e ffe c t

  • F

ind two ima g e s

  • F

ind c o de fo r ima g e ro llo ve rs

slide-7
SLIDE 7

11/9/2007 7

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Gra de the q uiz

  • Gra de te xtb o x a nswe rs
  • Gra de c he c kb o xe s
  • Gra de ra dio b utto ns

∗ Displa y the q uiz sc o re

  • Va ria b le sc o re
  • Add to sc o re whe n a nswe r is c o rre c t

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Gra de the q uiz

  • Co mpa re stude nt a nswe rs with c o rre c t

a nswe rs

– Gra de te xtb o x a nswe rs – Gra de c he c kb o xe s – Gra de ra dio b utto ns

∗ Displa y the q uiz sc o re

  • Va ria b le sc o re
  • Add to sc o re whe n a nswe r is c o rre c t

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ Gra de the q uiz

  • Co mpa re stude nt a nswe rs with c o rre c t

a nswe rs—c o nditio na l sta te me nts: if-e lse

– Gra de te xtb o x a nswe rs--le a rn ho w to mo ve thro ug h fo rm e le me nts – Gra de c he c kb o xe s—le a rn ho w – Gra de ra dio b utto ns—le a rn ho w

∗ Displa y the q uiz sc o re

  • De c la re va ria b le sc o re
  • Add to sc o re whe n a nswe r is c o rre c t

FIT100 FIT100 FIT100

Pro je c t 2B

  • I

nputs

∗ Arra y o f q uiz a nswe rs U i t f

  • Outputs

∗ F ina l sc o re ∗ Co mme nt pa g e s ∗ Use r input fro m fo rm ∗ Clic k e ve nt o n sub mit b utto n ∗ Mo use o ve r o n ro llo ve r ima g e

  • Go o d jo b !
  • Study Mo re !

∗ Cha ng e b g c o lo r b a se d o n sc o re

FIT100 FIT100 FIT100

Pro je c t 2B

  • Wha t do I

ne e d in o rde r to a c c o mplish e a c h ste p?

∗ I f the sc o re is o ve r 6,

  • 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

∗ E lse

  • Displa y the Study Mo re ! 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

FIT100 FIT100 FIT100

Ja va Sc ript

  • T

his is e no ug h de ta il fo r the pla nning do c ume nt

  • E

a c h le c ture we ’ ll lo o k a t a no the r E a c h le c ture , we ll lo o k a t a no the r pie c e o f the Ja va Sc ript c o de to a c c o mplish the se ste ps

slide-8
SLIDE 8

11/9/2007 8

FIT100 FIT100 FIT100

PE RT

  • F

ina l ste p

∗ Primp a nd “c o o lify” ∗ T hink a b o ut wha t yo u wo uld like to do T hink a b o ut wha t yo u wo uld like to do

  • Add c o o l fe a ture s
  • Add a c o o l “skin”
  • I

mpro ve the use r e xpe rie nc e

Primp & Coolify

FIT100 FIT100 FIT100

Re fle c tio n

  • Write fo r five minute s o n this to pic :

∗ E xpla in why e ve nt-b a se d pro g ra mming is impo rta nt. Give a n e xa mple o f a n p p e ve nt a nd de sc rib e ho w Ja va Sc ript wo uld ha ndle it.