JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
<div class="frame" answer="0,0,0,1,0"><p></p><div class='option'><p></p></div><button>提交</button></div>
-->

<div class="frame" answer="0,0,0,1,0"><p>令 <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mtext>a</mtext>
        <mo>=</mo>
        <mtext>2.</mtext>
        <msup>
            <mn>6</mn>
            <mn>10</mn>
        </msup>
        <mo>-</mo>
        <mtext>2.</mtext>
        <msup>
            <mn>6</mn>
            <mn>9</mn>
        </msup>
    </mrow>
</math>
， <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mtext>b</mtext>
        <mo>=</mo>
        <mtext>2.</mtext>
        <msup>
            <mn>6</mn>
            <mn>11</mn>
        </msup>
        <mo>-</mo>
        <mtext>2.</mtext>
        <msup>
            <mn>6</mn>
            <mn>10</mn>
        </msup>
    </mrow>
</math>， <math mathvariant='italic' style="font-size: 21px">
    <mrow>
        <mtext>c</mtext>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mtext>2.</mtext>
                <msup>
                    <mn>6</mn>
                    <mn>11</mn>
                </msup>
                <mo>-</mo>
                <mtext>2.</mtext>
                <msup>
                    <mn>6</mn>
                    <mn>9</mn>
                </msup>
            </mrow>
            <mn>2</mn>
        </mfrac>
    </mrow>
</math>
。請選出正確的大小關係。</p><div class='option'><p>(1) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mtext>a</mtext>
        <mo>></mo>
        <mtext>b</mtext>
        <mo>></mo>
        <mtext>c</mtext>
    </mrow>
    </math></p></div><div class='option'><p>(2) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mtext>a</mtext>
        <mo>></mo>
        <mtext>c</mtext>
        <mo>></mo>
        <mtext>b</mtext>
    </mrow>
    </math></p></div><div class='option'><p>(3) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
       ...

CSS

.option {
    border: none;
    border-radius: 5px;
    background-color: #69D2E7;
    opacity: 0.2;
    cursor: pointer;
}

.highlighted {
    background-color: orange;
    border: 2px solid black;
    opacity: 0.7;
}

button {
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
    var selectedOption = [];
    /*
    var answerS = $('.frame').attr('answer').split(",");
    for (var i = 0; i<answerS.length; i++){
        selectedOption[i] = 0;
    }
    */
    var answerS = [];
    var totalQuiz = $('.frame').index($('.frame:last'));  // total quiz numbers-1
    
    function returnInt(element){    
        return parseInt(element,10);
    }
    
    for(var i = 0; i <= totalQuiz; i++){
        answerS.push($('.frame:eq('+i+')').attr('answer').split(",").map(returnInt));
        var blankArray = [];
        for(var j = 0; j < answerS[i].length; j++){
            blankArray[j] = 0;
        }
        selectedOption.push(blankArray);
    }
    $('.frame')
    .on('mouseenter','.option:not(.highlighted)',function(){
        $(this).fadeTo('fast', 0.5);
    })
    .on('mouseleave','.option:not(.highlighted)',function(){
        $(this).fadeTo('fast', 0.2);
    })
    .on('click','button',function(){
        //alert("There're total "+totalQuiz+"questions!!");
        //alert("selectedOption="+selectedOption+"");        
        if(selectedOption[$('.frame').index($(this).parent())].toString() === answerS[$('.frame').index($(this).parent())].toString()){
        alert("答對了!!");
        }else{
        alert("答錯了!!");
        }
    });
    $('.option').click(function(){
        $(this).toggleClass('highlighted');
        if($(this).is('.highlighted')){ 
            //alert(answerS);
            //alert("answerS[0][3] = "+answerS[0][3]+"!!");
            selectedOption[$('.frame').index($(this).parent())][$('.frame:eq('+$('.frame').index($(this).parent())+') div').index(this)] = 1;
            //alert("you've selected "+$('.frame').index($(this).parent())+"th quiz & "+$('.frame:eq('+$('.frame').index($(this).parent())+') div').index(this)+"th option the answer is "+$(this).parent().attr('answer')+"!!");   
        }else{...