Cara Membuat Program Quiz Dengan Javascript Sederhana Terbaru

Cara Membuat Program Quiz Dengan Javascript Sederhana Terbaru

Kita pada kali ini akan belajar tentang Cara Membuat Program Quiz Dengan Javascript Sederhana Terbaru, ada beberapa program quiz javascript yang akan kita buat pada postingan ini, yaitu program quiz matematika dengan javascript dan quiz pemrograman web javascript.

Cara membuat program quiz dengan javascript ini sangat sederhana dan syntax nya mudah untuk dipahami, baik membuat program quiz matematika ataupun quiz pemrograman web dengan javascript.

Terdapat perbedaan antara membuat program quiz dengan javascript yang pertama dengan cara membuat quiz javascript yang kedua.

Perbedaannya adalah pada metode yang digunakan untuk menjawab pertanyaan pada quiz tersebut.

Program quiz matematika dengan javascript yang akan kita buat ini menggunakan radio button untuk menjawab pertanyaan yang ada.

Sedangkan quiz pemrograman web dengan javascript menggunakan kolom popup untuk menjawab pertanyaan yang ada.

Jadi dari segi syntax yang digunakan dalam kedua quiz dengan javascript yang akan kita buat pada kali ini jelas meliki perbedaan.

Penasaran seperti apa cara membuat quiz dengan javascript tersebut? mari kita pelajari dibawah ini.

Cara Membuat Quiz Dengan Javascript (Quiz Matematika)

Cara Membuat Quiz Dengan Javascript Sederhana

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

Kelebihan program quiz dengan javascript ini salah satunya yaitu menggunakan container, jadi tampilannya lebih elegan ditambah lagi dengan javascrtipt teks yang muncul seperti di ketik sendiri.

Javascript animation teks ketik akan muncul saat browser pertama kali reload, jadi efek animation ini tidak membuat risi, melainkan menambah kecantikan dari tampilannya.

Sekarang mari kita mulai membuat quiz matematikanya.

1. Buatlah Struktur Foldernya Seperti Gambar Dibawah Ini.


Cara Membuat Quiz Dengan Javascript Sederhana

Program quiz matematika dengan javascript ini sengaja saya pisahkan antara html, javascript, dan css nya supaya Anda lebih mudah paham nantinya.

2. Buat File index.html


Untuk membuatnya Anda tidak perlu pusing-punsing copy saja scriptnya dibawah ini, tapi dengan catatan pelajari scriptnya ya jangan asal copy dan paste saja.

File index.html

<!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='next'><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>

Bisa Anda lihat bahwa di file index.html saya menyelipkan  sedikit javascript di bagian akhir tujuan nya, adalah agar Anda dapat lebih memahami script javascript yang dipakai pada quiz ini.

Dan javascript tersebut bukanlah syntax utama dalam program quiz dengan javascript ini, jadi sengaja saya pisahkan agar tidak tertukar dengan javascript utama.

Dan fungsi javascript tersebut adalah untuk animation teks ketik.

3. Membuat File index.js


Nah baru sekarang kita mulai buat javascript utama yang berfungsi untuk program quiz dengan javascript ini.

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('Kamu Menjawab ' + numCorrect + ' pertanyaan dari ' +
                 questions.length + ' Soal Yang Ada.');
    return score;
  }
})();

Pada bagian inilah inti dari program quiz dengan javascript sederhana, jadi Anda harus benar-benar membaca scriptnya agar Anda paham Algoritma nya.

4. Membuat File style.css


Pastinya Anda sudah tahukan apa fungsi dari css ini, ya benar sekali, file css ini berfungsi untuk mendekorasi program quiz dengan javascript yang kita buat ini agar terlihat indah.

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 telah membuat semua file diatas jangan lupa untuk save terlebih dahulu programnya dengan cara tekan tombol CTRL+S.

Selanjutnya silahkan coba program quiz dengan javascript sederhana tersebut, alangkah baiknya jika Anda menyimpan-nya di dalam file htdocs, dan menjalankan xampp terlebih dahulu.

