word: quiz mode omitting titles in random order

diff --git a/word.plp b/word.plp
index 12c90b19720203f6896b4f9fa9c3fee14ccf710b..4d60f9a445da3fd40e177b1a07fb14ef63e6465a 100644 (file)
--- a/word.plp
+++ b/word.plp
@@ -11,7 +11,28 @@ Html({
                language
        '],
        data => [$wordlist],
-       raw => <<'EOT',
+       raw => (exists $get{q} && <<'EOT')
+<style>
+.gallery figure {
+       grid-row: span 1 !important;
+       grid-column: span 1 !important;
+}
+.gallery figcaption {
+       /* keep hover position */
+       right: 50%;
+       bottom: 50%;
+       transform: translate(50%, 50%);
+       /* hide */
+       visibility: hidden;
+       font-size: 0 !important;
+}
+.gallery figure:active > figcaption {
+       visibility: visible;
+       font-size: 175% !important;
+}
+</style>
+EOT
+               . <<'EOT',
 <style>
 body {
        margin: 8px 1px;
@@ -31,6 +52,7 @@ if (exists $get{debug}) {
 <p>
 Under construction.
 Zie ook <a href="/dieren">dieren</a>.
+<a href="?q">Omit translations</a> to test.
 </p>
 
 <:
@@ -70,5 +92,13 @@ sub printimgs {
 }
 
 say '<section class="gallery">';
-printimgs($table->{''}->[0]);
+if (exists $get{q}) {
+       my @rows = map {@$_} values %{$table}; # flatten categories
+       @rows = sort { rand <=> .5 } @rows;
+       $table = {};
+       printimgs(@rows);
+}
+else {
+       printimgs($Request || $table->{''}->[0]);
+}
 say '</section>';