Belajar HTML Membuat Game TTS di HTML

Minggu, 03 November 2019 Tambah Komentar Edit
kali ini saya akan membagikan informasi mengenai Belajar HTML Membuat Game TTS di HTML.  game TTS ini di buat ketika saya mendapat tugas dari dosen, kalian bisa ambil source codenya apabila kalian menginginkannya kodingannya ada di bawah ya guys !!


<!DOCTYPE html>

<html>

<head>

  <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

 <title>Ihsan Chennel</title>

 <style type="text/css">

   .kotak{

    width: 35px;

    height: 35px;

    border: 1px solid green;

    color: grey;

    text-align: center;

   }

   .betul{

    width: 35px;

    height: 35px;

    border: 1px solid blue;

    color: blue;

    text-align: center;



   }

   .salah{

    width: 35px;

    height: 35px;

    border: 1px solid green;

    color: grey;

    text-align: center;

   }

   .button {

    background-color: #4CAF50; /* Pink */

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

    border-radius: 10px;

  }



  .button1 {

    background-color: #4CAF50;

    color: white;

    border-radius: 10px;

  }



  .button1:hover {

    background-color: white; 

    color: #4CAF50; 

    border: 2px solid #4CAF50;

    border-radius: 10px;

  }



 </style>

</head>

<body>

 <nav class="navbar navbar-expand-lg navbar-light bg-light">

   

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

      <div class="navbar-nav">

        <a class="nav-item nav-link active" href="#">Kembali <span class="sr-only">(current)</span></a>

        <a class="nav-item nav-link disabled" href="#">TekaTeki</a>

      </div>

    </div>

 </nav>

<div class="container">

<div class="row">

<div class="col-md">

<br>

