word/wijzer.plp

   1 <(../common.inc.plp)><:
   2
   3 our $wordlistbase;
   4
   5 Html({
   6         raw => <<'EOT',
   7 <script src="/word/put.min.js"></script>
   8 <script src="/word/quiz.js"></script>
   9 <script src="/word/wijzer.js"></script>
  10 <style>
  11 #quiz {
  12         display: grid;
  13         grid: auto / 2fr 1fr;
  14         margin: 2em 0 1ex;
  15         align-items: center;
  16         grid-gap: 1ex;
  17 }
  18 figure {
  19         grid-column: 1;
  20         grid-row-start: 1;
  21         grid-row-end: span 9;
  22 }
  23 ul {
  24         display: contents;
  25 }
  26 li {
  27         grid-column: 2;
  28         font-size: 20pt;
  29         padding: 1ex .2ex;
  30         transition: all .5s ease-in;
  31 }
  32 li.chosen {background: #FF08}
  33 .done li.wrong {background: #F008}
  34 .done li.good {background: #0F08}
  35 li[onclick]:hover {
  36         cursor: pointer;
  37         background: #8888;
  38 }
  39 </style>
  40 EOT
  41 });
  42
  43 say '<h1>per seconde wijzer</h1><div id=quiz></div>';
  44 say "<script>new WordWijzer('/$wordlistbase.json')</script>";