Stretch tasks R097 TA2: Creating Interactive Digital Media

Round 1: Quiz Blitz

1. The structure, with every screen linked The product should be clickable end to end before anything looks finished.
2. So it works when moved to another machine Absolute paths point at one computer's folders.
3. A JPG about as wide as it is shown Resize to the display size, then compress.
4. MP3 or AAC Small files that every device plays.
5. False A product is only as fast as its biggest file.
6. Part of an image that responds when selected Hotspots must be big enough to hit, and signposted.
7. A change in appearance when the pointer moves over an element It shows that something can be pressed.
8. The exported version, on the target device The exported version is the one the client will use.
9. Visible play and pause; Captions Never autoplay with sound.
10. Changing its size, format or content to suit the product Cropping, resizing, converting, trimming and compressing.
11. A tap that seems to do nothing gets tapped again Repeated taps are how users break things.
12. Six techniques used competently The criteria ask for a range.

Round 2: Quick Fire

1. • The structure keeps changing until every screen is linked
   • Styling early means restyling everything, wasting time
   Model answer

   The structure keeps changing until every screen and link is in place, so the product should be clickable end to end first. Styling before then means restyling every screen each time the structure changes, which wastes time.

2. • Resize it to the size it is shown
   • Compress it as a JPG, checking the quality by eye
   Model answer

   Resize the photograph to the size it is shown, about 800 pixels wide, then compress it as a JPG, checking by eye that the quality is still acceptable. The file drops to a fraction of its size, so the screen loads quickly.

3. • It is the version the client will use, and may behave differently
   • Broken paths, missing fonts or media only show there
   Model answer

   The exported version on the client's device is the one they will actually use, and it can behave differently from the editor. Broken links, absolute paths, missing fonts or media that will not play only show up there.

4. • Feedback confirms the action registered
   • Otherwise users tap again and break things
   Model answer

   Feedback, such as a pressed state or a sound, confirms that the action registered. Without it, users assume nothing happened and tap again, which can submit something twice or break the product.

Round 3: Big Think

1. • Build the structure first, with every screen linked
   • Then add the real content
   • Styling comes last
   • Assets resized and compressed
   • Feedback on each answer, and a score
   • Accessibility built in
   • Naming, folders and relative paths
   • Keep the source, number the versions, and test the published version
   Model answer

   I would build the structure first: every screen of the quiz, with placeholder content, linked so it is clickable end to end. Next I would add the real content, the questions, text, images and audio, resized and compressed so the page loads quickly. Each answer would give feedback, saying whether it is right and why, with a score at the end. Styling would come last, once the structure stopped changing, with alt text on every image, strong contrast and keyboard access built in. Files would follow a naming convention in folders such as images and audio, with relative paths throughout. Finally, I would keep the source project, save numbered versions such as quiz-v05, and test the published version on the devices visitors use.

2. • Resize the photograph to its display width and compress it as a JPG
   • Check its quality by eye
   • Use the logo as an SVG or a transparent PNG
   • Trim the narration and export it as MP3 or AAC
   • Balance the levels and add fades
   • Export the video as an MP4 using H.264
   • Add captions to the video
   • Keep the originals and record everything in the asset table
   Model answer

   The 4000 pixel photograph would be resized to the width it is shown on the kiosk, then compressed as a JPG, checking the quality by eye. The logo would be used as an SVG, or a PNG with transparency, so its edges stay sharp on any background. The narration would be trimmed and its levels balanced, with fades at each end, and exported as an MP3. The video clip would be trimmed and exported as an MP4 using H.264 at the size it is shown, with captions. I would keep every original, and record each prepared asset in the asset table with its source, format and licence.

This or That

1. Link them first Styling before the structure is settled means restyling later.
2. images/logo.svg A relative path works anywhere. An absolute path only works on one computer.
3. PNG JPG cannot store transparency.
4. No: give visible controls Visible controls and captions, with no autoplay sound.
5. Yes, keep it Without the source, nothing can be changed.
6. The exported product The client uses the exported version.
7. garden-kiosk-v05 Lower case, no spaces, a version number and never final.
8. Not good: give feedback Every interaction should give feedback.

Memory Match

• A 6 Repurposing: Changing an asset to suit the product
• B 5 Optimisation: Smaller files with no visible loss
• C 2 Relative path: A path that works on any machine
• D 1 Hotspot: Part of an image that responds
• E 3 Rollover: A change when the pointer moves over it
• F 4 Export: A version that runs without the editor

Sort It

1. Structure Checking there are no dead ends Structure is checked before content goes in.
2. Structure Adding placeholder boxes Placeholders hold the layout before real content.
3. Styling Applying the brand colours Colour is styling.
4. Structure Creating every screen Screens come first.
5. Structure Linking all the buttons Navigation is part of the structure.
6. Styling Styling the pressed states How states look is styling.
7. Content Embedding the captioned video Video is content.
8. Content Inserting the narration Audio is content.
9. Styling Adjusting spacing and alignment Spacing is styling, done once the structure is fixed.
10. Content Writing the real text Real text is content.
11. Styling Setting the fonts Typography is styling.
12. Content Adding compressed photographs Images are content.