Liebe Schülerinnen und Schüler,
hier findet ihr Online-Kurse zu unterschiedlichen Themen.
Viel Spaß damit!
Binärsystem interaktiv lernen
https://cdn.tailwindcss.com
.bit-box {
transition: all 0.2s;
cursor: pointer;
user-select: none;
}
.bit-box.active {
background-color: #3b82f6; /* blue-500 */
color: white;
border-color: #2563eb; /* blue-600 */
}
.bit-box.inactive {
background-color: #f3f4f6; /* gray-100 */
color: #374151; /* gray-700 */
border-color: #d1d5db; /* gray-300 */
}
.input-correct {
background-color: #dcfce7 !important; /* green-100 */
border-color: #22c55e !important; /* green-500 */
color: #166534 !important; /* green-800 */
}
.input-wrong {
background-color: #fee2e2 !important; /* red-100 */
border-color: #ef4444 !important; /* red-500 */
color: #991b1b !important; /* red-800 */
}
input {
transition: background-color 0.3s, border-color 0.3s;
}
/* Neue Tab-Styles */
.tab-btn {
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
Das Binärsystem
Dezimalsystem und Binärsystem verstehen und rechnen
Einführung
Wir zählen und rechnen im Dezimalsystem (übersetzt „10er-System“).
Z.B.: 23 + 34 = 57
Doch ein Computer kann nur mit Strom rechnen, also mit „Strom an“ (1) oder „Strom aus“ (0), es gibt also nur zwei Zustände, 0 und 1. Dieses wird als Binärsystem bezeichnet.
Bits und Bytes: Die Bausteine des Computers
Ein einzelner Zustand, der nur 0 oder 1 sein kann, nennt man ein Bit. Es ist das allerkleinste Stückchen Information, das ein Computer kennt.
Wenn sich 8 Bits zusammentun, nennt man diese Gruppe ein Byte. Ein Byte kann Zahlen von 0 bis 255 darstellen. Der Konverter hier drunter zeigt genau so ein Byte! Probier es aus:
Interaktiver Konverter: 1 Byte darstellen
Klicke auf die Boxen (0 oder 1), um den „Strom“ der einzelnen Bits ein- oder auszuschalten. Beobachte, wie sich die Dezimalzahl berechnet.
128
64
32
16
8
4
2
1
Buchstaben im Geheimcode: Die ASCII-Tabelle
Du fragst dich vielleicht: Wie kann der Computer Texte schreiben, wenn er nur Zahlen kennt?
Dafür haben sich schlaue Leute einen Geheimcode ausgedacht! Es gibt eine riesige Liste namens ASCII-Tabelle. In dieser Tabelle hat jeder Buchstabe und jedes Satzzeichen eine eigene Nummer.
Zum Beispiel: Die Zahl 65 ist der Buchstabe ‚A‘.
Probier es aus: Klicke im Konverter oben die Felder so an, dass das Ergebnis 65 herauskommt. Wenn ein Computer diese Kombination (01000001) in seinem Speicher hat, weiß er sofort: „Aha! Ich soll ein A auf den Bildschirm malen!“
Aufgabe 1: Umwandeln
Wandel die Zahlen in der Tabelle ins andere System um. Trage die fehlenden Werte ein.
| 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 | Dezimal |
|---|
// — Tab Navigation —
function openTab(tabId) {
document.querySelectorAll(‚.tab-content‘).forEach(el => el.classList.add(‚hidden‘));
document.querySelectorAll(‚.tab-btn‘).forEach(btn => {
btn.classList.remove(‚border-blue-600‘, ‚text-blue-600‘, ‚bg-gray-50‘);
btn.classList.add(‚border-transparent‘, ‚text-gray-500‘);
});
document.getElementById(tabId).classList.remove(‚hidden‘);
const activeBtn = document.getElementById(‚btn-‚ + tabId);
activeBtn.classList.remove(‚border-transparent‘, ‚text-gray-500‘);
activeBtn.classList.add(‚border-blue-600‘, ‚text-blue-600‘, ‚bg-gray-50‘);
}
// — Interaktiver Konverter —
const bitBoxes = document.querySelectorAll(‚.bit-box‘);
const decimalResult = document.getElementById(‚decimal-result‘);
const calcPath = document.getElementById(‚calc-path‘);
bitBoxes.forEach(box => {
box.addEventListener(‚click‘, () => {
if (box.textContent === ‚0‘) {
box.textContent = ‚1‘;
box.classList.remove(‚inactive‘);
box.classList.add(‚active‘);
} else {
box.textContent = ‚0‘;
box.classList.remove(‚active‘);
box.classList.add(‚inactive‘);
}
updateConverter();
});
});
function updateConverter() {
let sum = 0;
let path = [];
bitBoxes.forEach(box => {
if (box.textContent === ‚1‘) {
const val = parseInt(box.getAttribute(‚data-val‘));
sum += val;
path.push(val);
}
});
decimalResult.textContent = sum;
calcPath.textContent = path.length > 0 ? path.join(‚ + ‚) + ‚ = ‚ + sum : „0 = 0″;
}
// — Berechnet die korrekte Übertrags-Reihe —
function getCarry(t1, t2, isSub, maxLen) {
let c = 0;
let carryArr = new Array(maxLen).fill(‚0‘);
let t1P = t1.padStart(maxLen, ‚0‘);
let t2P = t2.padStart(maxLen, ‚0‘);
for (let i = maxLen – 1; i >= 0; i–) {
let b1 = parseInt(t1P[i]);
let b2 = parseInt(t2P[i]);
if (!isSub) {
let sum = b1 + b2 + c;
c = sum > 1 ? 1 : 0;
} else {
let sub = b1 – b2 – c;
c = sub 0) carryArr[i-1] = c.toString();
}
return carryArr.join(“);
}
// — Aufgabe 1 Daten & Render —
const ex1Data = [
{ bin: „01000001“, dec: 65, missing: ‚dec‘ },
{ bin: „10110010“, dec: 178, missing: ‚dec‘ },
{ bin: „01010101“, dec: 85, missing: ‚dec‘ },
{ bin: „11111111“, dec: 255, missing: ‚dec‘ },
{ bin: „10000111“, dec: 135, missing: ‚dec‘ },
{ bin: „11001011“, dec: 203, missing: ‚bin‘ },
{ bin: „01100011“, dec: 99, missing: ‚bin‘ },
{ bin: „11100001“, dec: 225, missing: ‚bin‘ },
{ bin: „10110010“, dec: 178, missing: ‚bin‘ },
{ bin: „00100101“, dec: 37, missing: ‚bin‘ }
];
const ex1Body = document.getElementById(‚ex1-body‘);
ex1Data.forEach((row, index) => {
const tr = document.createElement(‚tr‘);
tr.className = index % 2 === 0 ? „bg-white“ : „bg-gray-50″;
if (row.missing === ‚dec‘) {
let tdHtml = “;
for (let char of row.bin) {
tdHtml += `
`;
}
tdHtml += `
`;
tr.innerHTML = tdHtml;
} else {
let tdHtml = “;
for (let i = 0; i < 8; i++) {
tdHtml += `
`;
}
tdHtml += `
`;
tr.innerHTML = tdHtml;
}
ex1Body.appendChild(tr);
});
function checkExercise1() {
ex1Data.forEach((row, index) => {
if (row.missing === ‚dec‘) {
checkInput(document.getElementById(`ex1-dec-${index}`));
} else {
for (let i = 0; i {
const maxLen = Math.max(task.t1.length, task.t2.length, task.ans.length);
const t1Padded = task.t1.padStart(maxLen, ‚ ‚);
const t2Padded = task.t2.padStart(maxLen, ‚ ‚);
const ansPadded = task.ans.padStart(maxLen, ‚0‘);
const carryStr = getCarry(task.t1, task.t2, isSub, maxLen);
let html = `
`; // spacer
for(let i=0; i<maxLen; i++) html += `
`;
html += `
`;
for(let i=0; i<maxLen; i++) html += `
`;
html += `
`;
for(let i=0; i<maxLen; i++) {
html += „;
}
html += `
`; // spacer
for(let i=0; i<maxLen; i++) {
html += „;
}
html += `
`;
container.innerHTML += html;
});
}
function checkVerticalExercise(data, prefix) {
data.forEach(task => {
const maxLen = Math.max(task.t1.length, task.t2.length, task.ans.length);
for(let i=0; i {
const maxLen = task.bAns.length;
const b1Padded = task.b1.padStart(maxLen, ‚0‘);
const b2Padded = task.b2.padStart(maxLen, ‚0‘);
const ansPadded = task.bAns;
const carryStr = getCarry(task.b1, task.b2, isSub, maxLen);
let html = `
`; // spacer
for(let i=0; i<maxLen; i++) {
const lz = (i < maxLen – task.b1.length) ? 'true' : 'false';
html += „;
}
html += `
`;
for(let i=0; i<maxLen; i++) {
const lz = (i < maxLen – task.b2.length) ? 'true' : 'false';
html += „;
}
html += `
`;
for(let i=0; i<maxLen; i++) {
html += „;
}
html += `
`; // spacer
for(let i=0; i<maxLen; i++) {
html += „;
}
html += `
`;
container.innerHTML += html;
});
}
function checkVerticalKombi(data, prefix) {
data.forEach(task => {
const maxLen = task.bAns.length;
for(let i=0; i<maxLen; i++) {
checkInput(document.getElementById(`${prefix}-${task.id}-b1-${i}`));
checkInput(document.getElementById(`${prefix}-${task.id}-b2-${i}`));
checkInput(document.getElementById(`${prefix}-${task.id}-carry-${i}`));
checkInput(document.getElementById(`${prefix}-${task.id}-ans-${i}`));
}
});
}
// — Daten für die Aufgaben —
const ex2Data = [
{ id: 'a', t1: "101101", t2: "001101", ans: "111010" },
{ id: 'b', t1: "00110", t2: "11001", ans: "11111" },
{ id: 'c', t1: "11111", t2: "00001", ans: "100000" },
{ id: 'd', t1: "100110", t2: "011101", ans: "1000011" },
{ id: 'e', t1: "1100001", t2: "1001100", ans: "10101101" },
{ id: 'f', t1: "1000001", t2: "0110001", ans: "1110010" }
];
const ex3Data = [
{ id: 'a', d1: 7, d2: 2, b1: "111", b2: "10", bAns: "1001" },
{ id: 'b', d1: 13, d2: 8, b1: "1101", b2: "1000", bAns: "10101" },
{ id: 'c', d1: 22, d2: 10, b1: "10110", b2: "1010", bAns: "100000" },
{ id: 'd', d1: 56, d2: 30, b1: "111000", b2: "11110", bAns: "1010110" },
{ id: 'e', d1: 100, d2: 25, b1: "1100100", b2: "11001", bAns: "1111101" },
{ id: 'f', d1: 43, d2: 26, b1: "101011", b2: "11010", bAns: "1000101" }
];
const ex4Data = [
{ id: 'a', t1: "1101", t2: "0101", ans: "1000" },
{ id: 'b', t1: "1010", t2: "0011", ans: "0111" },
{ id: 'c', t1: "11000", t2: "01101", ans: "01011" },
{ id: 'd', t1: "100110", t2: "010101", ans: "010001" }
];
const ex5Data = [
{ id: 'a', d1: 15, d2: 5, b1: "1111", b2: "0101", bAns: "1010" },
{ id: 'b', d1: 25, d2: 12, b1: "11001", b2: "01100", bAns: "01101" },
{ id: 'c', d1: 42, d2: 18, b1: "101010", b2: "010010", bAns: "011000" },
{ id: 'd', d1: 60, d2: 25, b1: "111100", b2: "011001", bAns: "100011" }
];
// — Initialisierung & Prüfung —
createVerticalExercise('ex2-container', ex2Data, 'ex2', false);
function checkExercise2() { checkVerticalExercise(ex2Data, 'ex2'); }
createVerticalKombi('ex3-container', ex3Data, 'ex3', false);
function checkExercise3() { checkVerticalKombi(ex3Data, 'ex3'); }
createVerticalExercise('ex4-container', ex4Data, 'ex4', true);
function checkExercise4() { checkVerticalExercise(ex4Data, 'ex4'); }
createVerticalKombi('ex5-container', ex5Data, 'ex5', true);
function checkExercise5() { checkVerticalKombi(ex5Data, 'ex5'); }
// Allgemeine Check-Funktion für einzelne Felder
function checkInput(inputElement) {
if (!inputElement) return;
const expected = inputElement.getAttribute('data-answer');
const isLz = inputElement.getAttribute('data-lz') === 'true';
const val = inputElement.value.trim();
if (val === "") {
// Bei "führenden Nullen" oder wenn der Übertrag sowieso 0 ist,
// ist es nicht zwingend falsch, das Feld leer zu lassen.
if (isLz || (inputElement.id.includes('carry') && expected === '0')) {
inputElement.classList.remove('input-wrong', 'input-correct');
}
return;
}
if (val === expected) {
inputElement.classList.remove('input-wrong');
inputElement.classList.add('input-correct');
} else {
inputElement.classList.remove('input-correct');
inputElement.classList.add('input-wrong');
}
}
E-Lerning 