Quiz design as a single HTML page/file. No backend

The purpose of this project is to create an engaging and interactive quiz page for educational purposes. I have outlined the detailed requirements below to guide you through the development process: 1. Layout and Structure: ◦ The quiz page should have a clean and user-friendly layout, ensuring intuitive navigation and clear organization of elements. ◦ I will provide you with a picture of the design that illustrates the desired layout, including the positioning and arrangement of various components. 2. Answer Fields: ◦ There will be four dropping fields for answers ordered from top to bottom. ◦ Additionally, there will be four dropping fields for answers ordered from bottom to top. ◦ The dropping fields should be visually distinct and clearly visible to the users. 3. Answer Options: ◦ Answer options will be displayed one by one in the middle of the page. ◦ Only one answer option should be visible at a time, and it should remain visible until the user interacts with it. ◦ I will provide you with a picture of the design that showcases the appearance and presentation of the answer options. 4. Drag and Drop Functionality: ◦ Users should be able to drag an answer option and drop it into the corresponding dropping field. ◦ Each dropping field should accept only one answer option, preventing multiple options from being dropped into the same field. ◦ Clear visual cues, such as highlighting or snapping, should be implemented to assist users in correctly positioning the answer options. 5. Submitting and Validating Answers: ◦ A submit button should be available for the users to indicate that they have finished placing all the answers. ◦ Upon clicking the submit button, the answers should be validated to determine correctness. ◦ The quiz page should provide feedback to the user, indicating which answers are correct and which ones are wrong. ◦ Visual indicators or any other means of distinguishing correct and wrong answers should be implemented. 6. Additional Considerations: ◦ The quiz page should be developed using modern web technologies and frameworks. ◦ Ensure the compatibility of the quiz page with commonly used web browsers. ◦ The design should be responsive, adapting to different screen sizes and devices. ◦ Pay attention to code quality, maintainability, and follow best practices for web development. I believe these requirements capture the essence of the School Quiz Page project. If you have any questions or need further clarification, please don't hesitate to reach out.