0
I saw many similar questions but none answered me, I would not like to use Ajax as it is an exercise the teacher asked only JS, HTML and PHP.
I made a mini quiz game, everything is working right but I could not make the score. I even created a PHP SESSION as a scoreboard but I could not update it according to the user’s response.
<?php
error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
require_once "../config.php";
$i = $_SESSION["id_quests"];
$g = $_SESSION["guia"];
$con = new PDO(SERVIDOR, USUARIO, SENHA);
$sql = $con->prepare("SELECT * FROM `quiz` WHERE id=$i;");
$sql->execute();
$r = $sql->fetchObject();
if($r == true){
$g++;
$_SESSION["guia"] = $g;
$i++;
$_SESSION["id_quests"] = $i;
}
if($r == false){
if($_SESSION["num_quest"] == $g){
header("location:resultado.php");
}else{
$i++;
$_SESSION["id_quests"] = $i;
echo "<meta HTTP-EQUIV='refresh' CONTENT='0;URL=quiz.php'>";
} };
?>
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Quiz - <?php print $g; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.overlay {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 15px;
text-decoration: none;
font-size: 62px;
color: #818181;
display: block;
transition: 0.3s;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Quiz</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a>Questao Numero <?php print $g; ?></a></li>
<li><a href="inicio.php">Desistir</a></li>
<li><a>Pontuação : <?php print $_SESSION["placar"]; ?></a></li>
</ul>
</div>
</nav>
<div id="myNav" class="overlay">
<div class="overlay-content">
<a><font color="green">Acertou <i class="fa fa-check-circle"></i></font></a><br>
<font style="font-size: 42px;"><span>Proxima pergunta em </span><span id="hora"></span></font>
</div>
</div>
<div id="myNav2" class="overlay">
<div class="overlay-content">
<a><font color="red">Errou <i class="fa fa-times-circle"></i></font></a>
<font style="font-size: 42px;"><span>Proxima pergunta em </span><span id="hora2"></span></font>
</div>
</div>
<div class="container">
<br><br><br>
<h1><?=$r->pergunta?></h1>
<br><br><br>
<form>
<a id="a" onclick="resultado('a')" class="btn btn-default btn-block"><?=$r->a?></a><br>
<a id="b" onclick="resultado('b')" class="btn btn-default btn-block"><?=$r->b?></a><br>
<a id="c" onclick="resultado('c')" class="btn btn-default btn-block"><?=$r->c?></a><br>
<a id="d" onclick="resultado('d')" class="btn btn-default btn-block"><?=$r->d?></a><br>
<a id="e" onclick="resultado('e')" class="btn btn-default btn-block"><?=$r->e?></a>
</form>
</div>
</body>
<script>
certa = "<?php print $r->certa; ?>";
function resultado(alternativa){
if(certa == alternativa){
$('#'+alternativa).attr("class", "btn btn-success btn-block");
$('#a').attr("onclick", "");
$('#b').attr("onclick", "");
$('#c').attr("onclick", "");
$('#d').attr("onclick", "");
$('#e').attr("onclick", "");
window.setTimeout(openNav,1000);
}else{
$('#'+alternativa).attr("class", "btn btn-danger btn-block");
$('#'+certa).attr("class", "btn btn-success btn-block");
$('#a').attr("onclick", "");
$('#b').attr("onclick", "");
$('#c').attr("onclick", "");
$('#d').attr("onclick", "");
$('#e').attr("onclick", "");
window.setTimeout(openNav2,1000);
}
}
function openNav() {
document.getElementById("myNav").style.height = "100%";
relogio();
}
function openNav2() {
document.getElementById("myNav2").style.height = "100%";
relogio();
}
var segundo = 5;
function relogio() {
if(segundo > 0 ){segundo--;};
document.getElementById('hora').innerHTML = segundo;
document.getElementById('hora2').innerHTML = segundo;
if(segundo == 0){location.reload();};
setTimeout("relogio()",1000);
}
</script>
</html>
Cannot update variable values, Sessions etc with PHP after processing/loading the page. But you can work with
Cookies, they work with both PHP and JS– Valdeir Psr
I can’t even score js and then assign the result to php ?
– Gabr13l_Alm31da
No. PHP (Hypertext Preprocessor) is a pre-processed language, after the page is loaded, you can only change/create/remove PHP values with a new request, but you can use https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie and http://php.net/manual/en/features.cookies.php or work with
localStorage(javascript)– Valdeir Psr
You could call a PHP function through JS?
– Gabr13l_Alm31da
No! As I mentioned earlier: after the page loads nay it is possible to work/use PHP, except in a new request (via Ajax, for example).
– Valdeir Psr
OK friend thanks a lot, I managed to make another page cahmada "placar.php" that when the user hits I redirect to this page and then redirect back to quiz.php.
– Gabr13l_Alm31da