Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana - Belajar Pemrograman
News Update
Loading...

9/13/2019

Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

programmer.webillian.com – Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial seputar Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana, pada artikel ini nantinya ada beberapa program quiz javascript yang akan kita buat, yaitu program quiz matematika dengan javascript dan quiz pemrograman web dasar menggunakan javascript.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Cara untuk membuat program quiz dengan javascript ini sangatlah sederhana dan syntax nya mudah untuk dipahami baik yang sudah mahir dalam javascript maupun bagi pemula, untuk membuat program quiz matematika ataupun quiz pemrograman web dengan javascript ini tidaklah susah.

Untuk dapat membuat dua program quiz ini terdapat perbedaan antara membuat program quiz dengan javascript yang pertama dengan cara membuat quiz javascript yang kedua. Perbedaannya adalah pada metode yang digunakan ketika menjawab pertanyaan dari quiz tersebut.

Program quiz matematika dengan javascript ini yang nantinya kita akan buat menggunakan radio button untuk menjawab pertanyaan yang sudah disediakan. Sedangkan pada quiz pemrograman web dengan javascript menggunakan kolom popup untuk menjawab pertanyaan yang sudah tersedia. Jadi dari segi kedua syntax yang kita gunakan dalam kedua quiz dengan javascript yang akan kita buat pada kali ini jelaslah mempunyai perbedaan.

Program quiz matematika sederhana javascript ini menggunakan radio button untuk menjawab pertanyaan pertanyaan yang ada, dan nantinya mempunyai tombol next untuk menjawab pertanyaan selanjutnya, untuk tombol prev digunakan untuk kembali ke pertanyaan sebelumnya.

Kelebihan dalam program quiz matematika dengan javascript ini salah satunya adalah menggunakan container, jadi akan membuat tampilannya lebih elegan, dan juga dengan javascrtipt teks yang muncul seperti di ketik sendiri, itu akan mempercantik tampilan dan user/ pengguna akan merasakan sensasi seperti ujian sebenarnya.

Untuk javascript animation teks ketik itu akan muncul ketika browser pertama kali reload/ pada saat pertama kali membukanya, oleh karena itu efek animation ini tidak akan membuat risi pengguna/ user, melainkan menambah kecantikan dari tampilannya.


Untuk dapat membuatnya, perhatikan langkah-langkah sebagai berikut ini:



1. Buatlah Struktur Foldernya Seperti Gambar Dibawah Ini.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Untuk pembuatan program quiz matematika sederhana dengan javascript ini sengaja Kami pisahkan antara html, javascript, dan css nya, dengan tujuan supaya Anda lebih mudah memahami nantinya.

2. Buat File index.html


Untuk membuatnya Anda tidak perlu untuk mengetiknya, cukup Anda copy saja scriptnya dibawah ini, tapi dengan catatan pelajari scriptnya ya jangan asal copy dan paste saja.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
 <title>Quiz Matematika </title>
  <link type='text/css' rel='stylesheet' href='style.css'/>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
 </head>
 <body>
  <div id='container'>
   <div id='title'>
    <h1>Quiz Javascript</h1>
  <berjalan></berjalan>
   </div>
      <br/>
     <div id='quiz'></div>
      <div class='button' id='kamu'><a href='#'>Next</a></div>
      <div class='button' id='prev'><a href='#'>Prev</a></div>
      <div class='button' id='start'> <a href='#'>Start Over</a></div>
      <!-- <button class='' id='next'>Next</a></button>
      <button class='' id='prev'>Prev</a></button>
      <button class='' id='start'> Start Over</a></button> -->
     </div>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script type="text/javascript" src='questions.json'></script>
  <script type='text/javascript' src='jsquiz.js'></script>
 </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="index.js"></script>
<script>var text="Jawab Pertanyaan Dibawah Ini Dengan Baik Dan Benar !";
var word = text.split("");
var i = 0;
var interval = setInterval(writeText, 100 );
function writeText() {
    var berjalan = document.getElementsByTagName("berjalan")[0];
    if (i < word.length) {
        berjalan.innerHTML += word[i];
        i++;
    }
}</script>
</body>
</html>



Javascript tersebut bukanlah syntax utama dalam pembuatan program quiz matematika dengan javascript ini, jadi sengaja kami pisahkan agar tidak tertukar dengan javascript utama. Anda juga perlu tahu bahwa fungsi javascript tersebut adalah untuk animation teks ketik.

3. Membuat File index.js


Kemudian kita akan membuat file utama javascriptnya, yang mana berfungsi untuk menjalankan program quiz dengan menggunakan javascript ini. Silahkan code dibawah ini pastekan ke file index.js


