HTML Exam 4: Graphics, Advanced Media, and APIs (20 Challenges)

Previous Next

HTML Exam 4: Expert Level

This exam includes 20 advanced challenges focused on expert-level techniques.
Exercises 1-10: Beginner level | Exercises 11-15: Intermediate level | Exercises 16-20: Advanced level

Exercise 1 Vector Graphics (SVG Circle)

Use SVG to draw a circle:

Radius 40, centered at (50, 50).
Fill it red.

Solution

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Exercise 2 Responsive Images (Picture)

Use picture for responsive images:

A small image for screens under 600px.
A large image for bigger screens.

Solution

<picture>
    <source media="(max-width: 600px)" srcset="img_small.jpg">
    <img src="img_large.jpg" alt="Responsive image">
</picture>

Exercise 3 Advanced Validation (Pattern)

Create a field that accepts exactly 10 digits:

Solution

<input type="text" pattern="[0-9]{10}" title="10 digits" required>

Exercise 4 Autocomplete Suggestions (Datalist)

Create an input with suggestions:

Solution

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
</datalist>

Exercise 5 Progress Bar

Display 70% progress:

Solution

<progress value="70" max="100">70%</progress>

Exercise 6 Meter

Display storage 60/100:

Solution

<meter value="60" min="0" max="100">60%</meter>

Exercise 7 Video with Subtitles

Add subtitles to the video:

Solution

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Exercise 8 Image Maps

Create an image map:

Solution

<img src="workplace.jpg" usemap="#workmap">
<map name="workmap">
    <area shape="rect" coords="34,44,270,350" href="computer.htm">
</map>

Exercise 9 Template Tag

Use template for hidden content:

Solution

<template id="myTemplate">
    <h2>Secret content</h2>
    <p>Not visible on load</p>
</template>

Exercise 10 Canvas

Define a canvas sized 200x100:

Solution

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>

Exercise 11 SVG Rectangle Intermediate

Draw an SVG rectangle sized 100x50:

Solution

<svg>
    <rect width="100" height="50" fill="blue" />
</svg>

Exercise 12 Dialog Element Intermediate

Create a dialog with a close button:

Solution

<dialog id="myDialog">
    <p>Dialog content</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

Exercise 13 Time Element Intermediate

Use time with datetime:

Solution

<time datetime="2024-01-01">January 1, 2024</time>

Exercise 14 Mark Element Intermediate

Use mark to highlight text:

Solution

<p>This <mark>highlighted text</mark> is in the paragraph.</p>

Exercise 15 Image Srcset Intermediate

Use srcset for multiple resolutions:

Solution

<img src="image.jpg" 
     srcset="image-1x.jpg 1x, image-2x.jpg 2x" 
     alt="Responsive image">

Exercise 16 Canvas Drawing Advanced

Draw a rectangle on canvas using JavaScript:

Solution

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
</script>

Exercise 17 SVG Path Advanced

Draw an SVG line using path:

Solution

<svg>
    <path d="M10 10 L100 100" stroke="black" stroke-width="2" />
</svg>

Exercise 18 Web Storage API Advanced

Use localStorage to save data:

Solution

<script>
// Save
localStorage.setItem('name', 'Ahmed');

// Retrieve
var name = localStorage.getItem('name');
</script>

Exercise 19 Geolocation API Advanced

Get the user's location:

Solution

<script>
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log(position.coords.latitude, position.coords.longitude);
    });
}
</script>

Exercise 20 Project: Complete Interactive Page Advanced

Create a page that includes:

Video with subtitles.
Canvas for a simple drawing.
Progress bar.
Dialog for notifications.

Solution

<!DOCTYPE html>
<html>
<body>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="subs.vtt" kind="subtitles" srclang="en">
    </video>
    
    <canvas id="canvas" width="200" height="100"></canvas>
    
    <progress value="50" max="100"></progress>
    
    <dialog id="notification">
        <p>Important notification!</p>
        <button onclick="this.parentElement.close()">Close</button>
    </dialog>
</body>
</html>

Previous Next

DevArabi

HTML Course

HTML Exam 4: Graphics, Advanced Media, and APIs (20 Challenges)

HTML Exam 4: Expert Level

DevArabi

HTML Course

HTML Exam 4: Graphics, Advanced Media, and APIs (20 Challenges)

HTML Exam 4: Expert Level

Smart Editor