JSFiddle - React, Tailwind, and code Playground

by mayekarsaurabh

HTML

<div>
     <center>
         <p id="description">Read the Discription and chose your answer below.</p>
    </center>
</div>

<br/>

<center>
    <div id='Options'>
        <table>
            <tr>
                <td id='option1'>
                    
                </td>
                <td id='option2'>
                    <input type='radio' name='options' value='abc'/>abc
                </td>
            </tr>
            <tr>
                <td id='option3'>
                    <input type='radio' name='options' value='asdf'/>asdf
                </td>
                <td id='option4'>
                    <input type='radio' name='options' value='sdf'/>sdf
                </td>
            </tr>
        </table>
    </div>
    <button type="button" id='correct'>Correct</button>
</center>

JavaScript

var ThisText = 0;
var correctanswers = 0;

var Words = [ { word: '1. Amicable', definition: 'friendly, agreeable.' }, 
              { word: '2. acumen', definition: 'the ability to make good judgments and quick decisions, typically in a particular domain.' }, 
              { word: '3. accoutrements', definition: 'additional items of dress or equipment, or other items carried or worn by a person or used for a particular activity.' },
              { word: '4. Abstinence', definition: 'the act of refraining from pleasurable activity, e.g., eating or drinking.' },
              { word: '5. Adulation', definition: 'high praise.' },
              { word: '6. Adversity', definition: 'misfortune, an unfavorable turn of events.' },
              { word: '7. Aesthetic', definition: 'pertaining to beauty or the arts.' },
              { word: '8. Anachronistic', definition: 'out-of-date, not attributed to the correct historical period.' },
              { word: '9. Anecdote', definition: 'short, usually funny account of an event.' },
              { word: '10. Antagonist', definition: 'foe, opponent, adversary.' },
];

$(this).ready(function(){
    onLoad();
             
             $('#correct').click(function(){
                 ShowDesc();
             });
});



function ChangeWordTo(NextWord) {
             var text = "";
             
             text += "<input type='radio' name='options' value='"+NextWord+"'>";
             text += NextWord;
             $('#option1').html(text);
}
 // this grabs the ID description
function ChangeDescriptionTo(NextDescription) {

    document.getElementById('description').innerHTML = NextDescription;

}

// This loads it to the first definition...
function onLoad() {
      switchTo(0);
             correctanswers = 0;
}

// won't work with out
function switchTo(which) {
     ChangeWordTo(Words[which].word);
     ChangeDescriptionTo(Words[which].definition);
}

// This increments as button is click
function ShowDesc() {
    
  ...