JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<button id="show" disabled="disabled">Show Answers</button>
<button id="submit">Submit Answers</button>
<p>Please change all umlauts to the letter followed by an "e" and all ßs to "ss".</p>
<p>If a verb can have both ist and hat as an auxiliary, please list it as "ist/hat" in the input.</p>
<table border="1">
    <tr>
        <th>Infinitive</th>
        <th>3rd. Person Present</th>
        <th>3rd. Person Past</th>
        <th>Aux.</th>
        <th>Past Participle</th>
        <th>English</th>
    </tr>
    <tr>
        <td><input type="text" value="" data-answer="denken" /></td>
        <td><input type="text" value="" data-answer="denkt" /></td>
        <td><input type="text" value="" data-answer="dachte" /></td>
        <td><input type="text" value="" data-answer="hat" /></td>
        <td><input type="text" value="" data-answer="gedacht" /></td>
        <td><input type="text" value="" data-answer="think" /></td>
    </tr>
    <tr>
        <td><input type="text" value="" data-answer="einladen" /></td>
        <td><input type="text" value="" data-answer="laedt ein" /></td>
        <td><input type="text" value="" data-answer="lud ein" /></td>
        <td><input type="text" value="" data-answer="hat" /></td>
        <td><input type="text" value="" data-answer="eingeladen" /></td>
        <td><input type="text" value="" data-answer="invite" /></td>
    </tr>
    <tr>
        <td><input type="text" value="" data-answer="empfangen" /></td>
        <td><input type="text" value="" data-answer="empfaengt" /></td>
        <td><input type="text" value="" data-answer="empfing" /></td>
        <td><input type="text" value="" data-answer="hat" /></td>
        <td><input type="text" value="" data-answer="empfangen" /></td>
        <td><input type="text" value="" data-answer="receive" /></td>
    </tr>
    <tr>
        <td><input type="text" value="" data-answer="empfehlen" /></td>
        <td><input type="text" value="" data-answer="empfiehlt" /></td>
        <td><input...

CSS

td input {
    width:50px;
}
.wrong {
    background:#FF0000;
    color:#FFFFFF;
}

JavaScript

$("tr").each(function(){
    var numRand = Math.floor(Math.random()*6);
    if(numRand == 3) {
        var numRand = numRand + 1;    
    }
    var tdData = $("td input", this).eq(numRand).attr("data-answer");
    $("td", this).eq(numRand).text(tdData);
});
$("#show").click(function() {    
    $("td").each(function(){
        var inputData = $("input", this).attr("data-answer");
        $(this).text(inputData);
    });
});
$("#submit").click(function() {
    $("#show").removeAttr("disabled");
    $("input").each(function(){
        var inTest = $(this).val();
        var tdTest = $(this).attr("data-answer");
        if(inTest == tdTest) {
            $(this).parent("td").removeClass("wrong");
            $(this).removeClass("wrong");
        }
        else {
            $(this).addClass("wrong");
            $(this).parent("td").addClass("wrong");
        }
    }); 
});