Вывод елементов
Ребята, есть вопрос, где ошибка?
Нет возможности выложить куда либо, так что если можете потестите у себя. Очень нужно решить проблему, суть: вывод вопросов и вариантов ответа рандомно, но без повторений вопросов и вариантов ответа! <center> <div class="quetions"> <div class="one quetions_mark"> Питання №1: Що з поданого переліку НЕ можна робити в кабінеті інформатики? </div> <div class="two quetions_mark"> Питання №2: З інформацією МОЖНА робити: </div> <div class="three quetions_mark"> Питання №3: Яке з стверджень правильне? </div> <div class="four quetions_mark"> Питання №4: Яке з стверджень НЕ правильне? </div> <div class="five quetions_mark"> Питання №5: Що треба зробити перед тим, як вимикати комп’ютер? </div> <div class="six quetions_mark"> Питання №6: Чого НЕ має на робочому столі в комп’ютера? </div> <div class="seven quetions_mark"> Питання №7: Яку дії миша НЕ може зробити? </div> <div class="eight quetions_mark"> Питання №8: До якої групи відносять клавіші "Windows","Tab","Esc",? </div> <div class="nine quetions_mark"> Питання №9: Які пристрої призначені для роботи з повідомленнями? </div> <div class="ten quetions_mark"> Питання №10: Що з переліку нижче НЕ є властивістю об'єкта "Яблуко"? </div> </div> <div class="answers"> <div class="one answer-holder"> <div class="btn btn-success answer" value="0"> Малювати на папері</div> <div class="btn btn-success answer" value="0"> Розмовляти з однокласниками </div> <div class="btn btn-success answer" value="0"> Відповідати на запитання вчителя </div> <div class="btn btn-success answer" value="1"> Вмикай комп’ютер без дозволу вчителя </div> </div> <div class="two answer-holder"> <div class="btn btn-success answer" value="1"> Створювати </div> <div class="btn btn-success answer" value="0"> Їсти </div> <div class="btn btn-success answer" value="0"> Розмальовувати </div> <div class="btn btn-success answer" value="1"> Опрацьовувати </div> </div> <div class="three answer-holder"> <div class="btn btn-success answer" value="0"> Принтер - це пристрій, призначений для створення зображень певних об'єктів шляхом обробки променів </div> <div class="btn btn-success answer" value="0"> Монітор або дисплей — це електронний пристрій для копіювання інформації. </div> <div class="btn btn-success answer" value="1"> Модем - це пристрій, який надає змогу підключитися до Internet </div> <div class="btn btn-success answer" value="0"> Сканер - це друкувальний пристрій </div> </div> <div class="four answer-holder"> <div class="btn btn-success answer" value="0"> Меню програми — це список об’єктів, які можна вибирати. </div> <div class="btn btn-success answer" value="0"> Нижче Рядка заголовка програми розташований Рядок меню </div> <div class="btn btn-success answer" value="0"> Програми керують діями комп’ютера </div> <div class="btn btn-success answer" value="1"> Комп’ютер не завжди працює під керуванням програм </div> </div> <div class="five answer-holder"> <div class="btn btn-success answer" value="0"> Натиснути ПУСК </div> <div class="btn btn-success answer" value="0"> Натисни кнопку Power на системному блоці </div> <div class="btn btn-success answer" value="0"> Вимкнути монітор </div> <div class="btn btn-success answer" value="1"> Закрий вікна всіх програм </div> </div> <div class="six answer-holder"> <div class="btn btn-success answer" value="0"> Панелі завдань </div> <div class="btn btn-success answer" value="0"> Ярликів </div> <div class="btn btn-success answer" value="1"> Інтернету </div> <div class="btn btn-success answer" value="0"> Папок та файлів </div> </div> <div class="seven answer-holder"> <div class="btn btn-success answer" value="0"> Відкрити контекстне меню </div> <div class="btn btn-success answer" value="0"> Запустити програму </div> <div class="btn btn-success answer" value="1"> За допомогою комбінації клавіш миші вимнути комп’ютер </div> <div class="btn btn-success answer" value="0"> Прокрутити вниз веб сторінку </div> </div> <div class="eight answer-holder"> <div class="btn btn-success answer" value="1"> Спеціальні клавіші </div> <div class="btn btn-success answer" value="0"> Клавіші керування курсором </div> <div class="btn btn-success answer" value="0"> Алфавітно-цифрові клавіші </div> <div class="btn btn-success answer" value="0"> Функціональні клавіші </div> </div> <div class="nine answer-holder"> <div class="btn btn-success answer" value="0"> Телефон, Калькулятор, Флешка </div> <div class="btn btn-success answer" value="0"> Диктофон, Фотокамера, Навушники </div> <div class="btn btn-success answer" value="0"> Факс, Плеєр, Духова шафа </div> <div class="btn btn-success answer" value="1"> Телефон, Модем, Факс </div> </div> <div class="ten answer-holder"> <div class="btn btn-success answer" value="0"> Колір </div> <div class="btn btn-success answer" value="1"> Особисті вподобання </div> <div class="btn btn-success answer" value="0"> Вага </div> <div class="btn btn-success answer" value="0"> Розмір </div> </div> </div> </center> Есть js var correctly, wrong; var item; var random = { massive : [ 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ], already : [], randomizer : function () { this.massive[Math.floor(Math.random() * this.massive.length)]; }, get : function () { item = this.randomizer(); if (this.already.length >= this.massive.length) { this.already = []; return item; } if (this.already.indexOf(item) != -1) { this.get(); } else { this.already.push(item); return item; } } }; window.onload = function () { $(".quetions>div, .answers>div").css({display : "none"}); $(".one").css({ display : "block" }); $(".answers>div>div").on("click", function() { $(".quetions>div, .answers>div").css({display : "none"}); if ($(this).attr("value").valueOf() == "1") { correctly++; } else { wrong++; } $("."+random.get()+"").css({ display : "block" }); }); }; |
randomizer : function () { *!*return*/!* this.massive[Math.floor(Math.random() * this.massive.length)]; }, Но вообще код хреновый. Вместо того чтоб неизвестное количество раз пытаться найти новый рандомный элемент массива, можно было бы как минимум просто перекладывать из одного в другой. Глобальный item - тоже кривота несусветная. |
вопросник, тестирование, случайный вывод блоков
АнонимныйПарень,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .quetions{ margin: 0 auto; text-align: center; position: relative; height: auto; background-color: #DEB887; } .quetions .quetions_mark , .answers .answer-holder{ display: none; } .quetions .quetions_mark.active, .answers .answer-holder.active{ margin-top: 0%; display: block; } .answers{ position: relative; margin-left: 20%; text-align: left; height: auto; } .answers .answer:hover { cursor: pointer; background-color: #D3D3D3; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var correctly = 0, wrong = 0, quetions = $(".quetions .quetions_mark").get(); function rand() { $(".quetions .quetions_mark.active").removeClass("active"); $(".answers .answer-holder.active").removeClass("active"); if (!quetions.length) return; var n = Math.random() * quetions.length | 0; var el = quetions.splice(n, 1)[0]; var indx = $(".quetions .quetions_mark").index(el); $(".quetions .quetions_mark").eq(indx).addClass("active"); var holder = $(".answers .answer-holder").eq(indx).addClass("active"); var answer = holder.find(".answer").get().sort(function() { return Math.random() > .5 }); holder.append(answer); return true } rand(); $(".answers").on("click", ".answer", function() { var num = $(this).data("value"); num ? correctly++ : wrong++; var text = "correctly : " + correctly + " wrong : " + wrong; !rand() && (text += " thanks all"); $(".total").text(text) }) }); </script> </head> <body> <div class="total">correctly : 0 wrong : 0</div> <div class="quetions"> <div class="one quetions_mark"> Питання №1: Що з поданого переліку НЕ можна робити в кабінеті інформатики? </div> <div class="two quetions_mark"> Питання №2: З інформацією МОЖНА робити: </div> <div class="three quetions_mark"> Питання №3: Яке з стверджень правильне? </div> <div class="four quetions_mark"> Питання №4: Яке з стверджень НЕ правильне? </div> <div class="five quetions_mark"> Питання №5: Що треба зробити перед тим, як вимикати комп’ютер? </div> <div class="six quetions_mark"> Питання №6: Чого НЕ має на робочому столі в комп’ютера? </div> <div class="seven quetions_mark"> Питання №7: Яку дії миша НЕ може зробити? </div> <div class="eight quetions_mark"> Питання №8: До якої групи відносять клавіші "Windows","Tab","Esc",? </div> <div class="nine quetions_mark"> Питання №9: Які пристрої призначені для роботи з повідомленнями? </div> <div class="ten quetions_mark"> Питання №10: Що з переліку нижче НЕ є властивістю об'єкта "Яблуко"? </div> </div> <div class="answers"> <div class="one answer-holder"> <div class="btn btn-success answer" data-value="0"> Малювати на папері</div> <div class="btn btn-success answer" data-value="0"> Розмовляти з однокласниками </div> <div class="btn btn-success answer" data-value="0"> Відповідати на запитання вчителя </div> <div class="btn btn-success answer" data-value="1"> Вмикай комп’ютер без дозволу вчителя </div> </div> <div class="two answer-holder"> <div class="btn btn-success answer" data-value="1"> Створювати </div> <div class="btn btn-success answer" data-value="0"> Їсти </div> <div class="btn btn-success answer" data-value="0"> Розмальовувати </div> <div class="btn btn-success answer" data-value="1"> Опрацьовувати </div> </div> <div class="three answer-holder"> <div class="btn btn-success answer" data-value="0"> Принтер - це пристрій, призначений для створення зображень певних об'єктів шляхом обробки променів </div> <div class="btn btn-success answer" data-value="0"> Монітор або дисплей — це електронний пристрій для копіювання інформації. </div> <div class="btn btn-success answer" data-value="1"> Модем - це пристрій, який надає змогу підключитися до Internet </div> <div class="btn btn-success answer" data-value="0"> Сканер - це друкувальний пристрій </div> </div> <div class="four answer-holder"> <div class="btn btn-success answer" data-value="0"> Меню програми — це список об’єктів, які можна вибирати. </div> <div class="btn btn-success answer" data-value="0"> Нижче Рядка заголовка програми розташований Рядок меню </div> <div class="btn btn-success answer" data-value="0"> Програми керують діями комп’ютера </div> <div class="btn btn-success answer" data-value="1"> Комп’ютер не завжди працює під керуванням програм </div> </div> <div class="five answer-holder"> <div class="btn btn-success answer" data-value="0"> Натиснути ПУСК </div> <div class="btn btn-success answer" data-value="0"> Натисни кнопку Power на системному блоці </div> <div class="btn btn-success answer" data-value="0"> Вимкнути монітор </div> <div class="btn btn-success answer" data-value="1"> Закрий вікна всіх програм </div> </div> <div class="six answer-holder"> <div class="btn btn-success answer" data-value="0"> Панелі завдань </div> <div class="btn btn-success answer" data-value="0"> Ярликів </div> <div class="btn btn-success answer" data-value="1"> Інтернету </div> <div class="btn btn-success answer" data-value="0"> Папок та файлів </div> </div> <div class="seven answer-holder"> <div class="btn btn-success answer" data-value="0"> Відкрити контекстне меню </div> <div class="btn btn-success answer" data-value="0"> Запустити програму </div> <div class="btn btn-success answer" data-value="1"> За допомогою комбінації клавіш миші вимнути комп’ютер </div> <div class="btn btn-success answer" data-value="0"> Прокрутити вниз веб сторінку </div> </div> <div class="eight answer-holder"> <div class="btn btn-success answer" data-value="1"> Спеціальні клавіші </div> <div class="btn btn-success answer" data-value="0"> Клавіші керування курсором </div> <div class="btn btn-success answer" data-value="0"> Алфавітно-цифрові клавіші </div> <div class="btn btn-success answer" data-value="0"> Функціональні клавіші </div> </div> <div class="nine answer-holder"> <div class="btn btn-success answer" data-value="0"> Телефон, Калькулятор, Флешка </div> <div class="btn btn-success answer" data-value="0"> Диктофон, Фотокамера, Навушники </div> <div class="btn btn-success answer" data-value="0"> Факс, Плеєр, Духова шафа </div> <div class="btn btn-success answer" data-value="1"> Телефон, Модем, Факс </div> </div> <div class="ten answer-holder"> <div class="btn btn-success answer" data-value="0"> Колір </div> <div class="btn btn-success answer" data-value="1"> Особисті вподобання </div> <div class="btn btn-success answer" data-value="0"> Вага </div> <div class="btn btn-success answer" data-value="0"> Розмір </div> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 21:44. |