Wissenschaftlicher Taschenrechner – carlos.web<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --bg-color: #faf9f7;\n --calc-bg: #ffffff;\n --text-primary: #111111;\n --text-secondary: #555555;\n --text-hover: #888888;\n --btn-bg: #f4f3f0;\n --btn-bg-hover: #e8e6e1;\n --btn-op-bg: #eae8e3;\n --btn-accent: #111111;\n --btn-accent-hover: #333333;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --radius: 16px;\n --btn-radius: 8px;\n --transition: 0.2s ease;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-primary);\n font-family: var(--font-sans);\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 20px;\n }\n\n header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .site-title {\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 30px;\n color: var(--text-secondary);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n h1 {\n font-family: var(--font-serif);\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 400;\n margin-bottom: 10px;\n }\n\n .hero-icon {\n font-size: 1.2rem;\n color: var(--text-secondary);\n }\n\n .calculator {\n background-color: var(--calc-bg);\n width: 100%;\n max-width: 420px;\n border-radius: var(--radius);\n padding: 30px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n }\n\n .display {\n background-color: var(--bg-color);\n border-radius: var(--btn-radius);\n padding: 20px;\n margin-bottom: 25px;\n text-align: right;\n min-height: 90px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n overflow: hidden;\n }\n\n .expression {\n font-family: var(--font-sans);\n color: var(--text-secondary);\n font-size: 0.9rem;\n min-height: 1.2rem;\n margin-bottom: 5px;\n letter-spacing: 0.05em;\n word-wrap: break-word;\n }\n\n .result {\n font-family: var(--font-serif);\n font-size: 2.5rem;\n color: var(--text-primary);\n line-height: 1;\n word-wrap: break-word;\n }\n\n .keypad {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 10px;\n }\n\n button {\n font-family: var(--font-sans);\n font-size: 1.1rem;\n font-weight: 400;\n color: var(--text-primary);\n background-color: var(--btn-bg);\n border: none;\n border-radius: var(--btn-radius);\n padding: 15px 10px;\n cursor: pointer;\n transition: background-color var(--transition), transform 0.1s;\n user-select: none;\n }\n\n button:active {\n transform: scale(0.96);\n }\n\n button:hover {\n background-color: var(--btn-bg-hover);\n }\n\n .btn-sci {\n font-size: 0.95rem;\n color: var(--text-secondary);\n background-color: transparent;\n border: 1px solid var(--btn-bg-hover);\n }\n\n .btn-sci:hover {\n background-color: var(--btn-bg);\n }\n\n .btn-op {\n background-color: var(--btn-op-bg);\n font-weight: 500;\n }\n\n .btn-op:hover {\n background-color: #dfdbd2;\n }\n\n .btn-action {\n color: #d33;\n font-weight: 500;\n }\n\n .btn-equals {\n background-color: var(--btn-accent);\n color: white;\n font-weight: 500;\n }\n\n .btn-equals:hover {\n background-color: var(--btn-accent-hover);\n }\n\n .btn-zero {\n grid-column: span 2;\n }\n\n @media (max-width: 480px) {\n .calculator {\n padding: 20px;\n }\n button {\n padding: 12px 5px;\n font-size: 1rem;\n }\n .btn-sci {\n font-size: 0.85rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Calculator<\/h1>\n <div class=\"hero-icon\">\u2733<\/div>\n <\/header>\n\n <main class=\"calculator\">\n <div class=\"display\">\n <div class=\"expression\" id=\"expression\"><\/div>\n <div class=\"result\" id=\"result\">0<\/div>\n <\/div>\n\n <div class=\"keypad\">\n \n <button class=\"btn-sci\" onclick=\"appendFn('sin(')\">sin<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('cos(')\">cos<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('tan(')\">tan<\/button>\n <button class=\"btn-sci btn-action\" onclick=\"clearAll()\">AC<\/button>\n <button class=\"btn-sci btn-action\" onclick=\"deleteLast()\">DEL<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendFn('log(')\">log<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('ln(')\">ln<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('sqrt(')\">\u221a<\/button>\n <button class=\"btn-sci\" onclick=\"appendVal('(')\">(<\/button>\n <button class=\"btn-sci\" onclick=\"appendVal(')')\">)<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('\u03c0')\">\u03c0<\/button>\n <button onclick=\"appendVal('7')\">7<\/button>\n <button onclick=\"appendVal('8')\">8<\/button>\n <button onclick=\"appendVal('9')\">9<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('\/')\">\u00f7<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('e')\">e<\/button>\n <button onclick=\"appendVal('4')\">4<\/button>\n <button onclick=\"appendVal('5')\">5<\/button>\n <button onclick=\"appendVal('6')\">6<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('*')\">\u00d7<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('^')\">x\u02b8<\/button>\n <button onclick=\"appendVal('1')\">1<\/button>\n <button onclick=\"appendVal('2')\">2<\/button>\n <button onclick=\"appendVal('3')\">3<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('-')\">\u2212<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendAns()\">ans<\/button>\n <button onclick=\"appendVal('0')\">0<\/button>\n <button onclick=\"appendVal('.')\">.<\/button>\n <button class=\"btn-equals\" onclick=\"calculate()\">=<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('+')\">+<\/button>\n <\/div>\n <\/main>\n\n <script>\n const expressionEl = document.getElementById('expression');\n const resultEl = document.getElementById('result');\n \n let currentExpr = '';\n let lastAns = '';\n let shouldResetResult = false;\n\n function updateDisplay() {\n \/\/ Replace operators for visual display\n let visualExpr = currentExpr\n .replace(\/\\*\/g, '\u00d7')\n .replace(\/\\\/\/g, '\u00f7')\n .replace(\/-\/g, '\u2212');\n expressionEl.innerText = visualExpr;\n }\n\n function appendVal(val) {\n if (shouldResetResult && !['+', '-', '*', '\/', '^'].includes(val)) {\n currentExpr = '';\n resultEl.innerText = '0';\n }\n shouldResetResult = false;\n currentExpr += val;\n updateDisplay();\n }\n\n function appendFn(fn) {\n if (shouldResetResult) {\n currentExpr = '';\n resultEl.innerText = '0';\n }\n shouldResetResult = false;\n currentExpr += fn;\n updateDisplay();\n }\n\n function appendAns() {\n if (lastAns !== '') {\n appendVal(lastAns);\n }\n }\n\n function clearAll() {\n currentExpr = '';\n resultEl.innerText = '0';\n updateDisplay();\n }\n\n function deleteLast() {\n if (shouldResetResult) {\n expressionEl.innerText = '';\n shouldResetResult = false;\n return;\n }\n \n if (currentExpr.endsWith('sin(') || currentExpr.endsWith('cos(') || currentExpr.endsWith('tan(') || currentExpr.endsWith('log(')) {\n currentExpr = currentExpr.slice(0, -4);\n } else if (currentExpr.endsWith('ln(')) {\n currentExpr = currentExpr.slice(0, -3);\n } else if (currentExpr.endsWith('sqrt(')) {\n currentExpr = currentExpr.slice(0, -5);\n } else {\n currentExpr = currentExpr.slice(0, -1);\n }\n \n if (currentExpr === '') {\n resultEl.innerText = '0';\n }\n updateDisplay();\n }\n\n function calculate() {\n if (currentExpr === '') return;\n\n try {\n let evalExpr = currentExpr\n .replace(\/\u00d7\/g, '*')\n .replace(\/\u00f7\/g, '\/')\n .replace(\/\u2212\/g, '-')\n .replace(\/\u03c0\/g, 'Math.PI')\n .replace(\/e\/g, 'Math.E')\n .replace(\/sin\$\/g, 'Math.sin(')\n .replace(\/cos\\(\/g, 'Math.cos(')\n .replace(\/tan\\(\/g, 'Math.tan(')\n .replace(\/log\\(\/g, 'Math.log10(')\n .replace(\/ln\\(\/g, 'Math.log(')\n .replace(\/sqrt\\(\/g, 'Math.sqrt(')\n .replace(\/\\^\/g, '**');\n\n let openParens = (evalExpr.match(\/\\(\/g) || []).length;\n let closeParens = (evalExpr.match(\/\$\/g) || []).length;\n while (openParens > closeParens) {\n evalExpr += ')';\n closeParens++;\n }\n\n let result = new Function('return ' + evalExpr)();\n \n if (!isFinite(result) || isNaN(result)) {\n throw new Error(\"Invalid\");\n }\n\n \/\/ Format to avoid long decimals like 0.30000000000000004\n result = parseFloat(result.toFixed(10));\n \n resultEl.innerText = result;\n lastAns = result;\n shouldResetResult = true;\n\n } catch (error) {\n resultEl.innerText = 'Error';\n shouldResetResult = true;\n }\n }\n\n \/\/ Keyboard support\n document.addEventListener('keydown', (e) => {\n const key = e.key;\n if (\/[0-9\\.\\+\\-\\*\\\/\$\$]\/.test(key)) {\n e.preventDefault();\n appendVal(key);\n } else if (key === 'Enter' || key === '=') {\n e.preventDefault();\n calculate();\n } else if (key === 'Backspace') {\n e.preventDefault();\n deleteLast();\n } else if (key === 'Escape') {\n e.preventDefault();\n clearAll();\n } else if (key === '^') {\n e.preventDefault();\n appendVal('^');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --bg-color: #faf9f7;\n --calc-bg: #ffffff;\n --text-primary: #111111;\n --text-secondary: #555555;\n --text-hover: #888888;\n --btn-bg: #f4f3f0;\n --btn-bg-hover: #e8e6e1;\n --btn-op-bg: #eae8e3;\n --btn-accent: #111111;\n --btn-accent-hover: #333333;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --radius: 16px;\n --btn-radius: 8px;\n --transition: 0.2s ease;\n --shadow: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n }\n\n html, body {\n margin: 0;\n padding: 0;\n background-color: var(--bg-color);\n min-height: 100%;\n width: 100%;\n overflow-x: hidden;\n }\n\n .trainer-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n width: 100%;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .trainer-header {\n text-align: center;\n margin-bottom: 30px;\n width: 100%;\n max-width: 400px;\n }\n\n .trainer-header h1 {\n font-family: var(--font-serif);\n font-size: clamp(2rem, 5vw, 2.8rem);\n font-weight: 400;\n margin: 0 0 5px 0;\n color: var(--text-primary);\n line-height: 1.1;\n }\n\n .trainer-header .hero-icon {\n font-size: 1.1rem;\n color: var(--text-secondary);\n }\n\n .wp-it-trainer {\n background-color: var(--calc-bg);\n width: 100%;\n max-width: 400px;\n border-radius: var(--radius);\n padding: 25px;\n box-shadow: var(--shadow);\n font-family: var(--font-sans);\n color: var(--text-primary);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n }\n\n .wp-progress-section {\n margin-bottom: 20px;\n }\n\n .wp-progress-wrapper {\n background-color: var(--bg-color);\n height: 6px;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .wp-progress-bar {\n height: 100%;\n background-color: var(--btn-accent);\n width: 0%;\n transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .wp-stats-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .wp-stat-box {\n background-color: var(--btn-bg);\n padding: 10px 5px;\n border-radius: var(--btn-radius);\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .wp-stat-label {\n font-size: 0.6rem;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 2px;\n }\n\n .wp-stat-value {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 1;\n }\n\n .wp-display {\n background-color: var(--bg-color);\n border-radius: var(--btn-radius);\n padding: 20px;\n margin-bottom: 20px;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n\n .wp-category {\n font-size: 0.7rem;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-bottom: 8px;\n }\n\n .wp-question-text {\n font-family: var(--font-sans);\n font-size: 1.05rem;\n line-height: 1.4;\n color: var(--text-primary);\n font-weight: 500;\n }\n\n .wp-input {\n width: 100%;\n padding: 14px;\n border: none;\n background-color: var(--btn-bg);\n border-radius: var(--btn-radius);\n font-family: var(--font-sans);\n font-size: 1rem;\n text-align: center;\n margin-bottom: 12px;\n color: var(--text-primary);\n transition: var(--transition);\n box-sizing: border-box;\n }\n\n .wp-input:focus {\n outline: none;\n background-color: var(--btn-bg-hover);\n }\n\n .wp-btn-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .wp-btn {\n padding: 14px;\n border: none;\n border-radius: var(--btn-radius);\n font-family: var(--font-sans);\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .wp-btn-primary {\n background-color: var(--btn-accent);\n color: white;\n }\n\n .wp-btn-primary:hover {\n background-color: var(--btn-accent-hover);\n }\n\n .wp-btn-secondary {\n background-color: var(--btn-op-bg);\n color: var(--text-primary);\n }\n\n .wp-btn-secondary:hover {\n background-color: #dfdbd2;\n }\n\n .wp-feedback-container {\n min-height: 45px;\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .wp-feedback {\n width: 100%;\n padding: 10px;\n border-radius: var(--btn-radius);\n font-size: 0.85rem;\n text-align: center;\n display: none;\n animation: fadeIn 0.3s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(5px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .wp-correct { background-color: #f0fdf4; color: #166534; }\n .wp-wrong { background-color: #fef2f2; color: #991b1b; }\n\n .wp-status {\n font-size: 0.6rem;\n color: var(--text-hover);\n text-align: center;\n margin-top: 15px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"trainer-wrapper\">\n <header class=\"trainer-header\">\n <h1>Trainer<\/h1>\n <div class=\"hero-icon\">\u2733<\/div>\n <\/header>\n\n <main class=\"wp-it-trainer\">\n <div class=\"wp-progress-section\">\n <div class=\"wp-progress-wrapper\">\n <div id=\"progBar\" class=\"wp-progress-bar\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-stats-grid\">\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Lvl<\/span>\n <span id=\"lvlVal\" class=\"wp-stat-value\">1<\/span>\n <\/div>\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Score<\/span>\n <span id=\"scoreVal\" class=\"wp-stat-value\">0<\/span>\n <\/div>\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Serie<\/span>\n <span id=\"streakVal\" class=\"wp-stat-value\">0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"wp-display\">\n <div id=\"catText\" class=\"wp-category\">Lade…<\/div>\n <div id=\"qText\" class=\"wp-question-text\">Bereit?<\/div>\n <\/div>\n\n <input type=\"text\" id=\"ansInput\" class=\"wp-input\" placeholder=\"Antwort...\" autocomplete=\"off\">\n\n <div class=\"wp-btn-row\">\n <button id=\"checkBtn\" class=\"wp-btn wp-btn-primary\">Pr\u00fcfen<\/button>\n <button id=\"nextBtn\" class=\"wp-btn wp-btn-secondary\">N\u00e4chste<\/button>\n <\/div>\n\n <div class=\"wp-feedback-container\">\n <div id=\"fb\" class=\"wp-feedback\"><\/div>\n <\/div>\n \n <div class=\"wp-status\">System: Aktiv<\/div>\n <\/main>\n<\/div>\n\n<script type=\"module\">\n \/\/ Fragenkatalog mit 8-Bit Formatierung\n const questions = [\n { cat: \"Zahlensysteme\", q: \"Wandle 123 in eine 8-Bit Dualzahl um.\", a: \"01111011\" },\n { cat: \"Zahlensysteme\", q: \"Welchen Dezimalwert hat Hex AAB?\", a: \"2731\" },\n { cat: \"Netzwerke\", q: \"Wandle 192 (Dezimal) in 8-Bit Bin\u00e4r um.\", a: \"11000000\" },\n { cat: \"Netzwerke\", q: \"Aus wie vielen Bit besteht eine IPv4-Adresse?\", a: \"32\" },\n { cat: \"IT-Management\", q: \"Ist Wartbarkeit eine nicht-funktionale Anforderung? (Ja\/Nein)\", a: \"Ja\" },\n { cat: \"Zahlensysteme\", q: \"Wandle 15 in eine 8-Bit Dualzahl um.\", a: \"00001111\" },\n { cat: \"Netzwerke\", q: \"Was ist die Subnetzmaske f\u00fcr \/24 in Dezimal?\", a: \"255.255.255.0\" }\n ];\n\n let state = { \n score: 0, \n streak: 0, \n lvl: 1, \n currentQ: null, \n xp: 0,\n questionPool: [] \n };\n\n \/\/ Hilfsfunktion zum Mischen (Fisher-Yates Shuffle)\n function shufflePool() {\n state.questionPool = [...questions].sort(() => Math.random() - 0.5);\n }\n\n function render() {\n document.getElementById('lvlVal').innerText = state.lvl;\n document.getElementById('scoreVal').innerText = state.score;\n document.getElementById('streakVal').innerText = state.streak;\n document.getElementById('progBar').style.width = state.xp + \"%\";\n }\n\n function next() {\n \/\/ Falls Pool leer ist, neu mischen\n if (state.questionPool.length === 0) {\n shufflePool();\n }\n\n \/\/ N\u00e4chste Frage aus dem Pool nehmen (keine Dopplung bis Pool leer)\n state.currentQ = state.questionPool.pop();\n \n document.getElementById('catText').innerText = state.currentQ.cat;\n document.getElementById('qText').innerText = state.currentQ.q;\n document.getElementById('ansInput').value = \"\";\n document.getElementById('ansInput').disabled = false;\n document.getElementById('fb').style.display = 'none';\n document.getElementById('ansInput').focus();\n }\n\n function check() {\n const val = document.getElementById('ansInput').value.trim().toLowerCase();\n if (!val) return;\n\n const isCorrect = val === state.currentQ.a.toLowerCase();\n const fb = document.getElementById('fb');\n fb.style.display = 'block';\n\n if (isCorrect) {\n state.score++;\n state.streak++;\n state.xp += 25;\n fb.innerText = \"Korrekt!\";\n fb.className = \"wp-feedback wp-correct\";\n if (state.xp >= 100) { \n state.lvl++; \n state.xp = 0; \n }\n } else {\n state.streak = 0;\n fb.innerText = \"L\u00f6sung: \" + state.currentQ.a;\n fb.className = \"wp-feedback wp-wrong\";\n }\n document.getElementById('ansInput').disabled = true;\n render();\n }\n\n document.getElementById('checkBtn').onclick = check;\n document.getElementById('nextBtn').onclick = next;\n document.getElementById('ansInput').onkeypress = (e) => { if(e.key === 'Enter') check(); };\n\n \/\/ Initialisierung\n shufflePool();\n next();\n render();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Flaggen Quiz Master<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:wght@400;600&family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* DESIGN TOKENS *\/\n :root {\n --bg-page: #faf9f7;\n --bg-card: #ffffff;\n --bg-element: #f4f3f0;\n --bg-secondary: #eae8e3;\n --text-main: #111111;\n --text-muted: #555555;\n --text-light: #888888;\n --accent: #111111;\n --accent-hover: #333333;\n --success: #166534;\n --error: #991b1b;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, sans-serif;\n --radius-lg: 16px;\n --radius-sm: 8px;\n --shadow-soft: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-page);\n color: var(--text-main);\n font-family: var(--font-sans);\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n padding: 40px 20px;\n }\n\n \/* Schwebender Header *\/\n header {\n text-align: center;\n margin-bottom: 40px;\n z-index: 10;\n }\n\n header h1 {\n font-family: var(--font-serif);\n font-size: 3rem;\n margin-bottom: 8px;\n font-weight: 600;\n }\n\n header p.subtitle {\n color: var(--text-muted);\n font-size: 1.1rem;\n letter-spacing: 0.02em;\n }\n\n .container {\n width: 100%;\n max-width: 550px;\n background: var(--bg-card);\n padding: 40px;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-soft);\n text-align: center;\n position: relative;\n }\n\n \/* Progress Bar *\/\n .progress-container {\n margin-bottom: 32px;\n }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--text-light);\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n font-weight: 600;\n }\n\n .progress-bar {\n height: 4px;\n background: var(--bg-element);\n border-radius: 10px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--accent);\n width: 0%;\n transition: width 0.3s ease;\n }\n\n \/* Screen Management *\/\n .screen {\n display: none;\n animation: fadeIn 0.4s ease-out;\n }\n\n .screen.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Selection List *\/\n .selection-list {\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .continent-btn {\n background: var(--bg-element);\n border: 1px solid transparent;\n padding: 18px 24px;\n border-radius: var(--radius-sm);\n font-family: var(--font-sans);\n font-size: 1rem;\n color: var(--text-main);\n cursor: pointer;\n transition: var(--transition);\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .continent-btn:hover {\n background: var(--bg-secondary);\n border-color: var(--text-light);\n transform: translateY(-2px);\n }\n\n \/* Quiz UI *\/\n .flag-container {\n background: var(--bg-element);\n padding: 30px;\n border-radius: var(--radius-sm);\n margin-bottom: 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 200px;\n }\n\n .flag-img {\n max-width: 220px;\n height: auto;\n box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n border: 1px solid rgba(0,0,0,0.05);\n }\n\n .options-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .option-btn {\n background: var(--bg-card);\n border: 1.5px solid var(--bg-secondary);\n padding: 16px;\n border-radius: var(--radius-sm);\n font-family: var(--font-sans);\n font-size: 1rem;\n color: var(--text-main);\n cursor: pointer;\n transition: var(--transition);\n outline: none;\n }\n\n .option-btn:hover:not(:disabled) {\n background: var(--bg-element);\n border-color: var(--accent);\n }\n\n .option-btn.correct {\n background: #e8f5e9;\n border-color: var(--success);\n color: var(--success);\n font-weight: 600;\n }\n\n .option-btn.wrong {\n background: #ffebee;\n border-color: var(--error);\n color: var(--error);\n }\n\n .feedback {\n margin-top: 24px;\n font-size: 0.95rem;\n font-weight: 600;\n height: 1.5rem;\n }\n\n .stats-summary {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 20px;\n font-size: 0.85rem;\n color: var(--text-muted);\n }\n\n .back-btn {\n margin-top: 32px;\n background: none;\n border: none;\n color: var(--text-light);\n text-decoration: none;\n cursor: pointer;\n font-size: 0.85rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n .back-btn:hover {\n color: var(--text-main);\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Flaggen Quiz<\/h1>\n <p <\/p>\n <\/header>\n\n <div class=\"container\">\n \n <div id=\"start-screen\" class=\"screen active\">\n <p style=\"margin-bottom: 24px; color: var(--text-muted);\">W\u00e4hle einen Modus f\u00fcr dein Endlos-Training:<\/p>\n <div class=\"selection-list\">\n <button class=\"continent-btn\" onclick=\"startQuiz('all')\">Ganze Welt <span>\ud83c\udf0e<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('europe')\">Europa <span>\ud83c\uddea\ud83c\uddfa<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('asia')\">Asien <span>\ud83c\udf0f<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('africa')\">Afrika <span>\ud83c\udf0d<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('americas')\">Amerika <span>\ud83c\udf0e<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('oceania')\">Ozeanien <span>\ud83c\udfdd\ufe0f<\/span><\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"screen\">\n <div class=\"progress-container\">\n <div class=\"progress-info\">\n <span id=\"region-name\">Welt<\/span>\n <span id=\"progress-text\">Frage 1<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div id=\"progress-fill\" class=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flag-container\">\n <img decoding=\"async\" id=\"flag-img\" class=\"flag-img\" src=\"\" alt=\"Flagge\">\n <\/div>\n\n <div id=\"options-grid\" class=\"options-grid\"><\/div>\n\n <div id=\"feedback\" class=\"feedback\"><\/div>\n\n <div class=\"stats-summary\">\n <span>Richtig: <b id=\"stat-correct\" style=\"color: var(--success)\">0<\/b><\/span>\n <span>Falsch: <b id=\"stat-wrong\" style=\"color: var(--error)\">0<\/b><\/span>\n <\/div>\n \n <button class=\"back-btn\" onclick=\"changeScreen('start-screen')\">Beenden & Zur\u00fcck<\/button>\n <\/div>\n <\/div>\n\n <script>\n const countryData = [\n \/\/ Europa (Erweitert)\n { name: \"Deutschland\", code: \"de\", region: \"europe\" },\n { name: \"Frankreich\", code: \"fr\", region: \"europe\" },\n { name: \"Italien\", code: \"it\", region: \"europe\" },\n { name: \"Spanien\", code: \"es\", region: \"europe\" },\n { name: \"\u00d6sterreich\", code: \"at\", region: \"europe\" },\n { name: \"Schweiz\", code: \"ch\", region: \"europe\" },\n { name: \"Schweden\", code: \"se\", region: \"europe\" },\n { name: \"Norwegen\", code: \"no\", region: \"europe\" },\n { name: \"Finnland\", code: \"fi\", region: \"europe\" },\n { name: \"D\u00e4nemark\", code: \"dk\", region: \"europe\" },\n { name: \"Niederlande\", code: \"nl\", region: \"europe\" },\n { name: \"Belgien\", code: \"be\", region: \"europe\" },\n { name: \"Portugal\", code: \"pt\", region: \"europe\" },\n { name: \"Griechenland\", code: \"gr\", region: \"europe\" },\n { name: \"Polen\", code: \"pl\", region: \"europe\" },\n { name: \"Irland\", code: \"ie\", region: \"europe\" },\n { name: \"Vereinigtes K\u00f6nigreich\", code: \"gb\", region: \"europe\" },\n { name: \"Tschechien\", code: \"cz\", region: \"europe\" },\n { name: \"Ungarn\", code: \"hu\", region: \"europe\" },\n { name: \"Rum\u00e4nien\", code: \"ro\", region: \"europe\" },\n { name: \"Ukraine\", code: \"ua\", region: \"europe\" },\n { name: \"Kroatien\", code: \"hr\", region: \"europe\" },\n { name: \"Bulgarien\", code: \"bg\", region: \"europe\" },\n { name: \"Estland\", code: \"ee\", region: \"europe\" },\n { name: \"Lettland\", code: \"lv\", region: \"europe\" },\n { name: \"Litauen\", code: \"lt\", region: \"europe\" },\n { name: \"Slowakei\", code: \"sk\", region: \"europe\" },\n { name: \"Slowenien\", code: \"si\", region: \"europe\" },\n { name: \"Island\", code: \"is\", region: \"europe\" },\n { name: \"Luxemburg\", code: \"lu\", region: \"europe\" },\n\n \/\/ Asien (Erweitert)\n { name: \"Japan\", code: \"jp\", region: \"asia\" },\n { name: \"China\", code: \"cn\", region: \"asia\" },\n { name: \"Indien\", code: \"in\", region: \"asia\" },\n { name: \"S\u00fcdkorea\", code: \"kr\", region: \"asia\" },\n { name: \"Thailand\", code: \"th\", region: \"asia\" },\n { name: \"Vietnam\", code: \"vn\", region: \"asia\" },\n { name: \"Indonesien\", code: \"id\", region: \"asia\" },\n { name: \"Malaysia\", code: \"my\", region: \"asia\" },\n { name: \"Philippinen\", code: \"ph\", region: \"asia\" },\n { name: \"Singapur\", code: \"sg\", region: \"asia\" },\n { name: \"T\u00fcrkei\", code: \"tr\", region: \"asia\" },\n { name: \"Israel\", code: \"il\", region: \"asia\" },\n { name: \"Saudi-Arabien\", code: \"sa\", region: \"asia\" },\n { name: \"V.A. Emirate\", code: \"ae\", region: \"asia\" },\n { name: \"Pakistan\", code: \"pk\", region: \"asia\" },\n { name: \"Mongolei\", code: \"mn\", region: \"asia\" },\n { name: \"Kasachstan\", code: \"kz\", region: \"asia\" },\n { name: \"Katar\", code: \"qa\", region: \"asia\" },\n { name: \"Libanon\", code: \"lb\", region: \"asia\" },\n { name: \"Jordanien\", code: \"jo\", region: \"asia\" },\n\n \/\/ Amerika (Erweitert)\n { name: \"USA\", code: \"us\", region: \"americas\" },\n { name: \"Kanada\", code: \"ca\", region: \"americas\" },\n { name: \"Mexiko\", code: \"mx\", region: \"americas\" },\n { name: \"Brasilien\", code: \"br\", region: \"americas\" },\n { name: \"Argentinien\", code: \"ar\", region: \"americas\" },\n { name: \"Kolumbien\", code: \"co\", region: \"americas\" },\n { name: \"Chile\", code: \"cl\", region: \"americas\" },\n { name: \"Peru\", code: \"pe\", region: \"americas\" },\n { name: \"Kuba\", code: \"cu\", region: \"americas\" },\n { name: \"Jamaika\", code: \"jm\", region: \"americas\" },\n { name: \"Costa Rica\", code: \"cr\", region: \"americas\" },\n { name: \"Uruguay\", code: \"uy\", region: \"americas\" },\n { name: \"Ecuador\", code: \"ec\", region: \"americas\" },\n { name: \"Panama\", code: \"pa\", region: \"americas\" },\n\n \/\/ Afrika (Erweitert)\n { name: \"\u00c4gypten\", code: \"eg\", region: \"africa\" },\n { name: \"S\u00fcdafrika\", code: \"za\", region: \"africa\" },\n { name: \"Nigeria\", code: \"ng\", region: \"africa\" },\n { name: \"Kenia\", code: \"ke\", region: \"africa\" },\n { name: \"Marokko\", code: \"ma\", region: \"africa\" },\n { name: \"Ghana\", code: \"gh\", region: \"africa\" },\n { name: \"\u00c4thiopien\", code: \"et\", region: \"africa\" },\n { name: \"Algerien\", code: \"dz\", region: \"africa\" },\n { name: \"Senegal\", code: \"sn\", region: \"africa\" },\n { name: \"Tansania\", code: \"tz\", region: \"africa\" },\n { name: \"Uganda\", code: \"ug\", region: \"africa\" },\n { name: \"Tunesien\", code: \"tn\", region: \"africa\" },\n { name: \"Kamerun\", code: \"cm\", region: \"africa\" },\n\n \/\/ Ozeanien (Erweitert)\n { name: \"Australien\", code: \"au\", region: \"oceania\" },\n { name: \"Neuseeland\", code: \"nz\", region: \"oceania\" },\n { name: \"Fidschi\", code: \"fj\", region: \"oceania\" },\n { name: \"Papua-Neuguinea\", code: \"pg\", region: \"oceania\" },\n { name: \"Samoa\", code: \"ws\", region: \"oceania\" },\n { name: \"Vanuatu\", code: \"vu\", region: \"oceania\" }\n ];\n\n let activeRegion = 'all';\n let currentPool = [];\n let currentTarget = null;\n let stats = { correct: 0, wrong: 0, total: 0 };\n let canAnswer = true;\n\n function changeScreen(screenId) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById(screenId).classList.add('active');\n if (screenId === 'start-screen') {\n stats = { correct: 0, wrong: 0, total: 0 };\n updateStats();\n }\n }\n\n function startQuiz(region) {\n activeRegion = region;\n if (region === 'all') {\n currentPool = [...countryData];\n } else {\n currentPool = countryData.filter(c => c.region === region);\n }\n\n const regionLabels = {\n 'all': 'Ganze Welt',\n 'europe': 'Europa',\n 'asia': 'Asien',\n 'africa': 'Afrika',\n 'americas': 'Amerika',\n 'oceania': 'Ozeanien'\n };\n\n document.getElementById('region-name').innerText = regionLabels[region] || region;\n changeScreen('quiz-screen');\n nextQuestion();\n }\n\n function nextQuestion() {\n canAnswer = true;\n stats.total++;\n document.getElementById('feedback').innerText = '';\n \n \/\/ Zuf\u00e4lliges Land aus dem Pool w\u00e4hlen\n currentTarget = currentPool[Math.floor(Math.random() * currentPool.length)];\n\n \/\/ Progress Update (Anteil richtiger Antworten)\n const progressPercent = stats.total > 1 ? (stats.correct \/ (stats.total - 1)) * 100 : 0;\n document.getElementById('progress-fill').style.width = `${Math.min(100, progressPercent)}%`;\n document.getElementById('progress-text').innerText = `Frage ${stats.total}`;\n\n \/\/ Flagge laden\n document.getElementById('flag-img').src = `https:\/\/flagcdn.com\/w320\/${currentTarget.code}.png`;\n\n \/\/ Optionen generieren (Priorisiere falsche Antworten aus der gleichen Region)\n let options = [currentTarget.name];\n \n \/\/ Pool f\u00fcr falsche Antworten: Zuerst Region, dann Rest der Welt wenn n\u00f6tig\n let regionalDistractors = currentPool.filter(c => c.name !== currentTarget.name);\n let globalDistractors = countryData.filter(c => c.name !== currentTarget.name && c.region !== activeRegion);\n\n \/\/ Shuffeln der Distraktoren\n regionalDistractors = regionalDistractors.sort(() => Math.random() - 0.5);\n globalDistractors = globalDistractors.sort(() => Math.random() - 0.5);\n\n \/\/ F\u00fclle Optionen auf\n while (options.length < 4) {\n if (regionalDistractors.length > 0) {\n options.push(regionalDistractors.pop().name);\n } else if (globalDistractors.length > 0) {\n options.push(globalDistractors.pop().name);\n } else {\n break; \/\/ Sollte bei der Datenmenge nicht passieren\n }\n }\n\n options = options.sort(() => Math.random() - 0.5);\n\n const grid = document.getElementById('options-grid');\n grid.innerHTML = '';\n options.forEach(opt => {\n const btn = document.createElement('button');\n btn.className = 'option-btn';\n btn.innerText = opt;\n btn.onclick = () => checkAnswer(opt, btn);\n grid.appendChild(btn);\n });\n }\n\n function checkAnswer(selected, btn) {\n if (!canAnswer) return;\n canAnswer = false;\n\n const buttons = document.querySelectorAll('.option-btn');\n buttons.forEach(b => b.disabled = true);\n\n if (selected === currentTarget.name) {\n stats.correct++;\n btn.classList.add('correct');\n document.getElementById('feedback').innerText = 'Richtig!';\n document.getElementById('feedback').style.color = 'var(--success)';\n } else {\n stats.wrong++;\n btn.classList.add('wrong');\n buttons.forEach(b => {\n if (b.innerText === currentTarget.name) b.classList.add('correct');\n });\n document.getElementById('feedback').innerText = `Das war ${currentTarget.name}`;\n document.getElementById('feedback').style.color = 'var(--error)';\n }\n\n updateStats();\n\n setTimeout(() => {\n nextQuestion();\n }, 1500);\n }\n\n function updateStats() {\n document.getElementById('stat-correct').innerText = stats.correct;\n document.getElementById('stat-wrong').innerText = stats.wrong;\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wissenschaftlicher Taschenrechner – carlos.web Calculator \u2733 0 sin cos tan AC DEL log ln \u221a ( ) \u03c0 7 8 9 \u00f7 e 4 5 6 \u00d7 x\u02b8 1 2 3 \u2212 ans 0 . = + Trainer \u2733 Lvl 1 Score 0 Serie 0 Lade… Bereit? Pr\u00fcfen N\u00e4chste System: Aktiv Flaggen Quiz Master Flaggen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-91","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":11,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/media?parent=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":91,"date":"2026-03-12T08:34:31","date_gmt":"2026-03-12T08:34:31","guid":{"rendered":"https:\/\/rexstarlabs.work\/?page_id=91"},"modified":"2026-03-12T17:16:50","modified_gmt":"2026-03-12T17:16:50","slug":"learn","status":"publish","type":"page","link":"https:\/\/rexstarlabs.work\/index.php\/learn\/","title":{"rendered":"learn"},"content":{"rendered":"\n

