Cara Membuat Aplikasi Quiz Dengan Javascript dan HTML

Aplikasi Quiz merupakan salah satu aplikasi yang biasa digunakan untuk memberikan pertanyaan  berupa pertanyaan-pertanyaan seperti tentang buah, hewan, pahlawan dan berbagai pertanyaan lainnya . Nah bagi anda yang ingin membuat sebuah aplikasi quiz menggunakan html atau java dan ingin membuat sebuah aplikasi quiz yang berisi tentang pertanyaan  pertanyaan mungkin pertanyaan yang berisi tentang pendidikan, agama, binatang, tumbuhan dan sebagainya,


http://www.zlearn.id/2017/09/cara-membuat-quiz-dengan-javascript-dan-html.html

nah pada kesempatan ini zlearn mau bagi tutorial dan source kodenya cara membuat aplikasi quiz dengan javascript . jadi disini javascript itu berfungsi digunakan sebagai pemrosesannya , HTML sebagai kerangkanya dan css sebagai tampilannya menjadi lebih cantik.

ya langsung masuk saja ke tutorial pertama buka text editor anda kemudian buak sebuah file dengan nama  index.html, style.css dan index.js . saya kasih penjelasan sedikit terleih dahulu tentang kegunaan dari fle terebut dimana html sebai penampilnya atau kerangkanya, style.css untuk mempercantik dan index.js untuk pemrosesan dari aplikasi quiz kita.


Oke langsung saja buat sebuah file dengan nama index.html berikut kodenya:



<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Aplikasi Quiz JS</title>
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!DOCTYPE html>
<html>
<head>
<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>Belajar Quiz Matematika</h1>
</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>

</body>
</html>



setelah itu buat file index.js nya seperti berikut kodingannya:
(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: "What is 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 + ' right!!!');
    return score;
  }
})();
setelah itu untuk mepercantik tampilannya kita tambahkan kodingan css nya seperti berikut:
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: #ff1e9d;
    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;
}

nah kalu sudah silahkan anda coba di browser anda untuk menambahkan pertanyaan maupun menyunting pertanyaa dapat dilakukan di bagian index.js.  untuk pertanyaan yang berupa text anda dapat menggunakan string.


yang mau download dapat mendownload scriptya di bawah ini:

 download

baca juga artikel menarik lainnya :
Download W3school 2017 offline
Tutorial Membuat Game Balap di Bahasa C++
Cara Membuat Pop Up Modal Bootsrap

sekian tutorial dan informasi dari zlearn semoga dapat bermanfaat dan menambah wawasan kita. Silahkan berkomentar bila ada pertanyaan dan silahkan bagikan artikel ini pada saudara atau kenalan anda.

Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar
27 Maret 2018 03.37 delete

Mas maaf, demo nya tidak ada ya ?

Reply
avatar

Berita Unik

loading...