Pilihan Ganda Menggunakan HTML dan CSS dan JavaScript

Pilihan Ganda Menggunakan HTML dan CSS dan JavaScript

by Adi Jaya

HTML

<form class="mcqs" id="mcqs-form" action="#">
    <ol>
        <li data-number="1">
            <p>
            Di bawah ini alat yang digunakan untuk memukul benda kerja, sesuai penempatan yang diinginkan adalah
            </p>
            <input type="hidden" name="qs-1" value=""/>
            <label data-value="A"><input type="radio"/> Mistar Baja</label>
            <label data-value="B"><input type="radio"/> Palu Lunak</label>
            <label data-value="C"><input type="radio"/> Dial Indicator</label>
            <label data-value="D"><input type="radio"/> Jangka Tusuk</label>
            <label data-value="E"><input type="radio"/> Jangka Kaki</label>
        </li>
        <li data-number="2">
            <p>
                Alat untuk mengukur sudut pahat yang paling tepat menggunakan...
            </p>
            <input type="hidden" name="qs-2" value=""/>
            <label data-value="A"><input type="radio"/> Dial Indikator</label>
            <label data-value="B"><input type="radio"/> Bevel Protektor</label>
            <label data-value="C"><input type="radio"/> Jangka sorong</label>
            <label data-value="D"><input type="radio"/> Height Gauge</label>
            <label data-value="E"><input type="radio"/> Mikrometer</label>
        </li>
        <li data-number="3">
            <p>
                Untuk membubut permukaan benda kerja sebaiknya menggunakan pahat...
            </p>
            <input type="hidden" name="qs-3" value=""/>
            <label data-value="A"><input type="radio"/> Kiri</label>
            <label data-value="B"><input type="radio"/> Kanan</label>
            <label data-value="C"><input type="radio"/> Facing</label>
            <label data-value="D"><input type="radio"/> Potong</label>
            <label data-value="E"><input type="radio"/> Ulir</label>
        </li>
        <li data-number="4">
            <p>
                Hasil bubut yang kasar dan tatalnya putus-putus disebabkan karena...
           ...

CSS

body {
    font-family: sans-serif;
    line-height: 1.4;
    font-size: 15px;
    color: #444;
}

.mcqs p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.mcqs label {
    display: block;
    margin-bottom: 0.4em;
    padding: 5px 10px;
    border-radius: 15px;
    max-width: 300px;
    cursor: pointer;
    user-select: none;
}

.mcqs label::before {
    content: attr(data-value)". ";
}

label.selected {
    background: #028d9e;
    color: #fff;
}

.mcqs input[type=radio] {
    display: none;
}

#format {
    width: 100%;
    height: 250px;
}

JavaScript

$( document ).on ("change", "#mcqs-form label", function() {

    var parents = $(this).parents( "li" );
    var $val = $(this).attr( "data-value" );
    
    parents.find( "label" ).removeClass( "selected" );
    parents.find( "[type='radio']" ).prop( "checked", false );
    
    $(this).addClass( "selected" );
    $(this).find( "[type='radio']" ).prop( "checked", true );
    

	parents.find( "[type='hidden']" ).val( $val );
    
    demo1();
    createJSONformat();
});


demo1();
function demo1() {
	$( "#demo-list" ).empty();
	$( "#mcqs-form input[type='hidden']").each( function( index ) {
		var $index = [index + 1];
	    var $result = $( this ).val();    
	    var $value = "";
	    if( $result == "" ){
	    	$value = "<em>Tidak dijawab</em>";
			//$value = 0;
	    } else {
	    	$value = $result ;
	    }
	    
	    $( "#demo-list" ).append( "<li><p>Soal ke : <b>"+ $index +"</b></p> <p>jawaban : "+ $value +"</p></li>" )
	});
}


createJSONformat();
function createJSONformat(){
	function a(){
		 var data =[];
			$('#mcqs-form li[data-number]').each(function(){
				data.push( b( $( this ) ) );
			});
			
			return data;
	}


	function b( $data ) {
    	var $question 	= $data.find( '[type="hidden"]' ).attr( "name" );
        var $result = $data.find( '[type="hidden"]' ).val();
        var $value = "";
        
        if( $result == "" ) {
        	$value = "no_data";
        } else {
        	$value = $result;
        }
        
        
   		var subObj 		= { "name": $question, "result": $value };
   		return subObj;
 	}
 
 
 	var obj = a();
 
 	$('#format').val( JSON.stringify( obj, null, 4 ) );
    //change 4 to 0  => for minify format
}