Contents
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.
| NO | KETERANGAN | JIKA YA | JIKA TIDAK |
|---|---|---|---|
| 1. | Apakah pernah keluar rumah/ tempat umum (pasar, fasyankes, kerumunan orang, dan lain lain)? | 1 | 0 |
| 2. | Apakah pernah menggunakan transportasi umum? | 1 | 0 |
| 3. | Apakah pernah melakukan perjalanan ke luar kota/internasional? (wilayah yang terjangkit/zona merah) | 1 | 0 |
| 4. | Apakah anda mengikuti kegiatan yang melibatkan orang banyak? | 1 | 0 |
| 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)? | 5 | 0 |
| 6. | Apakah pernah mengalami demam/ batuk/pilek/sakit tenggorokan/sesak dalam 14 hari terakhir? | 5 | 0 |
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
Demikian, semoga bisa dijadikan referensi dalam pembuatan kuesioner Instrumen Self-Assessment covid-19.
Referensi
Author Profile
- 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.
