https://clementgodbarge.com/sv/tag/interaktiv/InteraktivHugoBlox Kit (https://hugoblox.com)sv-seThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/sv/tag/interaktiv/https://clementgodbarge.com/sv/code/baudot-emulator/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/sv/code/baudot-emulator/<p>Den här ITA2-emulatorn är ett handfast hjälpmedel i undervisningen: den gör abstrakta kodningsbegrepp synliga och interaktiva. När studenterna skriver in text och genast ser den förvandlas till hålmönster lär de sig flera av datorteknikens och telekommunikationens nyckelbegrepp.</p> <h2 id="pedagogisk-nytta">Pedagogisk nytta</h2> <p>För det första åskådliggör den binär representation – hur text blir mönster av ettor och nollor. Det brukar vi lära ut abstrakt, men när hålen faktiskt dyker upp blir det lättare att begripa hur fysiska system kan bära digital information.</p> <div class="baudot-emulator"> <h2>ITA2 (Baudot-Murray) Telegraph Type Emulator</h2> <p>Type a word in the input below to see its representation on the ITA2 tape.</p> <div class="baudot-controls"> <label for="baudot-input">Type word:</label> <input id="baudot-input" class="text-input" size="50" maxlength="50" /> <button type="button" id="baudot-ltr-button" class="control-button active">LTR</button> <button type="button" id="baudot-fig-button" class="control-button">FIG</button> </div> <div class="tape-outer-container"> <div class="tape-container"> <table> <tbody id="baudot-tape"></tbody> </table> </div> </div> <style> .baudot-emulator { --light-color: #f3f4f6; --dark-color: #1f2937; --light-alt-color: #e5e7eb; --dark-alt-color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; max-width: 100%; margin: 2rem 0; padding: 0; box-sizing: border-box; } .baudot-emulator { --tape-bg: var(--light-color); --hole-bg: var(--light-color); --hole-border: #d1d5db; --punched-bg: var(--dark-color); --punched-border: var(--dark-color); --sprocket-bg: var(--light-color); --sprocket-border: #9ca3af; --button-bg: var(--light-color); --button-bg-active: #d1d5db; --button-text: var(--dark-color); --button-border: #d1d5db; --input-bg: white; --input-border: #d1d5db; --input-text: var(--dark-color); --line-number: #6b7280; } html.dark .baudot-emulator, html[data-theme='dark'] .baudot-emulator, body.dark .baudot-emulator { --tape-bg: var(--dark-alt-color); --hole-bg: var(--dark-alt-color); --hole-border: #4b5563; --punched-bg: var(--light-color); --punched-border: var(--light-color); --sprocket-bg: var(--dark-alt-color); --sprocket-border: #9ca3af; --button-bg: var(--dark-alt-color); --button-bg-active: #4b5563; --button-text: var(--light-color); --button-border: #4b5563; --input-bg: var(--dark-alt-color); --input-border: #4b5563; --input-text: var(--light-color); --line-number: #9ca3af; } .baudot-controls { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .baudot-emulator .text-input { flex: 1; min-width: 200px; padding: 0.5rem; font-size: 1rem; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--input-text); } .baudot-emulator .control-button { padding: 0.5rem 1rem; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--button-border); border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .baudot-emulator .control-button.active { background: var(--button-bg-active); font-weight: bold; } .tape-outer-container { padding: 0; margin-bottom: 1.5rem; border-radius: 4px; overflow: hidden; } .tape-container { width: 100%; overflow-x: auto; background: var(--tape-bg); padding: 1rem 0.5rem; } .baudot-emulator table { border-collapse: collapse; width: 100%; table-layout: fixed; border: none; } .baudot-emulator tr { height: 24px; border: none; } .baudot-emulator td { border: none; padding: 0; } .baudot-emulator .line-number { width: 20px; text-align: center; color: var(--line-number); font-size: 0.8rem; padding: 0 8px 0 0; font-weight: bold; } .baudot-emulator .cell { position: relative; width: 20px; height: 20px; } .baudot-emulator .cell-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--hole-bg); border: 1px solid var(--hole-border); } .baudot-emulator .punched .cell-content { background: var(--punched-bg); border: 1px solid var(--punched-border); } .baudot-emulator .sprocket-hole { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: var(--sprocket-bg); border: 1px solid var(--sprocket-border); z-index: 2; } </style> <script> document.addEventListener('DOMContentLoaded', function() { initBaudotEmulator(); }); function initBaudotEmulator() { if (!document.getElementById('baudot-input')) return; const textInput = document.getElementById('baudot-input'); const tape = document.getElementById('baudot-tape'); const ltrButton = document.getElementById('baudot-ltr-button'); const figButton = document.getElementById('baudot-fig-button'); const ita2Code = { 'A': '00011', 'B': '11001', 'C': '01110', 'D': '01001', 'E': '00001', 'F': '01101', 'G': '11010', 'H': '10100', 'I': '00110', 'J': '01011', 'K': '01111', 'L': '10010', 'M': '11100', 'N': '01100', 'O': '11000', 'P': '10110', 'Q': '10111', 'R': '01010', 'S': '00101', 'T': '10000', 'U': '00111', 'V': '11110', 'W': '10011', 'X': '11101', 'Y': '10101', 'Z': '10001', '1': '00011', '2': '11001', '3': '01110', '4': '01001', '5': '00001', '6': '01101', '7': '11010', '8': '10100', '9': '01011', '0': '11000', '-': '00011', '?': '00100', ':': '01010', '(': '11000', ')': '11101', '.': '01000', ',': '00010', "'": '10001', '=': '01111', '/': '10011', '+': '11011', ' ': '00100', 'FIG': '11011', 'LTR': '11111', }; function generateTape() { let rows = ''; for (let row = 0; row < 5; row++) { rows += '<tr>'; rows += `<td class="line-number">${row + 1}</td>`; for (let col = 0; col < 50; col++) { rows += `<td id="baudot_${row}_${col}" class="cell unpunched"> <div class="cell-content"></div> ${row === 2 ? '<div class="sprocket-hole"></div>' : ''} </td>`; } rows += '</tr>'; } tape.innerHTML = rows; } function updateITA2Code(word) { clearTape(); word = word.toUpperCase(); let tapePosition = 0; let currentCharType = 'LTR'; ltrButton.classList.add('active'); figButton.classList.remove('active'); for (let i = 0; i < word.length; i++) { const char = word[i]; let code = ita2Code[char] || ita2Code[' ']; let requiredCharType = /[A-Z ]/.test(char) ? 'LTR' : 'FIG'; if (requiredCharType !== currentCharType) { const shiftCode = requiredCharType === 'LTR' ? ita2Code['LTR'] : ita2Code['FIG']; punchTape(shiftCode, tapePosition++); currentCharType = requiredCharType; ltrButton.classList.toggle('active', currentCharType === 'LTR'); figButton.classList.toggle('active', currentCharType === 'FIG'); } punchTape(code, tapePosition++); } } function punchTape(code, tapePosition) { if (tapePosition >= 50) return; for (let bit = 0; bit < 5; bit++) { const cell = document.getElementById(`baudot_${bit}_${tapePosition}`); if (cell) { cell.className = code[bit] === '1' ? 'cell punched' : 'cell unpunched'; } } } function clearTape() { for (let i = 0; i < 50; i++) { for (let bit = 0; bit < 5; bit++) { const cell = document.getElementById(`baudot_${bit}_${i}`); if (cell) { cell.className = 'cell unpunched'; } } } } generateTape(); textInput.addEventListener('input', function() { updateITA2Code(this.value); }); ltrButton.addEventListener('click', function() { this.classList.add('active'); figButton.classList.remove('active'); if (textInput.value) { updateITA2Code(textInput.value); } }); figButton.addEventListener('click', function() { this.classList.add('active'); ltrButton.classList.remove('active'); if (textInput.value) { updateITA2Code(textInput.value); } }); if (textInput.value) { updateITA2Code(textInput.value); } } </script> </div> <p>Skiftmekanismen mellan BOKSTÄVER och SIFFROR (LETTERS/FIGURES) är en naturlig ingång till tillståndsmaskiner. Genom att pröva sig fram upptäcker studenterna att samma mönster kan stå för olika tecken beroende på vilket läge apparaten befinner sig i. Den praktiska erfarenheten av tillståndsberoende kodning förbereder dem för mer avancerade datavetenskapliga begrepp.</p> <h2 id="teknisk-utformning">Teknisk utformning</h2> <p>Emulatorn är skriven i JavaScript och HTML/CSS och kan därför enkelt bäddas in på vilken webbsida som helst. Koden är modulär och kan anpassas till olika undervisningssammanhang.</p> <p>Källkoden finns i , där du också kan pröva emulatorn själv.</p>