JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<textarea class="textarea">Q$: Father is aged two times more than his son. After 25 years, he would be two times of his son's age. what is the age of the father?
A$: 37.5
C$: 37.5, 36.5, 53, 52.5END#
</textarea>

<button class="test">Test</button>

<div class="answer"></div>

CSS

.textarea{
  width:350px;
  height: 200px;
}

JavaScript

$(function(){
	alert("Enter some question in  area");
  $(".test").click(function(){
     var input=$(".textarea").val();
     var str = input.split("END#");
     str.splice(-1);
     var validData = [];
     var validHtml;
     for(i=0;i<str.length;i++){
         var temp = str[i].trim();
         var tempArr=[];
         var qIndex = temp.indexOf("Q$:");
         var aIndex = temp.indexOf("A$:");
         tempArr.push(["Q",qIndex]);
         tempArr.push(["C",temp.indexOf("C$:")]);
         tempArr.push(["A",aIndex]);
         if(qIndex == -1 || aIndex == -1){
              continue;
         }
         tempArr.sort(function(a,b){
						return a[1]-b[1];         
         });
         tempArr.sort();
         tempArr.reverse();
         var question = input.substring(tempArr[0][1]+3,tempArr[1][1]);
         
         var qaDiv = '<div class="QAPreview">\
									         <div class="QPreview">Q'+i+': '+question+'</div>';
        /* if(tempArr.length == 3){               
									      '<div class="APreview">A: '+input.substring(tempArr[1][1]+3,tempArr[2][1])+'\
									</div>';
         }else if(tempArr.length == 2){
                       '<div class="APreview">A: '+input.substring(tempArr[1][1]+3)+'\
									</div>'
         }else{
             continue;//Should Not Be The Case
         }
         var choices = input.substring(tempArr[2][1]+3);
				 if(choices != null){
						qaDiv += 	'<div class="CPreview">C: '+choices+'</div>';
					}*/
					qaDiv += '</div>';
          $("answer").append(qaDiv);
     }
  }); 
  
 });