11/9/2007 Pro je c t 2A FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Write a pla nning do c ume nt Pro je c t 2A.2: ∗ L ist pro je c t re q uire me nts Pla nning Do c ume nt Pla nning Do c ume nt ∗ Sho w PE Sho w PE RT RT c ha rt c ha rt ∗ I nc lude a list o f inputs a nd o utputs with S te ps to write in narrative fo rm na me s, a ka “Da ta Dic tio na ry” ∗ Write a na rra tive with c o de snippe ts e xpla ining wha t the ste ps a re a nd wha t yo u a re g o ing to do . See examples at the end Pro je c t Re q uire me nts Pro je c t Re q uire me nts FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Pro je c t 2A • Pro je c t 2B ∗ Write q ue stio ns a nd a nswe rs ∗ Add ima g e with a ro llo ve r e ffe c t ∗ Add multiple -c ho ic e q ue stio ns • 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 ∗ Displa y the q uiz sc o re a nswe r ∗ De pe nding o n the sc o re : • One multiple -c ho ic e q ue stio n with multiple c o rre c t • Displa y the Go o d Wo rk! Or Study Mo re ! pa g e with a nswe rs c lo se b utto n ∗ Build pa g e with HT ML • Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e • 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 Pro je c t Re q uire me nts PE RT FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 Write • Pro je c t 2B questions Build GUI ∗ Co de with Ja va Sc ript & answers • Add a n ima g e with a ro llo ve r e ffe c t • Gra de the q uiz Build Code Declare Code Rollover • Displa y the q uiz sc o re Compare Score Display 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 • Add this dra wing Primp & Comment Display Coolify – Displa y the Study Mo re ! Pa g e with c lo se b utto n to yo ur pla nning pages Comment – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e do c ume nt 1
11/9/2007 Pro je c t 2A Pro je c t 2B FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • GUI —ne e d b a sic HT ML struc ture • Co mme nt pa g e —b a sic HT ML c o ding ∗ Do wnlo a d fro m c o urse c a le nda r ∗ Do wnlo a d fro m c o urse c a le nda r • F o rm—HT ML c o ding • Clo se b utto n ∗ <fo rm a c tio n="“></ fo rm> ∗ <input type ="b utto n" na me = "c lo se Windo w" va lue = "c lo se windo w" o nc lic k = "ja va sc ript:windo w.c lo se ()" / > • T e xt b o xe s—HT ML c o ding : ∗ <input type ="te xt" na me =“q ue stio n1"> • Multiple -c ho ic e q ue stio ns–ne e d HT ML http:/ / www.w3sc ho o ls.c o m/ html/ html_fo rms.a sp • Sub mit b utto n—HT ML c o ding ∗ Multiple c o rre c t a nswe rs ∗ <input type ="sub mit" va lue ="Sub mit“> • Che c kb o xe s—find HT ML a t W3 Sc ho o ls ∗ Sing le c o rre c t a nswe r • Ra dio b utto ns—find HT ML a t W3 Sc ho o ls Pro je c t 2B Pro je c t 2B FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Add a n ima g e with a ro llo ve r e ffe c t • Gra de the q uiz—c re a te func tio n ∗ I ∗ De c la re va ria b le sc o re ma g e s--find o r c re a te two ∗ Co mpa re stude nt a nswe rs with c o rre c t • Co pyrig ht-fre e • I I ma g e s must b e sa me size t b i a nswe rs—c o nditio na l sta te me nts: if-e lse diti l t t t if l • Ba c kg ro und sho uld no t b e tra nspa re nt • Gra de te xtb o x a nswe rs--le a rn ho w to mo ve thro ug h ∗ I ma g e Ro llo ve r re pla c e s Sub mit Butto n fo rm e le me nts • Gra de c he c kb o xe s—le a rn ho w to ha ndle • <img na me ="g ra de I mg " src ="Up.JPG" width="40" c he c kb o xe s he ig ht="20" o nmo use o ve r="b utto nDo wn()" o nmo use o ut="b utto nUp()" o nc lic k="g e tGra de ()" / > • Gra de ra dio b utto ns—le a rn ho w to ha ndle ra dio b utto ns ∗ Add to sc o re whe n a nswe r is c o rre c t • Displa y the sc o re Pro je c t 2B Pro je c t 2B FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Displa y c o mme nt pa g e b a se d o n sc o re ∗ Ne e d to write func tio n to c o mpa re sc o re to 6 • I nputs • Outputs ∗ Arra y o f q uiz ∗ F • I f the sc o re is o ve r 6 ina l sc o re – Displa y the Go o d Wo rk! pa g e with c lo se b utto n ∗ Co mme nt pa g e s a nswe rs – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e ∗ Use r input fro m • Go o d jo b ! • E lse fo rm e le me nts • Study Mo re ! – Displa y the Study Mo re ! Pa g e with c lo se b utto n a rra y ∗ Cha ng e b g c o lo r – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e ∗ Clic k e ve nt o n b a se d o n sc o re ∗ Ne e d c o de to o pe n c o mme nt pa g e in ne w sub mit b utto n windo w ∗ Mo use o ve r o n ∗ Ne e d c o de to c ha ng e b a c kg ro und c o lo r o f ro llo ve r ima g e pa g e 2
11/9/2007 Pro je c t 2B T he Na rra tive FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • F ina l ste p • As yo u c a n se e , yo u do n’ t ne e d to ∗ Primp a nd “c o o lify” kno w all the info rma tio n ∗ De sc rib e ho w yo u will ma ke yo ur q uiz spe c ia l: • I I nc lude wha t yo u a lre a dy kno w a nd nc lude wha t yo u a lre a dy kno w a nd • Add c o o l fe a ture s? wha t info rma tio n yo u will ne e d to • Add ima g e s? • Add a c o o l “skin”? find • I mpro ve the use r e xpe rie nc e ? • Yo u wo n’ t kno w “e ve rything ” until • Or ___________? yo ur pro je c t is do ne ! E xa mple fo r this Ste p E xa mple Na rra tive FIT100 FIT100 FIT100 FIT100 FIT100 FIT100 • Displa y c o mme nt pa g e b a se d o n sc o re De pe nding o n the sc o re , a c o mme nt pa g e will o pe n in a ne w windo w. I f sc o re > 6, the pa g e will ∗ Ne e d to write func tio n to c o mpa re sc o re to 6 b e g o o d.html, e lse study.html. Also , if the sc o re s • I f the sc o re is o ve r 6 > 6, the b a c kg ro und o f the q uiz pa g e will 6, e b a c g o u d o e q u pa g e – Displa y the Go o d Wo rk! pa g e with c lo se b utto n c ha ng e to _______, e lse ______. – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e A func tio n will b e de ve lo pe d to c o mpa re the q uiz • E lse sc o re with 6. I will ne e d to find a nd inc lude c o de – Displa y the Study Mo re ! Pa g e with c lo se b utto n to o pe n the c o mme nt pa g e in ne w windo w – Cha ng e the b a c kg ro und c o lo r o f the q uiz pa g e a nd to c ha ng e the b a c kg ro und c o lo r o f the ∗ Ne e d c o de to o pe n c o mme nt pa g e in ne w q uiz pa g e windo w ∗ Ne e d c o de to c ha ng e b a c kg ro und c o lo r o f pa g e 3
Recommend
More recommend