Nochmal JavaScript, weil ich Daten und Programm mal trennen wollte in dem die Daten als Text und `id`- und `data-*`-Attribute im HTML stehen. Es gibt eine Liste von Fragen und eine Liste von Antworten als Listen im HTML. Die Graph-Struktur ist über `id` und `date-*`-Attribute abgebildet.
Keine Syntaxhervorhebung weil die nicht mit drei Sprachen (HTML, CSS, JavaScript) in einer Datei klar kommt.
[codebox=text file=Unbenannt.txt]<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Wikipedia — hochladen von Bildern</title>
<style type="text/css">
#ui {
width: 75%;
border: thin solid black;
padding: 2em;
}
.normal {
background-color: lightblue;
}
.positive {
background-color: lightgreen;
}
.negative {
background-color: lightpink;
}
ol#questions, ol#answers {
margin: 0;
padding: 0;
list-style: none;
}
.buttons {
border: medium ridge blue;
border-radius: 10px;
background-color: lightblue;
float: right;
padding: 1em;
}
</style>
</head>
<body>
<div id="ui">
<ol id="questions" data-start="#q1">
<li id="q1" data-yes="#q2" data-no="#q5">
Hast Du das Bild selbst erstellt?
</li>
<li id="q2" data-yes="#q3" data-no="#false">
Willst Du das Bild unter einer in der Wikipedia zulässigen freien Lizenz
veröffentlichen?
</li>
<li id="q3" data-yes="#true" data-no="#q4">
Sind Bildrechte Dritter auszuschliessen?
</li>
<li id="q4" data-yes="#true" data-no="#false">
Hast Du das schriftliche Einverständnis aller Betroffenen?
</li>
<li id="q5" data-yes="#q6" data-no="#q8">
Ist der Urheber des Bildes bekannt?
</li>
<li id="q6" data-yes="#q3" data-no="#q7" data-unknown="#q8">
Ist der Urheber vor mehr als 70 Jahren verstorben?
</li>
<li id="q7" data-yes="#true" data-no="#false">
Hat der Urheber des Bildes zugestimmt das Bild unter eine freie Lizenz
zu stellen?
</li>
<li id="q8" data-yes="#true" data-no="#false">
Ist das Bild älter als 100 Jahre?
</li>
</ol>
<ol id="answers">
<li id="true" data-reset="#q1">Bild hochladen.</li>
<li id="false" data-reset="#q1">Bild <em>nicht</em> hochladen.</li>
</ol>
<div class="buttons">
<button id="yes-button" data-answer-type="yes">Ja</button>
<button id="no-button" data-answer-type="no">Nein</button>
<button id="unknown-button" data-answer-type="unknown">Unbekannt</button>
<button id="reset-button" data-answer-type="reset">Neustart</button>
</div>
</div>
<script type="text/javascript">
var ANSWERS = ['yes', 'no', 'unknown', 'reset'];
var hide = function (element) {
element.style.display = 'none';
};
var show = function (element) {
element.style.display = '';
};
var hideAll = function (elements) {
for (var i = 0; i < elements.length; i++) hide(elements
);
};
var Node = function (element) {
this.element = element;
};
Node.prototype.show = function () { show(this.element); };
Node.prototype.hide = function () { hide(this.element); };
Node.prototype.getPossibleAnswers = function () {
var result = {};
for (var i = 0; i < ANSWERS.length; i++) {
answer = ANSWERS;
id = this.element.dataset[answer];
if (id !== undefined) {
result[answer] = id;
}
}
return result;
};
Node.prototype.get = function (answer) {
return this.element.dataset[answer];
};
var Graph = function (elements, startId) {
var self = this;
this.nodes = {};
for (var i = 0; i < elements.length; i++) {
var element = elements;
var node = new Node(element);
node.hide();
this.nodes['#' + element.id] = node;
};
this.ui = document.querySelector('#ui');
this.buttonsElement = this.ui.querySelector('.buttons');
for (var i = 0; i < ANSWERS.length; i++) {
var answer = ANSWERS;
var button = this.buttonsElement.querySelector(
'#' + answer + '-button'
);
button.addEventListener('click', this.onChoice.bind(this, answer));
}
this.current = null;
this.moveTo(startId);
};
Graph.prototype.moveTo = function (nodeId) {
if (this.current !== null) {
this.current.hide();
}
this.current = this.nodes[nodeId];
this.current.show();
if (nodeId === '#true') {
this.ui.style.backgroundColor = 'lightgreen';
} else if (nodeId === '#false') {
this.ui.style.backgroundColor = 'lightpink';
} else {
this.ui.style.backgroundColor = 'lightblue'
}
this.updateButtons();
};
Graph.prototype.updateButtons = function () {
hideAll(this.buttonsElement.querySelectorAll('button'));
var possibleAnswers = this.current.getPossibleAnswers();
var answers = Object.keys(possibleAnswers);
for (var i = 0; i < answers.length; i++) {
var buttonId = '#' + answers + '-button';
show(this.buttonsElement.querySelector(buttonId));
}
};
Graph.prototype.onChoice = function (answer) {
this.moveTo(this.current.get(answer));
};
var elements = document.querySelectorAll('#ui li');
var startId = document.querySelector('#questions').dataset.start;
var graph = new Graph(elements, startId);
</script>
</body>
</html>[/code]
