Dyalog MiServer 3 Sample Site

:class Kids_Keyboard : MiPageSample 
⍝ Control:: _DC.Button _html.span 
⍝ Description:: Children's educative application for Yiddish alphabet and keyboard 
 
    Sound←{'#sound' Replace ('autoplay' 'autoplay') New _.Audio ('/Examples/Data/KidsKbd/',⍵,'.mp3')} 
    LetBut←{('.letter',⍕⍵∊'שבגדכפת') ('#letter',⍕⎕UCS ⍵) (RandCol 0) New _.Button ⍵} 
    Indent←{('style="margin-left:',(⍕⍵÷2-BIG),'pt;margin-bottom:2pt;"') New _.span} 
    Print←{'#output' Prepend ('.serif',⍕⍵∊⎕UCS 1487+⍳27) (RandCol ⍺) New _.span ⍵} 
    RandCol←{'style="color:rgb(',(1↓∊',',¨⍕¨RGB ⍵),');"'} 
      RGB←{ 
          ×⍵:(1-⍵)⌽127 ¯1 ¯1+?3/128 
          (¯1 127 ¯1+?1 128 256)[3?3] 
      } 
 
:field public TASK←'' 
:field public BIG←'' 
 :field public _Sessioned←1   
 
    ∇ Compose;style;size 
      :Access public 
      Add _.title'Keyboard' 
      :Trap 11 
          {}16807⌶2 ⍝ ≤15.0 
      :Else 
          ⎕RL←⍬ 2   ⍝ ≥15.0 
      :EndTrap 
      TASK←'' 
      BIG←0∊⍴Get'nowrapper' 
      style←'#contentblock {background-color: buttonface; max-width: 860px; border-radius: 20px; margin: 20px; ' 
      style,←'box-shadow: 5px 5px 5px 0 white inset,-3px -3px 5px 0 darkgrey inset;}' 
      style,←'.title {margin: auto;}' 
      style,←'#keys {padding-top: 20px;}' 
      style,←'button {border: none; border-radius: 10px; margin:2pt; font-family: serif; transition: 0.2s;' 
      style,←'font-weight:bold; width: ',size,'height: ',size←(⍕30×2*BIG),'pt; ' 
      style,←'box-shadow: 5px 5px 5px 0 white inset,-3px -3px 5px 0 darkgrey inset; cursor:pointer;}' 
      style,←'button, #output {font-size: ',(⍕20×2*BIG),'pt;} ' 
      style,←'button:hover { } ' 
      style,←'button:active {box-shadow: -5px -5px 5px 0 white inset,3px 3px 5px 0 darkgrey inset;}' 
      style,←'button:focus {outline: none;}' 
      style,←'button:focus:after{content: "\261A";position:absolute;color:black;}' 
      style,←'.serif1 {font-family: serif;} ' 
      style,←'th {padding: 0 ',(⍕10×5.5*BIG),'px;}' 
      Add _.style style 
      
      
      menu←Add _.table 
      menu.Add _.tr('colspan="4"'New _.th(New¨_.h3{⍺ ⍵}¨(,/⍣BIG)'Press buttons to hear letter names. ' 'Press › to hear which letter to find. ')) 
      (menu.Add _.tr).Add¨_.th,¨'Hear letter' 'Hear again' 'Show letter' 'Start over' 
      buttons←(menu.Add _.tr).Add¨4/_.th 
      
      '#play' '.menu' 'autofocus'(buttons[1]).Add _.Button'►' ⍝ Play 
      '#hear' '.menu'(buttons[2]).Add _.Button'⏩' ⍝ FF 
      '#hint' '.menu'(buttons[3]).Add _.Button'👀' ⍝ eyes 
      '#new' '.menu'(buttons[4]).Add _.Button'🔃'  ⍝ reload 
      
      Add _.Handler'.menu' 'click' 'OnClick' 
      
      ('#keys'Add _.div).Add Keyboard 
      
      '#sound'Add _.div 
    ∇ 
 
    ∇ l←Letter 
      l←⎕UCS⍎6↓_what 
    ∇ 
 
    ∇ kb←Keyboard 
      kb←New _.div 
      (kb.Add Indent 120).Add¨LetBut¨'קראטוןםפ' 
      kb.Add _.br 
      (kb.Add Indent 0).Add¨LetBut¨'שדגכעיחלךף' 
      kb.Add _.br 
      (kb.Add Indent 40).Add¨LetBut¨'זסבהנמצתץ' 
      kb.Add _.br 
      kb.Add _.Handler'.letter0' 'click' 'OnClick' 
      kb.Add _.Handler'.letter1' 'click' 'OnClick' 
      kb.Add _.Handler'.letter1' 'mouseover mouseout' 'Dot' 
      '#output' 'dir="ltr"'kb.Add _.bdo 
    ∇ 
 
 
    ∇ r←OnClick;sound 
      :Access Public 
      :If ×≢TASK 
          :Select _what 
          :Case 'play' 
              TASK←'letter',⍕1487+?27 
              r←Sound TASK 
          :Case 'hint' 
              r←Sound'Boo' 
              r,←1 Print ⎕UCS⍎6↓TASK 
          :Case 'hear' 
              r←Sound TASK 
          :Case TASK 
              r←Sound'Yay' 
              r,←2 Print ⎕UCS 9786 32⍝ smiling 
              TASK←'' 
          :Case 'new' 
              r←'#keys'Replace Keyboard 
              TASK←'' 
          :Else 
              r←Sound'Boo' 
              r,←1 Print ⎕UCS 9785 32 ⍝ disappointed 
          :EndSelect 
      :Else 
          :Select _what 
          :Case 'play' 
              TASK←'letter',⍕1487+?27 
              r←Sound TASK 
          :CaseList 'hint' 'hear' 
              r←'' 
          :Case 'new' 
              r←'#keys'Replace Keyboard 
          :Else 
              r←Sound _what 
              r,←3 Print Letter 
          :EndSelect 
      :EndIf 
    ∇ 
 
    ∇ r←Dot 
      :Access Public 
     ⍝ Add diacritic middle dot (Dagesh) while hovered over 
      r←('#',_what)Replace('שכפתבגד'⍳Letter)⊃(7×_event≡'mouseover')⌽'שכפתבגד',⎕UCS 64304+¯6 11 20 26,⍳3 
    ∇ 
 
:endclass 

Controls used on this page: Dyalog: Audio, Button Base HTML: bdo, br, div, h3, span, style, table, th, title, tr