JSFiddle - React, Tailwind, and code Playground

quiz score

by ian_smithz

HTML

<h1>Test your music knowledge!</h1>
<form name="quiz">
    <fieldset class="question">
        <p>1. Who supplied a cameo vocal for the Arcade Fire song, <cite>Reflektor</cite>?</p>
        <input type="radio" id="q1a1" class="answer" name="q1" data-correct="false" value="Elton John" /><label for="q1a1">Elton John</label>
        <input type="radio" id="q1a2" class="answer" name="q1" data-correct="true" value="David Bowie" /><label for="q1a2">David Bowie</label>
        <input type="radio" id="q1a3" class="answer" name="q1" data-correct="false" value="Leonard Cohen" /><label for="q1a3">Leonard Cohen</label>
    </fieldset>
    <fieldset class="question">
        <p>2. What is the title of Arctic Monkeys 2013 album?</p>
        <input type="radio" id="q2a1" class="answer" name="q2" data-correct="true" value="AM" /><label for="q2a1"><cite>AM</cite></label>
        <input type="radio" id="q2a2" class="answer" name="q2" data-correct="false" value="AM I?" /><label for="q2a2"><cite>AM I?</cite></label>
        <input type="radio" id="q2a3" class="answer" name="q2" data-correct="false" value="SAM I AM" /><label for="q2a3"><cite>SAM I AM</cite></label>
    </fieldset>
    <fieldset class="question">
        <p>3. Where do psychedelic rockers Tame Impala hail from?</p>
        <input type="radio" id="q3a1" class="answer" name="q3" data-correct="true" value="Australia" /><label for="q3a1">Australia</label>
        <input type="radio" id="q3a2" class="answer" name="q3" data-correct="false" value="New Zealand" /><label for="q3a2">New Zealand</label>
        <input type="radio" id="q3a3" class="answer" name="q3" data-correct="false" value="America" /><label for="q3a3">America</label>
    </fieldset>
    <fieldset class="question">
        <p>4. Which artist designed Queens Of The Stone Ages <cite>&hellip;Like Clockwork</cite> album artwork?</p>
        <input type="radio" id="q4a1" class="answer" name="q4" data-correct="false" value="Banksy" /><label...

JavaScript

(function () {
    "use strict";
    var getScore = function (e) {
        var answers = document.getElementsByClassName('answer'),
            ans = null,
            correct = [],
            i = 0,
            score = 0;
        for (i = 0; i < answers.length; i += 1) {
            ans = answers[i];
            if (ans.getAttribute('data-correct') === "true") {
                correct.push(ans.value);
                if (ans.checked) {
                    score += 1;
                }
            }
        }
        document.getElementById('percentage').value = Math.round(score / correct.length * 100) + '%';
        document.getElementById('solutions').value = correct.join('\r\n');
    };
    document.getElementById('calc').onclick = getScore;
}());