Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.

Widget:KnowHowComputer: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<script type="text/javascript">
<includeonly><script type="text/JavaScript">


         (function () {
         (function () {
Zeile 6: Zeile 6:
                 // Define the KnowHowComputer Web Component
                 // Define the KnowHowComputer Web Component
                 class KnowHowComputerElement extends HTMLElement {
                 class KnowHowComputerElement extends HTMLElement {
                     DEFAULT_MEMORY_CONFIGURATION = [
                     static observedAttributes = ['no-help'];
                        {
                            name: 'Leer', program: {}
                        },
                        {
                            name: 'Standard Demo', program: {
                                '1': 'isz 8',
                                '2': 'jmp 4',
                                '3': 'stp',
                                '4': 'inc 7',
                                '5': 'dec 8',
                                '6': 'jmp 1',
                                '7': '5',
                                '8': '4'
                            }
                        }
                    ];
 


                     constructor() {
                     constructor() {
Zeile 33: Zeile 16:
         display: block;
         display: block;
         font-size: calc(15px + 0.390625vw);
         font-size: calc(15px + 0.390625vw);
    }
    .no-help .khc-help {
        display: none;
     }
     }


     :host > div {
     :host > div {
         display: grid;
         display: grid;
         gap: 1em;
         gap: 1rem;
         grid-template-areas:
         grid-template-areas:
             "title title"
             "title title"
             "nav  side   "
             "nav  nav   "
             "main side  ";
             "main side  ";
        grid-template-rows: min-content min-content;


         > h1:first-child {
         > h1:first-child {
Zeile 67: Zeile 55:
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
        fieldset {
            display: flex;
            flex-direction: column;
            gap:0.5rem;
        }
     }
     }


Zeile 82: Zeile 76:
     }
     }


     @media (max-width: 420px) {
     @media (max-width: 600px) {
         :host > div {
         :host > div {
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
             grid-template-areas:
             grid-template-areas: "title" "nav" "main" "side";
        "title" "nav" "main" "side";
        }
        nav {
            flex-direction: column;
         }
         }
     }
     }
Zeile 116: Zeile 112:
                   aria-describedby="descr-speicheranzeigefeld">
                   aria-describedby="descr-speicheranzeigefeld">
         </textarea>
         </textarea>
 
        <fieldset id="memory-selector">
        <label>Speicherkonfiguration laden:</label>
            <legend>Speicherkonfiguration laden:</legend>
         <select id="memory-selector"></select>
         </fieldset>
     </main>
     </main>
     <aside>
     <aside class="khc-help">
         <details open>
         <details open>
             <summary><span is="h2">Bedeutung der KHC Befehle</span></summary>
             <summary><span is="h2">Bedeutung der KHC Befehle</span></summary>
Zeile 222: Zeile 218:
                     refreshMemoryConfigurations() {
                     refreshMemoryConfigurations() {
                         this.memoryConfigurations = [
                         this.memoryConfigurations = [
                            ...this.DEFAULT_MEMORY_CONFIGURATION,
                             ...this.parseMemoryElements()
                             ...this.parseMemoryElements()
                         ];
                         ];
                         this.refreshMemorySelector(this.memoryConfigurations);
                         this.refreshMemorySelector(this.memoryConfigurations);
                    }
                    refreshHelp() {
                        this.shadowRoot.querySelector(':host > div')
                            .classList
                                .toggle('no-help', this.hasAttribute('no-help'));
                    }
                    attributeChangedCallback (name, oldValue, newValue) {
                        this.refreshHelp()
                     }
                     }


Zeile 238: Zeile 243:
                         });
                         });
                         this.observer.observe(this, {childList: true});
                         this.observer.observe(this, {childList: true});


                         // Add event listener for memory selector
                         // Add event listener for memory selector
                         const memorySelector = this.shadowRoot.getElementById('memory-selector');
                         const memorySelector = this.shadowRoot.getElementById('memory-selector');
                         memorySelector.addEventListener('change', () => {
                         memorySelector.addEventListener('click', (e) => {
                             const selectedValue = memorySelector.value;
                             const selectedValue = e.target.value;
                             // Load program from khc-memory elements
                             // Load program from khc-memory elements
                             const index = parseInt(selectedValue);
                             const index = parseInt(selectedValue);
Zeile 248: Zeile 254:
                                 this.loadMemoryConfiguration(this.memoryConfigurations[index]);
                                 this.loadMemoryConfiguration(this.memoryConfigurations[index]);
                             }
                             }
                            e.preventDefault();
                         });
                         });


                         // Set the initial selection in the memory selector
                         this.refreshMemoryConfigurations();
                         memorySelector.value = '0';
                         this.refreshHelp();
                     }
                     }


Zeile 290: Zeile 297:
                     refreshMemorySelector(memoryConfigurations) {
                     refreshMemorySelector(memoryConfigurations) {
                         const memorySelector = this.shadowRoot.getElementById('memory-selector');
                         const memorySelector = this.shadowRoot.getElementById('memory-selector');
                         while (memorySelector.childNodes.length) {
                         memorySelector.querySelectorAll('button').forEach(button => memorySelector.removeChild(button));
                            memorySelector.removeChild(memorySelector.firstChild);
                        }
                         // Add options for each memory configuration
                         // Add options for each memory configuration
                         memoryConfigurations.forEach((config, index) => {
                         memoryConfigurations.forEach((config, index) => {
                             const option = document.createElement('option');
                             const button = document.createElement('button');
                             option.value = (index).toString();
                             button.value = (index).toString();
                             option.textContent = config.name;
                             button.textContent = config.name;
                             memorySelector.appendChild(option);
                            button.type = 'button';
                             memorySelector.appendChild(button);
                         });
                         });
                     }
                     }
Zeile 719: Zeile 725:
                 customElements.define('khc-memory', KhcMemoryElement, {extends: 'pre'});
                 customElements.define('khc-memory', KhcMemoryElement, {extends: 'pre'});
             }
             }
})();
</script>


<know-how-computer></know-how-computer>
 
            // Initialize when the DOM is loaded
            document.addEventListener('DOMContentLoaded', function () {
                // For MediaWiki gadget, this would be the initialization code
                // No need to do anything here as the custom element will initialize itself when added to the DOM
            });
        })();
    </script>
<know-how-computer <!-- {$noHelp|validate:boolean ? 'no-help' : ''} --> >
<!-- {if $param1|default:false} -->
<khc-memory><!-- {$param1|escape"htmlall} --></khc-memory>
<!-- {/if} -->
</know-how-computer>
</includeonly>

Version vom 8. Juni 2025, 13:44 Uhr

Abgerufen von „https://unterrichten.zum.de/index.php?title=Widget:KnowHowComputer&oldid=141575“