<br>

  <table>

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t1" class="kotak" placeholder="1"></td>  

  <td><input type="text" name="" id="t2" class="kotak" placeholder="1"></td>

  <td><input type="text" name="" id="t3" class="kotak"></td>

  <td><input type="text" name="" id="t4" class="kotak"></td>

  

  <td colspan="1"></td>

  <td><input type="text" name="" id="t38" class="kotak" placeholder="2"></td> 

  <td><input type="text" name="" id="t39" class="kotak"></td>

  <td><input type="text" name="" id="t40" class="kotak"></td>

  <td><input type="text" name="" id="t41" class="kotak"></td>

  <td><input type="text" name="" id="t42" class="kotak" placeholder="3"></td>

 </tr> 

 

 <tr>

  <td colspan="2"></td>

  <td><input type="text" name="" id="t5" class="kotak"></td> 

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t36" class="kotak"></td> 

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t43" class="kotak"></td> 

  

 </tr>

 <tr>

  <td colspan="2"></td>

  <td><input type="text" name="" id="t6" class="kotak"></td> 

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t37" class="kotak"></td> 

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t44" class="kotak"></td> 

  

 </tr>

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t7" class="kotak" placeholder="3"></td> 

  <td><input type="text" name="" id="t8" class="kotak"></td>

  <td><input type="text" name="" id="t9" class="kotak"></td>

  <td><input type="text" name="" id="t10" class="kotak" placeholder="4"></td>

  <td><input type="text" name="" id="t11" class="kotak"></td>

  <td><input type="text" name="" id="t12" class="kotak"></td>

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t45" class="kotak"></td> 

 </tr>

 <tr>

  <td colspan="4"></td>

  <td><input type="text" name="" id="t13" class="kotak"></td>

  

  <td colspan="5"></td>

  <td><input type="text" name="" id="t46" class="kotak"></td> 

 </tr>

 <tr>

  <td colspan="4"></td>

  <td><input type="text" name="" id="t14" class="kotak"></td>

  

  <td colspan="3"></td>

  <td><input type="text" name="" id="t20" class="kotak" placeholder="5"></td>

  

  <td colspan="1"></td>

  <td><input type="text" name="" id="t47" class="kotak"></td> 



 </tr>

 <tr>

  <td colspan="4"></td>

  <td><input type="text" name="" id="t15" class="kotak" placeholder="4"></td> <!-- mendatar-->

  <td><input type="text" name="" id="t16" class="kotak"></td>

  <td><input type="text" name="" id="t17" class="kotak"></td>

  <td><input type="text" name="" id="t18" class="kotak"></td>

  <td><input type="text" name="" id="t19" class="kotak"></td>

 </tr>

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t34" class="kotak" placeholder="6"></td>

  

  <td colspan="6"></td>

  <td><input type="text" name="" id="t21" class="kotak"></td>

 </tr>

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t35" class="kotak"></td>

  

  <td colspan="6"></td>

  <td><input type="text" name="" id="t22" class="kotak"></td>

 </tr>

 

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t23" class="kotak" placeholder="5"></td> <!-- mendatar-->

  <td><input type="text" name="" id="t24" class="kotak"></td>

  <td><input type="text" name="" id="t25" class="kotak"></td>

  <td><input type="text" name="" id="t26" class="kotak"></td>

  <td><input type="text" name="" id="t27" class="kotak"></td>

  <td><input type="text" name="" id="t28" class="kotak"></td>

  <td><input type="text" name="" id="t29" class="kotak"></td>

  <td><input type="text" name="" id="t30" class="kotak"></td>

  <td><input type="text" name="" id="t31" class="kotak"></td>

  <td><input type="text" name="" id="t32" class="kotak"></td>

 </tr>

 <tr>

  <td colspan="1"></td>

  <td><input type="text" name="" id="t33" class="kotak"></td>

 </tr>

 

 <br>

      </table>



    <br>

    <br>

    <button class="button button1" onclick="cek_skor()" >Cek skor dulu yu!</button>

   </div>

   <div class="col-md">

    <br>

    <br>

    <h3>Pertanyaan Mendatar</h3>

    <p>1. Aku</p>

    <p>2. Malam(Lawan Kata</p>

    <p>3. Pangkas</p>

    <p>4. Macan?...</p>

    <P>5. Provinsi(di Indonesia)</P>

    <br>

    <h3>Pertanyaan Menurun</h3>

    <p>1. Sial</p>

    <p>2. Musik (Bhs.Inggris)</p>

    <p>3. Nerves</p>

    <P>4. Penangkal Sakit</p>

    <p>5. Alang-?</p>

    <p>6. Sejenis Besi</p>

   </div> 

  </div>

 </div>

<script type="text/javascript">

 

 function cek_skor() {

  var skor = 0;

  var t1 = document.getElementById("t1").value;

  var t2 = document.getElementById("t2").value;

  var t3 = document.getElementById("t3").value;

  var t4 = document.getElementById("t4").value;

  var t5 = document.getElementById("t5").value;

  var t6 = document.getElementById("t6").value;

  var t7 = document.getElementById("t7").value;

  var t8 = document.getElementById("t8").value;

  var t9 = document.getElementById("t9").value;

  var t10 = document.getElementById("t10").value;

  var t11 = document.getElementById("t11").value;

  var t12 = document.getElementById("t12").value;

  var t13 = document.getElementById("t13").value;

  var t14 = document.getElementById("t14").value;

  var t15 = document.getElementById("t15").value;

  var t16 = document.getElementById("t16").value;

  var t17 = document.getElementById("t17").value;

  var t18 = document.getElementById("t18").value;

  var t19 = document.getElementById("t19").value;

  var t20 = document.getElementById("t20").value;

  var t21 = document.getElementById("t21").value;

  var t22 = document.getElementById("t22").value;

  var t23 = document.getElementById("t23").value;

  var t24 = document.getElementById("t24").value;

  var t25 = document.getElementById("t25").value;

  var t26 = document.getElementById("t26").value;

  var t27 = document.getElementById("t27").value;

  var t28 = document.getElementById("t28").value;

  var t29 = document.getElementById("t29").value;

  var t30 = document.getElementById("t30").value;

  var t31 = document.getElementById("t31").value;

  var t32 = document.getElementById("t32").value;

  var t33 = document.getElementById("t33").value;

  var t34 = document.getElementById("t34").value;

  var t35 = document.getElementById("t35").value;

  var t36 = document.getElementById("t36").value;

  var t37 = document.getElementById("t37").value;

  var t38 = document.getElementById("t38").value;

  var t39 = document.getElementById("t39").value;

  var t40 = document.getElementById("t40").value;

  var t41 = document.getElementById("t41").value;

  var t42 = document.getElementById("t42").value;

  var t43 = document.getElementById("t43").value;

  var t44 = document.getElementById("t44").value;

  var t45 = document.getElementById("t45").value;

  var t46 = document.getElementById("t46").value;

  var t47 = document.getElementById("t47").value;

  

  if (t1=="S" || t1=="s") {

   document.getElementById("t1").classList.remove("kotak");

   document.getElementById("t1").classList.remove("salah");

   document.getElementById("t1").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t1").classList.remove("kotak");

   document.getElementById("t1").classList.remove("betul");

   document.getElementById("t1").classList.add("salah");

  }

  if (t2=="A" || t2=="a") {

   document.getElementById("t2").classList.remove("kotak");

   document.getElementById("t2").classList.remove("salah");

   document.getElementById("t2").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t2").classList.remove("kotak");

   document.getElementById("t2").classList.remove("betul");

   document.getElementById("t2").classList.add("salah");

  }

  if (t3=="Y" || t3=="y") {

   document.getElementById("t3").classList.remove("kotak");

   document.getElementById("t3").classList.remove("salah");

   document.getElementById("t3").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t3").classList.remove("kotak");

   document.getElementById("t3").classList.remove("betul");

   document.getElementById("t3").classList.add("salah");

  }

  if (t4=="A" || t4=="a") {

   document.getElementById("t4").classList.remove("kotak");

   document.getElementById("t4").classList.remove("salah");

   document.getElementById("t4").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t4").classList.remove("kotak");

   document.getElementById("t4").classList.remove("betul");

   document.getElementById("t4").classList.add("salah");

  }

  if (t5=="G" || t5=="g") {

   document.getElementById("t5").classList.remove("kotak");

   document.getElementById("t5").classList.remove("salah");

   document.getElementById("t5").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t5").classList.remove("kotak");

   document.getElementById("t5").classList.remove("betul");

   document.getElementById("t5").classList.add("salah");

  }

  if (t6=="G" || t6=="g") {

   document.getElementById("t6").classList.remove("kotak");

   document.getElementById("t6").classList.remove("salah");

   document.getElementById("t6").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t6").classList.remove("kotak");

   document.getElementById("t6").classList.remove("betul");

   document.getElementById("t6").classList.add("salah");

  }

  if (t7=="P" || t7=="p") {

   document.getElementById("t7").classList.remove("kotak");

   document.getElementById("t7").classList.remove("salah");

   document.getElementById("t7").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t7").classList.remove("kotak");

   document.getElementById("t7").classList.remove("betul");

   document.getElementById("t7").classList.add("salah");

  }

  if (t8=="O" || t8=="o") {

   document.getElementById("t8").classList.remove("kotak");

   document.getElementById("t8").classList.remove("salah");

   document.getElementById("t8").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t8").classList.remove("kotak");

   document.getElementById("t8").classList.remove("betul");

   document.getElementById("t8").classList.add("salah");

  }

  if (t9=="T" || t1=="t") {

   document.getElementById("t9").classList.remove("kotak");

   document.getElementById("t9").classList.remove("salah");

   document.getElementById("t9").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t9").classList.remove("kotak");

   document.getElementById("t9").classList.remove("betul");

   document.getElementById("t9").classList.add("salah");

  }

  if (t10=="O" || t10=="o") {

   document.getElementById("t10").classList.remove("kotak");

   document.getElementById("t10").classList.remove("salah");

   document.getElementById("t10").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t10").classList.remove("kotak");

   document.getElementById("t10").classList.remove("betul");

   document.getElementById("t10").classList.add("salah");

  }

  if (t11=="N" || t11=="n") {

   document.getElementById("t11").classList.remove("kotak");

   document.getElementById("t11").classList.remove("salah");

   document.getElementById("t11").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t11").classList.remove("kotak");

   document.getElementById("t11").classList.remove("betul");

   document.getElementById("t11").classList.add("salah");

  }

  if (t12=="G" || t12=="g") {

   document.getElementById("t12").classList.remove("kotak");

   document.getElementById("t12").classList.remove("salah");

   document.getElementById("t12").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t12").classList.remove("kotak");

   document.getElementById("t12").classList.remove("betul");

   document.getElementById("t12").classList.add("salah");

  }

  if (t13=="B" || t13=="b") {

   document.getElementById("t13").classList.remove("kotak");

   document.getElementById("t13").classList.remove("salah");

   document.getElementById("t13").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t13").classList.remove("kotak");

   document.getElementById("t13").classList.remove("betul");

   document.getElementById("t13").classList.add("salah");

  }

  if (t14=="A" || t14=="a") {

   document.getElementById("t14").classList.remove("kotak");

   document.getElementById("t14").classList.remove("salah");

   document.getElementById("t14").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t14").classList.remove("kotak");

   document.getElementById("t14").classList.remove("betul");

   document.getElementById("t14").classList.add("salah");

  }

  if (t15=="T" || t15=="t") {

   document.getElementById("t15").classList.remove("kotak");

   document.getElementById("t15").classList.remove("salah");

   document.getElementById("t15").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t15").classList.remove("kotak");

   document.getElementById("t15").classList.remove("betul");

   document.getElementById("t15").classList.add("salah");

  }

  if (t16=="U" || t16=="u") {

   document.getElementById("t16").classList.remove("kotak");

   document.getElementById("t16").classList.remove("salah");

   document.getElementById("t16").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t16").classList.remove("kotak");

   document.getElementById("t16").classList.remove("betul");

   document.getElementById("t16").classList.add("salah");

  }

  if (t17=="T" || t17=="t") {

   document.getElementById("t17").classList.remove("kotak");

   document.getElementById("t17").classList.remove("salah");

   document.getElementById("t17").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t17").classList.remove("kotak");

   document.getElementById("t17").classList.remove("betul");

   document.getElementById("t17").classList.add("salah");

  }

  if (t18=="U" || t18=="u") {

   document.getElementById("t18").classList.remove("kotak");

   document.getElementById("t18").classList.remove("salah");

   document.getElementById("t18").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t18").classList.remove("kotak");

   document.getElementById("t18").classList.remove("betul");

   document.getElementById("t18").classList.add("salah");

  }

  if (t19=="L" || t19=="l") {

   document.getElementById("t19").classList.remove("kotak");

   document.getElementById("t19").classList.remove("salah");

   document.getElementById("t19").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t19").classList.remove("kotak");

   document.getElementById("t19").classList.remove("betul");

   document.getElementById("t19").classList.add("salah");

  }

  if (t20=="A" || t20=="a") {

   document.getElementById("t20").classList.remove("kotak");

   document.getElementById("t20").classList.remove("salah");

   document.getElementById("t20").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t20").classList.remove("kotak");

   document.getElementById("t20").classList.remove("betul");

   document.getElementById("t20").classList.add("salah");

  }

  if (t21=="A" || t21=="a") {

   document.getElementById("t21").classList.remove("kotak");

   document.getElementById("t21").classList.remove("salah");

   document.getElementById("t21").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t21").classList.remove("kotak");

   document.getElementById("t21").classList.remove("betul");

   document.getElementById("t21").classList.add("salah");

  }

  if (t22=="N" || t22=="n") {

   document.getElementById("t22").classList.remove("kotak");

   document.getElementById("t22").classList.remove("salah");

   document.getElementById("t22").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t22").classList.remove("kotak");

   document.getElementById("t22").classList.remove("betul");

   document.getElementById("t22").classList.add("salah");

  }

  if (t23=="J" || t23=="j") {

   document.getElementById("t23").classList.remove("kotak");

   document.getElementById("t23").classList.remove("salah");

   document.getElementById("t23").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t23").classList.remove("kotak");

   document.getElementById("t23").classList.remove("betul");

   document.getElementById("t23").classList.add("salah");

  }

  if (t24=="A" || t24=="a") {

   document.getElementById("t24").classList.remove("kotak");

   document.getElementById("t24").classList.remove("salah");

   document.getElementById("t24").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t24").classList.remove("kotak");

   document.getElementById("t24").classList.remove("betul");

   document.getElementById("t24").classList.add("salah");

  }

  if (t25=="W" || t25=="w") {

   document.getElementById("t25").classList.remove("kotak");

   document.getElementById("t25").classList.remove("salah");

   document.getElementById("t25").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t25").classList.remove("kotak");

   document.getElementById("t25").classList.remove("betul");

   document.getElementById("t25").classList.add("salah");

  }

  if (t26=="A" || t26=="a") {

   document.getElementById("t26").classList.remove("kotak");

   document.getElementById("t26").classList.remove("salah");

   document.getElementById("t26").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t26").classList.remove("kotak");

   document.getElementById("t26").classList.remove("betul");

   document.getElementById("t26").classList.add("salah");

  }

  if (t27=="T" || t27=="t") {

   document.getElementById("t27").classList.remove("kotak");

   document.getElementById("t27").classList.remove("salah");

   document.getElementById("t27").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t27").classList.remove("kotak");

   document.getElementById("t27").classList.remove("betul");

   document.getElementById("t27").classList.add("salah");

  }

  if (t28=="E" || t28=="e") {

   document.getElementById("t28").classList.remove("kotak");

   document.getElementById("t28").classList.remove("salah");

   document.getElementById("t28").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t28").classList.remove("kotak");

   document.getElementById("t28").classList.remove("betul");

   document.getElementById("t28").classList.add("salah");

  }

  if (t29=="N" || t29=="n") {

   document.getElementById("t29").classList.remove("kotak");

   document.getElementById("t29").classList.remove("salah");

   document.getElementById("t29").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t29").classList.remove("kotak");

   document.getElementById("t29").classList.remove("betul");

   document.getElementById("t29").classList.add("salah");

  }

  if (t30=="G" || t30=="g") {

   document.getElementById("t30").classList.remove("kotak");

   document.getElementById("t30").classList.remove("salah");

   document.getElementById("t30").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t30").classList.remove("kotak");

   document.getElementById("t30").classList.remove("betul");

   document.getElementById("t30").classList.add("salah");

  }

  if (t31=="A" || t31=="a") {

   document.getElementById("t31").classList.remove("kotak");

   document.getElementById("t31").classList.remove("salah");

   document.getElementById("t31").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t31").classList.remove("kotak");

   document.getElementById("t31").classList.remove("betul");

   document.getElementById("t31").classList.add("salah");

  }

  if (t32=="H" || t32=="h") {

   document.getElementById("t32").classList.remove("kotak");

   document.getElementById("t32").classList.remove("salah");

   document.getElementById("t32").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t32").classList.remove("kotak");

   document.getElementById("t32").classList.remove("betul");

   document.getElementById("t32").classList.add("salah");

  }

  if (t33=="A" || t33=="a") {

   document.getElementById("t33").classList.remove("kotak");

   document.getElementById("t33").classList.remove("salah");

   document.getElementById("t33").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t33").classList.remove("kotak");

   document.getElementById("t33").classList.remove("betul");

   document.getElementById("t33").classList.add("salah");

  }

  if (t34=="B" || t34=="b") {

   document.getElementById("t34").classList.remove("kotak");

   document.getElementById("t34").classList.remove("salah");

   document.getElementById("t34").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t34").classList.remove("kotak");

   document.getElementById("t34").classList.remove("betul");

   document.getElementById("t34").classList.add("salah");

  }

  if (t35=="A" || t35=="a") {

   document.getElementById("t35").classList.remove("kotak");

   document.getElementById("t35").classList.remove("salah");

   document.getElementById("t35").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t35").classList.remove("kotak");

   document.getElementById("t35").classList.remove("betul");

   document.getElementById("t35").classList.add("salah");

  }

  if (t36=="O" || t36=="o") {

   document.getElementById("t36").classList.remove("kotak");

   document.getElementById("t36").classList.remove("salah");

   document.getElementById("t36").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t36").classList.remove("kotak");

   document.getElementById("t36").classList.remove("betul");

   document.getElementById("t36").classList.add("salah");

  }

  if (t37=="N" || t37=="n") {

   document.getElementById("t37").classList.remove("kotak");

   document.getElementById("t37").classList.remove("salah");

   document.getElementById("t37").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t37").classList.remove("kotak");

   document.getElementById("t37").classList.remove("betul");

   document.getElementById("t37").classList.add("salah");

  }

  if (t38=="S" || t38=="s") {

   document.getElementById("t38").classList.remove("kotak");

   document.getElementById("t38").classList.remove("salah");

   document.getElementById("t38").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t38").classList.remove("kotak");

   document.getElementById("t38").classList.remove("betul");

   document.getElementById("t38").classList.add("salah");

  }

  if (t39=="I" || t39=="i") {

   document.getElementById("t30").classList.remove("kotak");

   document.getElementById("t30").classList.remove("salah");

   document.getElementById("t30").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t30").classList.remove("kotak");

   document.getElementById("t30").classList.remove("betul");

   document.getElementById("t30").classList.add("salah");

  }

  if (t40=="A" || t40=="a") {

   document.getElementById("t40").classList.remove("kotak");

   document.getElementById("t40").classList.remove("salah");

   document.getElementById("t40").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t40").classList.remove("kotak");

   document.getElementById("t40").classList.remove("betul");

   document.getElementById("t40").classList.add("salah");

  }

  if (t41=="N" || t41=="n") {

   document.getElementById("t41").classList.remove("kotak");

   document.getElementById("t41").classList.remove("salah");

   document.getElementById("t41").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t41").classList.remove("kotak");

   document.getElementById("t41").classList.remove("betul");

   document.getElementById("t41").classList.add("salah");

  }

  if (t42=="G" || t42=="g") {

   document.getElementById("t42").classList.remove("kotak");

   document.getElementById("t42").classList.remove("salah");

   document.getElementById("t42").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t42").classList.remove("kotak");

   document.getElementById("t42").classList.remove("betul");

   document.getElementById("t42").classList.add("salah");

  }

  if (t43=="E" || t43=="g") {

   document.getElementById("t43").classList.remove("kotak");

   document.getElementById("t43").classList.remove("salah");

   document.getElementById("t43").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t43").classList.remove("kotak");

   document.getElementById("t43").classList.remove("betul");

   document.getElementById("t43").classList.add("salah");

  }

  if (t44=="R" || t44=="r") {

   document.getElementById("t44").classList.remove("kotak");

   document.getElementById("t44").classList.remove("salah");

   document.getElementById("t44").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t44").classList.remove("kotak");

   document.getElementById("t44").classList.remove("betul");

   document.getElementById("t44").classList.add("salah");

  }

  if (t45=="O" || t45=="o") {

   document.getElementById("t45").classList.remove("kotak");

   document.getElementById("t45").classList.remove("salah");

   document.getElementById("t45").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t45").classList.remove("kotak");

   document.getElementById("t45").classList.remove("betul");

   document.getElementById("t45").classList.add("salah");

  }

  if (t46=="G" || t46=="g") {

   document.getElementById("t46").classList.remove("kotak");

   document.getElementById("t46").classList.remove("salah");

   document.getElementById("t46").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t46").classList.remove("kotak");

   document.getElementById("t46").classList.remove("betul");

   document.getElementById("t46").classList.add("salah");

  }

  if (t47=="I" || t47=="i") {

   document.getElementById("t47").classList.remove("kotak");

   document.getElementById("t47").classList.remove("salah");

   document.getElementById("t47").classList.add("betul");

   skor++;

  } else {

   document.getElementById("t47").classList.remove("kotak");

   document.getElementById("t47").classList.remove("betul");

   document.getElementById("t47").classList.add("salah");

  }

  alert("Your Skor: "+skor);

 }

</script>



    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>

</html>


setelah kalian copykan kode di atas ke alat editor, kalian tinggal save dengan format HTML, semoga bermanfaat apa yang saya berikan.

Belum ada Komentar untuk "Belajar HTML Membuat Game TTS di HTML"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel