Beispiel:Self-Weihnachts-Quiz.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>SELFHTML Weihnachts-Quiz 2016</title> <style>

h1 { background: #f1f3f4 none repeat scroll 0 0 !important; padding: 1rem !important; }

  1. quiz ul {

list-style: none; margin: 0; padding: 0; }

  1. quiz li {

margin: 0; padding: 0; }

  1. quiz label {

display: block; background-color: #fffbf0; border: 2px solid #e7c157; border-radius: 0.2em; margin: 0.1em 0; padding: 1em 2em; text-align: start; max-width: 33em; }

  1. quiz label:hover{

background-color: #dfac20; }

  1. quiz input:checked ~ label,
  2. quiz input:focus ~ label {

background-color: #dfac20; border-color: #866a00; }

  1. quiz input {

left: -9999px; position: absolute; }

  1. quiz button:not(.startBtn) {

display: none; }

  1. quiz button,
  2. quiz label {

cursor: pointer; }

/* listing with solutions */

.question { font-weight: bold; }

.correct { color: #0c0; }

.wrong { color: #c00; }

.correct:before { content: '✓'; color: #0d0; }

.wrong:before { content: '✗'; color: #f00; }

.correct:before, .wrong:before { font: 2em bold; padding: 0 0.2em; }

  1. scores,
  2. scores td,
  3. scores th {

border: thin solid black; border-collapse: collapse; text-align: center; }

</style> <script> 'use strict'; var myQuiz = { container: null,

// helper function createElement: function (o) { var el, p;

if (o && (o.tag || o.tagName)) { el = document.createElement(o.tag || o.tagName);

if (o.text || o.txt) { var text = (o.text || o.txt) el.innerHTML = text; }

for (p in o) { if (!p.match(/^t(e)?xt|tag(name)?$/i)) { el[p] = o[p]; } } }

return el; },

// user interface for a quiz question createOptions: function () { var t = this, options = [], ul = document.createElement("ul");

t.emptyContainer();

t.intoContainer(t.createElement({ tag: "h2", text: "(" + t.currentQuestion.category + ") " + t.currentQuestion.question }));

t.intoContainer(ul);

// create options options.push(t.currentQuestion.solution);

t.currentQuestion.falses.forEach(function (s) { options.push(s); });

t.shuffleArray(options);

options.forEach(function (s, i) { var li = document.createElement("li"), label = t.createElement({ htmlFor: "a" + t.questions.length + "_" + i, tag: "label", text: s }), radio = t.createElement({ id: "a" + t.questions.length + "_" + i, name: "answer", tag: "input", type: "radio", tabindex: "0", value: s });

ul.appendChild(li); li.appendChild(radio); li.appendChild(label);


});

// Hinweis für Tastatur-User t.intoContainer(t.createElement({ tag: "button", text: "confirm choice", type: "submit" })); },

currentChoices: [], currentQuestion: null,

// data could be filled from an external source (JSON) data: [{ category: 'HTML', question: 'Welches Markup führt dazu, dass das Element per Tastatur­steuerung anwählbar ist?', solution: '<span tabindex="0">Pick me!</span>', falses: ['<a class="button">Pick me!</a>', '<span role="button">Pick me!</span>', '<span aria-type="button">Pick me!</span>'], explanation: 'Durch tabindex können Sie jedes Element fokussierbar machen, ein Wert von 0 behält dabei die generische Reihenfolge bei.' }, { category: 'HTML', question: 'Welches ist keine gültige Sprachangabe?', solution: 'lang="en-UK"', falses: ['lang="de-1901"', 'lang="fr-Cyrl"', 'lang="gr-t-la"'],

explanation: 'Cyrl steht für Kyrillisch, das gibts genauso wie es ru-Latn gibt:

Er sagte Spasibo! und ging.

Es gibt auch ru-Cyrl:

Он сказал Мерси! и ушёл.


en-UK gibt’s nicht; das Länder­kennzeichen für Groß­britannien ist GB. Britisches Englisch also en-GB.'

}, { category: 'HTML', question: 'Welches Markup sollte für ein dekoratives Bild aus Gründen der Barriere­freiheit verwendet werden?', solution: '<img src="path/to/image.jpg" alt="">', falses: ['<img src="path/to/image.jpg">', '<img src="path/to/image.jpg" role="presentation">', 'egal, alles gleich gut'], explanation: 'Durch ein leeres alt-Attribut verzichten Screenreader auf ein Vorlesen des Dateinamens. Alternativ kommt auch die Verwendung eines Hinter­grundbildes infrage.' }, { category: 'HTML', question: 'Was ist in XHTML5 erlaubt?', solution: '<p/>', falses: ['<!DOCTYPE html [<ENTITY SZlig "ẞ">]>', '<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">', '<img src="path/to/image" alt="alt text"></img></pre>'], explanation: }, { category: 'HTML', question: 'Was ist erlaubt?', //Frage 5 - sind die Antworten bei wechselnder Reihenfolge noch sinnvoll? solution: 'beides', falses: ['<ins datetime="2015-06-01"><p>paragraph 1</p><p>paragraph 2</p></ins>', '<a href="http://example.net"><p>paragraph 1</p><p>paragraph 2</p></a>', 'nichts davon'], explanation: 'Die starre Festlegung, dass inline-Elemente keine Block-Elemente enthalten dürfen, gibt es nicht mehr.' }, { category: 'HTML', question: 'Wie oft darf das main-Element in einem HTML-Dokument vorkommen?', solution: 'da sind sich W3C und WHATWG noch nicht ganz einig', falses: ['beliebig oft', 'maximal einmal', 'gar nicht, solch ein Element gibt es nicht'], explanation: }, { category: 'HTML', question: 'HTML5 führte zur Auszeichnung der Dokument­struktur neue Elemente ein: article und section. Welche Schachtelung ist erlaubt?', solution: 'sowohl article in section als auch section in article', falses: ['article in section', 'section in article', 'keins davon'], explanation: }, { category: 'HTML', question: 'Mit welcher Priorität werden die Angaben (sofern vorhanden) laut Standard zur Bestimmung der Zeichen­codierung eines HTML-Dokuments verwendet?', solution: '1. BOM 2. HTTP-Header 3. meta-charset', falses: ['1. HTTP-Header 2. meta-charset', '1. HTTP-Header 2. meta-charset 3. BOM', '1. HTTP-Header 2. BOM 3. meta-charset'], explanation: //Genau das. IE macht’s falsch. Weiß gar nicht, ob das im Edge korrigiert ist. }, { category: 'HTML', question: 'Wie erreicht man, dass ein Browser je nach Fenstergröße unterschiedliche Bilddateien lädt?', solution: 'Mit srcset-Attribut bzw. picture-Element.', falses: ['Das geht nur bei Hintergrundbildern per Media-Queries in CSS.', 'Mit srcset-Attribut. picture-Element ist nicht spec-Konform.', 'Mit picture-Element. srcset-Attribut ist nicht spec-Konform.'], explanation: }, { category: 'CSS', question: 'Welcher Selektor selektiert ein Element mit id="1"?', solution: '#\\31', //doppelte backslashes sind Markierung in JS/JSON falses: ['#1', '#\\1', 'keiner, denn id="1" ist nicht erlaubt'], explanation: 'Mit HTML5 sind auch Zahlen als Anfangsbuchstaben erlaubt. In CSS sind am Anfang eines Bezeichners nicht alle Zeichen zulässig, sodass man dort nicht erlaubte Zeichen escapen muss.' }, { category: 'CSS', question: 'Welche Browser unterstützen die Eigenschaft text-align-last noch nicht?', solution: 'Safari', falses: ['Firefox und Internet Explorer', 'Firefox und Chrome', 'alle aktuellen WebKit/Blink (Chrome, Safari, Opera etc.)'], explanation: }, { category: 'CSS', question: 'Welcher Browser unterstützt noch keine automatische Silbentrennung per CSS?', solution: 'Chrome und Opera', falses: ['Firefox', 'Chrome', 'Safari'], explanation: 'Chrome hat die Eigenschaft hyphens nur in Version 55 für Mac implementiert.' }, { category: 'CSS', question: 'Welche Deklaration ist falsch?', solution: 'width: calc(50%-20px)', falses: ['fill: #c0ffee', 'font: bold 1.2em/1.5 serif', 'text-align: start'], explanation: 'Bei calc müssen die Rechenzeichen + und -, nicht aber * und / , durch Leerzeichen von den Operatoren getrennt werden.' }, { category: 'CSS', question: 'Gegenwärtige Browser­unterstützung außen vor, was ergibt laut Spezifikation keinen dunkelblauen Hintergrund?', solution: 'background-color: linear-gradient(#006, #008)', falses: ['background-color: darkblue', 'background-color: #006f', 'background-color: hsl(240deg, 100%, 30%)'], explanation: 'Laut CSS Color Module Level 4 ist die Angabe des Hue-Winkels(!) auch mit deg erlaubt.
Die vierstelligen Angaben werden in RGBA umgewandelt, ergeben daseelbe wie #000066ff und rgba(0, 0, 102, 1).
Damit ist "background-color: linear-gradient(#006, #008)" falsch, es muss "background" oder besser "background-image" heißen.' }, { category: 'CSS', question: 'Die Angabe der Zeichencodierung einer CSS-Datei ist …?', solution: '… nicht erforderlich, wenn HTML-Datei und CSS-Datei dieselbe Zeichencodierung verwenden', falses: ["… gemacht mit @charset 'UTF-8'; am Anfang der CSS-Datei", '… erledigt mit <link rel="stylesheet" href="standard.css" charset="UTF-8"> im HTML', '… hinfällig, da im CSS-Code nur ASCII-Zeichen auftreten können'], explanation: }, { category: 'CSS', question: 'Unterstützung durch die verwendete Schriftart vorausgesetzt, lässt sich per CSS vieles erreichen. Aber was nicht?', solution: 'Dass gerade Anführungszeichen (\' und ") als smart quotes (“”/‘’) dargestellt werden.', falses: ['Dass die 0 wahlweise ohne Strich durch oder zur besseren Unterscheidung vom O mit Strich durch dargestellt wird.', 'Dass bei Doppelvokalen/Doppelkonsonanten die gleichen Buchstaben mit unterschiedlichen Glyphen dargestellt werden, bspw. um eine zerkratzte Schrift echter aussehen zu lassen', 'Dass bestimmte Buchstabenkombinationen durch ein Icon ersetzt werden, bspw. MENÜ durch ≡.'], explanation: 'Nullen kann man mit dem OpenType-Feature gestalteten: http://www.preusstype.com/techdata/otf_zero.php' }, { question: 'Wie nennt man den Ansatz, Grund­funktionalität auch für nicht so gute Geräte bereitzustellen und für fähigere Geräte bessere Funktionen anzubieten?', solution: 'progressive enhancement', falses: ['responsive web design', 'mobile first', 'graceful degradation'], category: 'Grundbegriffe' }, { question: 'Welches ist das erste Zitat in der Zitatesammlung', solution: 'Man verdient an:
● man hat was, was andere gerne hätten
● man kann was, was andere nicht können
● mn darf was, was andere nicht dürfen
Das hat mir in Momenten der Orientierungslosigkeit eigentlich immer geholfen, am nächsten Tag wieder Geld zu verdienen.
(Tom)', falses: ['Das geht nicht mit HTML zu lösen. Nur mit Geld. (Sven Rautenberg)', 'dafür haben wir eine recht ansehnliche "münzsammlung" namens selfhtml (wahsaga)', 'aber bevor du nach längerem Lesen #F00 siehst und dich deshalb #000 ärgern könntest, weil du dem Autor vielleicht sowieso nicht so ganz #0F0 bist, solltest du lieber mal einen Tag #00F machen.
Vielleicht gibt es auch noch andere triftige #0F0-de dafür.(Der Martin)'], category: 'self' }, { category: 'self', question: 'Von wem stammen die meisten Zitate?', solution: 'Cheatah', falses: ['Gunnar Bittersmann', 'at', 'ChrisB'], explanation: 'Cheatah führt mit 275 Zitaten die Liste an, es folgen ChrisB mit 112, Gunnar Bittersmann mit 83, at mit 76 und Der Martin mit 75 Zitaten' }, { question: 'Wann startete das Wiki?', solution: '14. März 2010 ', falses: ['20. April 2015', '20.11.2006 ', '04.06.1995'], category: 'self' }, { question: 'Wie viele Inhaltsseiten gibt es derzeit im Wiki?', solution: '2.651', falses: ['> als 5.000', '1651', '2051'], category: 'self' }, { category: 'SVG', question: 'Wie kann man in SVG einen Kreis zeichnen?', solution: 'mit den Elementen: circle, ellipse, path und rect', falses: ['mit den Elementen circle oder ellipse', 'mit den Elementen circle, ellipse und path', 'nur mit dem circle-Element'], explanation: 'einen Kreis erreichen Sie natürlich mit einem circle-Element, aber auch wenn bei einer ellipse rx und ry gleich sind, mit einem Pfad mit einem Kreisbogen und mit einem rect, dessen rx und ry-Radius die Hälfte der Breite und Höhe beträgt.' }, { category: 'SVG', question: 'In SVG 2 wird XLink zugunsten von normalen href-Attributen deprecated. In welchen Browsern funktioniert dies (Stand Dezember 2016) noch nicht?', solution: 'Firefox und Safari', falses: ['IE 9-11', 'alle Microsoft-Browser', 'IE 9-11, Edge und Safari'], explanation: 'Wider Erwarten hat selbst IE 9 dies implementiert. Firefox 51 wird im Januar 2017 nachziehen, sodass dann nur Safari und ältere Browser noch zwingend XLink:href benötigen.' }, { category: 'SVG', question: 'Mehrzeiliger Text ist in SVG möglich, wenn Sie …', solution: 'mehrere tspan-Elemente einfügen', falses: ['eine width-Angabe vornehmen', 'den Text mit
formatieren', 'das line-Attribut verwenden'], explanation: 'In SVG 2 ist es geplant mit einem width-Angabe mehrzeiligen Text zu ermöglichen, bis dahin muss man mehrere tspan-Elemente verwenden.' }, { category: 'SVG', question: 'Wie können Sie in SVG Präsentations­eigenschaften animieren?', solution: 'CSS-Animationen', falses: ['Animationen mit SMIL', 'nur mit JavaScript', 'nur durch Verwendung einer externen Library wie GSAP oder D3.js'], explanation: 'CSS-Animationen in SVG funktionieren in allen modernen Browsern, aber noch nicht im IE<11.' }, { category: 'SVG', question: 'Mit dem stroke-Attribut können Sie die Randlinien von Text und anderen grafische Objekten gestalten. Nicht möglich sind jedoch: …', solution: 'variable Randstärken', falses: ['Strichelungen in Morse-Code', 'mehrfarbige Muster', 'radiale Verläufe'], explanation: 'Umrandungen sind gegenüber CSS3 eine der Stärken von SVG, die in ein CSS Modul fills und strokes übernommen werden sollen. Allerdings sind variable Strichstärken für natürlichere Formen (noch) nicht möglich.' }, { category: 'SVG', question: 'Wie können Sie in SVG die Größe einer Grafik mit CSS animieren?', solution: 'durch die Animation der (gleichfarbigen) Randstärke', falses: ['durch die Verschiebung der x- und y-Koordinaten', 'durch transform: scale(x,y)', 'durch die Animation des width- und height-Attributs'], explanation: 'In SVG 2 werden Größenangaben wie x,y, width und height zu animierbaren Präsentations­eigenschaften. Die CSS-Animation von Transformationen wäre ein guter Weg, ist im Edge jedoch noch nicht möglich. So bleibt nur die Animation der Ranstärke. ' }, { category: 'SVG', question: 'Das viewBox-Attribut ermöglicht es, …', solution: '… einen pixelorientierten Ausschnitt mit fester Pixelbreite in einem "neuen" Koordinaten­system an eine beliebige verfügbare Breite anpassen', falses: ['… Grundformen passend zu skalieren', 'rechteckige Grundformen sichtbar zu machen', '… mit CSS-Animation Kamerafahrten über eine Landkarte und ein Zoom ins das Ziel ermöglichen'], explanation: 'Mit dem viewbox-Attrbut können Sie SVG-Grafiken in einem "neuen" Koordinatensystem passend skalieren. Da es keine Präsentations­eigenschaft ist, kann es aber nicht mit CSS animiert werden.' }],

emptyContainer: function () { var t = this;

while (t.container.firstChild) { t.container.removeChild(t.container.firstChild); } },

handleInput: function () { var t = this, // t points to myQuiz // create real array so we can use forEach inputs = Array.from( t.container.getElementsByTagName("input") ), selectedSolution = "";

// determine selection inputs.forEach(function (o) { if (o.checked) { selectedSolution = o.value; } });

// process selected answer if (selectedSolution && t.currentQuestion) { t.currentChoices.push({ a: selectedSolution, q: t.currentQuestion });

t.play(); }

// accept start button if (!t.currentQuestion) { t.play(); } },

init: function () { var t = this;

// here goes any code for loading data from an external source

t.container = document.getElementById("quiz");

if (t.data.length && t.container) {

// use anonymous functions so in handleInput // "this" can point to myQuiz

t.container.addEventListener( "submit", function (ev) { t.handleInput(); ev.stopPropagation(); ev.preventDefault(); return false; } );

t.container.addEventListener( "mouseup", function (ev) {

// we want to only support clicks on start buttons... var go = ev.target.tagName.match(/^button$/i);

// ... and labels for radio buttons when in a game if (ev.target.tagName.match(/^label$/i) && t.currentQuestion ) { go = true; }

if (go) {

window.setTimeout( function () { t.handleInput(); }, 50 );

ev.stopPropagation(); ev.preventDefault(); return false; } } );

t.start(); } },

intoContainer: function (el, parentType) { var t = this, parent;

if (!el) { return; }

if (parentType) {

parent = document.createElement(parentType); parent.appendChild(el);

} else {

parent = el; }

t.container.appendChild(parent);

return parent; },

// ask next question or end quiz if none are left play: function () { var t = this, ol;

// game over? if (!t.questions.length) {

t.showResults();

// offer restart window.setTimeout( function () { t.start(); }, 50 );

return; }

t.currentQuestion = t.questions.shift();

t.createOptions(); },

// list with remaining quiz question objects questions: [],

// list original questions and given answers and elaborate on solutions showResults: function () { var cat, ol, s, scores = {}, t = this, tab, thead, tbody, tr;

t.emptyContainer();

// show message t.intoContainer(t.createElement({ tag: "p", text: "Sie haben alle Fragen des Quiz beantwortet. Hier die Auswertung Ihrer Antworten:" }));

// list questions and given answers ol = t.intoContainer(t.createElement({ id: "result", tag: "ol" }));

t.currentChoices.forEach(function (o) { var p, li = ol.appendChild(t.createElement({ tag: "li" }));

// list original question li.appendChild(t.createElement({ className: "question", tag: "p", text: "(" + o.q.category + ") " + o.q.question }));

// list given answer p = li.appendChild(t.createElement({ tag: "p", text: "Ihre Antwort: " }));

p.appendChild(t.createElement({ className: ( o.q.solution == o.a ? "correct" : "wrong" ), tag: "em", text: o.a }));

// wrong answer? if (o.q.solution != o.a) {

p = li.appendChild(t.createElement({ tag: "p", text: "Die richtige Antwort wäre gewesen: " }));

p.appendChild(t.createElement({ tag: "em", text: o.q.solution })); }

// elaborate on solution? if (o.q.explanation) {

p = li.appendChild(t.createElement({ tag: "p", text: "Erläuterung: " }));

p.appendChild(t.createElement({ tag: "em", text: o.q.explanation })); } });

// display a kind of percentual score over the categories cat = [];

t.currentChoices.forEach(function (o) { if (!cat.includes(o.q.category)) { cat.push(o.q.category); } });

cat.sort();

cat.forEach(function (c) { var correct = 0, num = 0;

t.currentChoices.forEach(function (o) {

if (o.q.category == c) {

num++;

if (o.q.solution == o.a) { correct++; } } });

scores[c] = Math.floor(100 * correct / num) + "%"; });

tab = t.intoContainer(t.createElement({ id: "scores", tag: "table" }));

tab.appendChild(t.createElement({ tag: "caption", text: "Übersicht nach Kategorien" }))

thead = tab.appendChild(t.createElement({ tag: "thead" }))

tr = thead.appendChild(t.createElement({ tag: "tr" }))

for (s in scores) { tr.appendChild(t.createElement({ tag: "th", text: s })); }

tbody = tab.appendChild(t.createElement({ tag: "tbody" }))

tr = tbody.appendChild(t.createElement({ tag: "tr" }))

for (s in scores) { tr.appendChild(t.createElement({ tag: "td", text: scores[s] })); }

// show message t.intoContainer(t.createElement({ tag: "p", text: "Möchten Sie das Quiz erneut durchspielen?" })); },

// helper function: shuffle array (adapted from http://javascript.jstruebig.de/javascript/69) shuffleArray: function (a) { var i = a.length;

while (i >= 2) { var zi = Math.floor(Math.random() * i); var t = a[zi]; a[zi] = a[--i]; a[i] = t; } // no return argument since the array has been // handed over as a reference and not a copy! },

// start quiz with a start button start: function () { var t = this;

// fill list of remaining quiz questions t.questions = [];

t.data.forEach(function (o) { t.questions.push(o); });

t.shuffleArray(t.questions);

t.currentChoices = []; t.currentQuestion = null;

// install start button t.intoContainer( t.createElement({ className: "startBtn", tag: "button", text: "Starte Quiz!" }), "p" ); } };

document.addEventListener("DOMContentLoaded", function () { myQuiz.init(); }); </script> </head>

<body>

SELFHTML Weihnachts – Quiz 2016

<form id="quiz" action="">

In den frühen 2000ern gab es neben dem Self-Adventskalender auch ein Self-Weihnachtsquiz. Es hat lange gedauert, aber dieses Jahr liefern wir eine Neuauflage!

</form>


</body>

</html>

Abgerufen am 29.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Self-Weihnachts-Quiz.html"