(function() {
  var questions = [{
    question: "Berapa 2*5?",
    choices: [2, 5, 10, 15, 20],
    correctAnswer: 2
  }, {
    question: "Berapa Hasil dari 3*6?",
    choices: [3, 6, 9, 12, 18],
    correctAnswer: 4
  }, {
    question: "Berapa Hasil dari 8*9?",
    choices: [72, 99, 108, 134, 156],
    correctAnswer: 0
  }, {
    question: "Berapa Hasil dari 1*7?",
    choices: [4, 5, 6, 7, 8],
    correctAnswer: 3
  }, {
    question: "Berapa Hasil 8*8?",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 4
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#next').on('click', function (e) {
    e.preventDefault();
   
    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {       
      return false;
    }
    choose();
   
    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      alert('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
    }
  });

  // Click handler for the 'prev' button
  $('#prev').on('click', function (e) {
    e.preventDefault();
   
    if(quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });

  // Click handler for the 'Start Over' button
  $('#start').on('click', function (e) {
    e.preventDefault();
   
    if(quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });

  // Animates buttons on hover
  $('.button').on('mouseenter', function () {
    $(this).addClass('active');
  });
  $('.button').on('mouseleave', function () {
    $(this).removeClass('active');
  });

  // Creates and returns the div that contains the questions and
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });
   
    var header = $('<h2>Pertanyaan ' + (index + 1) + ':</h2>');
    qElement.append(header);
   
    var question = $('<p>').append(questions[index].question);
    qElement.append(question);
   
    var radioButtons = createRadios(index);
    qElement.append(radioButtons);
   
    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $('#question').remove();
     
      if(questionCounter < questions.length){
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value='+selections[questionCounter]+']').prop('checked', true);
        }
       
        // Controls display of 'prev' button
        if(questionCounter === 1){
          $('#prev').show();
        } else if(questionCounter === 0){
         
          $('#prev').hide();
          $('#next').show();
        }
      }else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>',{id: 'question'});
   
    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
   
    score.append('Hasil yang Benar dari jawabanmu adalah ' + numCorrect + ' Soal dari ' +
                 questions.length + ' Soal Yang Ada.');
    return score;
  }
})();









Pada bagian code inilah inti utama dari program quiz matematika sederhana menggunakan javascript, jadi Anda harus benar-benar membaca scriptnya supaya Anda memahami Algoritma dari program tersebut.



4. Membuat File style.css


Untuk selanjutnya, Anda memasukan code di bawah ini pada file CSS, pastinya Anda sudah tahukan apa fungsi dari css ini, file css ini berfungsi untuk menghias/ mendesain dari tampilan program quiz matematika sederhana ini dengan javascript yang kita buat ini supaya terlihat indah. Silahkan Anda pastekan code CSS di bawah ini pada file style.css


body {
    font-family: Open Sans;
}


h1 {

    text-align: center;
}


#title {

    text-decoration: underline;
}


#quiz {

    text-indent: 10px;
    display:none;
}


.button {

    border:4px solid;
    border-radius:5px;
    width: 40px;
    padding-left:5px;
    padding-right: 5px;
    position: relative;
    float:right;
    background-color: #DCDCDC;
    color: black;
    margin: 0 2px 0 2px;
}


.button.active {

    background-color: #F8F8FF;
    color: #525252;
}


button {

    position: relative;
    float:right;
}


.button a {

    text-decoration: none;
    color: black;
}


#container {

    width:50%;
    margin:auto;
    padding: 0 25px 40px 10px;
    background-color: #827b7f;
    border:4px solid #B0E0E6;
    border-radius:5px;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 5px 5px 5px #888;
}


ul {

    list-style-type: none;
    padding: 0;
    margin: 0;
}


#prev {

    display:none;
}


#start {

    display:none;
    width: 90px;
}
#berjalan{font-family: Roboto;font-weight: bold;font-size: 20px;transition-duration: 0.0.5s;}

Jika Anda sudah membuat semua file diatas, maka Anda jangan lupa untuk save terlebih dahulu programnya dengan cara tekan pada keyboard Anda CTRL+ S.

Ahirnya quiz matematika sederhana menggunakan javascript sudah selesai, silahkan Anda coba program quiz dengan javascript sederhana tersebut, alangkah baiknya jika Anda menyimpan-nya di dalam file htdocs, dan menjalankan pada xampp terlebih dahulu.

Tetapi sebenarnya tanpa seperti itu juga tidak masalah cukup langsung saja jalankan. Pastinya berhasilkan. Jika Anda mengalami error silahkan Anda kembali scriptnya, dan mengcopy ulang dari yang atas sampai yang bawah script yang sudah Kami berikan tadi. Setelah itu silahkan coba kembali Program Membuat Quiz Dengan Javascipt Sederhananya.






Selanjutnya, pada program quiz pemrograman web dengan javascript ini berbeda dengan yang pertama yang Kita buat diatas tadi.


Cara Membuat Quiz pemrograman web sederhana dengan menggunakan Javascript



