JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<section> 
<!--
<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>
</section>

CSS

table {
    margin-bottom:20px;
}
td input {
    width:50px;
}
.wrong {
    background:#FF0000;
    color:#FFFFFF;
}

JavaScript

var verbMap1 = [
    {
        infinitive: "anfangen",
        thirdPres: "fängt an",
        thirdPast: "fing an",
        aux: "hat",
        pastPart: "angefangen",
        english: "begin"
    },
    {
        infinitive: "befehlen",
        thirdPres: "befiehlt",
        thirdPast: "befahl",
        aux: "hat",
        pastPart: "befohlen",
        english: "order"
    },
    {
        infinitive: "beginnen",
        thirdPres: "beginnt",
        thirdPast: "begann",
        aux: "hat",
        pastPart: "begonnen",
        english: "begin"
    },
    {
        infinitive: "begreifen",
        thirdPres: "begreift",
        thirdPast: "begriff",
        aux: "hat",
        pastPart: "begriffen",
        english: "grasp"
    },
    {
        infinitive: "beißen",
        thirdPres: "beißt",
        thirdPast: "biss",
        aux: "hat",
        pastPart: "gebissen",
        english: "bite"
    },
    {
        infinitive: "betrügen",
        thirdPres: "betrügt",
        thirdPast: "betrog",
        aux: "hat",
        pastPart: "betrogen",
        english: "cheat"
    },
    {
        infinitive: "beweisen",
        thirdPres: "beweist",
        thirdPast: "bewies",
        aux: "hat",
        pastPart: "bewiesen",
        english: "prove"
    },
    {
        infinitive: "biegen",
        thirdPres: "biegt",
        thirdPast: "bog",
        aux: "hat",
        pastPart: "gebogen",
        english: "bend"
    },
    {
        infinitive: "bieten",
        thirdPres: "bietet",
        thirdPast: "bot",
        aux: "hat",
        pastPart: "geboten",
        english: "offer"
    },
    {
        infinitive: "binden",
        thirdPres: "bindet",
        thirdPast: "band",
        aux: "hat",
        pastPart: "gebunden",
        english: "tie"
    },
    {
        infinitive: "bitten",
        thirdPres: "bittet",
        thirdPast: "bat",
        aux: "hat",
        pastPart: "gebeten",
        english: "request"
    },
    {
        infinitive: "bleiben",
...