splitting ajax post response to two divs - html

Question

I am trying a develop a tutorial for kids, where I have a question and answer. I am trying to accomplish this using two divs as below. The idea of having two divs is so that kids can print full question and solution OR click clear solution, and print question only for later practice to resolve on their own. I am trying to use latex at the same time. I have been able to accomplish if I make two ajax requests in 2 files, like CALC_Q.PHP with question response, and CALC_A.php with answer response, but I am sure I can do ONE Ajax request in ONE file same saving me some time, and make the app work more faster. Its easy if the question and answer were in SAME div but this way when I click CLEAR SOLUTION, it will erase question AND answer (since they will be in the same div) which I don't want. I want question to remain visibile after clearing solution. This is a must or wouldn't be asking question. Question won't be visible when page first load ( I am aware of that). Question and answer will appear once calculate is clicked, and question will remain visible until page is closed
I am sure I am doing something wrong spitting the response to the two divs or json call in CALC.php
<div id="question" class="col s12 m8 l6 noselect" style = "background-color: green;">
<p id="ques"></p>
</div>
<div id="solution" class="col s12 m8 l6" style = "background-color: white;">
<p id="result"></p>
</div>
function Calc()
{
$('#loader').css('visibility', 'visible');
ajaxRequest= $.ajax({
url: 'CALC.php',
type: 'post',
data: { "num1": myvar1,
"num2": myvar2
},});
ajaxRequest.done(function(response) {
//$('#ques').text(response[q]); //this didn't work
//$('#result').text(response[a]); // this didn't work
$('#ques').text(response.q);
$('#result').text(response.a);
MathJax.Hub.Queue(['Typeset',MathJax.Hub,"result"], function() {$('#loader').css('visibility', 'hidden');});
}
}
In CALC.php
$number1 = $_POST['num1'];
$number2 = $_POST['num2'];
$final= $number1+$number2;
$q = $a = array();
$q = $a = null;
$q.="Add these numbers".$number1." and ".$number2;
$q.="<br> Show all work ";
$a = "$ \\text{The answer is} $.$final;
echo json_encode(array($q,$a));
return;

Answer 1

I ended up resolving it as follows. I was somewhat close not quite. It was missing one crucial statement which I found
only in one answer on this site by deadlock, and not in rest of the anwwers before asking for help, may be that's why I missed it. I definitely had some syntax errors. Check the following response statement, Mathjax statement also has 2 variables: ques,result, and the crucial header statement in CALC.php. I resolved it as follows by sending back an object and then splitting the contents to their corresponding div wherever I want:
<div id="question" class="col s12 m8 l6 noselect" style = "background-color: green;">
<p id="ques"></p>
</div>
<div id="solution" class="col s12 m8 l6" style = "background-color: white;">
<p id="result"></p>
</div>
function Calc()
{
$('#loader').css('visibility', 'visible');
ajaxRequest= $.ajax({
url: 'CALC.php',
type: 'post',
data: { "num1": myvar1,
"num2": myvar2
},});
ajaxRequest.done(function(response) {
$('#ques').text(response.myquestion);
$('#result').text(response.myanswer);
MathJax.Hub.Queue(['Typeset',MathJax.Hub,"ques,result"], function() {$('#loader').css('visibility', 'hidden');});
}
}
}
My other file CALC.php
$number1 = $_POST['num1'];
$number2 = $_POST['num2'];
$final= $number1+$number2;
$q = $a = array();
$q = $a = null;
$q.="Add these numbers".$number1." and ".$number2;
$q.="<br> Show all work ";
$a = "$ \\text{The answer is} $.$final;
$final_answer = array("myquestion"=>$q,"myanswer"=>$a);
header("Content-Type: application/json"); //without this statement, it wouldn't work
echo json_encode($final_answer);
This header statement was mentioned by deadlock. Here is the refererence:
How to get multiple responses to a single ajax request in php