Sebelumnya sudah Kita bahas sedikit bahwa program quiz dengan javascrtipt yang kedua ini, yaitu berbeda dengan quiz yang pertama, lalu dimanakah letak perbedaannya?

Salah satu perbedaannya yaitu dari syntax yang digunakan, penyajian untuk menjawab pertanyaaan, semua script program quiz dengan javascript di satukan dalam satu file index.html, dan lain sebagainya.

Perbedaan pertama, dalam syntax yang digunakan yaitu program quiz pemrograman web ini menggunakan form input yang dapat di isi berupa huruf maupun angka.

Perbedaan kedua, penyajian untuk menjawab pertanyaan pada program quiz ini lebih simpel atau lebih sederhana.

Perbedaan ketiga, dibuat dalam satu file saja yaitu file index.html , kenapa hanya di satukan tidak dipisah-pisahkan seperti program quiz matematika tadi? Jawabannya karena Anda sudah paham terhadap program quiz dengan javascript yang pertama, maka saya membuatnya menjadi dalam satu file supaya Anda dapat membandingkan dan mempelajari jauh lebih dalam lagi script yang dipakai pada program quiz ini.


Sekarang mari kita buat program quiz pemrograman web sederhana dengan javascript.

1. Buat Sebuah Folder Baru Didalam Folder quiz Tadi yang bernama Quiz Web.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Maka tampilan pada text editor Anda akan terlihat seperti gambar diatas. Kenapa dibuat didalam folder quiz tadi? Karena supaya lebih mudah saja menemukan file tersebut dan lebih rapih dalam penyimpanan file quiz nya.

Selanjutnya, didalam folder quiz web tadi buatlah satu file bernama index.html yang nantinya akan kita buat sebagai program quiz pemrograman web dengan javascript sederhana. Copy script program quiz dengan javascript dibawah ini dan save.



<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
<style type="text/css">
berjalan{font-family: Roboto;font-weight: bold;font-size: 20px;transition-duration: 0.0.5s;}
</style>

 <script type="text/javascript">
  var soal;
  var jawaban;
  var jumlahSoal = 0;
  var benar = 0;
  var salah = 0;

  var pesan;

  while (jumlahSoal<3) {
   if (jumlahSoal==0) {
    soal = window.prompt("Hypertext Markup Language kepanjangan dari ?");
    jawaban = "html";
   }
   if (jumlahSoal==1) {
    soal = window.prompt(pesan + "\n\n" + "Versi Python terbaru adalah ?");
     jawaban = "3";
   }
   if (jumlahSoal==2) {
    soal = window.prompt(pesan + "\n\n" + "Apa Kependekan cascading style sheet?");
    soal = soal.toLowerCase();
    jawaban = "css";
   }
   if (soal==jawaban) {
    benar += 1;
    pesan = "Jawaban Anda Benar";
   } else {
    salah += 1;
    pesan = "Jawaban Anda Salah"
   }
   jumlahSoal += 1;
  }
  document.writeln(" <berjalan></berjalan><hr />");
document.writeln("<p>Anda Menjawab : <b>" + benar + "</b> dari <b>" + jumlahSoal + "</b> soal dengan benar!</p>");
var text="Belajar Membuat Quiz javascript Sederhana";
var word = text.split("");
var i = 0;
var interval = setInterval(writeText, 100 );
function writeText() {
    var berjalan = document.getElementsByTagName("berjalan")[0];
    if (i < word.length) {
        berjalan.innerHTML += word[i];
        i++;
    }
}
</script>
</head>
<body>
 </body>
</html>









Sekarang coba Anda jalankan program quiz dengan javascript yang tersebut. Jika Anda sudah bisa berhasil dari membuat program quiz dengan javascript sederhana yang pertama dan yang kedua, selanjutnya Anda bisa mengembangkan sendiri dengan program tersebut. Jikalau Anda mau mengeditnya silahkan saja, agar Anda menjadi lebih paham lagi dengan bahasa pemrograman javascript.



Sekian yang dapa sampaikan pemrograman.webillian pada kesempatan kali ini tentang Cara Membuat Quiz Dengan Javascript Sederhana Terbaru, semoga apa yang pemrograman.webillian terangkan ini bisa bermanfaat bagi Anda.

Sumber :

https://www.panduancode.com/2019/09/cara-membuat-program-quiz-dengan-javascript.html


Share with your friends

2 komentar

1. Berkomentarlah dengan sopan dan santun
2. komentar selalu dimoderasi
3. boleh meninggalkan link aktif dengan catatan berkomentar sesuai
dengan topik yang dibahas
4. semua komentar negatif seperti hoax, menyinggung, sara, pornografi, politik, dan hal negatif lain akan dihapus

Notification
Jika Anda tertarik dengan artikel di website ini silahkan berkunjung kembali.
Done