Kodulehe loomine, 29. kord – Õppematerjalid

Sõnavaliku lisamine

Selleks, et sõnavalikut laiendada:

võtame kasutusele tekstifailid eesti- ja ingliskeelsete sõnade jaoks (iga sõna eraldi real):
- sonaraamat_eesti.txt
- sonaraamat_english.txt
muudame olemasolevat koodi selliselt, et otsitav sõna saadakse vastava keele failist:
- muudame olemasolevat mängukoodi failis mangukood.js
- lisame PHP-faili alglaadimine.php, millega loeme failist sõnu

1. Sõnaraamatud

Nt võib faili sonaraamat_eesti.txt sisu olla seesugune:

pudrukausikaas
supilusikatäis
hallivatimees
vutimunasuurune
massikogunemine
iluduskuninganna

Nt võib faili sonaraamat_english.txt sisu olla seesugune:

windsurfing
mutually
understandable
musician
celebration

2. Mängukoodi muutmine

2.1 muudatused JavaScriptis, failis mangukood.js

Esmalt muudame globaalsete muutujate defineerimist.

Senise

var leitud_tahed=[];
if (keel=="eesti")
{
 var otsitav_sona="lumelaualaager";
 var otsitava_sona_tahed=otsitav_sona.split(""); 
 leitud_tahed.push("l");
 leitud_tahed.push("r");
}
else
{
 var otsitav_sona="snowboardcamp";
 var otsitava_sona_tahed=otsitav_sona.split("");
 leitud_tahed.push("s");
 leitud_tahed.push("p");
}

asemel

var leitud_tahed=[];
var sobimatud_tahed=[];
var otsitav_sona;
var otsitava_sona_tahed=[];
var kuvatav_tekst;
var sona_seis;

Lisaks tuleb teha muudatusi funktsioonis algseis.

Esmalt lisame AJAX (Asynchronous JavaScript And XML) päringu PHP-failist alglaadimine.php:

if (window.XMLHttpRequest) 
{
 // veebilehitsejad IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
} 
else 
{ // veebilehitsejad IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() 
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  otsitav_sona=xmlhttp.responseText;
  otsitava_sona_tahed=otsitav_sona.split("");
  leitud_tahed.push(otsitava_sona_tahed[0]);
  if (!leitud_tahed.includes(otsitava_sona_tahed[otsitava_sona_tahed.length-1]))
  {
   leitud_tahed.push(otsitava_sona_tahed[otsitava_sona_tahed.length-1]);
   }
  kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
  sona_seis=otsitava_sona_tahed[0];
  for (i=1; i<otsitava_sona_tahed.length; i++)
  {
   if (leitud_tahed.includes(otsitava_sona_tahed[i]))
   {
    kuvatav_tekst=kuvatav_tekst+" "+otsitava_sona_tahed[i].toUpperCase(); 
    sona_seis=sona_seis+otsitava_sona_tahed[i];
   }
  else
  {
   kuvatav_tekst=kuvatav_tekst+" _";
   sona_seis=sona_seis+"_";
  } 
 }
 document.getElementById("sona").innerHTML=kuvatav_tekst; 
 }
}
var url = "alglaadimine.php";
var params = "keel="+keel;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params);

Kus:

sõltuvalt veebilehitsejast defineeritakse muutuja xmlhttp
seejärel kontrollikse, kas päringu vastus on olemas ==> xmlhttp.onreadystatechange=function()
1. kui on päringu vastus olemas ==> if (xmlhttp.readyState==4 && xmlhttp.status==200)
  - omistatakse päringu vastus xmlhttp.responseText muutujale otsitav_sona ==> otsitav_sona=xmlhttp.responseText;
  - teostatakse mängu alglaadimiseks vajalikud toimingud:
    - sõna tähtedega jagamine, massiivi otsitava_sona_tahed => otsitava_sona_tahed=otsitav_sona.split(“”);
    - sõna esimese ja viimase tähe lisamine massiivi leitud_tahed ==>
      - leitud_tahed.push(otsitava_sona_tahed[0]);
      - if (!leitud_tahed.includes(otsitava_sona_tahed[otsitava_sona_tahed.length-1])) { leitud_tahed.push(otsitava_sona_tahed[otsitava_sona_tahed.length-1]); }
    - tekitada muutujad kuvatav_sona ja sona_seis:
      - kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
      - sona_seis=otsitava_sona_tahed[0];
      - for (i=1; i<otsitava_sona_tahed.length; i++) { if (leitud_tahed.includes(otsitava_sona_tahed[i])) { kuvatav_tekst=kuvatav_tekst+” “+otsitava_sona_tahed[i].toUpperCase(); sona_seis=sona_seis+otsitava_sona_tahed[i]; } else { kuvatav_tekst=kuvatav_tekst+” _”; sona_seis=sona_seis+”_”; }
  - kuvatakse lehele otsitav sõna ==> document.getElementById(“sona”).innerHTML=kuvatav_tekst;
määratletakse päringu muutujad:
1. muutaja url, mis on failinimi, mida kasutatakse ==> var url = “alglaadimine.php”;
2. muutuja params, milleks on valitud keel ==> var params = “keel=”+keel;
avatakse päring ==> xmlhttp.open(“POST”, url, true);
määratletakse päringu päis ==> xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
edastatakse muutuja param ==> xmlhttp.send(params);

Ülejäänud osa funktsioonist algseis jääb samaks, selle erinevusega, et keelevaliku if-else-lausest jäävad välja laused:

var otsitav_sona=”lumelaualaager”;
ja
var otsitav_sona=”snowboardcamp”;

Eelneva tulemusena on funktsiooni algseis sisu järgmine:

function algseis()
{
 if (window.XMLHttpRequest) 
 {
  // veebilehitsejad IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  } 
 else 
 { // veebilehitsejad IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function() 
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
  {
   otsitav_sona=xmlhttp.responseText;
   otsitava_sona_tahed=otsitav_sona.split("");
   leitud_tahed.push(otsitava_sona_tahed[0]);
   if (!leitud_tahed.includes(otsitava_sona_tahed[otsitava_sona_tahed.length-1]))
   {
    leitud_tahed.push(otsitava_sona_tahed[otsitava_sona_tahed.length-1]);
    }
   kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
   sona_seis=otsitava_sona_tahed[0];
   for (i=1; i<otsitava_sona_tahed.length; i++)
   {
    if (leitud_tahed.includes(otsitava_sona_tahed[i]))
    {
     kuvatav_tekst=kuvatav_tekst+" "+otsitava_sona_tahed[i].toUpperCase(); 
     sona_seis=sona_seis+otsitava_sona_tahed[i];
    }
    else
    {
     kuvatav_tekst=kuvatav_tekst+" _";
     sona_seis=sona_seis+"_";
     } 
   }
  document.getElementById("sona").innerHTML=kuvatav_tekst; 
  }
 }
 var url = "alglaadimine.php";
 var params = "keel="+keel;
 xmlhttp.open("POST", url, true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlhttp.send(params);

 if (keel=="eesti")
 {
  document.getElementById("info").innerHTML="Hakka aga mänguga pihta!";
  document.getElementById("tahetekst").innerHTML="Täht:";
  document.getElementById("nupp").innerHTML="Proovi";
  }
 else
 {
  document.getElementById("info").innerHTML="Start the game!";
  document.getElementById("tahetekst").innerHTML="Letter:";
  document.getElementById("nupp").innerHTML="Try";
 }
 document.getElementById("tahed").innerHTML="";
 var input = document.getElementById("taht");
 input.addEventListener("keydown", function (e) 
 {
  if (e.key === "Enter") 
  { 
   //alert(this.value);
   taheproov();
   }
  });
  document.getElementById("pilt").innerHTML='<img src="pilt1.jpg" id="pildisisu">';
  document.getElementById("taht").focus();
  document.getElementById("taht").select();
}

2.2 otsitava sõna leidmine, ehk fail alglaadimine.php

Failis alglaadimine.php teostatakse järgmised tegevused:

omistatakse muutujale $keel parameetri $_POST[‘keel’] väärtus ==> $keel=$_POST[‘keel’];
omistatakse muutujale $failinimi keelevalikust tulenev failinimi (eesti keele puhul sonaraamat_eesti.txt ja inglise keele puhul sonaraamat_english.txt) ==> $failinimi=”sonaraamat_”.$keel.”.txt”;
avatakse fail lugemiseks nng omistatakse puhver muutujale $handle ==> $handle = fopen($failinimi, “r”);
loendurile $i omistatakse algväärtus 0 ==> $i=0;
kui faili sisu on olemas ==> if ($handle)
1. loetakse failist andmed rea haaval, kuni ridu jätkub ==> while (($line = fgets($handle)) !== false)
  - iga rida, millest on eemaldatud reavahetusmärgid (kasutatakse funktsiooni trim), kirjutatakse massiivi $sonad kohale $i ==> $sonad[$i]=trim($line);
  - loendurit $i suurendatakse 1 võrra ==> $i++;
2. suletakse fail ==> fclose($handle);
3. leitakse juhuslik number (kasutades funktsiooni rand failis leiduvate sõnade arvust – minimaalseks numbriks 0 ja maksimaalseks numbriks $i-1, mis omistatakse muutujale $jrknr ==> $jrknr=rand(0,$i-1);
4. kuvatakse massiivis $sonad kohal $jrknr paiknev sõna ==> echo $sonad[$jrknr];
kui faili sisu puudub, kasutatakse sõna lumelaualaager ==> else { echo “lumelaualaager”; }

Fail alglaadimine.php kogu sisu on siis järgmine:

<?php
$keel=$_POST['keel'];
$failinimi="sonaraamat_".$keel.".txt";
$handle = fopen($failinimi, "r");
$i=0;
if ($handle) 
 {
  while (($line = fgets($handle)) !== false) 
  {
   $sonad[$i]=trim($line);
   $i++;
   }
  fclose($handle);
  $jrknr=rand(0,$i-1);
  echo $sonad[$jrknr];
 } 
else 
{
 echo "lumelaualaager";
} 
?>

Õppematerjalid

Sõnavaliku lisamine

1. Sõnaraamatud

2. Mängukoodi muutmine

2.1 muudatused JavaScriptis, failis mangukood.js

2.2 otsitava sõna leidmine, ehk fail alglaadimine.php

Rubriigid