— 20 September 2020 in JS & JQUERY

Simple Quiz Using JSON

json data

Selamat malam sahabat Bar-bar! Kali ini admin akan membuat Quiz sederhana dari data json. Quiz ini bertujuan untuk mengumpulkan informasi dari user berupa sikap, perilaku atau karakteristik.

Kuesioner

Merupakan pertanyaan-pertanyaan yang tersusun untuk digunakan sebagai alat pengumpulan data melalui survey.

Untuk pertanyaan kuesioner akan admin sajikan dari darya-varia.com mengenai Instrumen Self Assessment Covid-19

Jumlah pertanyaan berjumlah 6 dengan Scor yang sudah ditentukan sebagai berikut.

NOKETERANGANJIKA YAJIKA TIDAK
1.Apakah pernah keluar rumah/ tempat umum (pasar, fasyankes, kerumunan orang, dan lain lain)?10
2.Apakah pernah menggunakan transportasi umum?10
3.Apakah pernah melakukan perjalanan ke luar kota/internasional? (wilayah yang terjangkit/zona merah)10
4.Apakah anda mengikuti kegiatan yang melibatkan orang banyak?10
5.Apakah memiliki riwayat kontak erat dengan orang yang dinyatakan ODP, PDP atau konfirm COVID-19 (berjabat tangan, berbicara, berada dalam satu ruangan/ satu rumah)?50
6.Apakah pernah mengalami demam/ batuk/pilek/sakit tenggorokan/sesak dalam 14 hari terakhir?50
0 = Risiko Kecil
1-4 = Risiko Sedang
5 = Risiko Besar

Tindak Lanjut

  • Risiko besar, agar dilakukan investigasi dan tidak diperkenankan masuk ke tempat acara. Tamu dilakukan pemeriksaan RT-PCR, jika tidak tersedia dapat dilakukan Rapid Tes oleh petugas kesehatan/fasyankes setempat.
  • Risiko kecil – sedang, diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.

Implementasi

Pertanyaan-pertanyaan diatas kemudian di tuangkan kedalam bentuk JSON seperti berikut.

[
    {
		"qNum": "1",
        "question": "Apakah pernah keluar rumah/ tempat umum (pasar, fasyankes, kerumunan orang, dan lain lain)?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "2",
        "question": "Apakah pernah menggunakan transportasi umum?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "3",
        "question": "Apakah pernah melakukan perjalanan ke luar kota/internasional? (wilayah yang terjangkit/zona merah)",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "4",
        "question": "Apakah anda mengikuti kegiatan yang melibatkan orang banyak?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "5",
        "question": "Apakah memiliki riwayat kontak erat dengan orang yang dinyatakan ODP, PDP atau konfirm COVID-19 (berjabat tangan, berbicara, berada dalam satu ruangan/ satu rumah)?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [5, 0]
    },
    {
		"qNum": "6",
        "question": "Apakah pernah mengalami demam/ batuk/pilek/sakit tenggorokan/sesak dalam 14 hari terakhir?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [5, 0]
    }
]

Siapkan file php atau html seperti berikut.

<div class="col-md-6">
	<div class="box box-widget">
		<div class="box-header with-border">
			<div class="user-block">
				<h3 class="box-title">Simple Quiz Using JSON</h3>
			</div>
		</div>
		<div class="box-body">
			<div id="result"></div>
			<div id="loadAlert"></div>
			<div id="isValid"></div>
		</div>
		<div id="content">
			<div class="box-body" id="quiz">
				<form id="myForm" action="" method="post">
					<div class="form-group questions"></div>
					<div class="form-group answers"></div>
				</form>	
			</div>
		</div>
		<button class="btn btn-primary" name="nextButton" id="nextButton">Selanjutnya</button>
	</div>
</div>

Kemudian load json dengan menggunakan httprequest dan letakan pada halaman yang sama dengan quiz.html diatas.

