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: 0 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
  40 @media (orientation: portrait) {
  41         #quiz {
  42                 grid: auto / 1fr 1fr;
  43         }
  44         figure {
  45                 grid-column: span 2;
  46         }
  47         li {
  48                 grid-column: auto;
  49         }
  50 }
  51 </style>
  52 EOT
  53 });
  54
  55 say '<h1>per seconde wijzer</h1><div id=quiz></div>';
  56 say "<script>new WordWijzer('/$wordlistbase.json')</script>";