MicroSim Design Prompt

Please write 3 pages in the formal tone of an academic journal on the following:

MicroSims Design Framework (2-3 pages) * Design principles: Responsive, accessible, standards-based * Technical architecture: p5.js, HTML5, JavaScript ecosystem * Educational pedagogy: How design supports learning objectives * Implementation standards: Your documented rules and guidelines

Mention that all MicroSims should be easily used in an as a single line of HTML Mention that MicroSims are designed to be fixed-height but respond to changes in the width of the web container they are displayed in. Mention that they should be tested on both wide and narrow screens including mobile devices. Mention that for specific JavaScript libraries they can used specific rules files for consistent UI experience such the automatic centering of the title at the top of the canvas. Mention that a JSON Schema file can be used to describe the metadata for a MicroSim for a search catalog. Mention that consistent search is critical for supporting reusable components. Mention that generative AI is very good at making small changes to a reference template, however generative AI struggles to build new MicroSims from scratch when there are many complex screen elements. Mention that generative AI tools are not good at layout so that providing precise layout rules accelerates MicroSim generation.</p> <p>MicroSims Design Framework: A Comprehensive Approach to Educational Interactive Simulations Introduction The Educational MicroSims Design Framework represents a systematic approach to creating lightweight, interactive educationa</p> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../basic-prompts/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Basic Prompts"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Basic Prompts </div> </div> </a> <a href="../microsim-workflow/" class="md-footer__link md-footer__link--next" aria-label="Next: MicroSim Workflow"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> MicroSim Workflow </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../..", "features": ["content.code.copy", "navigation.expand", "navigation.path", "navigation.prune", "navigation.indexes", "toc.follow", "navigation.top", "navigation.footer", "content.action.edit"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../assets/javascripts/bundle.83f73b43.min.js"></script> <script src="../../js/extra.js"></script> <script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script> </body> </html>