more verbose playfield in the beginning

Author: niccokunzmann

css/playfield.css

@@ -27,23 +27,6 @@
 }
 
 /* ----- playfield.js  ----- */
-.playfield  .match{
-}
-.playfield  .match::after {
-  content: "✓";
-  padding-left: 1em;
-}
-.playfield  .nomatch {
-}
-.playfield  .nomatch.ok {
-  background-color: {{ site.data.colors.fails }};
-}
-.playfield  .match.fail {
-  background-color: {{ site.data.colors.fails }};
-}
-.playfield  .error {
-  background-color: {{ site.data.colors.fails }};
-}
 
 .playfield ul {
   margin-bottom: 0em;
@@ -72,4 +55,38 @@
 
 .playfield  .experiment.match {
 
+}
+
+/* --- feedback if matches or not --- */
+.playfield  li:after {
+  padding-left: 2em;
+}
+.playfield  .match::after {
+  content: "✓";
+}
+
+.playfield  .nomatch {
+}
+.playfield  .nomatch.ok {
+  background-color: {{ site.data.colors.fails }};
+}
+.playfield  .match.fail {
+  background-color: {{ site.data.colors.fails }};
+}
+.playfield  .error {
+  background-color: {{ site.data.colors.fails }};
+}
+
+/* --- more description --- */
+.playfield.verbose .match.ok:after {
+  content: "✓ gefunden";
+}
+.playfield.verbose .match.fail:after {
+  content: "✓ gefunden, soll nicht passen";
+}
+.playfield.verbose .nomatch.ok:after {
+  content: "soll gefunden werden";
+}
+.playfield.verbose .nomatch.fail:after {
+  content: "ok, nicht gefunden";
 }

tutorial/01-buchstaben-01.html

@@ -7,7 +7,7 @@
   Versuche es selbst und schreibe den Buchstaben
   <span class="regex">a</span> in das Feld unten.
 </p>
-<div class="playfield">
+<div class="playfield verbose">
   <input type="text" value="" class="regex" reference="a">
   <div class="message"></div>
   <ul class="examples">

tutorial/01-buchstaben-02.html

@@ -6,7 +6,7 @@
   Nun versuche, den Vokal zu finden, der in allen weißen aber nicht in den rot markierten Worten vorkommt.
   Gib den Buchstaben unten ein und überprüfe seine Auswahl.
 </p>
-<div class="playfield">
+<div class="playfield verbose">
   <input type="text" value="" class="regex" reference="e">
   <div class="message"></div>
   <ul class="examples">

tutorial/02-buchstabenfolgen-01.html

@@ -8,7 +8,7 @@
   Markiere die Zeilen.
   Gib dazu die Zeichenfolge ein.
 </p>
-<div class="playfield">
+<div class="playfield verbose">
   <input type="text" value="" class="regex" reference="nan">
   <div class="message"></div>
   <ul class="examples">