JSFiddle - React, Tailwind, and code Playground

by will

HTML

<form>
	<div>
		<input type="radio" name="q1" id="q1-a1" value="1" />
		<input type="radio" name="q1" id="q1-a2" value="2" />
		<input type="radio" name="q1" id="q1-a3" value="3" />
		<input type="radio" name="q1" id="q1-a4" value="4" />
		<input type="radio" name="q1" id="q1-a5" value="5" />
		<input type="radio" name="q1" id="q1-a6" value="6" />
	</div>
	<div>
		<input type="radio" name="q2" id="q2-a1" value="1" />
		<input type="radio" name="q2" id="q2-a2" value="2" />
		<input type="radio" name="q2" id="q2-a3" value="3" />
		<input type="radio" name="q2" id="q2-a4" value="4" />
		<input type="radio" name="q2" id="q2-a5" value="5" />
		<input type="radio" name="q2" id="q2-a6" value="6" />
	</div>
	<div>
		<input type="radio" name="q3" id="q3-a1" value="1" />
		<input type="radio" name="q3" id="q3-a2" value="2" />
		<input type="radio" name="q3" id="q3-a3" value="3" />
		<input type="radio" name="q3" id="q3-a4" value="4" />
		<input type="radio" name="q3" id="q3-a5" value="5" />
		<input type="radio" name="q3" id="q3-a6" value="6" />
	</div>
	<div>
		<input type="radio" name="q4" id="q4-a1" value="1" />
		<input type="radio" name="q4" id="q4-a2" value="2" />
		<input type="radio" name="q4" id="q4-a3" value="3" />
		<input type="radio" name="q4" id="q4-a4" value="4" />
		<input type="radio" name="q4" id="q4-a5" value="5" />
		<input type="radio" name="q4" id="q4-a6" value="6" />
	</div>
	<div>
		<input type="radio" name="q5" id="q5-a1" value="1" />
		<input type="radio" name="q5" id="q5-a2" value="2" />
		<input type="radio" name="q5" id="q5-a3" value="3" />
		<input type="radio" name="q5" id="q5-a4" value="4" />
		<input type="radio" name="q5" id="q5-a5" value="5" />
		<input type="radio" name="q5" id="q5-a6" value="6" />
	</div>
	<div>
		<input type="radio" name="q6" id="q6-a1" value="1" />
		<input type="radio" name="q6" id="q6-a2" value="2" />
		<input type="radio" name="q6" id="q6-a3" value="3" />
		<input type="radio" name="q6" id="q6-a4" value="4"...

JavaScript

function getClosestNum(num, ar)
{
    var i = 0, closest, closestDiff, currentDiff;
    if(ar.length)
    {
        closest = ar[0];
        for(i;i<ar.length;i++)
        {           
            closestDiff = Math.abs(num - closest);
            currentDiff = Math.abs(num - ar[i]);
            if(currentDiff < closestDiff)
            {
                closest = ar[i];
            }
            closestDiff = null;
            currentDiff = null;
        }
        //returns first element that is closest to number
        return closest;
    }
    //no length
    return false;
}

function modeArray(array)
{
    if (array.length == 0)
        return null;
    var modeMap = {},
        maxCount = 1, 
        modes = [array[0]];

    for(var i = 0; i < array.length; i++)
    {
        var el = array[i];

        if (modeMap[el] == null)
            modeMap[el] = 1;
        else
            modeMap[el]++;

        if (modeMap[el] > maxCount)
        {
            modes = [el];
            maxCount = modeMap[el];
        }
        else if (modeMap[el] == maxCount)
        {
            modes.push(el);
            maxCount = modeMap[el];
        }
    }
    return modes;
}

var scores = [],
    total = 0;

var calculate = function(e){
    
    total = 0;
  
    $('div').each(function(i){
        
        var val = parseFloat( $(this).children('input:checked').attr('value') );
        
        scores[i] = val;
        total = total + val;
        
    });
    
    var finalScore = modeArray(scores);
    var average = total / 6;
    
    var tiebreak = Math.abs( average - Math.round( average ) ) == .5;
    
    console.log(tiebreak);
    
    if( tiebreak )
        average = Math[ Math.random() > .5 ? 'floor' : 'ceil' ](average);
    
    $('#math').text( 'chosen: ' + scores + ' Mode: ' + finalScore + ' Average: ' + average );
    
    if( finalScore.length > 0 ){
        
        $('#answer').text('Mode: ' + finalScore + ' Score: ' + getClosestNum(average, finalScore)...