Master prompt for Science example
Create a fully interactive and realistic simulation using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. The simulation should:
-
Model a system with realistic physics relevant to the chosen topic.
-
Display key variables (e.g., time, speed, distance, etc.) and allow user interaction.
-
Include interactive controls such as Play, Pause, Step, and Reset.
-
Provide meaningful visualizations, such as directional vectors, forces, shadows, or any representations that support conceptual understanding.
-
Use clear labels to help users interpret what they see on screen.
User Interface Guidelines:
-
All control buttons should be placed at the top of the interface, above the main visualization panel.
-
Layout must maximize the use of screen space, especially vertical space, by:
-
Hiding page titles, browser margins, and any non-essential UI.
-
Ensuring content fills the display area cleanly and intuitively.
-
Platform and Device Compatibility:
-
The HTML file must run entirely offline, without any external libraries, CDNs, or internet access.
-
It must be compatible with Learning Management Systems (LMS) like Singapore’s Student Learning Space (SLS).
-
Ensure it fits well within an iframe environment, using 100% width and 90% height, with no scrolling required.
-
Design must be fully responsive, adapting smoothly across both desktop and mobile devices.
-
Use only basic CSS (inline-flex), avoiding external stylesheets or frameworks.
https://g.co/gemini/share/6fbb572ee710
https://chatgpt.com/share/67f4da6b-f850-8008-ad08-293ecd9045e1
Draft 1
Create a fully interactive, realistic-looking simulation [ solar system, sun, earth moon with real physics, show suitable variables, like time in days, hours, play pause, step and reset button. add useful physics visualization like shadow and light cone from the sun . the control buttons should be at the top above the visualisation panel, arrange to occupy maximise space layout . add suitable labels to help users make sense of what is on the screen. ] using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. This file must be immediately usable in LMS platforms like the Student Learning Space (SLS) without requiring any external resources or internet access.
Hide the page title, margins, and unnecessary UI to maximize vertical space.
Optimized for SLS iframe view: Should fit width = 100% and height = 90 %, No scrolling required horizontally or vertically. Fully responsive design for both desktop and mobile screens. Use basic CSS (internal or inline); do not use any external CSS frameworks or CDNs.
No comments:
Post a Comment