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.
<div class="responsive-video">
<!-- your video embed comes here -->
</div>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.
<!-- progress element + JS comes here -->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.
<canvas id="myCanvas" width="480" height="320" style="border:1px solid #ccc"></canvas>
<script>
// your solution comes here
</script>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.
<!-- custom audio player comes here -->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.
<picture></picture>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.
<img src="/img/floorplan.png" alt="Apartment floor plan" usemap="#rooms" />
<map name="rooms">
<!-- area elements come here -->
</map>