За последние 24 часа нас посетил 22051 программист и 1114 роботов. Сейчас ищут 745 программистов ...

Рандомный выбор неповторяющихся вопросов из списка с выводом на экран по одному (без бд)

Тема в разделе "JavaScript и AJAX", создана пользователем Хомяк, 3 июн 2018.

Метки:
  1. Хомяк

    Хомяк Новичок

    С нами с:
    3 июн 2018
    Сообщения:
    1
    Симпатии:
    0
    Есть код теста в котором пять вопросов от балды. Когда нажимается кнопка "проверить" правильные ответы подсвечиваются зеленым, а неправильные красным. То есть, если пользователь ответил неправильно, то его ответ становится красным, а нужный зеленым.

    Хотелось бы реализовать тест так, чтобы из пяти вопросов рандомно выбирались три из них (в данном примере). При этом каждый выбранный из списка вопрос выводился на экран отдельно и правильный ответ также подсвечивался зеленым, а неправильный - красным.

    Вероятно это как-то можно сделать через двумерный массив, но не могу сообразить, как именно, помогите, пожалуйста


    HTML:
    1.  
    2.   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
    3.  
    4. <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    5.  
    6.  
    7.   <style type="text/css">
    8.     .checked-wrong {
    9.   background-color: #E12F52;
    10. }
    11. .checked-right {
    12.   background-color: #4CE12F;
    13. }
    14.   </style>
    15.  
    16.   <title></title>
    17.  
    18. <script type="text/javascript">
    19. window.onload=function(){
    20.  
    21. $(".questionsubmit").click(function(e){ e.preventDefault(); $('.correct').parent('p').addClass('checked-right'); $('.wrong:checked').parent('p').addClass('checked-wrong'); });
    22.  
    23. }
    24.  
    25.  
    26.  
    27.  
    28. </head>
    29.  
    30.   <form action="">
    31. <div class="question">
    32.    <p>Сколько сантиметров в метре?</p>
    33.    <p><input type="checkbox" class="correct" value="100"> 100</p>
    34.    <p><input type="checkbox" class="wrong" value="1680"> 1680</p>
    35.    <p><input type="checkbox" class="wrong" value="10"> 10</p>
    36. </div>
    37. <div class="question">
    38.    <p>Сколько ног у улитки?</p>
    39.    <p><input type="checkbox" class="wrong" value="Две"> Две</p>
    40.    <p><input type="checkbox" class="correct" value="Одна"> Одна</p>
    41.    <p><input type="checkbox" class="wrong" value="Три"> Три</p>
    42. </div>
    43. <div class="question">
    44.    <p>Сколько месяцев в году?</p>
    45.    <p><input type="checkbox" class="wrong" value="10"> 10</p>
    46.    <p><input type="checkbox" class="correct" value="12"> 12</p>
    47.    <p><input type="checkbox" class="wrong" value="11"> 11</p>
    48. </div>
    49. <div class="question">
    50.    <p>Сколько г в кг?</p>
    51.    <p><input type="checkbox" class="wrong" value="10000"> 10000</p>
    52.    <p><input type="checkbox" class="wrong" value="100"> 100</p>
    53.    <p><input type="checkbox" class="correct" value="1000"> 1000</p>
    54. </div>
    55. <div class="question">
    56.    <p>Сколько музыкантов в квинтете?</p>
    57.    <p><input type="checkbox" class="wrong" value="Шесть"> Шесть</p>
    58.    <p><input type="checkbox" class="wrong" value="Три"> Три</p>
    59.    <p><input type="checkbox" class="correct" value="Пять"> Пять</p>
    60. </div>
    61.  
    62.  
    63.    <p><input type="submit" class="questionsubmit" value="Проверить"></p>
    64. </form>
    65.  
    66.  
    67. </body>
    68.  
    69. </html>
     
    #1 Хомяк, 3 июн 2018
    Последнее редактирование модератором: 4 июн 2018