Dyktando - 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 }

• Kod źródłowy Implementacja