JSFiddle - React, Tailwind, and code Playground

by Gordon Watson

HTML

<form name="cloze1">
                <p>How many protons do Gold isotopes have?<br>
                <input type="text" name="q1" size=15 value="">
                    
                    </p>
                    
                    <p>How many neutrons does the stable isotope of Gold have?<br>
                    <input type="text" name="q2" size=15 value="">
                     
                        </p>
                        
                      <p>What is the mass number of the stable isotope of Gold?<br>
                        <input type="text" name="q3" size=15 value="">
                         
                            </p>
                            
                         <p>How many Gold isotopes are alpha-emitters?<br>
                            <input type="text" name="q4" size=15 value="">
                           
                                </p>
                                
                           <p>How many Gold isotopes are beta-emitters?<br>
                                <input type="text" name="q5" size=15 value="">
                            
                                    </p>
                                    
    <input type="button" value="Get score" class="ClearScore" onClick="getScore(this.form)">
        
    <input type="reset" value="Clear" class="ClearScore"><p>Score =
    <input type=text size=15 name="percentage"><br>
                                                Correct answers:<br>
    <textarea name="solutions" wrap="virtual" rows="5" cols="20" style="font-size:100%"></textarea></p>
            </form>
            
            
            
            <form name="cloze2">
                        
                        
<div class ="equation">
<p><strong><i>Question 1</i></strong></p>
<div class="threequarter ">

<p><img src="Atomic.html.files/Equation1.png" alt="chemistry picture" width="95%"></p>
                            </div>
<div class="quarter ">
<input class ="massbox"...

CSS

.quarter{
    float:left;
    width:20%;
    position:relative;
    height:140px;}

.threequarter{
    float:left;
    width:70%;
    position:relative;
    height:140px;
    }

.equation{
    float:left;
    position:relative;
    width:100%;}

.threequarter p {
    margin: 0;
    position: absolute;               /* 2 */
    top: 50%;                          /* 3 */
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); }   /* 4 */}


.answers{
    padding-left:40px;
    font-weight:500;}

.answers li {
    list-style: upper-alpha;
    vertical-align: middle;
    line-height:2em;}

.question {
    padding-left:5px;
    padding-right:20px;}

input[type=radio] {
    float:left;
    width:50px;
    height:50px;
    padding-bottom:40px;
    vertical-align: middle;}

input[type=text] {
    display: block;
    text-align:center;
    font-size:18pt;
    width:60px;
    height:25px;
    margin-top:10px;
    padding-bottom:5px;
    padding-bottom:5px;
    vertical-align: middle;}

label.inline {
    padding-top:10px;
    padding-left:20px;
    display: table-cell;
}

input.massbox {
    position:absolute;
    top: 0px;
    right: 120px;
    text-align:center;
    font-size:18pt;
    width:40px;
    height:40px;
    margin-top:10px;
    padding-bottom:5px;
    padding-bottom:5px;

}

input.symbolbox {
    position:absolute;
    top: 30px;
    right: 40px;
    text-align:center;
    font-size:24pt;
    width:40px;
    height:60px;
    margin-top:10px;
    padding-bottom:5px;
    padding-bottom:5px;
}

input.chargebox {
    position:absolute;
    top: 80px;
    right: 120px;
    text-align:center;
    font-size:18pt;
    width:40px;
    height:40px;
    margin-top:10px;
    padding-bottom:5px;
    padding-bottom:5px;
}




.ClearScore{
    background-color:rgba(83,146,155,1);
    color: #000000;
    font-size:14pt;
    padding: 20px;
    text-align: center;
    width: 120px;
    height:40px;
    cursor: pointer;
    border: 1px solid gray;
   ...

JavaScript

(function () {
    <!--
    var form = document.getElementById('cloze1');
    var numQues = 5;
    
    var answers = new Array(5);
    answers[0] = "79";
    answers[1] = "118";
    answers[2] = "197";
    answers[3] = "6";
    answers[4] = "7";
    
    
    function getScore(form) {
        var score = 0;
        
        for (i=0; i<numQues; i++) {
            if (form.elements[i].value == answers[i]) {
                score++;
            }
        }
        
        score = Math.round(score/numQues*100);
        form.percentage.value = score + "%";
        
        var correctAnswers = "";
        for (i=1; i<=numQues; i++) {
            correctAnswers += i + ". " + answers[i-1] + "\r\n";
        }
        form.solutions.value = correctAnswers;
        
    }

// -->
      }());
      
      (function () {
                        <!--
var form = document.getElementById('cloze2');
var numQues = 21;
                        
var answers = new Array(21);
answers[0] = "4";
answers[1] = "He";
answers[2] = "2";
answers[3] = "230";
answers[4] = "Ac";
answers[5] = "89";
answers[6] = "14";
answers[7] = "C";
answers[8] = "6";
answers[9] = "13";
answers[10] = "C";
answers[11] = "6";
answers[12] = "0";
answers[13] = "e";
answers[14] = "-1";
answers[15] = "224";
answers[16] = "Ra";
answers[17] = "88";
answers[18] = "14";
answers[19] = "C";
answers[20] = "6";

function getScore(form) {
                            var score = 0;
                            
                            for (i=0; i<numQues; i++) {
                                if (form.elements[i].value == answers[i]) {
                                    score++;
                                }
                            }
                            
                            score = Math.round(score/numQues*100);
                            form.percentage.value = score + "%";
                            
                            var correctAnswers = "";
                            for (i=1;...