<script type="text/javascript">
var allQuestions = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        allQuestions = JSON.parse(this.responseText);

        var currentPage = -1;
        var totalScore = 0;
        var review = false;
		var res = 0;

        $(document).ready(function () {
            $("#quiz").hide();
			$("#isValid").hide();
            $("#loadAlert").hide();
			$("#result").hide();
            $("#nextButton").html("Mulai");
            $("#nextButton").click(function(){
                $("#nextButton").html("Selanjutnya");
                var answerArray = $("#myForm").serializeArray();
                if(answerArray.length==0 && currentPage>=0 && review==true)
				{
                    $("#loadAlert").html("<h3 class='alert alert-warning'>Silakan pilih jawaban.</h3>");
                    $("#loadAlert").fadeIn('fast');
                }
				else {
                    $("#loadAlert").hide();
					for(var i = 0, len = answerArray.length; i < len; i++)
					{
						totalScore += parseFloat(answerArray[i].value);
					}
					$("#content").fadeOut('slow',function(){
						currentPage++;
						if(currentPage==allQuestions.length)
						{
							$("#isValid").show().html('<input type="checkbox" id="myBtn2" name="Terms" required=""> <b>Saya menyatakan informasi yang saya sampaikan adalah benar dan sesuai dengan Syarat dan Ketentuan yang berlaku</b>');
							$("#quiz").hide();
							$('#nextButton').attr("disabled",true);
							$("#myBtn2").click(function(){
									if($(this).prop("checked") == true){
										$('#nextButton').prop("disabled", false);
									}
									else if($(this).prop("checked") == false){
										$('#nextButton').prop("disabled", true);
									}
								});
							$("#nextButton").html("Kirimkan");
							
							$("#nextButton").click(function(){
								$("#nextButton").hide();
								$.post("submit.php", {value: totalScore}, function(result){
									$("#result").show().html(result);
									$("#isValid").hide();
								});
							});
						}
						else {
							review = true;
							var thisQ = allQuestions[currentPage];
							$("#quiz").show();
							$(".questions").html(thisQ.qNum+'. '+thisQ.question);
							$(".answers").empty();
							var choiceArray = thisQ.choices;
							var correctAnswer = thisQ.correctAnswer;
							for(var i=0; i<choiceArray.length; i++) {
								$(".answers").append('<div class="a'+i+'"><input type="radio" id="q'+currentPage+'" name="q'+currentPage+'" value="'+correctAnswer[i]+'"> ' + choiceArray[i] + '</div>');
							}
						}
					});
					$("#content").fadeIn('slow');
                }
            })
        });
    }
};
xmlhttp.open("GET", "data.json", true);
xmlhttp.send();
</script>

Jangan lupa load library jQuery terlebih dahulu pada tag head di html

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Keterangan

xmlhttp.open("GET", "data.json", true);

script diatas untuk mendapatkan data dari data.json kemudian di parsing dengan JSON.parse allQuestions = JSON.parse(this.responseText);

Untuk mendapatkan nilai array pada tiap jawaban, maka di perlukan script berikut untuk mengirim setiap jawabannya.

var answerArray = $("#myForm").serializeArray();

Untuk menampung nilai array tiap jawaban, maka diakumulasi pada array berikut.

for(var i = 0, len = answerArray.length; i < len; i++)
{
	totalScore += parseFloat(answerArray[i].value);
}

Untuk pengiriman data dan menampilkan result, diperlukan file submit.php seperti yang terlampir pada kode javascipt dibawah dengan fungsi $.post() kemudian di kirim parameter value dengan nilai totalScore 

$("#nextButton").click(function(){
	$("#nextButton").hide();
	$.post("submit.php", {value: totalScore}, function(result){
		$("#result").show().html(result);
		$("#isValid").hide();
	});
});

Dibawah merupaka file submit.php untuk menangkap parameter yang sebelumnya di kirimkan oleh fungsi $.post()

if(isset($_POST))
{
	echo '<h3>Result</h3>';
	if($_POST['value'] == 0)
	{
		$res = "Risiko Kecil";
		$scr = "Diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila
			didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan
			tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.";
	}
	else if($_POST['value'] >= 1 && $_POST['value'] <= 4){
		$res = "Risiko  Sedang";
		$scr = "Diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila
			didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan
			tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.";
	}
	else{
		$res = "Risiko  Besar";
		$scr = "Agar dilakukan investigasi dan tidak diperkenankan masuk ke tempat acara. Tamu dilakukan pemeriksaan RT-PCR, jika tidak tersedia dapat dilakukan Rapid Tes oleh petugas kesehatan/fasyankes setempat.";
	}
		
	echo '<p>Nilai Kuesioner Anda : '.$_POST['value'].' ('.$res.')</p>';
	echo '<p><b>Tindak Lanjut</b></p>';
	echo $scr;
}

Screenshot

Klik Mulai untuk memulai load pertanyaan pertama
Pilih jawaban atas pertanyaan kuesioner
Jika pertanyaan belum di isi, akan tampil informasi error seperti diatas.
Setelah pertanyaan terakhir, akan di konfirmasi untuk mengirim parameter array totalScore. klik Checkbox kemudian klik Kirimkan untuk mendapatkan Hasil Kuesioner.
Result/Hasil diatas merujuk pada tabel Scrore dan Tindak Lanjut diatas.

Demikian, semoga bisa dijadikan referensi dalam pembuatan kuesioner Instrumen Self-Assessment covid-19.

Referensi

darya-varia.com

Author Profile

Ricki K
Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.