JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div class="frame" answer="0,0,1,0"><p style="font-size: 17px">設 <math mathvariant='italic'>
    <mtext>O</mtext>
</math> 為原點, <math mathvariant='italic'>
    <mrow>
        <mtext>A(0,</mtext>
        <mo>-</mo>
        <mtext>1, 2) , B(x, 3, 4)</mtext>
    </mrow>
</math>
且<math>
<mrow>
	<mover accent="true">
		<mrow>
			<mi>A</mi>
			<mi>B</mi>
		</mrow>
		<mo stretchy="true">⟶</mo>
	</mover>
</mrow>
</math>
與 <math mathvariant='italic'>
    <mtext>x</mtext>
</math> 軸正向夾角為 <math mathvariant='italic'>
    <mrow>
        <mn>3</mn>
        <msup>
            <mn>0</mn>
            <mo>∘</mo>
        </msup>
    </mrow>
</math> ,求: <math mathvariant='italic'>
    <mrow>
        <mtext>x </mtext>
        <mo> = ?</mo>
    </mrow>
</math></p>
    <div class='option'><p>(1) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
	<mn>3</mn>
	<msqrt>
		<mn>10</mn>
	</msqrt>
</mrow>
</math></p></div><div class='option'><p>(2) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
	<mn>2</mn>
	<msqrt>
		<mn>7</mn>
	</msqrt>
</mrow>
</math></p></div>
    <div class='option'><p>(3) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
	<mn>2</mn>
	<msqrt>
		<mn>15</mn>
	</msqrt>
</mrow>
</math></p></div>
    <div class='option'><p>(4) <math mathvariant='italic' style="font-size: 17px">
    <mrow>
	<mn>5</mn>
	<msqrt>
		<mn>8</mn>
	</msqrt>
</mrow>
</math></p></div><button>提交</button><div class="panel" style="font-size: 17px"><div class="hint"><div class="hint-content">你能找出一個空間中平行x軸而且方向為正的向量嗎?</div></div>

<div class="hint"><div class="hint-content">最簡單的例子就是向量<math mathvariant='italic'>
<mrow>
	<mover accent="true">
		<mi>i</mi>
		<mo>&rharu;</mo>
	</mover>
	<mo>=</mo>
	<mrow>
		<mo minsize="1.50em" rspace="0.3em" lspace="0em" stretchy="true" fence="true" form="prefix">(</mo>
		<mn>1, 0</mn>
		<mn>, 0</mn>
		<mo minsize="1.50em" rspace="0em" lspace="0.3em" stretchy="true" fence="true" form="postfix">)</mo>
	</mrow>
</mrow>
    </math><br></br><math...

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: 350px;
    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: 300px;
   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...