MEMBUAT HALAMAN TANYA JAWAB SISWA INTERAKTIF DENGAN JAVASCRIPT

Membuat Test Online

 

Membuat website teset online sederhana. Beberapa waktu lalu saya mendapatkan pertanyaan dari seorang teman dari Bali, namanya Bli Putu. Bli Putu ingin membuat sebuah halaman yang berisi soal untuk murid-muridnya.

Konsepnya sederhana, kira-kira seperti ini:

  • sebuah halaman website berisi 10 soal
  • untuk mengerjakan siswa harus mengisikan nama. Setiap soal bernilai 1
  • jika nilai dibawah 7 maka tidak dapat mengerjakan soal berikutnya
  • jika belum mengerjakan ke sepuluh soal tidak dapat mengerjakan halaman berikutnya.

Disini yang saya persiaplan adalah :

  • toastify, untuk notifiksi
  • file index.html, untuk membuat sample halaman kita
  • file style.css untuk menampung css agar tampilan lebih bagus
  • file soal.js untuk membuat soal dan aturan-aturan dalam mengerjakan soal

Langkah 1, index.html

Perhatikan tag komen untuk penjelasan dalam pengetikan script html

<!-- gunakan link untuk mengakses toastify dari link cdn -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<!-- sisipkan script toastify -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<!--s-->
<label for="nama">Nama kamu:</label>
<input type="text" id="nama" placeholder="Masukkan nama" autocomplete="off" />
    
<div class="identity">
    <h2 style="margin-left: 20px;">Nama: <span id="hasil"></span></h2>
    <h2 style="margin-right: 20px;">Nilai: <span id="nilai">0</span></h2>
</div>

<!--s-->
  <hr>
<!---INPUTAN OUT--->
<span style="font-size: x-large;">
  <span style="font-family: Arial;">Tes Belajar TIK</span></span>
<br />
<b>Petunjuk: Jumlah poin untuk lanjut ke sesi berikut adalah 7 poin</b>
<br />
<noscript>
  <p class="alert">Javasript tidak mendukung atau tidak aktif di browser anda. Mohon agar mengatifkan javascript anda.</p></noscript>
<hr />

<div id="section-soal"></div>
<br />
<br />
<center>

<input onclick="NextLevel()" type="button" class="pointer" value="Soal Selanjutnya" />

</center>

Langkah 2 style.css

body {
    margin: 20px 20px 20px 20px;
}

input {
    height: 2em;
    border-radius: 1em;
    border: solid 1px rgb(181, 181, 181);
    padding: 0 10px 0 10px;
}

label {
    cursor: pointer;
}

.identity {
    display: flex; justify-content: space-between;
}

#section-soal {
    width: 100%;
}

