Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Sprawdzenie wyników
Forum PHP.pl > Forum > Przedszkole
programistaarek
Bardzo prosił bym o pomoc w tym kodzie. Lewa kolumna jest niezmienna a prawa po każdym przeładowaniu strony zmienia się wartość. Chcę napisać kod lecz nie nie udaje mi się to i chciałbym o gotowe rozwiązanie. Chodzi o to, że po lewej mamy A,B,C,D,E i po prawej musi być ułożone równolegle 1,2,3,4,5 i po kliknięciu sprawdź chcę aby ukazało mi poprawne wyniki. Na zasadzie alert lub komunikat gdzieś pod spodem. W komunikacie chcę treść taką jak, liczba poprawnych odpowiedzi to x a błędnych to y. Odpowiedzi to 1-a, 2-b, 3-c , 4-d 5, -e . Wie ktoś jak to wykonać.


  1. <?
  2.  
  3.  
  4. $tablica_1 = array('A','B','C','D', 'E');
  5. $slowo = array('1','2', '3', '4', '5');
  6. shuffle($slowo);
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15. ?>
  16.  
  17.  
  18. <!doctype html>
  19. <html lang="en">
  20. <head>
  21. <meta charset="utf-8">
  22. <meta name="viewport" content="width=device-width, initial-scale=1">
  23. <title>Puzzle Game - Test</title>
  24. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  25. <link rel="stylesheet" href="/resources/demos/style.css">
  26. <link rel="stylesheet" href="style.css">
  27. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  28. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  29. <script>
  30. $( function() {
  31. $( "#sortable2" ).sortable({
  32.  
  33. }).disableSelection();
  34. } );
  35.  
  36. function sprawdz() {
  37. document.getElementById("result").innerHTML = "Wyniki";
  38.  
  39.  
  40.  
  41.  
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <div id="glowna">
  47.  
  48. <div style="display:inline-block; border:0px solid red; vertical-align:top;">
  49.  
  50. <ul id="sortable1" class="connectedSortable">
  51. <li class="ui-state-default" id="l1"><? echo $tablica_1[0];?></li>
  52. <li class="ui-state-default" id="l2"><? echo $tablica_1[1];?></li>
  53. <li class="ui-state-default" id="l3"><? echo $tablica_1[2];?></li>
  54. <li class="ui-state-default" id="l4"><? echo $tablica_1[3];?></li>
  55. <li class="ui-state-default" id="l5"><? echo $tablica_1[4];?></li>
  56. </ul>
  57.  
  58. </div>
  59.  
  60. <div style="display:inline-block; border:0px solid red; vertical-align:top;">
  61. <img src="left_right.png" class="arrow">
  62. <img src="left_right.png" class="arrow">
  63. <img src="left_right.png" class="arrow">
  64. <img src="left_right.png" class="arrow">
  65. <img src="left_right.png" class="arrow">
  66.  
  67. </div>
  68.  
  69. <div style="display:inline-block; border:0px solid red; vertical-align:top;">
  70. <ul id="sortable2" class="connectedSortable">
  71. <?
  72. foreach ($slowo as $losowe) {
  73. echo " <li class='ui-state-highlight' id='l$losowe' >$losowe </li>";
  74. }
  75. ?>
  76. </ul>
  77. </div>
  78. </div>
  79. <div id="sprawdz">
  80. <button onclick="sprawdz()" class="button">Sprawdź</button>
  81. <p id="result"></p>
  82. </div>
  83.  
  84. </body>
  85. </html>
SmokAnalog
Przecież nawet nie zacząłeś.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.