A responsive site for everything to do with computing and computer science
This is the CiDA examination paper for June 2015.
Your task is to attempt this examination paper to the best of your ability in 3 hours.
Follow this link to the examination paper. Here is the information about the Escapade Adventure Park that you can use for the content of your site.
Information for Escapade Adventure Park
Escapade opens in August 2015. Lots of activities. Something for everyone. Built in Thoresby Park, Nottinghamshire. Escapade offers extreme fun. Must be at least 5 years old.
Activities: Tree Tops Escapade (over 10s), Junior Escapade (5-10), Zip Wire, Bungee Jumping and Abseiling. Book in advance to guarantee a place.
Open 7 days a week. All year round. Opening Times:10am – 4pm
Prices available upon request. There are reductions for children and senior citizens. Reductions for family tickets (two adults and either 2 or 3 children under 16). Save even more by becoming an annual pass holder at Escapade – visit any time you want to and enjoy priority booking.
Groups: Families and groups welcome. Escapade is the ideal destination for an adventurous day out for your school, youth club or group.
School Trips: An exciting outdoor adventure for primary and secondary school aged children. Team building exercises and individual challenges make Escapade a high quality learning experience. Encourages leadership skills and personal development in a fun and lively environment. Wide variety of activities. A chance for children of all ages to flourish and enjoy themselves. All risks are managed effectively.
Tree Top Escapade: Over 10s. Trek through the tree tops. Swing, climb and jump over different obstacles – there are over 20 obstacles to challenge you, including balancing beams, rope bridges and sky jumps. All safety equipment provided.
Junior Escapade: 5-10 years. Younger children can also enjoy the tree top fun. Especially designed for juniors, your child will love the challenges on offer – the Beaver crossing, Squirrel hideaway, Chipmunk Beam and Eagle Zip line. All safety equipment provided. Adult supervision required.
Escapade Adventure Park. Exhilarating activities. Go on … have an adventure.Email for further information and to book an activity: firstname.lastname@example.org
Here are the images that you can use.
Image courtesy of digitalart / FreeDigitalPhotos.net
You can use the notes from previous sessions here.
The examiner will ask you to complete a form but for this purpose please add an extra webpage to evaluate your product. In your evaluation you must:
- explain your important design decisions
- justify your choices in relation to the client brief
- suggest further improvements.
Notes to help you to create the brief.
Here is a link to an example site that points out how a few of the features can be created.
This is the basic page...
The brief demads that you create a footer including: a smaller version of the logo; the email address linking to email@example.com; the Facebook icon linking to www.facebook.com/escapadeadventure; and the Twitter icon linking to www.twitter.com/escapadeadventure.
The text in the brief is "Email for further information and to book an activity: firstname.lastname@example.org", I copied this to the footer. I then cut the actual email address and selected "Insert" and then "Email link"...
Paste the email address into to both boxes.
Press OK. Job Done.
Next add the social media icons. You can be crafty and use a table, but I have just added them after the email address.
The final step is to add the link for each icon. Simply click once on the icon and then type in the web address into the "link" box. The Facebook icon connects to http://www.facebook.com/escapadeadventure and the Twitter icon connects to http://www.twitter.com/escapadeadventure. Please note that the Twitter account is fictitious and does not exist but the Facebook account does. Note: you have to start each web address with http://
Cropping an image in Fireworks and making a rollover image.
The first thing to note about a rollover is that it is two images, the first is seen when the mouse is not hovering over the image and the second is seen when the mouse is over it and they both have to be the same size.
Open the image of the brochure in Fireworks...
... and firstly copy the front cover using the "Bitmap Selection" tool (highlighted in the image above) and paste it to a new image. Save the image with a suitable filename (as always if it is possible do not have spaces in the filename). You should notice that the image is 400 x 300. This "Front_cover".
Repeat this process with another page making sure that the images are exactly the same size. That's why I noted the size earlier. This "Front_cover_2".
Now you can make the rollover. Click on "Insert" then "Image Objects" and then "Rollover Image".
This will begin the Rollover dialogue...
... click on "Browse" for the original image and select the front cover...
... and press OK.
Next repeat the process for the rollover image.
Press OK on the rollover dialogue and check that your rollover works like the one below.
This is the way that you can make small sections on the page fit a specific pattern.
THe brief says that "using your HTML and CSS coding skills, create a box on the about us page. It should: have a height of 400px and a width of 300px; have a background colour of #ff6633; contain information about school trips to Escapade; contain SCHOOL_TRIPS.png, which should be positioned on the right of the text. The text should wrap around the image. The information on school trips can be found in the INFO.rtf file. The SCHOOL_TRIPS.png can be found in the IMAGES folder."
Make space on the About us page and then click on "Insert" then "Layout objects" and then finally "AP Div".
This will make a space on page that can be edited seperately from the rest of the page.
The features of the AP Div can be edited to match the brief - size 400 x 300 and background colour #ff6633.
Now add the text and the required image to the AP Div and it looks a little silly.
However, the brief says that the inmage should be placed on the right of the text. You will have to edit the code for this to work, but it does say this in the brief! Select the image and change to "Split".
The end of the tag for the school trip image is
SCHOOL_TRIPS.png" width="150" height="250"/></p>
This needs to be changed to
SCHOOL_TRIPS.png" width="150" height="250" align = "right" /></p>
You will be impressed by the result.
Another job done.