Edit in JSFiddle

	
//randomize
//$('fieldset').randomize('div');
//$('.numberlist').randomize('.row');
	            
//Submit checkbox function
function submitcheckbox(){ 
    $('.submitcheckbox').one("click", function(){
	    
	    //check if the checlboxes are checked
	    if($('input[type="radio"]:checked, input[type="checkbox"]:checked')){
            //if the input data field is equal to correct append correct
            $('input[data-correct="correct"]').each(function(){
	            $(this).parent().removeClass("incorrect").addClass("correct");
	            $(this).parent().append('<p class="after">Correct</p>');
	        });
	        //if the input data field is equal to incorrect append incorrect
	        $('input[data-correct="incorrect"]').each(function(){
		        $(this).parent().removeClass("correct").addClass("incorrect");
		        $(this).parent().append('<p class="after">Incorrect</p>');
		     });
	    }
	   else{
		    return false;
		    }
	     
	     $('.feedback').hide();
	    //unbind one() click
	    $(this).unbind('click');
	    //call reset function
	    resetcheckbox();             
   });
}
//call submitcheckbox function
submitcheckbox();
   
//submit textbox function
function submittext(){ 
    $('.submittext').one('click', function(){
	    
	 //for each input, check data-value against value   
	 $( "input:text" ).each(function() {   
	    //get data-value value
	    var datavalue = $(this).attr("data-value");
	    var value = $(this).val();
	    
	    //for development only
	    //console.log("Correct answer is "+datavalue);
	      	
	    //if input is equal to data value = success 
	     if(value == datavalue){
		    $(this).parent().removeClass("incorrect").addClass("correct");
		    $(this).after('<p class="after">Correct</p>');
		    //Below is for development only
		    //value = $(this).val();
		    //console.log(value+" success");
		}
	    if(value != datavalue){
		    $(this).parent().removeClass("correct").addClass("incorrect");
		    $(this).after('<p class="after">Incorrect</p>');
		     //Below is for development only
		    //console.log(datavalue+" fail");
	        }
	 });
	    //hide feedback     
	    $('.feedback').hide();
					 
	    //unbind one() function
	    $(this).unbind('click');
	    //call reset function
	    resettext();             
   });
}
//call submittext function
submittext();
  
//rest for checkboxes and radio buttons
function resetcheckbox(){               
    $('.resetcheckbox').bind("click", function(){
	    //remove red and green colors
		$('input, p, div').removeClass('correct').removeClass('incorrect');
		//clear checkboxes
		$('input:checkbox').removeAttr('checked');
		//clear radio checkboxes
		$('input:radio').removeAttr('checked');
		//remove the correct and incorrect text
		$('.after').remove();	 	
		//unbind the bind() function
		$(this).unbind('click');
		//call reset function on submit function
		submitcheckbox().reset();
	});
}
//call reset function
resetcheckbox();
	
// Reset input text only 
function resettext(){               
    $('.resettext').bind("click", function(){      
		$('input:text').val('');
		$('.after').remove();
		$(this).unbind('click');
		submittext().resettext();
	});
}
//call resettext function
resettext();


//randmize function
(function($) {
	$.fn.randomize = function(childElem) {
		return this.each(function() {
			var $this = $(this);
			var elems = $this.children(childElem);
				
			elems.sort(function() { return (Math.round(Math.random())-0.5); });  
			$this.detach(childElem);  
				
			for(var i=0; i < elems.length; i++)
			$this.append(elems[i]);      
		});    
	}
})(jQuery);
<form action="self">
	<h2>Checkbox and Radio Button Self Check</h2>
	<div class="numberlist">
		<p>
			What does &lsquo;VUCA&rsquo; stand for?</p>
		<div class="row">
			<input data-correct="correct" id="q1-5" name="q3" type="checkbox" /><label for="q1-5">volatility, uncertainty, complexity, and ambiguity.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q2-6" name="q3" type="checkbox" /><label for="q2-6">violence, unsustainability, confusion, anxiety.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q3-7" name="q3" type="checkbox" /><label for="q3-7">value, universality, computation, advancement.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q4-8" name="q3" type="checkbox" /><label for="q4-8">vertical integration, unemployment, corporate control, austerity.</label></div>
	</div>
	<div class="numberlist">
		<p>
			What does &lsquo;VUCA&rsquo; stand for?</p>
		<div class="row">
			<input data-correct="correct" id="q1-5" name="q3" type="radio" /><label for="q1-5">volatility, uncertainty, complexity, and ambiguity.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q2-6" name="q3" type="radio" /><label for="q2-6">violence, unsustainability, confusion, anxiety.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q3-7" name="q3" type="radio" /><label for="q3-7">value, universality, computation, advancement.</label></div>
		<div class="row">
			<input data-correct="incorrect" id="q4-8" name="q3" type="radio" /><label for="q4-8">vertical integration, unemployment, corporate control, austerity.</label></div>
	</div>
	<input class="submit submitcheckbox" type="button" value="Check Answers" /> 
	<input class="reset resetcheckbox" type="button" value="Reset" />
