projekte:wordle

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

projekte:wordle [2022/03/10 06:46] – created Ivo Blöchligerprojekte:wordle [2022/03/10 06:47] (current) – [UI] Ivo Blöchliger
Line 1: Line 1:
 +====== Wordle ======
 +===== Logik =====
 +  * Die Wortlisten können auch direkt von einer Wordle-Seite kopiert werden. Einfach im JavaScript Code schauen. Meist gibt es zwei Listen: Eine mit zu erratenden Wörtern, und eine mit auch seltenen Wörtern, die als gültig erkannt werden.
 +  * Um die Buchstaben zu markieren, in zwei Schritten vorgehen:
 +    * Erst die korrekten bestimmen (grün).
 +    * Dann unter den nicht-grünen gelbe bestimmen, wobei dann beide Positionen markiert werden müssen: eine als gelb, die andere als gebraucht. Sonst markiert man hier z.B. beide S: GUESS, SORTE.
 +
 +===== UI =====
 +Das einfachste ist es wohl, mit einer Tabelle zu arbeiten und dort mit CSS die Buchstaben schön zentrieren und die Zellen quadratisch machen.
 +
 +Für die Färbung sollten Klassen verwendet werden:
 +<code css>
 +td {
 +   color: white;
 +   // plus weitere Formatierungen für grösse, zentrierung, schatten etc.
 +}
 +.normal {
 +  background-color: black;
 +}
 +.gelb {
 +  background-color: darkyellow;
 +}
 +.gruen {
 +  background-color: darkgreen;
 +}
 +</code>
 +Im HTML-Code sieht das dann wie folgt aus
 +<code html>
 +<td class="normal"></td>
 +</code>
 +In JavaScript können diese Klassen wie folgt manipuliert werden:
 +<code javascript>
 +// Kopiert von https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript
 +document.getElementById("MyElement").classList.add('MyClass');
 +
 +document.getElementById("MyElement").classList.remove('MyClass');
 +
 +if ( document.getElementById("MyElement").classList.contains('MyClass') )
 +
 +document.getElementById("MyElement").classList.toggle('MyClass');
 +</code>
 +