HTML: 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Filter</title>
  </head>
<body>

<div class="container">
  <img id="image" src="example.jpg" alt="Image">
  <br>
  <button onclick="changeFilter('none')">None</button>
  <button onclick="changeFilter('grayscale')">Grayscale</button>
  <button onclick="changeFilter('sepia')">Sepia</button>
  <button onclick="changeFilter('blur')">Blur</button>
  <button onclick="changeFilter('invert')">Invert</button>
</div>
</body>
</html>

CSS: 

  <style>
    .container {
      text-align: center;
      margin-top: 50px;
    }

    img {
      width: 400px;
      margin-bottom: 20px;
    }

    button {
      padding: 8px 15px;
      margin: 0 5px;
      cursor: pointer;
    }
  </style>

JAVASCRIPT: 

  <script>
  function changeFilter(filter) {
    var image = document.getElementById('image');
    image.style.filter = filter;
  }
</script>

Try to answer about this code:

Which HTML tag is used to define the image element in the code?

<div>
<img>

<image>
<picture>

What CSS property is used to set the width of the image in the code?

image-width
width

img-width
max-width

Which JavaScript function is triggered when a button is clicked to change the image filter?

applyEffect()
changeFilter()

requireFilter()
applyFilter()

What CSS property is modified to apply different image filters in the JavaScript code?

image-style
filter

img-filter
change-filter