Beispiel:2025.json
Aus SELFHTML-Wiki
{
"data": [
{
"category": "HTML",
"question": "<pre><!DOCTYPE html>\n<html>\n<title>SELFHTML</title>\n<body>\n<h1>SELFHTML</h1>\n<p><b>SELFHTML</b> stellt seit 1995 eine deutschsprachige Dokumentation\nzu HTML und verwandten Technologien zur Verfügung.</p>\n<p>Das Motto von SELFHTML lautet: „Die Energie des Verstehens“.</p>\n</body>\n</html></pre><br>Da fehlt doch was‽ Ja. Aber was davon ist zwingend notwendig?",
"answers": [
{ "correct": false, "answer": "die Angabe der Zeichencodierung" },
{ "correct": true, "answer": "die Angabe der Sprache im lang-Attribut" },
{ "correct": false, "answer": "head-Start- und -End-Tags" },
{ "correct": false, "answer": "das End-Tag beim ersten Absatz" }
],
"explanation": "Die Sprache muss laut WCAG angegeben werden. Die anderen Dinge sind optional oder implizit."
},
{
"category": "Accessibility",
"question": "Wievielen Nutzern kommen barrierefreie Webseiten zugute?",
"answers": [
{ "correct": false, "answer": "4%" },
{ "correct": false, "answer": "21%" },
{ "correct": false, "answer": "53%" },
{ "correct": true, "answer": "100%" }
],
"explanation": "Barrierefreiheit hilft allen Nutzern – situativ oder temporär eingeschränkt."
},
{
"category": "CSS",
"question": "Welche der Farbangaben ist ungültig?",
"answers": [
{ "correct": false, "answer": "rgba(102, 51, 153)" },
{ "correct": false, "answer": "#639F" },
{ "correct": true, "answer": "rgba(102 51 153 255)" },
{ "correct": false, "answer": "hsl(270 50% 40%)" }
],
"explanation": "Die neue <code>rgba()</code>-Syntax trennt Alpha mit <code>/</code>, nicht durch Leerzeichen."
},
{
"category": "HTML",
"question": "Welches Element gab es nie im HTML-Standard?",
"answers": [
{ "correct": false, "answer": "blink" },
{ "correct": false, "answer": "dir" },
{ "correct": true, "answer": "marquee" },
{ "correct": false, "answer": "meter" }
],
"explanation": "<code>marquee</code> wurde zwar implementiert, war aber nie Standard."
},
{
"category": "HTML",
"question": "Wird heutzutage noch Layout mit <table> gemacht?",
"answers": [
{ "correct": false, "answer": "seit CSS sollte kein Tabellenlayout mehr gemacht werden" },
{ "correct": false, "answer": "seit der Implementierung von Flexbox sollte kein Tabellenlayout mehr gemacht werden" },
{ "correct": false, "answer": "seit der Implementierung von CSS-Grid sollte kein Tabellenlayout mehr gemacht werden" },
{ "correct": true, "answer": "für HTML-Mails ist Tabellenlayout immer noch erforderlich" }
],
"explanation": "HTML-Mails benötigen häufig Tabellenlayout wegen schlechter CSS-Unterstützung in Clients."
},
{
"category": "JavaScript",
"question": "Eine Frage zu Fragezeichen: Was davon ist kein gültiges JavaScript?",
"answers": [
{ "correct": false, "answer": "const heading = document.querySelector('h1')?.textContent;" },
{ "correct": false, "answer": "const main = document.querySelector('main') ?? document.body;" },
{ "correct": true, "answer": "const title = (document.querySelector('h1') ? document.querySelector('h1').textContent) : document.title;" },
{ "correct": false, "answer": "keins davon; alle drei korrekt" }
],
"explanation": "Beim ternären Operator ist die Klammerung falsch gesetzt."
},
{
"category": "HTML",
"question": "Wieviele HTML-Elementtypen gibt es?",
"answers": [
{ "correct": false, "answer": "unter 50" },
{ "correct": false, "answer": "50 bis 80" },
{ "correct": false, "answer": "81 bis 100" },
{ "correct": true, "answer": "über 100" }
],
"explanation": "Derzeit gibt es ca. 140 HTML-Elemente."
},
{
"category": "CSS",
"question": "<pre>:where(.box.box) { background: red }\n\n:is(.box, div:first-child) { background: yellow }\n \n .box { background: green }\n \n @layer box {\n #box { background: blue }\n }</pre><br>Welche Hintergrundfarbe hat das <div id=\"box\" class=\"box\">?",
"answers": [
{ "correct": false, "answer": "rot" },
{ "correct": true, "answer": "gelb" },
{ "correct": false, "answer": "grün" },
{ "correct": false, "answer": "blau" }
],
"explanation": "<code>:is()</code> mit <code>div:first-child</code> hat die höchste Spezifität; gelb gewinnt."
},
{
"category": "Web History",
"question": "In welchem Jahr erschien ein Artikel von John Allsopp, der den Gedanken von responsivem Webdesign propagierte?",
"answers": [
{ "correct": true, "answer": "2000" },
{ "correct": false, "answer": "2005" },
{ "correct": false, "answer": "2010" },
{ "correct": false, "answer": "2015" }
],
"explanation": "Der Artikel 'A Dao of Web Design' erschien im April 2000."
},
{
"category": "HTML",
"question": "Welches HTML-Element sollte verwendet werden, um zusammengehörige Radiobuttons zu gruppieren?",
"answers": [
{ "correct": false, "answer": "div" },
{ "correct": false, "answer": "ul" },
{ "correct": false, "answer": "ol" },
{ "correct": true, "answer": "fieldset" }
],
"explanation": "fieldset und legend machen Gruppen für Screenreader verständlich."
},
{
"category": "Internet Pioneers",
"question": "Welche dieser Personen gilt als Pionier des Internets?",
"answers": [
{ "correct": false, "answer": "Tim Berners-Lee" },
{ "correct": true, "answer": "Vince Cerf" },
{ "correct": false, "answer": "Bill Gates" },
{ "correct": false, "answer": "Eric Meyer" }
],
"explanation": "Tim Berners-Lee hat das <strong>World Wide Web</strong> entwickelt (HTTP, HTML, den ersten Browser), was eine Anwendung des <strong>Internets</strong> ist, so wie E-Mail und Newsgroups, die es damals gab.<br>Vince Cerf hat TCP/IP entwickelt - das Protokoll, mit dem über Kabel verbundene Computer miteinander sprechen können, und damit ein Grundbaustein des Internets.<br>Beim W3C20 Anniversary Symposium 2014 traten beide gemeinsam auf: Tim Berners-Lee mit T-Shirt \\\"I didn't invent the Internet\\\" auf der Vorderseite und \\\"I invented the Web\\\" auf der Rückseite; Vince Cerf mit \\\"I didn't invent the Web\\\" auf der Vorderseite und \\\"I invented the Internet\\\" auf der Rückseite."
},
{
"category": "JavaScript",
"question": "Wieviel ist <code>2 * (1 + 1 + '1')</code> (in JavaScript)?",
"answers": [
{ "correct": false, "answer": "6" },
{ "correct": true, "answer": "42" },
{ "correct": false, "answer": "222" },
{ "correct": false, "answer": "NaN (not a number)" }
],
"explanation": "Die Antwort auf alle Fragen.<br>In der Klammer werden die <code>+</code>-Operatoren von links nach rechts abgearbeitet.<br><code>1 + 1</code> ergibt <code>2</code>; bei <code>2 + '1'</code> werden die Typen der Operanden angeglichen, die Zahl <code>2</code> wird in den String <code>'2'</code> umgewandelt,<br>der Operator <code>+</code> steht dann f\u00fcr die Verkettung: <code>'2' + '1'</code> ergibt <code>'21'</code>.<br>Der <code>*</code>-Operator steht f\u00fcr keine String-Operation; die Typumwandlung erfolgt zu Zahlen: <code>'21'</code> wird als Zahl <code>21</code> gedeutet. <code>2 * 21</code> ergibt <code>42</code>."
},
{
"category": "CSS",
"question": "Welche benannte Farbe wurde auf Betreiben der Web-Community in den CSS-Standard aufgenommen?",
"answers": [
{ "correct": false, "answer": "burlywood" },
{ "correct": false, "answer": "grey" },
{ "correct": true, "answer": "rebeccapurple" },
{ "correct": false, "answer": "whitesmoke" }
],
"explanation": "2014 starb die sechsjährige Tochter von Eric Meyer an Krebs. Ihr zu Ehren wurde ihre Lieblingsfarbe lila nach ihr benannt. <br>(S.a. <a href='https://noti.st/gunnarbittersmann/5IwT7g/the-color-rebeccapurple'>The color rebeccapurple]()</a>)"
},
{
"category": "CSS",
"question": "Was lässt sich auch ohne Media-Query umsetzen?",
"answers": [
{ "correct": false, "answer": "einspaltiges Layout auf schmalen Viewports, mehrspaltiges auf breiten" },
{ "correct": false, "answer": "Hell- und Dunkelmodus (light/dark mode)" },
{ "correct": true, "answer": "beides" },
{ "correct": false, "answer": "keins davon" }
],
"explanation": "Beides lässt sich ohne Media Queries mit modernen CSS-Features realisieren.<br>Mit Flexbox und auch mit Grid (<code>repeat()</code>-Funktion) ist es möglich, dass der Browser die Anzahl der Spalten je nach zur Verfügung stehender Breite selbst bestimmt, ohne dass man dazu per Media-Query Breakpoints setzen muss.<br>Mit <code>color-scheme: light dark</code> und der <code>light-dark()</code>-Funktion lässt sich Hell- und Dunkelmodus auch ohne <code>prefers-color-scheme</code>-Media-Query umsetzen."
},
{
"category": "HTML/CSS",
"question": "Kann man <code><div class=\"0\"></code> verwenden?",
"answers": [
{ "correct": false, "answer": "ja, problemlos" },
{ "correct": true, "answer": "ja, aber zum Stylen müsste man schlecht lesbaren CSS-Code verwenden" },
{ "correct": false, "answer": "nein, denn in HTML dürfen Klassenbezeichner nicht mit einer Ziffer beginnen" },
{ "correct": false, "answer": "nein, denn `0` ist dasselbe wie keine Klasse zu setzen" }
],
"explanation": "Bezeichner f\u00fcr Klassen und IDs, die mit einer Ziffer beginnen, sind in HTML jetzt erlaubt.<br>Nicht erlaubt sind f\u00fchrende Ziffern bei Klassen- und ID-Selektoren in CSS; dort m\u00fcsste die f\u00fchrende Ziffer escapet werden: f\u00fcr <code>class=\\\"0\\\"</code> w\u00e4re der Selektor <code>.\\30</code>, f\u00fcr <code>id=\\\"007\\\"</code> w\u00e4re es <code>#\\30 07</code>. Das ist schlecht lesbarer (d.h. schlecht wartbarer) CSS-Code, deshalb sollte man f\u00fchrende Ziffern in Klassen- und ID-Bezeichnern doch besser vermeiden."
},
{
"category": "",
"question": "<pre>button {\n appearance: none; \n border: none; \n outline: none; \n quotes: none;\n}</pre><br>Welche Angabe ist falsch?",
"answers": [
{ "correct": false, "answer": "appearance" },
{ "correct": false, "answer": "border" },
{ "correct": true, "answer": "outline" },
{ "correct": false, "answer": "quotes" }
],
"explanation": "<code>outline: none</code> verhindert Fokus-Anzeige – das ist schlecht für Barrierefreiheit."
}
]
}
