Circle Interaction Web Application

You have been tasked with creating a web application that enables users to interact with an image of a circle.

Requirements

  1. The circle has a center at coordinates (100, 100) and a radius of 50 units.
  2. Users should be able to click anywhere on the circle image.
  3. The application should determine which quadrant of the circle the click falls into.
  4. The distance from the center of the circle to the point where the user clicked should be calculated using the Cartesian distance formula.
  5. The application should display the quadrant information and the calculated distance to the user.
  6. The application should be developed using VB.NET and include appropriate event handlers and JavaScript functions.
  7. The page should be initialized correctly to handle postbacks appropriately.

Implementation

The web application consists of an ASP.NET web page with an ImageButton element displaying the circle image. Upon clicking the circle image, JavaScript functions are invoked to determine the coordinates of the click, identify the quadrant, and calculate the distance from the center. The results are then displayed to the user.

ASP.NET Page Structure

      <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" >
      <head>
        <title>Circle Interaction</title>
        <script type="text/javascript">
          // JavaScript functions for circle interaction
        </script>
      </head>
      <body>
        <form id="form1" runat="server">
          <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="circle.png" OnClientClick="getClickCoordinates(event); return false;" />
          <div id="quadrantInfo" runat="server"></div>
          <div id="distanceInfo" runat="server"></div>
        </form>
      </body>
      </html>
Web hosting by Somee.com