JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery &lt;script&gt; Quiz</h1>

<p>Guess the number of elements comprising each jQuery expression, then click Grade to see how well you know the framework's dark corners.</p>

<p style="font-style:italic;">Hint: every answer would be identical if scripts were manipulated like other elements.</p>

<form id="form">
    <table>
        <col id="input" span="2" />
        <thead>
            <tr id="head">
                <th>Code</th>
                <th>Length</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="body"></tbody>
    </table>

    <input type="submit" value="Grade" />
    <label><input type="checkbox" id="ignore" /> Ignore special handling</label>
</form>

CSS

h1 { margin: 0 0 1ex; }
p { margin: 1ex 0; }
table { margin: 1ex 0; border-collapse: collapse; }
col#input { border-right: 3px solid transparent; }
tbody tr { border-top: 1px solid black; }
td.code { font: smaller monospace; }
td input { width: 2.5em; }
tr.correct { background: #eeffee; }
tr.incorrect { background: #ffeeee; }
td .result { float: right; }
td .correct { color: green; }
td .incorrect { color: red; }

JavaScript

var $head = $("#head"),
    $body = $("#body"),
    challenges = [
        '$("<a/>").add( "<b><i/></b>" )',
        '$("<a/>").add( "<b>\x3Cscript/></b>" )',
        '$( "<a>\x3Cscript/></a><b><i/><i/></b>" ).eq(1).children()',
        '$("<a/>").after( "<b>\x3Cscript/></b>" )',
        '$("<a/>").after( $("<b>\x3Cscript/></b>") )',
        '$("<a/>").append( "<b/>\x3Cscript/>" ).children()',
        '$("<a/>").append( "<b/>\x3Cscript/>" ).appendTo("<i/>").children()'
    ],
    results = {
        correct: $("<strong class='result correct'>\u2713</strong>"),
        incorrect: $("<strong class='result incorrect'>\u2717</strong>")
    };

$.each( challenges, function( idx, code ) {
    $("<tr/>")
        .append( $("<td class='code'/>").text( code ) )
        .append("<td><input type='text'/></td>")
        .append("<td/>")
        .appendTo( $body );
});

$("#form").submit(function() {
    var ignore = $("#ignore").is(":checked");
    
    $head.children().last().text("Actual");
    
    $body.children().each(function() {
        var $this = $( this ),
            $cells = $this.children(),
            code = $cells.first().text() + ".length",
            actual = eval( ignore ? code.replace(/script/g, "q") : code ),
            guess = parseFloat( $this.find("input").val() ),
            result = guess === actual ? "correct" : "incorrect";
        
        $this.removeClass("correct incorrect").addClass( result );
        $cells.last().text( actual )
            .append( results[ result ].clone() );
    });

    return false;
});