Hi Leute,
ich komme an einer Stelle nicht weiter. Ich habe in der Datenbank Fragen, die ich einzeln ausgeben will. Heißt die erste Frage kommt, nachdem man den Knopf drückt kommt die nächste Frage.
Mein bisheriger Code:
PHP
<?php
session_start();
if(!isset($_SESSION["email"])){
header("Location: ../noLogin.html");
exit;
}
if($_SESSION["job"] != "T"){
header("Location: ../Dashboard.php");
exit;
}
if($_SESSION["tecvid"] != "true"){
header("Location: ../Dashboard.php");
exit;
}
require("../mysql.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Talebe Ders</title>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/full-width-pics.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="../index.php">Talebe Ders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../index.php">Anasayfa</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../Dashboard.php">Dashboard
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../impressum.html">Impressum</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger" href="../logout.php">Oturumu Kapat</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Med Bahsı</h1>
</div>
</section>
<?php
$stmt = $mysql->prepare("SELECT * FROM t_med ORDER BY RAND()");
$stmt->execute();
$count = $stmt->rowCount();
$row = $stmt->fetch();
//random answers
$answer_options = array("ANTWORT1", "ANTWORT2", "ANTWORT3", "ANTWORT4");
shuffle ($answer_options);
for($i = 0; $arrayDBQuestions[$i] = $stmt->fetch(); $i++);
print_r($arrayDBQuestions);
?>
<div class="container alert alert-primary" role="alert">
<h4 class="alert-heading">Soru</h4>
<hr>
<div class="shadow p-3 mb-5 bg-white rounded" id="answercolour">
<p class="mb-0 p-question"> <?php print_r($row['FRAGE']); ?></p>
</div>
<hr>
<form class="form-check">
<div class="form-check">
<input class="form-check-input" type="radio" name="selectedRadios" id="radio1" value="option1">
<label class="form-check-label" for="exampleRadios1" id="answer1">
<?php print_r($row[$answer_options[0]]); ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="selectedRadios" id="radio2" value="option1">
<label class="form-check-label" for="exampleRadios1" id="answer2">
<?php print_r($row[$answer_options[1]]); ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="selectedRadios" id="radio3" value="option1">
<label class="form-check-label" for="exampleRadios1" id="answer3">
<?php print_r($row[$answer_options[2]]); ?>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="selectedRadios" id="radio4" value="option1">
<label class="form-check-label" for="exampleRadios1" id="answer4">
<?php print_r($row[$answer_options[3]]); ?>
</label>
</div>
<div class="rightDIV">
<button type="button" class="btn btn-primary rightButton" onclick="checkAnswer()">Devam ➔</button>
</div>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
let answercolour0js = document.getElementById("answercolour");
let answercolour1js = document.getElementById("answer1");
let answercolour2js = document.getElementById("answer2");
let answercolour3js = document.getElementById("answer3");
let answercolour4js = document.getElementById("answer4");
//radio def
let radio1 = document.getElementById("radio1");
let radio2 = document.getElementById("radio2");
let radio3 = document.getElementById("radio3");
let radio4 = document.getElementById("radio4");
//answer def
let answer1 = document.getElementById("answer1");
let answer2 = document.getElementById("answer2");
let answer3 = document.getElementById("answer3");
let answer4 = document.getElementById("answer4");
var rowANTWORT1 =<?php echo json_encode($row['ANTWORT1']);?>;
var checked = 0;
function checkAnswer() {
if(checked == 0){
checked = 1;
if(radio1.checked == true){
if(answer1.innerText == rowANTWORT1){
answercolour0js.classList.add("green-background");
answercolour1js.classList.add("green-background");
}else{
answercolour0js.classList.add("red-background");
answercolour1js.classList.add("red-background");
if(answer2.innerText == rowANTWORT1){
answercolour2js.classList.add("green-background");
}else if(answer3.innerText == rowANTWORT1){
answercolour3js.classList.add("green-background");
}else if(answer4.innerText == rowANTWORT1){
answercolour4js.classList.add("green-background");
}
}
}else if(radio2.checked == true){
if(answer2.innerText == rowANTWORT1){
answercolour0js.classList.add("green-background");
answercolour2js.classList.add("green-background");
}else{
answercolour0js.classList.add("red-background");
answercolour2js.classList.add("red-background");
if(answer1.innerText == rowANTWORT1){
answercolour1js.classList.add("green-background");
}else if(answer3.innerText == rowANTWORT1){
answercolour3js.classList.add("green-background");
}else if(answer4.innerText == rowANTWORT1){
answercolour4js.classList.add("green-background");
}
}
}else if(radio3.checked == true){
if(answer3.innerText == rowANTWORT1){
answercolour0js.classList.add("green-background");
answercolour3js.classList.add("green-background");
}else{
answercolour0js.classList.add("red-background");
answercolour3js.classList.add("red-background");
if(answer1.innerText == rowANTWORT1){
answercolour1js.classList.add("green-background");
}else if(answer2.innerText == rowANTWORT1){
answercolour2js.classList.add("green-background");
}else if(answer4.innerText == rowANTWORT1){
answercolour4js.classList.add("green-background");
}
}
}else if(radio4.checked == true){
if(answer4.innerText == rowANTWORT1){
answercolour0js.classList.add("green-background");
answercolour4js.classList.add("green-background");
}else{
answercolour0js.classList.add("red-background");
answercolour4js.classList.add("red-background");
if(answer1.innerText == rowANTWORT1){
answercolour1js.classList.add("green-background");
}else if(answer2.innerText == rowANTWORT1){
answercolour2js.classList.add("green-background");
}else if(answer3.innerText == rowANTWORT1){
answercolour3js.classList.add("green-background");
}
}
} else {
alert("Cevaplardan birini seç!");
}
}else if(checked == 1){
checked = 0;
}
}
</script>
</body>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">© 2020 Eyyüp</p>
</div>
<!-- /.container -->
</footer>
</html>Ich habe versucht die Frage in JS zu encoden, danach das von JS aus in den p-Tag anzugeben. Habe ich aber nicht geschafft.
Hat jemand ein Vorschlag wie ich das hinbekommen kann?