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;
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
Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons
I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
display: inline-block;
This should solve your problem.
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode.
You could write the following CSS rule:
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you.
Edit:
Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. Instead, set the display property to inline or inline-block to achieve the desired effect.
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set.
Change the display of your buttons to 'inline' instead of 'none'.
First I would place all the buttons within a div so you can property CSS them.
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this:
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
I have a KML file and made a fusion table out of this.
In this fusion table there are a lot of polygons split one per row.
One of these rows contains following polygon:
<Polygon><outerBoundaryIs><LinearRing><coordinates>4.479382,50.95028 4.479507,50.950126
4.479653,50.949947 4.479828,50.949733 4.479941,50.949767 4.480345,50.94989
4.481543,50.948703 4.481571,50.948675 4.481519,50.94866 4.480786,50.948436
4.480783,50.948441 4.480592,50.948373 4.480443,50.948309 4.480426,50.948301
4.48037,50.948277 4.480279,50.948216 4.4801,50.948037 4.479825,50.948314
4.479676,50.94827 4.479665,50.948267 4.479372,50.948181 4.479354,50.948172
4.479263,50.948147 4.478968,50.948063 4.478968,50.948063 4.479273,50.947683
4.479597,50.947277 4.479316,50.947176 4.479985,50.946633 4.48004,50.946588
4.480702,50.946051 4.481081,50.945742 4.480946,50.945554 4.48053,50.945347
4.480373,50.945268 4.48022,50.94523 4.4797,50.945143 4.479497,50.945419
4.479086,50.945992 4.478416,50.945788 4.478309,50.94586 4.477876,50.946167
4.477888,50.946216 4.478038,50.946882 4.478071,50.946879 4.478114,50.947004
4.477663,50.947448 4.47719,50.947878 4.477133,50.94789 4.476584,50.948023
4.47635,50.948079 4.476282,50.948029 4.476294,50.948017 4.47655,50.947759
4.476747,50.947527 4.476918,50.947186 4.476921,50.94718 4.476921,50.94718
4.476904,50.947161 4.476581,50.947041 4.476363,50.946908 4.476222,50.946787
4.476051,50.946585 4.475605,50.945866 4.47549,50.945572 4.475423,50.945457
4.475364,50.94539 4.474899,50.944991 4.474282,50.944517 4.474209,50.944402
4.474138,50.944215 4.474213,50.944401 4.474226,50.944417 4.474245,50.944438
4.474257,50.944452 4.474373,50.944541 4.474784,50.944855 4.474974,50.94501
4.475605,50.944623 4.475823,50.94449 4.476053,50.944349 4.475823,50.94449
4.475605,50.944623 4.474974,50.94501 4.474994,50.945026 4.475337,50.945314
4.475401,50.945383 4.475425,50.945421 4.475484,50.945511 4.475508,50.945559
4.475722,50.945376 4.475722,50.945376 4.476277,50.944903 4.476722,50.944523
4.476722,50.944523 4.478126,50.944855 4.478927,50.945014 4.479182,50.944685
4.479257,50.944588 4.479497,50.944332 4.479054,50.943961 4.478219,50.943253
4.478219,50.943253 4.477985,50.942901 4.477974,50.942881 4.476116,50.943658
4.475724,50.943821 4.475724,50.943821 4.476116,50.943657 4.477974,50.942881
4.477965,50.942865 4.477951,50.942845 4.477827,50.94266 4.477601,50.942643
4.477213,50.942614 4.476788,50.942583 4.476351,50.94255 4.47554,50.942489
4.475353,50.942474 4.475177,50.942461 4.474992,50.942447 4.47476,50.942429
4.474371,50.942399 4.473767,50.942352 4.473618,50.94234 4.473541,50.942009
4.473515,50.941979 4.473484,50.941955 4.473466,50.941944 4.473466,50.941944
4.473266,50.941818 4.47304,50.941629 4.473026,50.94161 4.472923,50.941475
4.472819,50.941292 4.472751,50.941181 4.472589,50.940971 4.472509,50.940868
4.472509,50.940868 4.472432,50.940768 4.472339,50.940675 4.472162,50.940527
4.472162,50.940527 4.471742,50.940174 4.472401,50.93963 4.472366,50.939611
4.473093,50.93902 4.473464,50.938718 4.472916,50.938515 4.472513,50.938378
4.471592,50.938098 4.471244,50.937995 4.470833,50.937884 4.470064,50.938326
4.4695,50.938656 4.468968,50.938251 4.468085,50.937605 4.46806,50.937586
4.467965,50.937601 4.469422,50.939346 4.469097,50.939508 4.468961,50.939621
4.468698,50.939849 4.468132,50.940302 4.468183,50.940313 4.467443,50.940799
4.467906,50.941071 4.4668,50.941797 4.465734,50.942506 4.465885,50.942631
4.466098,50.942808 4.466295,50.942996 4.466558,50.943223 4.466796,50.943527
4.466924,50.943699 4.468189,50.943182 4.467658,50.942774 4.468189,50.943182
4.468567,50.943476 4.468929,50.943357 4.469033,50.943423 4.469124,50.94348
4.46917,50.943509 4.46958,50.943768 4.46959,50.943779 4.469809,50.943791
4.469926,50.943794 4.470095,50.943798 4.470091,50.943989 4.470367,50.944
4.470357,50.944179 4.470688,50.944282 4.470686,50.944356 4.471413,50.944393
4.471411,50.944426 4.471406,50.94448 4.471395,50.944563 4.471372,50.94472
4.471368,50.94479 4.471362,50.944879 4.470595,50.944846 4.470573,50.945072
4.471246,50.945107 4.471243,50.945132 4.471236,50.945187 4.471232,50.945217
4.471213,50.945361 4.471204,50.945436 4.471201,50.9455 4.470753,50.945483
4.470745,50.945539 4.470412,50.945523 4.470402,50.945614 4.470683,50.945626
4.470564,50.945961 4.471569,50.946406 4.473756,50.947496 4.474915,50.948073
4.475741,50.948419 4.47603,50.948576 4.476021,50.948603 4.475952,50.948722
4.475933,50.948755 4.475864,50.948863 4.475823,50.948991 4.475832,50.949016
4.475875,50.949131 4.475942,50.949248 4.475977,50.949288 4.476035,50.949352
4.476104,50.94943 4.476261,50.94961 4.476317,50.949747 4.476319,50.949765
4.478017,50.950223 4.478046,50.950188 4.478062,50.950177 4.478046,50.950188
4.478017,50.950223 4.477909,50.950351 4.477927,50.950353 4.47804,50.950367
4.478507,50.950432 4.478629,50.950483 4.478683,50.950515 4.479041,50.950728
4.479133,50.950609 4.479267,50.950437 4.479389,50.950282
4.479382,50.95028</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs>
<LinearRing><coordinates>4.476928,50.949872 4.477174,50.949495 4.47841,50.949804
4.478728,50.94943 4.47841,50.949804 4.477174,50.949495 4.476928,50.949872</coordinates>
</LinearRing></innerBoundaryIs><innerBoundaryIs><LinearRing>
<coordinates>4.476873,50.948207 4.477043,50.948046 4.477209,50.947887
4.477043,50.948046 4.476873,50.948207</coordinates></LinearRing></innerBoundaryIs>
<innerBoundaryIs><LinearRing><coordinates>4.470775,50.939605 4.470675,50.939524
4.470738,50.93956 4.470975,50.939657 4.47112,50.939715 4.47118,50.939738
4.471275,50.939784 4.471383,50.939849 4.471471,50.93992 4.471337,50.939852
4.470992,50.939709 4.470775,50.939605</coordinates></LinearRing></innerBoundaryIs>
<innerBoundaryIs><LinearRing><coordinates>4.469713,50.938817 4.469691,50.938801
4.469771,50.938851 4.469915,50.938942 4.46997,50.938977 4.470004,50.939003
4.469713,50.938817</coordinates></LinearRing></innerBoundaryIs></Polygon>
The problem with this polygon is that is it not showing up on the map?
But when I preview only this polygon it is :/
Does anyone experienced something similar or know a solution for this?
Thanks in advance!
You have some inner polygons that look like lines to me. Removing those might help as well as simplifying the outer boundary. KML with winding direction calculations
Remove the <innerBoundaryIs> tags and it displays for me