</form>


<form action="self">
	<h2>Text Input Self Check</h2>
	<p>
		Text self check</p>
	<input data-value="1" id="q1" name="q1" type="text" /> 
	<input data-value="2" id="q2" name="q2" type="text" /> 
	<input class="submit submittext" type="button" value="Check Answers" /> 
	<input class="resettext reset" type="button" value="Reset" />
</form>
/* ----------------------------------------------------------
	FORM STYLES
---------------------------------------------------------- */
form {
  margin: 20px 0;
  padding: 15px; }
  form h2 {
    margin: 0;
    border-top: none;
    padding: 0.5em 0 1em;
    font-size: 2em; }
  form p {
    color: #002344;
    margin: 0.5em 0; }
  form fieldset legend {
    font-size: 1.3em;
    line-height: 1.1;
    color: #002344;
    padding: 0 0.5em 0.5em; }
  form .caselist {
    padding: 0.5em 1.5em; }
  form .caselist .row,
  form .numberlist .row,
  form .numberlist {
    padding: 0.5em 1em; }
  form .caselist:nth-of-type(odd),
  form .numberlist:nth-of-type(odd) {
    background: #efefef; }
  form .caselist .row:nth-of-type(2n),
  form .caselist .row2:nth-of-type(2n),
  form .caselist .row3:nth-of-type(2n),
  form .caselist row4:nth-of-type(2n),
  form .numberlist .row:nth-of-type(2n),
  form .numberlist .row2:nth-of-type(2n),
  form .numberlist .row3:nth-of-type(2n),
  form .numberlist row4:nth-of-type(2n) {
    background: none; }
  form div.formfield {
    margin: 1.5em 6em 1em 3em;
    font-size: 1.8em; }
  form div.formfield > .small {
    font-size: 0.8em;
    color: #b32017; }
  form input[type="radio"],
  form input[type="checkbox"] {
    margin: 0 5px 0 0; }
  form textarea {
    display: block;
    padding: 0.5em;
    min-width: 100%; }
  form input[type="text"] {
    border: 1px solid #ccc;
    padding: 0.5em;
    display: block; }
  form input.submit {
    padding: 0.5em 1em;
    background: #4a94c3;
    border: none;
    color: #fff;
    margin: 1em 0.5em 0 0; }
    form input.submit:hover {
      background: #2a6d9f;
      cursor: pointer; }
  form input.reset {
    padding: 0.5em 1em;
    background: #e5e5e5;
    border: 1px solid #999;
    color: #333;
    margin: 1em 0.5em 0 0; }
    form input.reset:hover {
      background: #999;
      color: #000;
      cursor: pointer; }
  form label {
    margin: -0.3em 0 0 1.5em;
    display: block;
    font-size: 0.9em; }
  form li {
    color: #2b5b8c; }
    form li div {
      margin: 10px 0 0;
      font-size: 0.8em;
      color: #333; }
  form input#grade {
    background: #2a6d9f;
    padding: 5px 10px;
    color: #fff;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    margin: 0 0 0 3em; }
    form input#grade:hover {
      background: #4a94c3; }
  form div.correct,
  form div.incorrect {
    border-bottom: 1px dotted #ccc;
    padding: 15px 0;
    display: block; }
  form div.correct:last-child,
  form div.incorrect:last-child {
    border-bottom: none; }
  form div.true {
    background: #badba8;
    padding: 5px; }
  form div.false {
    background: #f79e9e;
    padding: 5px; }
  form .assessment div.false,
  form .assessment div.true {
    font-size: 1.8em; }
  form div.true p,
  form div.false p {
    font-size: 1em;
    margin: 0 0 0 1em; }