Kerangka dasar sebuah tts online

Berbicara tentang TTS online sepertinya tidak dapat terlepas dari html, css dan javascript. Meskipun ada juga yang dibangun menggunakan flash, atau java. Namun teka-teki silang yang dibangun menggunakan html dan javascript hampir tidak membutuhkan plugin apapun, cukup dengan browser. Lebih ringan dan fleksibel dalam maintenancenya

Sebenarnya seperti apa sih kerangka dasar tts online yang dibuat menggunakan html itu? Kita akan coba membahasnya.


Obyek bahasan tutorial ini hanya pada kerangka html dasarnya saja, so hasilnya hanya sebuah tabel tts statis, jika ingin interaktif selayaknya TTS online kita perlu menambahkan kode javascript.

Kebanyakan TTS online berbasis html yang saya temui, menggunakan tag <table></table> untuk membangun grid demi gridnya. Grid ini selanjutnya dipermanis dengan CSS.

Yang perlu dipahami sebelum melangkah lebih lanjut adalah komponen tag table dasar yang biasanya terdiri dari tag td (kolom) yang diapit oleh tag tr (baris) dan terakhir adalah tag induk yaitu table. Lihat contoh di bawah

<table>
 <tr>
  <td></td>
 </tr>
</table>

Tabel html di atas akan membentuk satu baris yang berisi satu cell (kolom). Untuk TTS biasanya di dalam tag td di tambahkan sebuah tag <input /> fungsinya agar user dapat menginputkan jawaban ke dalam tts tersebut. Nah di dalam tag input ini kita dapat menambahkan beberapa atribut, misal satu kolom itu hanya boleh diisi satu huruf maka kita perlu menambahkan atribut maxlength="1". Atribut lain yang perlu disertakan adalah type="text" dan value=""

<table>
 <tr>
  <td>
   <input type="text" maxlength="1" value="" />
  </td>
 </tr>
</table>

Ohya untuk mendapatkan tampilan yang oke, kita perlu menambahkan beberapa class, nantinya class ini diberi manipulasi melalui CSS. Pada tiap kolom kita tambahkan class ttsoke, kemudian berikan class kelam untuk menandakan tag dengan class ini tidak aktif biasanya berwarna hitam. Kenapa perlu diberi class? Tujuannya untuk mempermudah kita dalam memanipulasi tag ini melalui css.

Kemudian agar tabel terlihat rapi hanya satu garis, maka perlu ditambahkan juga atribut cellspacing="0" cellpadding="0". Berikut contoh yang memiliki tiga kolom. Dua kolom dengan input yang dikasih class ttsoke, dan satu kolom dengan class kelam yang akan kita jadikan kolom tanpa input, biasanya berwarna hitam.

<table cellspacing="0" cellpadding="0">
 <tr>
  <td class="ttsoke">
   <input type="text" maxlength="1" value="" />
  </td>
  <td class="kelam"></td>
  <td class="ttsoke">
   <input type="text" maxlength="1" value="" />
  </td>
 </tr>
</table>

Kita sudah membahas kolom kolom dalam tts beserta atributnya, sekarang kita akan mencoba membangun kerangka tts sederhana

Lihat demo

Dari contoh kerangka tts di atas, masih ada yang kurang yaitu penomoran dalam setiap clue. Kita hanya perlu menambahkan kode berikut di setiap clue:

<span class="nomortts">nomor</span>

Sehingga kode html lengkap dari kerangka tts kita menjadi:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td class="ttsoke">
   <span class="nomortts">1</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
   <span class="nomortts">2</span>
            <input type="text" maxlength="1" value="" />
        </td>
  <td class="kelam"></td>
        <td class="ttsoke">
   <span class="nomortts">3</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
   <span class="nomortts">4</span>
            <input type="text" maxlength="1" value="" />
        </td>
    </tr>
    <tr>
        <td class="ttsoke">
   <span class="nomortts">5</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
    </tr>
    <tr>
        <td class="kelam"></td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="kelam"></td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="kelam"></td>
    </tr>
  <tr>
        <td class="ttsoke">
   <span class="nomortts">6</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
   <span class="nomortts">7</span>
            <input type="text" maxlength="1" value="" />
        </td>
    </tr>
 <tr>
        <td class="ttsoke">
   <span class="nomortts">8</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
  <td class="kelam"></td>
        <td class="ttsoke">
   <span class="nomortts">9</span>
            <input type="text" maxlength="1" value="" />
        </td>
        <td class="ttsoke">
            <input type="text" maxlength="1" value="" />
        </td>
    </tr>
</table>

Dan ini CSS untuk mengatur tiap tag dan class yang telah kita buat

table {
 border: 1px solid black; 
}
.ttsoke {
    border: 1px solid black;
}
 
.ttsoke input {
    width: 20px;
    height: 20px;
}
 
.kelam {
    background-color: black;
}
.nomortts {
 font-family: Arial;
    font-size: 7pt;
    margin-left: 1px;
    position: absolute; 
}

Lihat demo kerangka tts dengan nomor