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
END#
</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(){
      $(".answer").html('');
     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$:");
         if(qIndex == -1){
              continue;
         }
         var aIndex = temp.indexOf("A$:");
         if(aIndex == -1){
              continue;
         }
         var cIndex = temp.indexOf("C$:");
         tempArr.push(["Q",qIndex]);
         if(cIndex!=-1){
         	tempArr.push(["C",cIndex]);
         }
         tempArr.push(["A",aIndex]);
         tempArr.sort(function(a,b){
						return a[1]-b[1];         
         });
                 
         temp = temp.replace("END#","");
         var part0, part1, part2;
         var resultArr = [];
         resultArr.push([tempArr[0][0], temp.substring(tempArr[0][1]+3,tempArr[1][1])]);
         
         if(tempArr.length == 3){    
                      resultArr.push([tempArr[1][0], temp.substring(tempArr[1][1]+3,tempArr[2][1])]);
                      resultArr.push([tempArr[2][0], temp.substring(tempArr[2][1]+3)]);
         }else if(tempArr.length == 2){
                      resultArr.push([tempArr[1][0], temp.substring(tempArr[1][1]+3)]);
         }else{
             continue;//Should Not Be The Case
         }
         resultArr.sort();
         resultArr.reverse();
         
        var qaDiv = '<div class="QAPreview">\
									         <div class="QPreview">Q'+i+': '+resultArr[0][1]+'</div>';
        	  
            if(cIndex != -1){
								qaDiv += 	'<div class="CPreview">C: '+resultArr[1][1]+'</div>';
                qaDiv += '<div class="APreview">A: '+resultArr[2][1]+'</div>';
            }else{
                qaDiv += '<div class="APreview">A: '+resultArr[1][1]+'</div>';
            }
					  qaDiv +=...