Question Bank
HTML Media and Interactive Elements Quiz
Difficulty: Medium
Six drills on HTML5 media: responsive video embeds, the progress element, canvas drawing, custom audio controls, the picture element for art direction, and image maps.
HTML Media and Interactive Elements Quiz
Six drills on HTML5 media: responsive video embeds, the progress element, canvas drawing, custom audio controls, the picture element for art direction, and image maps.
824 views
14
Implement a fully responsive video embed (e.g. a YouTube iframe) that preserves a 16:9 aspect ratio at any container width. Use modern CSS (no padding-bottom hack required) and keep the markup minimal.
Use the <progress> element to render a download progress bar that updates from 0 to 100. Wire up a small script so the value advances every 200 ms. Include accessible labelling so a screen reader announces the current percentage.
Use the HTML5 <canvas> to draw a filled circle wherever the user clicks. Each click should add one new circle (the existing ones stay on the canvas). Use 2D context calls only; do not pull in any library.
Build a custom audio player on top of the <audio> element. The native controls should be hidden, and a Play / Pause toggle button plus a current-time readout should drive playback through the HTMLMediaElement API.
Use the <picture> element to serve a wide landscape image on viewports 800px and up, a portrait-oriented crop on narrower screens, and a WebP source ahead of a JPEG fallback for browsers that support it. Provide meaningful alt text for accessibility.
Define an image map for a floor-plan image so that clicking different rooms navigates to different URLs. Use <map> with at least one rect and one circle area, and explain in your solution why each <area> must have an alt attribute.