form {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

form input{
    margin: 0 10px 0 10px;
}

.form-soal {
    border-bottom: solid 1px black;
    margin-bottom: 10px;
}

.form-soal div {
    display: flex;
    align-items: center;
}

.pointer {
    cursor: pointer;
}

langkah 3 soal.js

'use strict'

//should be in JSON
//check this https://github.com/ngadimin51/interactive-simple-page-question-javascript
//please visit me at http://ndalu.id or
//please visit me at http://ndalu.id/blog

function toastSuccess(text, destination) {
    Toastify({
        text,
        duration: 3000,
        destination,
        newWindow: true,
        close: true,
        gravity: "top", // `top` or `bottom`
        position: "right", // `left`, `center` or `right`
        backgroundColor: "linear-gradient(90deg, rgba(73,226,98,1) 0%, rgba(38,172,0,1) 100%)",
        stopOnFocus: true, // Prevents dismissing of toast on hover
        onClick: function(){} // Callback after click
    }).showToast();
}
  
function toastFailed(text, destination) {
    Toastify({
        text,
        duration: 5000,
        destination,
        newWindow: true,
        close: true,
        gravity: "top", // `top` or `bottom`
        position: "right", // `left`, `center` or `right`
        backgroundColor: "linear-gradient(90deg, rgba(182,98,38,1) 0%, rgba(155,23,0,1) 100%)",
        stopOnFocus: true, // Prevents dismissing of toast on hover
        onClick: function(){} // Callback after click
    }).showToast();
}
  
function toastWarning(text, destination) {
    Toastify({
        text,
        duration: 3000,
        destination,
        newWindow: true,
        close: true,
        gravity: "top", // `top` or `bottom`
        position: "right", // `left`, `center` or `right`
        backgroundColor: "linear-gradient(90deg, rgba(255,106,0,1) 0%, rgba(251,219,0,1) 100%)",
        stopOnFocus: true, // Prevents dismissing of toast on hover
        onClick: function(){} // Callback after click
    }).showToast();
}

const arraySoal = [
    [
        'Coba pilih A!', //soal 1
        'Jawaban A', //kunci jawaban, samakan dengan nilai pilihan jawaban 1, 2 atau 3
        'Jawaban A', //jawaban 1
        'Jawaban B', //jawaban 2
        'Jawaban C'], //jawaban 3
    ['Pilih selain B, dan C!', 'Jawaban A', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 2
    ['Kalau Pilih B atau C maka akan salah!', 'Jawaban A', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 3
    ['Huruf sebelum B?', 'Jawaban A', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 4
    ['Abjad pertama dalam alphabet?', 'Jawaban A', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 5
    ['Sekarang pilih B!', 'Jawaban B', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 6
    ['Jawab Selain A & B?', 'Jawaban C', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 7
    ['Pilih C!', 'Jawaban C', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 8
    ['Kembali pilih A!', 'Jawaban A', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 9
    ['Terakhir pilih apa coba?', 'Jawaban B', 'Jawaban A', 'Jawaban B', 'Jawaban C'], //soal 10
]

function delay(callback, ms) {
    var timer = 0;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

const namaku = document.getElementById("nama");
namaku.addEventListener("keypress", delay( () => {
    document.getElementById("hasil").innerText = nama.value;
    toastSuccess('Selamat Datang '+nama.value)
}, 1000))

let ans = []; //var ans = new Array;
var done = []; //var done = new Array;
var score = 0;
const length = arraySoal.length

const soal = document.getElementById('section-soal')
let sectSoal = ''
for (let i = 1; i <= length; i++) {
    sectSoal += `<b>${i}. ${arraySoal[i - 1][0]}</b><br />
    <form id="form-${i}" class="form-soal">`
    sectSoal += `<div>
        <input type="radio" id="${i}-0" data-id="${i}" name="jawaban" value="${arraySoal[i - 1][2]}">
        <label for="${i}-0">${arraySoal[i - 1][2]}</label>
    </div>
    <div>
        <input type="radio" id="${i}-1" data-id="${i}" name="jawaban" value="${arraySoal[i - 1][3]}">
        <label for="${i}-1">${arraySoal[i - 1][3]}</label>
    </div>
    <div>
        <input type="radio" id="${i}-2" data-id="${i}" name="jawaban" value="${arraySoal[i - 1][4]}">
        <label for="${i}-2">${arraySoal[i - 1][4]}</label>
    </div>`
    sectSoal += `</form>`
}
soal.innerHTML = sectSoal

const jawaban = document.querySelectorAll('[name="jawaban"]')
for (let i = 0; i < jawaban.length; i++) {
    jawaban[i].addEventListener('click', (e) => {
        const id = jawaban[i].getAttribute('data-id')
        const value = jawaban[i].getAttribute('value')
        const process = Engine(id, value)
        
        const check = ans.indexOf(id) !== -1
        if (!check) {
            ans.push(id)
        }
 
        if (process == false) {
            e.preventDefault()
        }
        document.querySelector('#nilai').innerHTML = score * 10
    })
}

function Engine(question, answer) {
    let  NAMAKU = document.querySelector('#hasil').innerHTML
    if (NAMAKU == '') {
        toastWarning('Silahkan isi nama')
        namaku.focus()
        /*
        swal({
            title: "Silahkan isi nama",
            icon: "error",
            button: "OK!",
        }).then ( e => { namaku.focus() } );
        */
        const form = document.getElementById('form-'+question)
        form.reset()
        return false
    }
    NAMAKU = NAMAKU.toUpperCase()+' '
    if (answer != arraySoal[question - 1][1]) {
        if (!done[question]) {
            done[question] = -1;
            toastFailed('Salah!')
            setTimeout(() => {
                toastWarning((NAMAKU +" Nilaimu: " + (score * 10)))
            }, 500)
            return true
        } else {
            toastWarning('Anda sudah menjawab soal ini!')
            return false
        }
    } else {
        if (!done[question]) {
            done[question] = -1;
            score++;
            toastSuccess('Benar sekali!')
            setTimeout(() => {
                toastWarning((NAMAKU +" Nilaimu: " + (score * 10)))
            }, 500)
            return true
        } else {
            toastWarning('Anda sudah menjawab soal ini!')
            setTimeout(() => {
                toastWarning((NAMAKU +" Nilaimu: " + (score * 10)))
            }, 500)
            return false
        }
    }
}

function NextLevel () {
    if (ans.length == 0) {
        toastFailed('Kamu belum mengerjakan soal apapun!')
        return false
    }
    if (ans.length < 10) {
        toastWarning('Kerjakan dulu soal lainnya!')
        return false
    }
    if (score > 10) {
        toastSuccess('Anda mendapatkan nilai SEMPURNA !')
    }
    if (score >= 7 && score <= 11) {
        toastSuccess('Selamat! Nilaimu '+score * 10)
        toastSuccess('kamu bisa melanjutkan ke soal selanjutnya')
        setTimeout(() => {
            self.location="https://www.belajarbahasabali.com/"
        }, 1500)
    } else {
        toastWarning('Nilaimu masih kurang!')
    }
}

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17)
    isCtrl = false;
}
document.onkeydown=function(e) {
  console.log(e.which) //check this if your key doesn't have any value
    if(e.which == 17)
    isCtrl=true;
    if((e.which == 85) || (e.which == 67) && isCtrl == true) {
        return false;
    }
}

document.oncontextmenu = () => {
    return false
}

Untuk demo bisa klik di https://codepen.io/ngadimin51/pen/oNZmeXB

atau download script di github https://github.com/ngadimin51/interactive-simple-page-question-javascript

Next akan dibuatkan video membahas script ini. Ingatkan jika saya lupa.

Silahkan komen, insha ALlah aman, saya tidak mengambil data apapun dr email anda. Hanya untuk memvalidasi bahwa yang memberikan komen adalah anda.


ARTIKEL TERKAIT
Comments : To post comment, you must login first using google. No worry, it's safe