JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<div id="questions">
</div>
<input type="button" id="check_result" value="Check" />

CSS

.qn {
    width: 30px;
    font-weight: bold;
    margin-right:4px;
    display: inline-block;
}
.qt{
    
}
.answ {
    margin-left:30px;
    display:block;
}

JavaScript

// generate sample questions
var i,
    num_q = 4,
    question;
for (i=1;i<=num_q;i++) {
    question = '<div class="q">' +
                    '<div class="qn">Q.' + i + '.</div>' +
                    '<span class="qt">Sample question ' + i +'</span>' + 
                    '<div>' +
                        '<span class="answ"><input type="radio" name="question-' + i + '" value="A">Answer A</span>' + 
                        '<span class="answ"><input type="radio" name="question-' + i + '" value="B">Answer B</span>' +
                        '<span class="answ"><input type="radio" name="question-' + i + '" value="C">Answer C</span>' +
                    '</div>' +
               '</div';
    $("#questions").append(question);
}

// evaluate answers
 var score,
     answers = {
         'question-1' : {'answer' : 'A', 'score' : 10 },
         'question-2' : {'answer' : 'A', 'score' : 10 },
         'question-3' : {'answer' : 'A', 'score' : 10 },
         'question-4' : {'answer' : 'B', 'score' : 10 },
         'question-5' : {'answer' : 'C', 'score' : 10 },
         'question-6' : {'answer' : 'A', 'score' : 10 },
         'question-7' : {'answer' : 'B', 'score' : 10 }
     },
     validate,
     qelem,
     correct_answer;
$("#check_result").on('click', function(){
    validate = true;
    score = 0;
    for (i=1;i<=num_q;i++) {
        qelem = $("[name=question-" + i + "]");
        if (qelem.is(':checked') == true)
        {
            correct_answer = answers['question-'+i];
            if (qelem.val() === correct_answer['answer'])
            {
                score += correct_answer['score'];
            }
            
            
        }
        else
        {
            validate = false;
             break;
        }
    }
    
    if (!validate) {
        alert( "question must be filled");
    }
    else
    {
        alert('congratulation, your score : ' + score ); //show score
    }
});