JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div class="frame" answer="1,7"><p style="font-size: 17px">已知對於任意正整數 <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mtext>n</mtext>
        <mo>≥</mo>
        <mn>2</mn>
    </mrow>
</math>
    , <math mathvariant='italic' style="font-size: 17px">
    <mrow>
        <mn>3</mn>
        <mo>×</mo>
        <msup>
            <mn>5</mn>
            <mrow>
                <mtext>2n</mtext>
                <mo>-</mo>
                <mn>3</mn>
            </mrow>
        </msup>
        <mo>+</mo>
        <msup>
            <mn>2</mn>
            <mrow>
                <mtext>3n</mtext>
                <mo>-</mo>
                <mn>5</mn>
            </mrow>
        </msup>
    </mrow>
</math>
    恆為某一質數<math mathvariant='italic'>
    <mtext>P</mtext>
</math>
    的倍數, 請<br></br>(1) 推測此一質數<math mathvariant='italic'>
    <mtext>P</mtext></math></p>
    <select>
    <option value=""></option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="-">-</option>
    <option value="±">±</option>
</select>

    <select>
    <option value=""></option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="-">-</option>
    <option value="±">±</option>
    </select><button style="margin-left: 20px;">提交</button><p style="font-size: 17px">(2) 請用歸納法證明推測是正確的</p><div class="panel" style="font-size: 17px"><div class="hint"><div class="hint-content"> 令 <math mathvariant='italic'>
  ...

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;
    clear: both;
}

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