\n\n\n\n\n\n\n \n \n Wissenschaftlicher Taschenrechner – carlos.web<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --bg-color: #faf9f7;\n --calc-bg: #ffffff;\n --text-primary: #111111;\n --text-secondary: #555555;\n --text-hover: #888888;\n --btn-bg: #f4f3f0;\n --btn-bg-hover: #e8e6e1;\n --btn-op-bg: #eae8e3;\n --btn-accent: #111111;\n --btn-accent-hover: #333333;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --radius: 16px;\n --btn-radius: 8px;\n --transition: 0.2s ease;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-primary);\n font-family: var(--font-sans);\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 20px;\n }\n\n header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .site-title {\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 30px;\n color: var(--text-secondary);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n h1 {\n font-family: var(--font-serif);\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 400;\n margin-bottom: 10px;\n }\n\n .hero-icon {\n font-size: 1.2rem;\n color: var(--text-secondary);\n }\n\n .calculator {\n background-color: var(--calc-bg);\n width: 100%;\n max-width: 420px;\n border-radius: var(--radius);\n padding: 30px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n }\n\n .display {\n background-color: var(--bg-color);\n border-radius: var(--btn-radius);\n padding: 20px;\n margin-bottom: 25px;\n text-align: right;\n min-height: 90px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n overflow: hidden;\n }\n\n .expression {\n font-family: var(--font-sans);\n color: var(--text-secondary);\n font-size: 0.9rem;\n min-height: 1.2rem;\n margin-bottom: 5px;\n letter-spacing: 0.05em;\n word-wrap: break-word;\n }\n\n .result {\n font-family: var(--font-serif);\n font-size: 2.5rem;\n color: var(--text-primary);\n line-height: 1;\n word-wrap: break-word;\n }\n\n .keypad {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 10px;\n }\n\n button {\n font-family: var(--font-sans);\n font-size: 1.1rem;\n font-weight: 400;\n color: var(--text-primary);\n background-color: var(--btn-bg);\n border: none;\n border-radius: var(--btn-radius);\n padding: 15px 10px;\n cursor: pointer;\n transition: background-color var(--transition), transform 0.1s;\n user-select: none;\n }\n\n button:active {\n transform: scale(0.96);\n }\n\n button:hover {\n background-color: var(--btn-bg-hover);\n }\n\n .btn-sci {\n font-size: 0.95rem;\n color: var(--text-secondary);\n background-color: transparent;\n border: 1px solid var(--btn-bg-hover);\n }\n\n .btn-sci:hover {\n background-color: var(--btn-bg);\n }\n\n .btn-op {\n background-color: var(--btn-op-bg);\n font-weight: 500;\n }\n\n .btn-op:hover {\n background-color: #dfdbd2;\n }\n\n .btn-action {\n color: #d33;\n font-weight: 500;\n }\n\n .btn-equals {\n background-color: var(--btn-accent);\n color: white;\n font-weight: 500;\n }\n\n .btn-equals:hover {\n background-color: var(--btn-accent-hover);\n }\n\n .btn-zero {\n grid-column: span 2;\n }\n\n @media (max-width: 480px) {\n .calculator {\n padding: 20px;\n }\n button {\n padding: 12px 5px;\n font-size: 1rem;\n }\n .btn-sci {\n font-size: 0.85rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Calculator<\/h1>\n <div class=\"hero-icon\">\u2733<\/div>\n <\/header>\n\n <main class=\"calculator\">\n <div class=\"display\">\n <div class=\"expression\" id=\"expression\"><\/div>\n <div class=\"result\" id=\"result\">0<\/div>\n <\/div>\n\n <div class=\"keypad\">\n \n <button class=\"btn-sci\" onclick=\"appendFn('sin(')\">sin<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('cos(')\">cos<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('tan(')\">tan<\/button>\n <button class=\"btn-sci btn-action\" onclick=\"clearAll()\">AC<\/button>\n <button class=\"btn-sci btn-action\" onclick=\"deleteLast()\">DEL<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendFn('log(')\">log<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('ln(')\">ln<\/button>\n <button class=\"btn-sci\" onclick=\"appendFn('sqrt(')\">\u221a<\/button>\n <button class=\"btn-sci\" onclick=\"appendVal('(')\">(<\/button>\n <button class=\"btn-sci\" onclick=\"appendVal(')')\">)<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('\u03c0')\">\u03c0<\/button>\n <button onclick=\"appendVal('7')\">7<\/button>\n <button onclick=\"appendVal('8')\">8<\/button>\n <button onclick=\"appendVal('9')\">9<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('\/')\">\u00f7<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('e')\">e<\/button>\n <button onclick=\"appendVal('4')\">4<\/button>\n <button onclick=\"appendVal('5')\">5<\/button>\n <button onclick=\"appendVal('6')\">6<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('*')\">\u00d7<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendVal('^')\">x\u02b8<\/button>\n <button onclick=\"appendVal('1')\">1<\/button>\n <button onclick=\"appendVal('2')\">2<\/button>\n <button onclick=\"appendVal('3')\">3<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('-')\">\u2212<\/button>\n\n \n <button class=\"btn-sci\" onclick=\"appendAns()\">ans<\/button>\n <button onclick=\"appendVal('0')\">0<\/button>\n <button onclick=\"appendVal('.')\">.<\/button>\n <button class=\"btn-equals\" onclick=\"calculate()\">=<\/button>\n <button class=\"btn-op\" onclick=\"appendVal('+')\">+<\/button>\n <\/div>\n <\/main>\n\n <script>\n const expressionEl = document.getElementById('expression');\n const resultEl = document.getElementById('result');\n \n let currentExpr = '';\n let lastAns = '';\n let shouldResetResult = false;\n\n function updateDisplay() {\n \/\/ Replace operators for visual display\n let visualExpr = currentExpr\n .replace(\/\\*\/g, '\u00d7')\n .replace(\/\\\/\/g, '\u00f7')\n .replace(\/-\/g, '\u2212');\n expressionEl.innerText = visualExpr;\n }\n\n function appendVal(val) {\n if (shouldResetResult && !['+', '-', '*', '\/', '^'].includes(val)) {\n currentExpr = '';\n resultEl.innerText = '0';\n }\n shouldResetResult = false;\n currentExpr += val;\n updateDisplay();\n }\n\n function appendFn(fn) {\n if (shouldResetResult) {\n currentExpr = '';\n resultEl.innerText = '0';\n }\n shouldResetResult = false;\n currentExpr += fn;\n updateDisplay();\n }\n\n function appendAns() {\n if (lastAns !== '') {\n appendVal(lastAns);\n }\n }\n\n function clearAll() {\n currentExpr = '';\n resultEl.innerText = '0';\n updateDisplay();\n }\n\n function deleteLast() {\n if (shouldResetResult) {\n expressionEl.innerText = '';\n shouldResetResult = false;\n return;\n }\n \n if (currentExpr.endsWith('sin(') || currentExpr.endsWith('cos(') || currentExpr.endsWith('tan(') || currentExpr.endsWith('log(')) {\n currentExpr = currentExpr.slice(0, -4);\n } else if (currentExpr.endsWith('ln(')) {\n currentExpr = currentExpr.slice(0, -3);\n } else if (currentExpr.endsWith('sqrt(')) {\n currentExpr = currentExpr.slice(0, -5);\n } else {\n currentExpr = currentExpr.slice(0, -1);\n }\n \n if (currentExpr === '') {\n resultEl.innerText = '0';\n }\n updateDisplay();\n }\n\n function calculate() {\n if (currentExpr === '') return;\n\n try {\n let evalExpr = currentExpr\n .replace(\/\u00d7\/g, '*')\n .replace(\/\u00f7\/g, '\/')\n .replace(\/\u2212\/g, '-')\n .replace(\/\u03c0\/g, 'Math.PI')\n .replace(\/e\/g, 'Math.E')\n .replace(\/sin\$\/g, 'Math.sin(')\n .replace(\/cos\\(\/g, 'Math.cos(')\n .replace(\/tan\\(\/g, 'Math.tan(')\n .replace(\/log\\(\/g, 'Math.log10(')\n .replace(\/ln\\(\/g, 'Math.log(')\n .replace(\/sqrt\\(\/g, 'Math.sqrt(')\n .replace(\/\\^\/g, '**');\n\n let openParens = (evalExpr.match(\/\\(\/g) || []).length;\n let closeParens = (evalExpr.match(\/\$\/g) || []).length;\n while (openParens > closeParens) {\n evalExpr += ')';\n closeParens++;\n }\n\n let result = new Function('return ' + evalExpr)();\n \n if (!isFinite(result) || isNaN(result)) {\n throw new Error(\"Invalid\");\n }\n\n \/\/ Format to avoid long decimals like 0.30000000000000004\n result = parseFloat(result.toFixed(10));\n \n resultEl.innerText = result;\n lastAns = result;\n shouldResetResult = true;\n\n } catch (error) {\n resultEl.innerText = 'Error';\n shouldResetResult = true;\n }\n }\n\n \/\/ Keyboard support\n document.addEventListener('keydown', (e) => {\n const key = e.key;\n if (\/[0-9\\.\\+\\-\\*\\\/\$\$]\/.test(key)) {\n e.preventDefault();\n appendVal(key);\n } else if (key === 'Enter' || key === '=') {\n e.preventDefault();\n calculate();\n } else if (key === 'Backspace') {\n e.preventDefault();\n deleteLast();\n } else if (key === 'Escape') {\n e.preventDefault();\n clearAll();\n } else if (key === '^') {\n e.preventDefault();\n appendVal('^');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --bg-color: #faf9f7;\n --calc-bg: #ffffff;\n --text-primary: #111111;\n --text-secondary: #555555;\n --text-hover: #888888;\n --btn-bg: #f4f3f0;\n --btn-bg-hover: #e8e6e1;\n --btn-op-bg: #eae8e3;\n --btn-accent: #111111;\n --btn-accent-hover: #333333;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --radius: 16px;\n --btn-radius: 8px;\n --transition: 0.2s ease;\n --shadow: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n }\n\n html, body {\n margin: 0;\n padding: 0;\n background-color: var(--bg-color);\n min-height: 100%;\n width: 100%;\n overflow-x: hidden;\n }\n\n .trainer-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n width: 100%;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .trainer-header {\n text-align: center;\n margin-bottom: 30px;\n width: 100%;\n max-width: 400px;\n }\n\n .trainer-header h1 {\n font-family: var(--font-serif);\n font-size: clamp(2rem, 5vw, 2.8rem);\n font-weight: 400;\n margin: 0 0 5px 0;\n color: var(--text-primary);\n line-height: 1.1;\n }\n\n .trainer-header .hero-icon {\n font-size: 1.1rem;\n color: var(--text-secondary);\n }\n\n .wp-it-trainer {\n background-color: var(--calc-bg);\n width: 100%;\n max-width: 400px;\n border-radius: var(--radius);\n padding: 25px;\n box-shadow: var(--shadow);\n font-family: var(--font-sans);\n color: var(--text-primary);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n }\n\n .wp-progress-section {\n margin-bottom: 20px;\n }\n\n .wp-progress-wrapper {\n background-color: var(--bg-color);\n height: 6px;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .wp-progress-bar {\n height: 100%;\n background-color: var(--btn-accent);\n width: 0%;\n transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .wp-stats-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .wp-stat-box {\n background-color: var(--btn-bg);\n padding: 10px 5px;\n border-radius: var(--btn-radius);\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .wp-stat-label {\n font-size: 0.6rem;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 2px;\n }\n\n .wp-stat-value {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 1;\n }\n\n .wp-display {\n background-color: var(--bg-color);\n border-radius: var(--btn-radius);\n padding: 20px;\n margin-bottom: 20px;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n\n .wp-category {\n font-size: 0.7rem;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-bottom: 8px;\n }\n\n .wp-question-text {\n font-family: var(--font-sans);\n font-size: 1.05rem;\n line-height: 1.4;\n color: var(--text-primary);\n font-weight: 500;\n }\n\n .wp-input {\n width: 100%;\n padding: 14px;\n border: none;\n background-color: var(--btn-bg);\n border-radius: var(--btn-radius);\n font-family: var(--font-sans);\n font-size: 1rem;\n text-align: center;\n margin-bottom: 12px;\n color: var(--text-primary);\n transition: var(--transition);\n box-sizing: border-box;\n }\n\n .wp-input:focus {\n outline: none;\n background-color: var(--btn-bg-hover);\n }\n\n .wp-btn-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .wp-btn {\n padding: 14px;\n border: none;\n border-radius: var(--btn-radius);\n font-family: var(--font-sans);\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n }\n\n .wp-btn-primary {\n background-color: var(--btn-accent);\n color: white;\n }\n\n .wp-btn-primary:hover {\n background-color: var(--btn-accent-hover);\n }\n\n .wp-btn-secondary {\n background-color: var(--btn-op-bg);\n color: var(--text-primary);\n }\n\n .wp-btn-secondary:hover {\n background-color: #dfdbd2;\n }\n\n .wp-feedback-container {\n min-height: 45px;\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .wp-feedback {\n width: 100%;\n padding: 10px;\n border-radius: var(--btn-radius);\n font-size: 0.85rem;\n text-align: center;\n display: none;\n animation: fadeIn 0.3s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(5px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .wp-correct { background-color: #f0fdf4; color: #166534; }\n .wp-wrong { background-color: #fef2f2; color: #991b1b; }\n\n .wp-status {\n font-size: 0.6rem;\n color: var(--text-hover);\n text-align: center;\n margin-top: 15px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"trainer-wrapper\">\n <header class=\"trainer-header\">\n <h1>Trainer<\/h1>\n <div class=\"hero-icon\">\u2733<\/div>\n <\/header>\n\n <main class=\"wp-it-trainer\">\n <div class=\"wp-progress-section\">\n <div class=\"wp-progress-wrapper\">\n <div id=\"progBar\" class=\"wp-progress-bar\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"wp-stats-grid\">\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Lvl<\/span>\n <span id=\"lvlVal\" class=\"wp-stat-value\">1<\/span>\n <\/div>\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Score<\/span>\n <span id=\"scoreVal\" class=\"wp-stat-value\">0<\/span>\n <\/div>\n <div class=\"wp-stat-box\">\n <span class=\"wp-stat-label\">Serie<\/span>\n <span id=\"streakVal\" class=\"wp-stat-value\">0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"wp-display\">\n <div id=\"catText\" class=\"wp-category\">Lade…<\/div>\n <div id=\"qText\" class=\"wp-question-text\">Bereit?<\/div>\n <\/div>\n\n <input type=\"text\" id=\"ansInput\" class=\"wp-input\" placeholder=\"Antwort...\" autocomplete=\"off\">\n\n <div class=\"wp-btn-row\">\n <button id=\"checkBtn\" class=\"wp-btn wp-btn-primary\">Pr\u00fcfen<\/button>\n <button id=\"nextBtn\" class=\"wp-btn wp-btn-secondary\">N\u00e4chste<\/button>\n <\/div>\n\n <div class=\"wp-feedback-container\">\n <div id=\"fb\" class=\"wp-feedback\"><\/div>\n <\/div>\n \n <div class=\"wp-status\">System: Aktiv<\/div>\n <\/main>\n<\/div>\n\n<script type=\"module\">\n \/\/ Fragenkatalog mit 8-Bit Formatierung\n const questions = [\n { cat: \"Zahlensysteme\", q: \"Wandle 123 in eine 8-Bit Dualzahl um.\", a: \"01111011\" },\n { cat: \"Zahlensysteme\", q: \"Welchen Dezimalwert hat Hex AAB?\", a: \"2731\" },\n { cat: \"Netzwerke\", q: \"Wandle 192 (Dezimal) in 8-Bit Bin\u00e4r um.\", a: \"11000000\" },\n { cat: \"Netzwerke\", q: \"Aus wie vielen Bit besteht eine IPv4-Adresse?\", a: \"32\" },\n { cat: \"IT-Management\", q: \"Ist Wartbarkeit eine nicht-funktionale Anforderung? (Ja\/Nein)\", a: \"Ja\" },\n { cat: \"Zahlensysteme\", q: \"Wandle 15 in eine 8-Bit Dualzahl um.\", a: \"00001111\" },\n { cat: \"Netzwerke\", q: \"Was ist die Subnetzmaske f\u00fcr \/24 in Dezimal?\", a: \"255.255.255.0\" }\n ];\n\n let state = { \n score: 0, \n streak: 0, \n lvl: 1, \n currentQ: null, \n xp: 0,\n questionPool: [] \n };\n\n \/\/ Hilfsfunktion zum Mischen (Fisher-Yates Shuffle)\n function shufflePool() {\n state.questionPool = [...questions].sort(() => Math.random() - 0.5);\n }\n\n function render() {\n document.getElementById('lvlVal').innerText = state.lvl;\n document.getElementById('scoreVal').innerText = state.score;\n document.getElementById('streakVal').innerText = state.streak;\n document.getElementById('progBar').style.width = state.xp + \"%\";\n }\n\n function next() {\n \/\/ Falls Pool leer ist, neu mischen\n if (state.questionPool.length === 0) {\n shufflePool();\n }\n\n \/\/ N\u00e4chste Frage aus dem Pool nehmen (keine Dopplung bis Pool leer)\n state.currentQ = state.questionPool.pop();\n \n document.getElementById('catText').innerText = state.currentQ.cat;\n document.getElementById('qText').innerText = state.currentQ.q;\n document.getElementById('ansInput').value = \"\";\n document.getElementById('ansInput').disabled = false;\n document.getElementById('fb').style.display = 'none';\n document.getElementById('ansInput').focus();\n }\n\n function check() {\n const val = document.getElementById('ansInput').value.trim().toLowerCase();\n if (!val) return;\n\n const isCorrect = val === state.currentQ.a.toLowerCase();\n const fb = document.getElementById('fb');\n fb.style.display = 'block';\n\n if (isCorrect) {\n state.score++;\n state.streak++;\n state.xp += 25;\n fb.innerText = \"Korrekt!\";\n fb.className = \"wp-feedback wp-correct\";\n if (state.xp >= 100) { \n state.lvl++; \n state.xp = 0; \n }\n } else {\n state.streak = 0;\n fb.innerText = \"L\u00f6sung: \" + state.currentQ.a;\n fb.className = \"wp-feedback wp-wrong\";\n }\n document.getElementById('ansInput').disabled = true;\n render();\n }\n\n document.getElementById('checkBtn').onclick = check;\n document.getElementById('nextBtn').onclick = next;\n document.getElementById('ansInput').onkeypress = (e) => { if(e.key === 'Enter') check(); };\n\n \/\/ Initialisierung\n shufflePool();\n next();\n render();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Flaggen Quiz Master<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=EB+Garamond:wght@400;600&family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* DESIGN TOKENS *\/\n :root {\n --bg-page: #faf9f7;\n --bg-card: #ffffff;\n --bg-element: #f4f3f0;\n --bg-secondary: #eae8e3;\n --text-main: #111111;\n --text-muted: #555555;\n --text-light: #888888;\n --accent: #111111;\n --accent-hover: #333333;\n --success: #166534;\n --error: #991b1b;\n --font-serif: 'EB Garamond', Georgia, serif;\n --font-sans: 'Inter', -apple-system, sans-serif;\n --radius-lg: 16px;\n --radius-sm: 8px;\n --shadow-soft: 0 10px 40px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.02);\n --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-page);\n color: var(--text-main);\n font-family: var(--font-sans);\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n padding: 40px 20px;\n }\n\n \/* Schwebender Header *\/\n header {\n text-align: center;\n margin-bottom: 40px;\n z-index: 10;\n }\n\n header h1 {\n font-family: var(--font-serif);\n font-size: 3rem;\n margin-bottom: 8px;\n font-weight: 600;\n }\n\n header p.subtitle {\n color: var(--text-muted);\n font-size: 1.1rem;\n letter-spacing: 0.02em;\n }\n\n .container {\n width: 100%;\n max-width: 550px;\n background: var(--bg-card);\n padding: 40px;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-soft);\n text-align: center;\n position: relative;\n }\n\n \/* Progress Bar *\/\n .progress-container {\n margin-bottom: 32px;\n }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--text-light);\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n font-weight: 600;\n }\n\n .progress-bar {\n height: 4px;\n background: var(--bg-element);\n border-radius: 10px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--accent);\n width: 0%;\n transition: width 0.3s ease;\n }\n\n \/* Screen Management *\/\n .screen {\n display: none;\n animation: fadeIn 0.4s ease-out;\n }\n\n .screen.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Selection List *\/\n .selection-list {\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .continent-btn {\n background: var(--bg-element);\n border: 1px solid transparent;\n padding: 18px 24px;\n border-radius: var(--radius-sm);\n font-family: var(--font-sans);\n font-size: 1rem;\n color: var(--text-main);\n cursor: pointer;\n transition: var(--transition);\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .continent-btn:hover {\n background: var(--bg-secondary);\n border-color: var(--text-light);\n transform: translateY(-2px);\n }\n\n \/* Quiz UI *\/\n .flag-container {\n background: var(--bg-element);\n padding: 30px;\n border-radius: var(--radius-sm);\n margin-bottom: 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 200px;\n }\n\n .flag-img {\n max-width: 220px;\n height: auto;\n box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n border: 1px solid rgba(0,0,0,0.05);\n }\n\n .options-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .option-btn {\n background: var(--bg-card);\n border: 1.5px solid var(--bg-secondary);\n padding: 16px;\n border-radius: var(--radius-sm);\n font-family: var(--font-sans);\n font-size: 1rem;\n color: var(--text-main);\n cursor: pointer;\n transition: var(--transition);\n outline: none;\n }\n\n .option-btn:hover:not(:disabled) {\n background: var(--bg-element);\n border-color: var(--accent);\n }\n\n .option-btn.correct {\n background: #e8f5e9;\n border-color: var(--success);\n color: var(--success);\n font-weight: 600;\n }\n\n .option-btn.wrong {\n background: #ffebee;\n border-color: var(--error);\n color: var(--error);\n }\n\n .feedback {\n margin-top: 24px;\n font-size: 0.95rem;\n font-weight: 600;\n height: 1.5rem;\n }\n\n .stats-summary {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 20px;\n font-size: 0.85rem;\n color: var(--text-muted);\n }\n\n .back-btn {\n margin-top: 32px;\n background: none;\n border: none;\n color: var(--text-light);\n text-decoration: none;\n cursor: pointer;\n font-size: 0.85rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n .back-btn:hover {\n color: var(--text-main);\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <h1>Flaggen Quiz<\/h1>\n <p <\/p>\n <\/header>\n\n <div class=\"container\">\n \n <div id=\"start-screen\" class=\"screen active\">\n <p style=\"margin-bottom: 24px; color: var(--text-muted);\">W\u00e4hle einen Modus f\u00fcr dein Endlos-Training:<\/p>\n <div class=\"selection-list\">\n <button class=\"continent-btn\" onclick=\"startQuiz('all')\">Ganze Welt <span>\ud83c\udf0e<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('europe')\">Europa <span>\ud83c\uddea\ud83c\uddfa<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('asia')\">Asien <span>\ud83c\udf0f<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('africa')\">Afrika <span>\ud83c\udf0d<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('americas')\">Amerika <span>\ud83c\udf0e<\/span><\/button>\n <button class=\"continent-btn\" onclick=\"startQuiz('oceania')\">Ozeanien <span>\ud83c\udfdd\ufe0f<\/span><\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"screen\">\n <div class=\"progress-container\">\n <div class=\"progress-info\">\n <span id=\"region-name\">Welt<\/span>\n <span id=\"progress-text\">Frage 1<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div id=\"progress-fill\" class=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flag-container\">\n <img decoding=\"async\" id=\"flag-img\" class=\"flag-img\" src=\"\" alt=\"Flagge\">\n <\/div>\n\n <div id=\"options-grid\" class=\"options-grid\"><\/div>\n\n <div id=\"feedback\" class=\"feedback\"><\/div>\n\n <div class=\"stats-summary\">\n <span>Richtig: <b id=\"stat-correct\" style=\"color: var(--success)\">0<\/b><\/span>\n <span>Falsch: <b id=\"stat-wrong\" style=\"color: var(--error)\">0<\/b><\/span>\n <\/div>\n \n <button class=\"back-btn\" onclick=\"changeScreen('start-screen')\">Beenden & Zur\u00fcck<\/button>\n <\/div>\n <\/div>\n\n <script>\n const countryData = [\n \/\/ Europa (Erweitert)\n { name: \"Deutschland\", code: \"de\", region: \"europe\" },\n { name: \"Frankreich\", code: \"fr\", region: \"europe\" },\n { name: \"Italien\", code: \"it\", region: \"europe\" },\n { name: \"Spanien\", code: \"es\", region: \"europe\" },\n { name: \"\u00d6sterreich\", code: \"at\", region: \"europe\" },\n { name: \"Schweiz\", code: \"ch\", region: \"europe\" },\n { name: \"Schweden\", code: \"se\", region: \"europe\" },\n { name: \"Norwegen\", code: \"no\", region: \"europe\" },\n { name: \"Finnland\", code: \"fi\", region: \"europe\" },\n { name: \"D\u00e4nemark\", code: \"dk\", region: \"europe\" },\n { name: \"Niederlande\", code: \"nl\", region: \"europe\" },\n { name: \"Belgien\", code: \"be\", region: \"europe\" },\n { name: \"Portugal\", code: \"pt\", region: \"europe\" },\n { name: \"Griechenland\", code: \"gr\", region: \"europe\" },\n { name: \"Polen\", code: \"pl\", region: \"europe\" },\n { name: \"Irland\", code: \"ie\", region: \"europe\" },\n { name: \"Vereinigtes K\u00f6nigreich\", code: \"gb\", region: \"europe\" },\n { name: \"Tschechien\", code: \"cz\", region: \"europe\" },\n { name: \"Ungarn\", code: \"hu\", region: \"europe\" },\n { name: \"Rum\u00e4nien\", code: \"ro\", region: \"europe\" },\n { name: \"Ukraine\", code: \"ua\", region: \"europe\" },\n { name: \"Kroatien\", code: \"hr\", region: \"europe\" },\n { name: \"Bulgarien\", code: \"bg\", region: \"europe\" },\n { name: \"Estland\", code: \"ee\", region: \"europe\" },\n { name: \"Lettland\", code: \"lv\", region: \"europe\" },\n { name: \"Litauen\", code: \"lt\", region: \"europe\" },\n { name: \"Slowakei\", code: \"sk\", region: \"europe\" },\n { name: \"Slowenien\", code: \"si\", region: \"europe\" },\n { name: \"Island\", code: \"is\", region: \"europe\" },\n { name: \"Luxemburg\", code: \"lu\", region: \"europe\" },\n\n \/\/ Asien (Erweitert)\n { name: \"Japan\", code: \"jp\", region: \"asia\" },\n { name: \"China\", code: \"cn\", region: \"asia\" },\n { name: \"Indien\", code: \"in\", region: \"asia\" },\n { name: \"S\u00fcdkorea\", code: \"kr\", region: \"asia\" },\n { name: \"Thailand\", code: \"th\", region: \"asia\" },\n { name: \"Vietnam\", code: \"vn\", region: \"asia\" },\n { name: \"Indonesien\", code: \"id\", region: \"asia\" },\n { name: \"Malaysia\", code: \"my\", region: \"asia\" },\n { name: \"Philippinen\", code: \"ph\", region: \"asia\" },\n { name: \"Singapur\", code: \"sg\", region: \"asia\" },\n { name: \"T\u00fcrkei\", code: \"tr\", region: \"asia\" },\n { name: \"Israel\", code: \"il\", region: \"asia\" },\n { name: \"Saudi-Arabien\", code: \"sa\", region: \"asia\" },\n { name: \"V.A. Emirate\", code: \"ae\", region: \"asia\" },\n { name: \"Pakistan\", code: \"pk\", region: \"asia\" },\n { name: \"Mongolei\", code: \"mn\", region: \"asia\" },\n { name: \"Kasachstan\", code: \"kz\", region: \"asia\" },\n { name: \"Katar\", code: \"qa\", region: \"asia\" },\n { name: \"Libanon\", code: \"lb\", region: \"asia\" },\n { name: \"Jordanien\", code: \"jo\", region: \"asia\" },\n\n \/\/ Amerika (Erweitert)\n { name: \"USA\", code: \"us\", region: \"americas\" },\n { name: \"Kanada\", code: \"ca\", region: \"americas\" },\n { name: \"Mexiko\", code: \"mx\", region: \"americas\" },\n { name: \"Brasilien\", code: \"br\", region: \"americas\" },\n { name: \"Argentinien\", code: \"ar\", region: \"americas\" },\n { name: \"Kolumbien\", code: \"co\", region: \"americas\" },\n { name: \"Chile\", code: \"cl\", region: \"americas\" },\n { name: \"Peru\", code: \"pe\", region: \"americas\" },\n { name: \"Kuba\", code: \"cu\", region: \"americas\" },\n { name: \"Jamaika\", code: \"jm\", region: \"americas\" },\n { name: \"Costa Rica\", code: \"cr\", region: \"americas\" },\n { name: \"Uruguay\", code: \"uy\", region: \"americas\" },\n { name: \"Ecuador\", code: \"ec\", region: \"americas\" },\n { name: \"Panama\", code: \"pa\", region: \"americas\" },\n\n \/\/ Afrika (Erweitert)\n { name: \"\u00c4gypten\", code: \"eg\", region: \"africa\" },\n { name: \"S\u00fcdafrika\", code: \"za\", region: \"africa\" },\n { name: \"Nigeria\", code: \"ng\", region: \"africa\" },\n { name: \"Kenia\", code: \"ke\", region: \"africa\" },\n { name: \"Marokko\", code: \"ma\", region: \"africa\" },\n { name: \"Ghana\", code: \"gh\", region: \"africa\" },\n { name: \"\u00c4thiopien\", code: \"et\", region: \"africa\" },\n { name: \"Algerien\", code: \"dz\", region: \"africa\" },\n { name: \"Senegal\", code: \"sn\", region: \"africa\" },\n { name: \"Tansania\", code: \"tz\", region: \"africa\" },\n { name: \"Uganda\", code: \"ug\", region: \"africa\" },\n { name: \"Tunesien\", code: \"tn\", region: \"africa\" },\n { name: \"Kamerun\", code: \"cm\", region: \"africa\" },\n\n \/\/ Ozeanien (Erweitert)\n { name: \"Australien\", code: \"au\", region: \"oceania\" },\n { name: \"Neuseeland\", code: \"nz\", region: \"oceania\" },\n { name: \"Fidschi\", code: \"fj\", region: \"oceania\" },\n { name: \"Papua-Neuguinea\", code: \"pg\", region: \"oceania\" },\n { name: \"Samoa\", code: \"ws\", region: \"oceania\" },\n { name: \"Vanuatu\", code: \"vu\", region: \"oceania\" }\n ];\n\n let activeRegion = 'all';\n let currentPool = [];\n let currentTarget = null;\n let stats = { correct: 0, wrong: 0, total: 0 };\n let canAnswer = true;\n\n function changeScreen(screenId) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById(screenId).classList.add('active');\n if (screenId === 'start-screen') {\n stats = { correct: 0, wrong: 0, total: 0 };\n updateStats();\n }\n }\n\n function startQuiz(region) {\n activeRegion = region;\n if (region === 'all') {\n currentPool = [...countryData];\n } else {\n currentPool = countryData.filter(c => c.region === region);\n }\n\n const regionLabels = {\n 'all': 'Ganze Welt',\n 'europe': 'Europa',\n 'asia': 'Asien',\n 'africa': 'Afrika',\n 'americas': 'Amerika',\n 'oceania': 'Ozeanien'\n };\n\n document.getElementById('region-name').innerText = regionLabels[region] || region;\n changeScreen('quiz-screen');\n nextQuestion();\n }\n\n function nextQuestion() {\n canAnswer = true;\n stats.total++;\n document.getElementById('feedback').innerText = '';\n \n \/\/ Zuf\u00e4lliges Land aus dem Pool w\u00e4hlen\n currentTarget = currentPool[Math.floor(Math.random() * currentPool.length)];\n\n \/\/ Progress Update (Anteil richtiger Antworten)\n const progressPercent = stats.total > 1 ? (stats.correct \/ (stats.total - 1)) * 100 : 0;\n document.getElementById('progress-fill').style.width = `${Math.min(100, progressPercent)}%`;\n document.getElementById('progress-text').innerText = `Frage ${stats.total}`;\n\n \/\/ Flagge laden\n document.getElementById('flag-img').src = `https:\/\/flagcdn.com\/w320\/${currentTarget.code}.png`;\n\n \/\/ Optionen generieren (Priorisiere falsche Antworten aus der gleichen Region)\n let options = [currentTarget.name];\n \n \/\/ Pool f\u00fcr falsche Antworten: Zuerst Region, dann Rest der Welt wenn n\u00f6tig\n let regionalDistractors = currentPool.filter(c => c.name !== currentTarget.name);\n let globalDistractors = countryData.filter(c => c.name !== currentTarget.name && c.region !== activeRegion);\n\n \/\/ Shuffeln der Distraktoren\n regionalDistractors = regionalDistractors.sort(() => Math.random() - 0.5);\n globalDistractors = globalDistractors.sort(() => Math.random() - 0.5);\n\n \/\/ F\u00fclle Optionen auf\n while (options.length < 4) {\n if (regionalDistractors.length > 0) {\n options.push(regionalDistractors.pop().name);\n } else if (globalDistractors.length > 0) {\n options.push(globalDistractors.pop().name);\n } else {\n break; \/\/ Sollte bei der Datenmenge nicht passieren\n }\n }\n\n options = options.sort(() => Math.random() - 0.5);\n\n const grid = document.getElementById('options-grid');\n grid.innerHTML = '';\n options.forEach(opt => {\n const btn = document.createElement('button');\n btn.className = 'option-btn';\n btn.innerText = opt;\n btn.onclick = () => checkAnswer(opt, btn);\n grid.appendChild(btn);\n });\n }\n\n function checkAnswer(selected, btn) {\n if (!canAnswer) return;\n canAnswer = false;\n\n const buttons = document.querySelectorAll('.option-btn');\n buttons.forEach(b => b.disabled = true);\n\n if (selected === currentTarget.name) {\n stats.correct++;\n btn.classList.add('correct');\n document.getElementById('feedback').innerText = 'Richtig!';\n document.getElementById('feedback').style.color = 'var(--success)';\n } else {\n stats.wrong++;\n btn.classList.add('wrong');\n buttons.forEach(b => {\n if (b.innerText === currentTarget.name) b.classList.add('correct');\n });\n document.getElementById('feedback').innerText = `Das war ${currentTarget.name}`;\n document.getElementById('feedback').style.color = 'var(--error)';\n }\n\n updateStats();\n\n setTimeout(() => {\n nextQuestion();\n }, 1500);\n }\n\n function updateStats() {\n document.getElementById('stat-correct').innerText = stats.correct;\n document.getElementById('stat-wrong').innerText = stats.wrong;\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wissenschaftlicher Taschenrechner – carlos.web Calculator \u2733 0 sin cos tan AC DEL log ln \u221a ( ) \u03c0 7 8 9 \u00f7 e 4 5 6 \u00d7 x\u02b8 1 2 3 \u2212 ans 0 . = + Trainer \u2733 Lvl 1 Score 0 Serie 0 Lade… Bereit? Pr\u00fcfen N\u00e4chste System: Aktiv Flaggen Quiz Master Flaggen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-91","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":11,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/pages\/91\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/rexstarlabs.work\/index.php\/wp-json\/wp\/v2\/media?parent=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}