Eine Zeile nach der anderen auf Knopfdruck ausgeben

mini25 · 5. August 2020

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 &#10132;</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">&copy; 2020 Eyyüp</p>
    </div>
    <!-- /.container -->
  </footer>

</html>

Alles anzeigen

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?

addi · 7. August 2020

Nicht böse sein: Das würde man anders programmieren. Am besten sammelst du mehr Erfahrung, wie man richtig programmiert und keinen unleserlichen, wenig funktionalen Spaghetti-Code produziert. Die Wahrscheinlichkeit, dass sich hier jemand damit ernsthaft beschäftigen möchte, ist auch darum ziemlich klein.

Tags