Globus,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider {
text-align: center;
}
.slider ul {
list-style: none;
margin: 20px auto;
padding: 0;
}
.slider ul li {
font-size: 20px;
margin: 20px auto;
color: #fff;
background-color: #3c8fb7;
border: 0;
cursor: pointer;
width: 100px;
}
.slider ul li:first-child {
width: 90%;
display: block;
background-color: transparent;
color: #000;
font-size: 38px;
font-weight: bold;
padding-top: 2px;
cursor: default;
}
.slider.ok ~ .btn{
display: block;
}
.btn {
margin: 20px auto;
width: 100px;
display: none;
}
.ok li.yes {
background-color: #f00;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function createHTML(data) {
var k = data.pop();
return data.reduce(function(html, text, i) {
var li = i == k ? "<li class='yes'>" : "<li>";
return html + li + text;
}, "<ul>");
}
var arr = [
["Сколько сантиметров в метре?","10","1024","100","1000",3],
["Перевод слова: Hello","Как дела?","Привет","Ты","Дом",2],
["Перевод слова: Dog","Собака","Кошка","Дерево","Сосиска",1],
["Сколько месяцев в году?","10","11","12","13",3],
["Перевод слова: Tree","Три","Собака","Дерево","Дом",3],
["Перевод слова: Wall","Стена","Дом","Башня","Война",1],
];
var node = document.querySelector(".slider"),
btn = document.querySelector(".btn");
btn.addEventListener("click", function() {
var html = arr.length ? createHTML(arr.shift()) : "ваш результат";
node.innerHTML = html;
node.classList.remove("ok");
});
node.addEventListener("click", function(event) {
if(node.classList.contains("ok")) return;
var target = event.target;
if (target.tagName == "LI") {
var index = [].indexOf.call(node.querySelectorAll("li"), target);
if (index && target.classList.contains("yes")) {
node.classList.add("ok");
} else {
if (index) {
alert("Неверно! Попробуй еще раз :)");
}
}
}
});
});
</script>
</head>
<body>
<div class="slider ok">что пройти тест нажмите кнопку ниже</div>
<button class="btn" type="button" >next</button>
</body>
</html>