index.html 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Test 18</title>
  8. <link rel="stylesheet" href="css/tailwind.min.css">
  9. <link rel="stylesheet" href="css/lineicons.css">
  10. </head>
  11. <body>
  12. <!-- nav -->
  13. <header class="text-gray-600 body-font">
  14. <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
  15. <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
  16. <img src="img/node-js-svgrepo-com.svg" alt="">
  17. <span class="ml-3 text-xl">Test 18</span></a>
  18. <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
  19. <a class="mr-5 hover:text-gray-900">First Link</a>
  20. <a class="mr-5 hover:text-gray-900">Second Link</a>
  21. <a class="mr-5 hover:text-gray-900">Third Link</a>
  22. </nav>
  23. </div>
  24. </header>
  25. <section class="text-gray-600 body-font">
  26. <div id="result" class="container px-5 py-24 mx-auto">
  27. <div class="flex flex-col text-center w-full mb-20">
  28. <h1 id="question" class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">Вопрос</h1>
  29. <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Нужно выбрать правильный ответ и нажать на кнопку</p>
  30. </div>
  31. <div class="lg:w-2/3 w-full mx-auto overflow-auto">
  32. <table class="table-auto w-full text-left whitespace-no-wrap">
  33. <thead>
  34. <tr>
  35. <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Каков правильный ответ?</th>
  36. <th class="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br">
  37. </th>
  38. </tr>
  39. </thead>
  40. <tbody>
  41. <tr>
  42. <td id="guess_a" class="px-4 py-3 text-lg text-gray-900">ответ a</td>
  43. <td class="w-10 text-center">
  44. <input id="a" class="cursor-pointer" name="answer" type="radio">
  45. </td>
  46. </tr>
  47. <tr>
  48. <td id="guess_b" class="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">ответ b</td>
  49. <td class="border-t-2 border-gray-200 w-10 text-center">
  50. <input id="b" class="cursor-pointer" name="answer" type="radio">
  51. </td>
  52. </tr>
  53. <tr>
  54. <td id="guess_c" class="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">ответ c</td>
  55. <td class="border-t-2 border-gray-200 w-10 text-center">
  56. <input id="c" class="cursor-pointer" name="answer" type="radio">
  57. </td>
  58. </tr>
  59. <tr>
  60. <td id="guess_d" class="border-t-2 border-b-2 border-gray-200 px-4 py-3 text-lg text-gray-900">ответ d</td>
  61. <td class="border-t-2 border-b-2 border-gray-200 w-10 text-center">
  62. <input id="d" class="cursor-pointer" name="answer" type="radio">
  63. </td>
  64. </tr>
  65. </tbody>
  66. </table>
  67. </div>
  68. <div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
  69. <button id="submit" class="flex ml-auto text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded">Следующий</button>
  70. </div>
  71. </div>
  72. </section>
  73. <script src="js/main.js"></script>
  74. </body>
  75. </html>