АнонимныйПарень,
<!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>