Strona główna » Aplikacje » Użytkowe » Dyktando - kod źródłowy
ch
 

Dyktando - kod źródłowy

· Program · Kod źródłowy ·

Wstęp

Celem tego artykułu jest opisanie procesu tworzenia opisanej na stronie dyktanda w wersji na przeglądarke wykorzystując HTML, CSS i JavaScript z technologią Jquery.

Kod źródłowy

Na stronie

W tej części przygotowujemy szkielet wyglądu an stronę: input będzie umożliwiał wklejenie własnego tesktu. W divie będzie pokazywany tekst, a przycisk po naciśnięciu pokaże wynik. Ponadto należy zadeklarować pobranie skryptów, wywołać je oraz dodać arkusz stylów:

  1. <input type="text" id="txt"><br><br>
  2. <div id="dyktando"></div>
  3. <button id="btn" onclick="check();">Sprawdź!</button>

Przygotowanie dyktanda

  1. <script type="text/javascript" src="scrt.js"></script>
  2. <script type='text/javascript'>
  3. $(document).ready(
  4.  function(){
  5.   mask();
  6.   $("#txt").bind('paste',
  7.    function(event){
  8.     setTimeout(
  9.      function(){
  10.       var text=$(this).val();
  11.       $("#dyktando").html(text);
  12.       $("#txt").removeAttr('value');
  13.       mask();
  14.      },100);
  15.   });
  16.  }
  17. );
  18. </script>
  19. <link rel="stylesheet" href="styl.css" type="text/css">

Skrypt, który jest tutaj wywoływany ma za zadanie (3.) po uruchomieniu strony (5.) zamaskować wybrane części tekstu i dodać możliwość przekzywania tekstu poprzez wklejenie go w puste pole tekstowe.

Skrypt maskujący

Najpierw deklarowana jest tablica z danymi. Lista ma podlisty. Program zastępuje z n-podlisty wszystkie wskazane wyrażenia i pozwala wybierać uzupełnienie tylko z propozycji z podlisty, daltego ważne jest, aby każdy element był unikalny w obrębie całej listy. Można tutaj dodać nawet element listy [" nie", "nie "] co spowoduje, że użytkownik będzie musiał wykazać się znajomością kolejnych zasad.

  1. var data=[["u","ó"],["ż","rz"],["ę","en"],["ą","on"],["ii ","ji ","i "], ["ch","h"]];

Funkcja mask odpowiada za maskowanie tekstu.

  1. function mask(){
  2.  var txt=document.getElementById("dyktando").innerHTML;
  3.  for(var i=0;i<data.length;i++){
  4.   for(var j=0;j<data[i].length;j++){
  5.    txt=txt.replace(new RegExp(""+data[i][j]+"", 'g'), '<a "#'+i+'_'+j+'#">_</a>');
  6.   }
  7.  }
  8.  for(var i=0;i<data.length;i++){
  9.   for(var j=0;j<data[i].length;j++){
  10.    txt=txt.replace(new RegExp('"#'+i+'_'+j+'#"', 'g'), 'n="'+data[i][j]+'" class="c" onclick="change(this);" tag="'+(i)+'"');
  11.   }
  12.  }
  13.  document.getElementById("dyktando").innerHTML=txt;
  14. }

(2.) Pobieramy tekst w divie "dyktando", a następnie (3.) rozpoczynamy iteracje tablicy. (4.) W wybranych miejscach wstawiamy tam odpowiednie znaczniki. Drugą (7.) pętla odpowiada za zastępowanie znaczników właściwą częścią kodu. Rozbicie pętli na dwie wynikł z zastępowania kodu html poprzez zastępowanie go znacznikami co powodowało błędy. Na sam koniec (12.) tekst zostaje wpisany w div.

  1. function change(el){
  2.  var t=data[el.getAttribute("tag")];
  3.  el.innerHTML = t[(t.indexOf(el.innerHTML) + 1)%(t.length)];
  4. }

Kolejna funkcja umożliwia iterację pomiędzy kolejnymi elementami z danej podlisty. Jej działanie opiera się na operacji modulo oraz na pobieraniu wartości z listy głównej.

  1. function check(){
  2.  var ta=0,tg=0;
  3.  $("#dyktando a").each(function(i) {$(this).switchClass("c","c"+((this.getAttribute("n")==this.innerHTML) ? 1 : 0));ta++;if((this.getAttribute("n")==this.innerHTML)) tg++;});
  4.  $("#btn").html(tg+"/"+ta);
  5. }

Ostatnia i najbardziej znacząca funkcja sprawdza wszystkie elementy tekstu i (3.) sprawdza czy zostały poprawnie uzupełnione. Następnie (4.) wypisuje wynik na przycisku.

Styl

Do stylizacji pól zostało dopisanych kilka reguł CSS:

  1. #dyktando{ font-size: 20px }
  2. .c { background: #FFF0B0 }
  3. .c1 { background: #CEFFB2 }
  4. .c0 { background: #FFB2B2 }