How to echo javascript variable in php to pass it in form or in anchor
Get the solution ↓↓↓I have a javascript which is more like a game that runs on continuous loop for random number additions, if user guesses correct will increase the score by +1 else exits the game and print the final score.
Here'e the code of the page :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>#</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="mathsaronstyle.css">
<style>
body {
zoom: 200%;
}
</style>
</head>
<body style="background-image: linear-gradient(to right, #034378, #2d4e68);">
<div class="container-fluid text-center" style="margin-top:100px !important;">
<div id="display" class="well col-xs-12" style="box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);}">
<div id="try-screen">
<p id="try">Try Again</p>
<p id="final-score">Your score was 0</p>
<button class="submit" style="font-size: 0.5em;padding-bottom:15px !important;" ><strong><span>Claim </span> </strong></button>
<button class="submit" id="restart-button" style="font-size: 0.5em; background-color:#BA470D; " ><strong ><span >Play Again </span> </strong></button>
</div>
<div id="working-screen">
<div id="progressbar"></div>
<p id="expression" style="display:inline-block;">7 + 7</p>
<p id="result" style="display:inline-block;">= 14</p>
<br><br>
<div id="controls">
<button id="tick"><i class="fa fa-check"></i></button>
<button id="cross"><i class="fa fa-close"></i></button>
</div>
</div> <!-- end of working screen -->
</div>
<div id="score">
<p>Score: </p>
</div>
</div> <!-- end of fluid container -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script>
// Randomly create an expression
var tick = document.getElementById("tick");
var cross = document.getElementById("cross");
var restartButton = document.getElementById("restart-button");
var tryDisplay = document.getElementById("try-screen");
var workDisplay = document.getElementById("working-screen");
var finalScoreScreen = document.getElementById("final-score");
/*var progressScreen = document.getElementById("progress");*/
var progressBar = $("#progressbar");
var exprScreen = document.getElementById("expression");
var resScreen = document.getElementById("result");
var scoreScreen = document.getElementById("score");
var a, b, r, ir, chaos, isCorrect;
var score = 0;
var wrongAnswer = false;
var correctClick = 0;
// first, second, and result.
// Helper function to create a random member
function randomExpressionMember() {
return Math.floor(Math.random() * 10 + 1);
}
// Create current expression
function createExpression() {
a = randomExpressionMember();
b = randomExpressionMember();
// correct answer;
r = a + b;
// create a random result within the proximity of the number
chaos = Math.floor(Math.random() * (Math.round(r * 0.7)) * 1.5 + Math.round(r/2) + 1);
//console.log("chaos", chaos)
if (chaos === r) { chaos += 1; }
// make sure r is not the same as chaos
// run a coin flip to see whether to display the correct or incorrect answer
isCorrect = Math.round(Math.random()) ? true : false;
// check whether what's displayed is true or not.
console.log("Is Correct r displayed", isCorrect)
return a, b, r, chaos, isCorrect; // add another variable to track if the expr should be true or not
}
function displayProgressBar() {
// animate progress bar
progressBar.width(0).animate(
{
width: "100%"
},
300 * 10,
"linear",
function() {
restart();
}
);
}
function displayExpression(a, b, r, chaos, isCorrect) {
// Input the values in the fields.
exprScreen.textContent = a + " + " + b;
if (isCorrect) {
resScreen.textContent = " = " + r;
} else {
resScreen.textContent = " = " + chaos;
}
scoreScreen.textContent = "Score: " + score;
}
function restart() {
// clear screen
progressBar.finish(); //test
finalScoreScreen.textContent = "Your score was " + score + ".";
scoreScreen.style.display = "none";
workDisplay.style.display = "none";
tryDisplay.style.display = "block";
// Working with score
wrongAnswer = false;
score = 0;
scoreScreen.textContent = "Score: " + score;
}
function runPlayerTurn() {
createExpression();
displayExpression(a, b, r, chaos, isCorrect);
displayProgressBar();
// take input and decide what to do next - increase the score or not. restart the game if they are wrong.
}
// Attach event listeners to buttons
tick.addEventListener("click", function() {
console.log("clicked tick");
progressBar.stop();
// ATTENTION TO THIS: Cross can also be the right answer.
if (isCorrect) {
score += 1;
console.log("correct answer");
runPlayerTurn();
} else {
// exit the game? do nothing?
wrongAnswer = true;
console.log("incorrect answer");
restart();
}
}, false);
cross.addEventListener("click", function() {
console.log("clicked cross");
progressBar.stop();
// ATTENTION TO THIS: Cross can also be the right answer.
if (!isCorrect) {
score += 1;
runPlayerTurn();
} else {
// exit the game? do nothing?
wrongAnswer = true;
restart();
}
}, false);
restartButton.addEventListener("click", function() {
runPlayerTurn();
tryDisplay.style.display = "none";
workDisplay.style.display = "block";
scoreScreen.style.display = "block";
}, false);
// testing
createExpression();
displayExpression(a, b, r, chaos);
// can create the first screen
function runGame() {
//maybe don't need this yet.
// while (!wrongAnswer) {
runPlayerTurn();
console.log("looped");
// }
// display start?
// runTurns until the answer is wrong.
// reset the game if the player is wrong.
}
// Happens every move (set)
// calculate the answer. Randomize how the answer is displayed: half the times the correct answer and half the times an answer that is around that but not correct.
// Start with + then add -
// have a timer to go back each time the expression is displayed.
runGame();
</script>
</body>
</html>
However all i need is to get the final score printing over the class at id="final-score" and pass it to a php variable to insert it in database along with other php variables and pass it to another page using GET or POST.
Any help is mostly appreciated...
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: illuminate\http\exceptions\posttoolargeexception
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.