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 class="slide" style="display: none"><strong>題示</strong></div></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>
       ...

CSS

.option {
    border: none;
    border-radius: 5px;
    background-color: rgba(105,210,231,0.2);
    cursor: pointer;
}

.highlighted {
    border: 2px solid black;
}

button {
    cursor: pointer;
}

.panel {
    display: none;
    margin-top: 15px;
}

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

.hint {
    border: 2px solid black;
    height: 200px;
    display: none;
}

.mover {
    background: 	#558943;
    text-decoration: none;
    padding: 6px 12px;
    color: white;
    font-weight: bold;
    opacity: 0.3;
}

.prev-tab {
    float: left;
}

.next-tab {
    float: right;
}

.hint-content {
   height: 150px;
   padding: 6px 12px;
}

JavaScript

$(document).ready(function(){
    var selectedOption = [];
    var answerS = [];
    //var totalQuiz = $('.frame').index($('.frame:last'));  // total quiz numbers-1
    var totalQuiz =  $('.frame').size();   
    /*function returnInt(element){    
        return parseInt(element,10);
    }*/
    
    $('.frame .hint:first-child').css("display", "block");
    $('.panel').before('<div class="slide">\<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACbElEQVQ4jWNgQAPeFVsEfcr3FPmU713qU77nmm/53hs+FXtW+JbvrvAt3iyCrh4FeJXsbAiu2f+5YdHVH9O2P/i9+tTrv2tPvf43fcfD381Lr/8Iqd3/2at0dzNWzZ6FO3oye49/W33qzb8pe1/+b9n87H/Zqsf/S1c9/t+8+dn/SXte/l9z6u2/vEmnvnkUbu9D0eyas6U2s/fYt3mHXv3PW/Lgf+bC+/9NGvei4MyF9//nLn7wf87BV/9zJ5z45pK7GeIS66SNUp4F2z5P2fn0X+q8u/9T5t79b1S/5z86MKrf8z9lLkR+8s5n\/\/xKdny2TtooxWCbsrq2fOa5nylzbv+Pm3Hrf9yMW\/\/\/\/\/8PZ8P4yGJJs27/L5tx7qdtyupaBuv4FUdK5l3/GzH5+n9cGAaQxcoW3PhrlbDiFINZ1JI3idOv/w/qvYIVwwC6ePzU6\/\/Nopa8YTAOnf/cu+38P+/2C//RMQxgk/Npv/DfOGTBGwZ9/9lHnKuP/nVpPPsfHcMANjnn6uN/9QPmXGDQ9pxea5e55add9an/6Fg+b/N/+bzNGOJ21af+2+Vs/6nlOb2HQdZ1spSu36zPZsVH/1mUHf+PjGEAXdyi9Nh/Hb9Zn9UcJmswMDAwMCjb9TVrBS/6blR45D8yhqcBNHHNkCXfle37O1FSo7x1V5+K7/zv2lkH/unmHvqPFWcf+K/iv/C7vHUXalKGAWnzjmY5277PysHLf6ol7firmXngv2bmgf/qyTv+qoSs+Cln1/9F1ry9DW+OFNJrkJEyaW2QNm27IGXa9knKtO2TtEnrZWnj1jZx0wYldPUA6YkoPlx37vAAAAAASUVORK5CYII="> \<strong>來點提示</strong>\<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAsklEQVQ4je2QPQrCQBBG04pNDmBEBRE9yJBq5/t22dJTaO1P70VyGw8QQS/i2iSwxiWoneBrZ99jdrLszxPOuTmAvO+Nqq5EZPgyALAGcCd58d6PUzLJHclA8uy9H3QDVTMMqUgkB5KhLMtFNzAheY0jIlKkZGPMPvk/EZnGEQC1MeYUy9baQ9+NMmvtCEAdS1Fw0ytHmxTdiKpu35JbnHMzVb018vEjuQVATnL5lfw7PADDKGTZ2c17pAAAAABJRU5ErkJggg==" style="float: right ; display:none">\</div>\<div class="slide" style="display: none">\<img...