Функция добавления кнопок в тесте

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

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

    Хомячек

    Регистрация:
    16 июн 2018
    Сообщения:
    0
    Симпатии:
    0
    Здравствуйте, есть код, который выбирает и выводит рандомный элемент массива. Элемент массива представляет из себя вопрос с вариантами ответов. Пользователь отвечает и если ответ правильный, то переходит к следующему вопросу, если же неправильно, то выбранный ответ становится красным, а верный зеленым + внизу высвечивается комментарий. Не могу понять,в чем косяк с кнопками выбора ответа... Как это правильно организовать и в случае неправильного ответа вывести эти же кнопки, но с другим стилем и комментарием?
    Код:
    <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    <meta charset="UTF-8">
    <title></title>
    
    
    <style>
    .wrong
    {
    background-color: #ff3333;
    }
    .right
    {
    background-color: #00b300;
    
    }
    #var1,#var2,#var3{
        display:none;
        margin-bottom: 10px;
        }
    </style>
    
    <!--<p style="font-size: 14px;font-weight: bold;padding-top: 2px; line-height: 1.5; " id="question"></p>-->
    <script type="text/javascript">
    
        
    
    
        //вопрос, варианты ответа, комментарий, номер правильного ответа
        
        var data_array = [
          ["Вопрос","Неверный ответ","Неверный ответ","Верный","ком1",3],
          ["Вопрос","Неверный ответ","Верный","Неверный ответ","ком2",2],
          ["Вопрос","Верный","Неверный ответ","Неверный ответ","ком3",1],
          ["Вопрос","Неверный ответ","Неверный ответ","Верный","ком4",3],
          ["Вопрос","Неверный ответ","Неверный ответ","Верный","ком5",3],
          ["Вопрос","Верный","Неверный ответ","Неверный ответ","ком6",1],
        ];
    
        
        
        var prov = []; //пустой массив, в который будут записывать используемые строки массива
        var p=0; //подсчёт количества правилных ответов
        var i=0;
        var plus = 0;
        var cur_answer = 0;
        
        
         while (i++<3)  //повторение цикла три раза 0-2
    {
             var rand = Math.floor(Math.random()*data_array.length); //рандомный выбор индекса
                   function check(num){
    
                         if(num == 0){
            
                            document.getElementById("var1").style.display="block";
                            document.getElementById("var2").style.display="block";
                            document.getElementById("var3").style.display="block";
                            document.getElementById("question").style.display="block";
              
                            document.getElementById('var1').innerHTML=data_array[rand][1];
                            document.getElementById('var2').innerHTML=data_array[rand][2];
                            document.getElementById('var3').innerHTML=data_array[rand][3];
                            document.getElementById('question').innerHTML=data_array[rand][0];
                            
                            document.getElementById('start').style.display='none';
                            
                            }
                            else {
                                if( num ==  data_array[rand][4]){
                                    plus++;
                    
                                }
                                else{
                                document.getElementById('result').innerHTML="Неверно!" + data_array[rand]data_array[rand][5]]; //вывод комментария
                                }
                            }
                    }
                prov = prov.concat(data_array.splice(rand,1)); //отрезаем выбранный элемент в другой массив, чтобы он больше не попадался
    }
    
                }
        
        
    </script>   
    </head>
    <body>
    <p style="font-size: 14px;font-weight: bold;padding-top: 2px; line-height: 1.5; " id="question"></p>
    
            <button onclick="check(1)" id="answ1"></button>
            
            <button onclick="check(2)" id="answ2"></button>
            
            <button onclick="check(3)" id="answ3"></button>
            
    <p style="font-size: 14px;font-weight: bold;padding-top: 2px; line-height: 1.5; " id="result"></p>       
    <button id="start" onclick="check(0)">Приступить к тесту</button>
            
    </body>
    </html>
    
        
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А в чём сейчас проблема? Вы можете показать живой пример?
     
  3. Хомячек

    Хомячек

    Регистрация:
    16 июн 2018
    Сообщения:
    0
    Симпатии:
    0
    Сейчас при выполнении кода выходит так и кнопка не кликабельна
    [​IMG]
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Какого именно кода? Код, который вы привели выше, сам не запускается, а значит речь идёт о реакции на какое-то нажатие. На какое?

    Почему кнопка не кликабельна я по скрину сказать не смогу, но в остальном на скрине всё выглядит именно так, как и должно исходя из кода.

    Если хотите какие-то более конкретные советы, покажите живой пример!
     
    $iD нравится это.