Title: Interactive Canvas Scene with Forms

Objective: Students will create an interactive scene using HTML, CSS, and JavaScript. The project will include forms and canvas elements to allow users to manipulate objects and play sound effects.

Instructions

1. Development

   • Forms:

     • Use three radio buttons to select an image background for the canvas.

     • Add a slider to:

       • Control the X or Y position of a character on the canvas. Depending on the character moves up/down or side to side. Limit the amount that the character can move.

     • Include three checkboxes to:

       • Make Item 1 appear or disappear on the screen.

       • Make Item 2 appear or disappear on the screen.

       • Make Item 3 appear or disappear on the screen.

     • Add three buttons to:

       • Trigger Sound Effect 1.

       • Trigger Sound Effect 2.

       • Trigger Sound Effect 3.

   • Canvas:

     • Draw a scene on the canvas based on the user's selections and inputs from the forms.

     • Ensure that the scene is dynamic and updates in real-time as users interact with the forms.

   • Interactivity:

     • Implement JavaScript to handle form inputs and update the canvas accordingly.

     • Incorporate sound effects that play when specific buttons are clicked.