<goal>
  Generate a standalone ".html" document representing a complete interactive educational tool.
  The document must include embedded CSS and JavaScript code, and optionally use p5.js or D3.js libraries if needed.
  The tool should visually and interactively illustrate the educational concept described by the input data, using IF-THEN logic for object behaviors.
  In the initial view, the title, description, and initial state of the elements should be clearly visible, while user interactions through clicks trigger the appropriate reactions.
  The output must be a single functional ".html" file, ready to run directly in a web browser without additional setup.
</goal>
<instruction>
  Process each key from the JSON input according to the following meaning and instructions:

  - **"title"**: Represents the name of the interactive tool. Use this text as the main page heading (e.g., inside an "<h1>" tag), visibly displayed at the top of the tool. It should clearly identify the topic or functionality of the tool.

  - **"audience"**: Describes the target group for which the tool is intended (e.g., elementary students, university students, teachers). This information is metadata and is not intended for display in the user interface, but you may include it as a comment in the HTML code for developer orientation.

  - **"description"**: Textual description of the educational concept illustrated by the tool. Display this content as a paragraph (e.g., inside a "<p>") below the title as an introduction to the tool. It should be easily readable and clearly explain the purpose and function of the tool.

  - **"initial"**: Defines the initial visual state of objects on the screen — their positions, shapes, sizes, colors, and layout. Based on this description, generate the initial view using HTML canvas, SVG, or libraries like p5.js or D3.js. This is the initial scene the user sees before interacting.

  - **"interactions"**: An array of rules that define how objects respond to user actions. Each rule contains the following fields:
    - **"if"**: The condition that triggers the rule (e.g., click on a specific object or position).
    - **"then_first"**: The action executed the first time the condition is met (e.g., change color, display text).
    - **"then_next"**: A list of actions executed sequentially each subsequent time the same condition is triggered.
    - **"position"**: The initial position of the object on the screen, usually in (x, y) coordinates. Used for precise placement of interactive elements.
    - **"style"**: Object styling — includes visual properties like color, borders, shape, and size. Used for the initial rendering of the object.

  Implement a mechanism that detects clicks and tracks the number of clicks per object to correctly change behavior through the "then_first" and "then_next" sequences.
  
  - **"extras"**: A field with additional functionalities such as animations, extra visualizations, text appearance, audio effects, etc. Include them as enhancements to the basic behaviors, according to the semantics of the given descriptions.
  
  Finally, generate a single ".html" document that includes all necessary elements (HTML, embedded CSS, embedded JavaScript), fully functional and ready for local opening in a browser.
  Do not add any extra comments, introductory sentences, explanations, or text outside the HTML code. The output must consist solely of a single valid HTML document without any header, introduction, or interpretation.
</instruction>

{
  "title": "Interaktivno iscrtavanje trigonometrijske funkcije",
  "audience": "srednjoškolci",
  "description": "This interactive tool allows students to visually explore trigonometric functions...",
  "initial": "The screen displays a coordinate system and the basic function y = sin(x)...",
  "interactions": [
    {
      "if": "pomeranje klizača 'Amplituda'",
      "then_first": "graf se ponovo iscrta sa novom amplitudom (y = A * sin(x))",
      "then_next": [ "funkcija postaje viša ili niža u zavisnosti od vrednosti" ],
      "position": "kontrole ispod grafa",
      "style": "horizontalni klizač sa oznakom A"
    },
    // ... other interactions (Frequency, Phase Shift)
  ],
  "extras": "By combining parameter changes, students can explore more complex forms...",
}