JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scoreBoard" style="display:block;" class="floatLeft">
Score: <span id="score"></span>
</div>
<table class="widthOneHundredPercent">
<tr>
 <td class="tableCellFloat columnOne" valign="top">
  <div class="question"><b>Question 1:</b> Who is the youngest in Big Media?</div>
 <td class="tableCellFloat columnTwo" valign="top">   
     <div class="answers">
            <ol>
                <li>
                    <input type="radio" name="q1" id="q1-a" onclick="unhide(this); scoreIncrement();"/>John
                </li>
                <li>
                    <input type="radio" name="q1" id="q1-b" onclick="unhide(this)"/>Paula
                </li>
                <li>
                    <input type="radio" name="q1" id="q1-c" onclick="unhide(this)"/>Henal
                </li>
                <li>
                    <input type="radio" name="q1" id="q1-d" onclick="unhide(this)"/>Malc
                </li>
            </ol>
        </div>
 </td>
 </td>
</tr>
<tr>
 <td colspan="2" valign="top">
    <div id="answerq1a" class="hidden">
 <p>Your answer is correct, John is 20.</p>
    </div>
 </td>
</tr>
<tr>
 <td colspan="2" valign="top">
    <div id="answerq1b" class="hidden">
 <p>Your answer is incorrect, Paula is 31.</p>
    </div>
 </td>
</tr>
<tr>
 <td colspan="2" valign="top">
    <div id="answerq1c" class="hidden">
 <p>Your answer is incorrect, Henal is 21.</p>
    </div>
 </td>
</tr>
<tr>
 <td colspan="2" valign="top">
    <div id="answerq1d" class="hidden">
 <p>Your answer is incorrect, Malc is 33.</p>
    </div>
 </td>
</tr>
</table>

CSS

.hidden { display: none; }
.unhidden { display: block; }

JavaScript

function pagechange(frompage, topage) {
    var page = document.getElementById('formpage_' + frompage);
    if (!page) return false;
    page.style.visibility = 'hidden';
    page.style.display = 'none';

    page = document.getElementById('formpage_' + topage);
    if (!page) return false;
    page.style.display = 'block';
    page.style.visibility = 'visible';

    return true;
}

var currentShown = "";

function unhide(rad) {
    var id = "answer" + rad.id.replace("-", "");
    var answer = document.getElementById(id);
    if (answer) {
        var current = document.getElementById(currentShown);
        if (current) current.className = "hidden";
        currentShown = id;
        answer.className = "unhidden";
    }
}

var score = 0;

function scoreIncrement() {
    score++;
    document.getElementById("score").innerHTML = score;
}