JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<!-- 
<div class="frame" answer="0,0,0,1,0"><p></p><div class='option'><p></p></div><button>提交</button><div class="panel"><p></p></div><div class="slide"><strong>題示一下</strong></div></div>
-->
<h2>大學入學考試中心</h2> 
<h2>103 學年度學科能力測驗試題 數學考科</h2>
<h3>第壹部分： 選擇題（ 占6 0 分）</h3>
<h3>一、單選題（ 占3 0 分）</h3>

<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>
   ...

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;
}

.panel {
    display: none;
}

.slide {
    width: 130px;
    cursor: pointer;
    color: grey;
    float: right;
}

JavaScript

$(document).ready(function(){
    var selectedOption = [];
    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));  // make answerS an array of numbers
        answerS.push($('.frame:eq('+i+')').attr('answer').split(",")); // make answerS an array of strings
        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($(this).parent().has('select').length){
            alert("you've selected "+$(this).parent().find('option:selected').text()+"!!");
            selectedOption[$('.frame').index($(this).parent())] = $(this).parent().find('option:selected').text().split("");
        }
        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...