Namun sebenarnya tanpa seperti itu juga tidak apa-apa.

Pastinya berhasilkan?, jika Anda error silahkan cek dibagian paling bawah script pasti ada lambang copyright silahkan hapus sampai akhir.

Sebenarnya itu adalah script yang saya pasang pada blog ini agar orang yang mengcopy paste artikel saya menyertakan link sumbernya. Namun imbasnya terkena juga pada script yang Anda copy dari blog panduancode.

Setelah itu silahkan coba kembali Program Membuat Quiz Dengan Javascipt Sederhananya.

Bagaimana mudah bukan Cara Membuat Quiz Dengan Javascript Sederhana Terbaru dari panduancode, selanjutnya seperti pembahasan diatas kita akan membuat satu lagi quiz dengan javascript sederhana.

Tapi pada program quiz dengan javascript yang kedua ini berbeda sekali dengan yang pertama barusan.

Cara Membuat Quiz Dengan Javascript Sederhana (Quiz Pemrograman Web Javascript)

Cara Membuat Quiz Dengan Javascript Sederhana

Tadi sudah kita bahas sedikit bahwa program quiz dengan javascrtipt yang kedua ini berbeda dengan quiz yang pertama, lalu dimana 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-lain.

Yang pertama perbedaan dalam syntax yang digunakan yaitu program quiz yang kedua ini menggunakan form input yang dapat di isi berupa huruf maupun angka.

Kedua penyajian untuk menjawab pertanyaan-nya lebih simpel atau lebih sederhana.

Ketiga dibuat dalam satu file saja yaitu file index.html , kenapa di satukan?

Karena Anda sudah paham terhadap program quiz dengan javascript yang pertama, maka saya membuat-nya menjadi satu Agar Anda dapat membandingkan dan mempelajari jauh lebih dalam lagi script yang dipakai pada program quiz ini.

Sekarang mari kita buat program quiz dengan javascript sederhana yang kedua dibawah ini.

1. Buat Sebuah Folder Baru Didalam Folder Quiz Tadi.


Cara Membuat Quiz Dengan Javascript Sederhana

Maka tampilan pada text editor Anda akan terlihat seperti gambar diatas.

Kenapa dibuat didalam folder quiz tadi?

Alasannya agar lebih mudah saja menemukan file tersebut dan lebih rapih dalam penyimpanan file quiz nya.

Didalam folder quiz web buat satu file bernama index.html yang nantinya akan kita buat sebagai program quiz dengan javascript sederhana.

Jika sudah mari kita mulai membuat program quiz dengan javascript sederhana yang keduan ini.

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 jalankan program quiz dengan javascript yang kedua tersebut.

Jika Anda sudah berhasil dari membuat program quiz dengan javascript sederhana yang pertama dan yang kedua, selanjutnya Anda dapat berkreasi sendiri dengan program tersebut.

Apakah mau di edit bagaimanapun silahkan saja, agar Anda menjadi lebih paham lagi dengan bahasa pemrograman javascript.

Sekian yang dapat panduancode sampaikan pada kesempatan kali ini tentang Cara Membuat Quiz Dengan Javascript Sederhana Terbaru, semoga apa yang panduancode sampaikan ini dapat bermanfaat bagi Anda.

Akhir kata dari panduancode jangan lupa titik koma.

Berlangganan Artikel Terbaru Via E-mail:

3 Responses to "Cara Membuat Program Quiz Dengan Javascript Sederhana Terbaru"

  1. Terimakasih mas untuk tutorial quiz javascript sederhananya berhasil. dan mudah dipahami.

    BalasHapus
  2. Terima kasih bang info nya bermanfaat banget

    BalasHapus
  3. Weh-weh sangat good sekali tutorialnya, terimakasih tentang tutornya mamang..

    BalasHapus

Terimakasih telah berkomentar di Panduan Code, semoga komentar anda dapat membangun situs ini menjadi lebih baik lagi.

Iklan Atas Artikel

Iklan Atas Artikel1

Iklan Tengah Artikel 2

Iklan Bawah Artikel